JS: How to calculate face value after dice roll animation

Question

I've created a neat little dice roll animation. It is essentially 6 div elements inside a wrapper container that has been styled into a cube via CSS. I've got it rotating with drag gestures in a fluid way.

The issue: I don't know how best to calculate the value that is facing outward after a roll. I've made it so that the die automatically rotates to increments of 90 as a dice would using GSAP draggable plugin but I don't know how to devise a proper method to calculate how to detect which side is facing the user after a roll is completed. The most obvious method using an if/else statement for every conceivable combination of rotations seems a clunky way to approach it.

Is there any insight into this or where I might start to understand a good method for this?

https://codepen.io/mhcdotcom/pen/ExQYZam

HTML

<div class="site">
  <div id="cube" class="cube">
    <div class="cube__face cube__face--front cube__face-one">
      <div class="dots">
        <div></div>
      </div>
    </div>
    <div class="cube__face cube__face--back cube__face-six">
      <div class="dots">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="cube__face cube__face--right cube__face-three">
      <div class="dots">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="cube__face cube__face--left cube__face-four">
      <div class="dots">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="cube__face cube__face--top cube__face-two">
      <div class="dots">
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="cube__face cube__face--bottom cube__face-five">
      <div class="dots">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>

  <div id="sudo-wrapper" class="sudo-wrapper">
    <div id="sudo-cube" class="sudo-cube"></div>
  </div>

</div>

JS

var cube = document.querySelector('#cube')
var sudoWrapper = document.querySelector('#sudo-wrapper')
var sudoCube = document.querySelector('#sudo-cube')
var noX, noY, noXRounded, noYRounded, direction;

var diceRoll = Draggable.create("#sudo-cube", {
  bounds:"#sudo-wrapper",
  edgeResistance:0.01,
  inertia:true,
  autoScroll:1,
  onDrag: animateRoll
}); 

function animateRoll () {
  noX = this.x;
  noY = this.y;
  directionDown = this.getDirection("velocity").includes('down') ? true : false;
  noYRounded = Math.round(noY/90)*90;
  gsap.to(cube, 1, {rotationY: noXRounded, rotationX: noYRounded, onComplete: function () {
    rollAnimEnded(noXRounded,noYRounded)
  }})
}

function rollAnimEnded (noXRounded,noYRounded) {
  var xRotation = noXRounded % 360
  var yRotation = noYRounded % 360

  console.log('xRotation:' + xRotation, 'yRotation:' + yRotation)
  
}

Any help is greatly appreciated.

Thank you, All. Moe