Timer code

gistfile1.txt

/* Here's the structure */
<div class="timer-bar table">
  <div class="game-title table-cell vAM">
    GUESS THE PASSWORD!
  </div>
  <div class="table-cell vAM">
    <div class="game-timer-c">
      <div class="filler" style="width: 100%;">
        <div class="timer" data-starttime="90">90</div>
      </div>
    </div>
  </div>
</div>
/*****************/

/** CSS - There are some mixins here because we use SASS but they should be self explanitory **/
  .timer-bar {
    width: 90%;
    float: right;
    padding: 10px 20px 10px;
    background: $teal;
    -moz-border-radius-bottomleft: 60px;
    -webkit-border-bottom-left-radius: 60px;
    border-bottom-left-radius: 60px;
    margin-bottom: 50px;
  }

  .game-timer-c {
    position: relative;
    border: 3px solid $black;
    height: 20px;
    overflow: hidden;
    background: #2A313B;
    @include border-radius(30px);
    .filler {
      position: absolute;
      height: 100%;
      background: $yellow;
      -webkit-transform: translateZ(0);
      @include border-radius(30px);
      @include transformable(1s);
      @include easing('linear');
    }
    .timer {
      position: absolute;
      right: 0px;
      color: #333;
      background: $white;
      width: 40px;
      padding: 0 10px;
      @include border-radius(20px);
      &.stuck {
        right: auto;
        left: 0;
      }
    }
  }

  .game-title {
    width: 230px;
    color: $white;
    font-weight: 500;
    font-size: 1.2em;
    text-align: center;
  }
/**********/


/* JAVASCRIPT!
*
* Usage: startCountdown(null, 5, finishSetup);
* This starts the countdown (first argument is null because I also call this from a 
* jQuery event sometimes, second argument is the length of the initial countdown, third argument is the function to call
* after the real game timer is called [line 38])
*
*/


  // The countdown till the timer starts
  function startCountdown(e, startDelay, next){
  
    //default delay to 5 seconds
    startDelay = startDelay || 5;

    //first part is helping us know what game this is, the other stuff is for the structure of the timer
    var whichGame           = $miniGameC.find('.game-instructions').data('game'),
        $countdownC         = $('#countdown-c'),
        $countdownCount     = $countdownC.find('.count');

    //reset the timer to zero first
    resetTimer();

    //set an interval for every one second
    var timeToStart = setInterval(function(){
    
      //if the timer has hit zero, then do the following
      if (startDelay == 0) {
        clearInterval(timeToStart);
        //Show a start message
        //console.log('start!');
        $countdownCount.text('Start!');
        $countdownCount.toggleClass('blowup', true);
        setTimeout(function(){
          $countdownCount.toggleClass('fadeout', true);
          setTimeout(function(){
            $countdownCount.toggleClass('blowup fadeout', false);
            setTimeout(function(){
              $countdownC.toggleClass('show', false);
            },300);
          },300);
        },300);

        //Start the real game timer if we're at zero
        startTimer(null, next);
        
        //This is game specific - If we were in the hacking game for multiplayer, we want to show the setup 
        // stuff instead of just jumping into the game
        if ( $miniGameC.find('.game-instructions').data('multi') == true ) {
          $body.trigger('setup_'+whichGame);
        }
        return;
      }
      
      //Show a countdown to start
      //console.log(startDelay);
      $countdownCount.text(startDelay);
      $countdownC.toggleClass('show', true);
      $countdownCount.toggleClass('blowup', true);
      setTimeout(function(){
        $countdownCount.toggleClass('fadeout', true);
        setTimeout(function(){
          $countdownCount.toggleClass('blowup fadeout', false);
        },300);
      },300);

      //decrement the time
      startDelay--;
    },1000);
  }
  
  //reset the timer to the default start time in the timer data attribute
  function resetTimer(e){
    var $currentPanel = $miniGameC.find('.open'),
        $timer = $currentPanel.find('.timer'),
        startTime = Math.floor($timer.data('starttime'));
    $timer.text(startTime);
  }
  
  //start the actual timer for the game from a passed in time or the time on the timer data attribute
  function startTimer(totalTime, next){
    
    //finds the right panel we're in for the correct timer and gets the time
    var $currentPanel = $miniGameC.find('.open'),
        $timer = $currentPanel.find('.timer'),
        $gameTimer = $currentPanel.find('.game-timer-c'),
        $filler = $gameTimer.find('.filler'),
        totalTime = totalTime || Math.floor($timer.data('starttime')),
        currentTime = totalTime;

    var countdownTimer = setInterval(function(){
      $timer.text(currentTime);

      //some css to change the timer bar (there are transitions on it)
      $filler.css({
        width: ((currentTime/totalTime) * 100) + '%'
      });

      //This makes it stick to the left side when it gets short instead of sliding off the bar
      if ( $filler.width() <= 60 && !$timer.hasClass('stuck') ) {
        $timer.toggleClass('stuck', true);
      }

      //if we're at zero
      if (currentTime == 0) {
        clearInterval(countdownTimer);
        
        //show a finished message
        console.log('Finished!');

        //call the function we initially added as the third argument of the "startCountdown" function if we defined one
        if (typeof next !== 'undefined') {
         next();
        }
        return;
      }
      
      //if we're not at zero, decrement the time
      currentTime--;
    },1000);
  }