Simon Game for FCC

            
              $(document).ready(function() {

  /*** Global variables ***/
  var seqLength;
  var seq;
  var userSeq;
  var userTurn;
  var userError;
  var tempo;
  var btnTime;
  var lastPlayed;
  // Change variable values here
  function resetBoard() { // sets required values, called at start and anytime start btn is pushed.
    seqLength = 20;
    seq = [];
    userSeq = [];
    userTurnFunc(false);
    lastPlayed = null;
    tempo = 1000;
    
  }
  var sounds = {
    red: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3'),
    blue: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3'),
    yellow: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3'),
    green: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3')
  }
  
  /*** Functions ***/
  
  function toggleOnOff() { // Turns game board on and off
    if ($('#OnOff').hasClass('On')) {
      $('.Ctrl').each(function() {
        $(this).removeClass('On');
        resetBoard();
      });
    } else {
      $('.Ctrl').each(function() {
        $(this).addClass('On');
      });
    }
  }
  
  function btnPress(btn) { // Function to highlight button and play sound when pressed
    if (lastPlayed && lastPlayed.duration > 0) { // cuts off previous btn sound if user going too quick
      lastPlayed.pause();
      lastPlayed.load();
    }
    sounds[btn].play();
    lastPlayed = sounds[btn];
    clearTimeout(btnTime);
    $('.Btn').each(function() {
      $(this).removeClass('active');
    });
    $('#'+btn).addClass('active');
    btnTime = setTimeout(function() {
      $('#'+btn).removeClass('active');
    }, tempo);
  }
  
  function sequencer() {
    if (seq.length<seqLength) { // check game should continue
      if (!userError) {
        switch (Math.floor(Math.random()*4)) { // add new step to seq
          case 0:
            var temp = seq.push('red');
            break;
          case 1:
            var temp = seq.push('blue');
            break;
          case 2:
            var temp = seq.push('yellow');
            break;
          case 3:
            var temp = seq.push('green');
            break;
        }
        switch (seq.length) { // tempo increases as turns progress.
          case 5: 
            tempo = 700;
            break;
          case 9:
            tempo = 550;
            break;
          case 13:
            tempo = 400;
            break;
        }
      } else {
        userError = false; // reset userError flag without new step in seq
      }
      if (seq.length<=9) {
          var cntDisp = '0'+(seq.length);
        } else {
          var cntDisp = seq.length;
        }
      $('#CounterScreen p').text(cntDisp);
      seq.forEach(function(btn,index) {
        setTimeout(function() {
          btnPress(btn);
          if (index === seq.length-1) { // Return user control on final btnPress
            userTurnFunc(true);
          }
        }, (tempo+100)*index); // delay each button by a factor of its index
      });
      console.log('Seq = '+seq);
    } else { // User has completed whole 20 sequence
      $('.Btn').each(function() {
        $(this).addClass('active');
      });
      $('#Controls h2').text('Winner!');
      setTimeout(function() {
        $('.Btn').each(function() {
          $(this).removeClass('active');
        });
        setTimeout(function() {
          $('.Btn').each(function() {
            $(this).addClass('active');
          });
          setTimeout(function() {
            $('.Btn').each(function() {
              $(this).removeClass('active');
              $('#Controls h2').text('Simon');
            });
          },2400);
        },400);
      },400);
    }
      
  }
  
  function seqCheck() {
    for (i=0;i<userSeq.length;i++) {
      if (userSeq[i] !== seq[i]) { // User made error in sequence, sets flag to true
        $('#CounterScreen p').text('!!');
        userError = true;
        userSeq = [];
      }
    }
    if (userError) {
      userTurnFunc(false);
      if ($('#Strict .CtlBtn').hasClass('Active')) { // Checks for strict mode and resets board if found
        resetBoard();
      }
      setTimeout(function() {
        sequencer();
      }, tempo*2);
    } else if (!userError && userSeq.length === seq.length) { // User completed seq
      userTurnFunc(false);
      userSeq = [];
      setTimeout(function() {
        sequencer();
      },tempo*2);
    }
  }
  
  function userTurnFunc(bool) { // turn off pointer cursor on coloured buttons to indicate to user that it's not their turn
    if (bool) {
      userTurn = true;
      $('.Btn').map(function() {
          $(this).css('cursor','pointer');
      });
    } else {
      userTurn = false;
      $('.Btn').map(function() {
        $(this).css('cursor','auto');
      });
    }
  }
      
  
  /*** Buttons ***/
  $('#OnOff .Switch').click(function() {
    toggleOnOff();
  });
  
  $('#Start .CtlBtn').click(function() {
    if ($('#OnOff').hasClass('On')) {
      resetBoard();
      sequencer();
    }
  });
  
  $('#Strict .CtlBtn').click(function() {
    if ($('#OnOff').hasClass('On')) {
      if ($('#Strict .CtlBtn').hasClass('Active')) {
        $('#Strict .CtlBtn').removeClass('Active');
      } else {
        $('#Strict .CtlBtn').addClass('Active');
      }
    }
  });
  
  $('.Btn').click(function() {
    if (userTurn) {
      var btn = $(this).attr('id')
      btnPress(btn);
      var temp = userSeq.push(btn);
      seqCheck();
    }
  });
  
  resetBoard();
  
});