Wheel Of Fortune!!

wheel-of-fortune.js

;$(function() {
  /**
   * @param {Element} wheel
   */
  (function initWheelOfFortune() {
    $('[data-toggle="wheel-of-fortune"]').each(function () {
      var $wheel = $(this);
      var angle = parseInt($wheel.data('current-angle')) || 0;
      var stopAngle = angle;
      var runDegree = 7;
      var stopDegree = runDegree;
      var finalStopDegree1 = 2;
      var finalStopDegree2 = 1;
      // Speed down for 1 degree / 1 second
      var speedDownPeriod = 100;
      // Includes: "stopped", "running", "speed-down", "stopping"
      var state = 'stopped';
      var speeDownWait = 2;

      function speedDown()
      {
        if (stopDegree > finalStopDegree1) {
          stopDegree -= 0.1;

          setTimeout(function () {
            speedDown();
          }, speedDownPeriod);
        } else {
          if (speeDownWait-- <= 0) {
            state = 'stopping';
          } else {
            stopDegree = stopDegree-- < finalStopDegree2 ? finalStopDegree2 : stopDegree;

            setTimeout(function () {
              speedDown();
            }, speedDownPeriod * 5);
          }
        }
      }

      (function run() {
        if (state !== 'stopped') {
          if (state === 'running') {
            angle += runDegree;
          } else if (state === 'speed-down' || state === 'stopping') {
            angle += stopDegree;
          }

          angle = angle > 360 ? angle - 360 : angle;

          $wheel.css('transform', "rotate(" + angle.toString() + "deg)");

          if (state === 'stopping' && Math.abs(stopAngle - angle) < 2) {
            state = 'stopped';
            $wheel.data('current-angle', angle);
          }
        }

        requestAnimationFrame(run);
      })();

      $wheel.on('startWheelOfFortune', function(event) {
        angle = parseInt($wheel.data('current-angle')) || 0;
        state = 'running';
        stopDegree = runDegree;
        speeDownWait = 2;
      });
      $wheel.on('stopWheelOfFortune', function(event, finalStopAngle) {
        speedDown();
        state = 'speed-down';
        stopAngle = parseInt(finalStopAngle / 2) * 2;
      });
    });
  })();
});