wheel.js

(function($) {
  $('.js-app').ready(function(){

    /* --------------------------------------------------
                Init
    -------------------------------------------------- */
    prizesInit = function(){
      prizesWheelInit();
    }

    /* --------------------------------------------------
                Wheel Init
    -------------------------------------------------- */
    prizesWheelInit = function(){
      var navLinkPrizes = '#nav-link-prizes';
      var prizes = $('#modal-prizes');
      var prizesHeaderMeta = $('#prizes-header-meta');
      var prizesHeaderTitle = $('#prizes-header-title');
      var prizesSpin = '#prizes-spin';
      var prizesSpinDisabled = $('#prizes-spin-disabled');
      var prizesConfettiTarget = document.querySelector("#prizes-confetti");
      var prizesModalOpened = false;
      var prizesWheelId = 'prizes-wheel';
      var prizesWheelArrow = $('#prizes-wheel-arrow');
      var prizesWheelColorIsWinning1 = $('#prizes-wheel').data('color-is_winner_1');
      var prizesWheelColorIsWinning0 = $('#prizes-wheel').data('color-is_winner_0');
      var prizesWheelTick = new Audio($('#prizes-wheel').data('audio-tick'));
      var prizesWheelWin = new Audio($('#prizes-wheel').data('audio-win'));
      var prizesWheelCanvas = new Winwheel({
        'canvasId': prizesWheelId,
        'numSegments': prizesData['total'],
        'segments': prizesData['segments'],
        'strokeStyle': prizesWheelColorIsWinning0,
        'textFillStyle': prizesWheelColorIsWinning0,
        'innerRadius': 100,
        'lineWidth': 7,
        'textFontSize': 24,
        'textFontFamily': 'Roboto Condensed',
        'animation': {
          'type': 'spinToStop',
          'duration': 5,
          'spins': 10,
          'callbackSound': 'prizesWheelOnUpdate()',
          'callbackFinished': 'prizesWheelSetWinner()',
        }});

      // Get Winner
      prizesWheelGetWinner = function(callback){
        $.ajax({ method: 'GET', context: this, url: '/students/prizes/get_winner', success: function(xhr) {
            callback(xhr);
            prizesWinner = xhr.winner;
            prizesWinnerSegment = xhr.winner_segment;
            prizesList = xhr.prizes_list;
            prizesSpins = xhr.spins;
            prizesWheelCanvas.animation.stopAngle = prizesWheelCanvas.getRandomForSegment(prizesWinnerSegment);
          }
        });
      }

      // Set Winner
      prizesWheelSetWinner = function(){
        var winningSegment = prizesWheelCanvas.getIndicatedSegment();
        var winningNumber = prizesWheelCanvas.getIndicatedSegmentNumber();
        var winningIsWinning = prizesListGetSegment(winningNumber, 1)

        // Set
        prizes.removeClass('js-spinning');
        prizes.addClass('js-set_winner');
        prizesHeaderTitle.text(prizesWinner.prize.title);
        if (prizesSpins > 0) {
          prizesSpins = prizesSpins - 1;
          prizesSpinDisabled.text("Saving...");
        } else {
          prizesSpinDisabled.text("No more spins!");
        }
        if (winningIsWinning) {
          prizes.addClass('js-is_winning-true');
          prizesWheelGetNextWinner("is_winning_1");
          prizesWheelCanvas.segments[winningNumber].fillStyle = prizesWheelColorIsWinning1;
          prizesWheelCanvas.draw();
          prizesWheelWin.play();
          setTimeout(function(){ confetti(prizesConfettiTarget,{ angle:90, spread:90, startVelocity:45, elementCount:90 }) }, 0);
          if (prizesSpins > 0) {
            prizesHeaderMeta.text("You won! " + "You have " + prizesSpins + " spins left");
          } else {
            prizesHeaderMeta.text("You won! No spins left");
          }
        } else {
          prizes.addClass('js-is_winning-false');
          if (prizesSpins > 0) {
            prizesWheelGetNextWinner("is_winning_0");
            prizesHeaderMeta.text("Woops! " + "You have " + prizesSpins + " spins left");
          } else {
            prizesHeaderMeta.text("Woops! No spins left");
          }
        }
      }

      // Get winner
      prizesWheelGetNextWinner = function(state){
        if (state == "is_winning_1"){
          $.ajax({ method: 'POST', context: this, url: '/students/prizes/' + prizesWinner.prize.id + '/set_winner', success: function(xhr) {
            if (xhr.spins > 0) {
              prizesWheelGetWinner(function(xhr){
                $(prizesSpin).show();
                prizesSpinDisabled.hide();
              });
            }
          }});
        } else {
          prizesWheelGetWinner(function(xhr){
            $(prizesSpin).show();
            prizesSpinDisabled.hide();
          });
        }
      }

      // Prizes list get segment
      prizesListGetSegment = function(id, index){
        return prizesList[id-1][index]
      }

      // Update
      prizesWheelOnUpdate = function(){
        prizesHeaderTitle.text(prizesListGetSegment(prizesWheelCanvas.getIndicatedSegmentNumber(), 0));
        prizesWheelTick.pause();
        prizesWheelTick.currentTime = 0;
        prizesWheelTick.play();
        prizesWheelArrow.toggleClass('js-flap');
      }

      // Nav link prizes
      $(document).on('click', navLinkPrizes, function(e) {
        if (prizesModalOpened == false){
          prizesWheelGetWinner(function(xhr){
            $(prizesSpin).show();
            prizesModalOpened = true;
          });
        }
      });

      // Spin
      $(document).on('click', prizesSpin, function(e) {
        prizes.addClass('js-spinning');
        prizes.removeClass('js-set_winner');
        prizes.removeClass('js-is_winning-true');
        prizes.removeClass('js-is_winning-false');
        prizesWheelCanvas.segments[prizesWheelCanvas.getIndicatedSegmentNumber()].fillStyle = prizesListGetSegment(prizesWheelCanvas.getIndicatedSegmentNumber(), 1) == true ? false : prizesWheelColorIsWinning0;
        prizesWheelCanvas.draw();
        prizesWheelCanvas.rotationAngle = 0;
        prizesWheelCanvas.stopAnimation(false);
        prizesWheelCanvas.startAnimation();
        prizesHeaderMeta.text("Good luck!");
        prizesWheelOnUpdate();
        $(prizesSpin).hide();
        prizesSpinDisabled.text("Spinning...").show();
        e.preventDefault();
      });
    }

    // Init
    prizesInit();
  });
})(jQuery);