gametimer

by Peter Jaric

HTML

<label>Total time per player:
  <input class="total" type="text" value="1200"> seconds
</label>
<label> Time per round per player:
  <input class="round" type="text" value="60"> seconds
</label>

<li class="player-template">
  <input class="name" type="text" placeholder="Name">
  <span class="time"></span>
</li>

<ul class="players">
</ul>

<span class="round-timer"></span>


<input class="add-button" type="button" value="Add player">
<input class="remove-button" type="button" value="Remove player">
<input class="start-button" type="button" value="Start">
<input class="next-button" type="button" value="Next">
<input class="pause-button" type="button" value="Pause">

CSS

label {
  display: block;
}

.player-template {
  display: none;
}

Babel + JSX

"use strict";

function nextPlayer() {
    stopTimer();
    displayTime(currentPlayer, false);
    currentPlayer = (currentPlayer + 1) % players.length;
    console.log(currentPlayer);
    players[currentPlayer].roundTime = roundTime;
    displayTime(currentPlayer, true);
    startTimer();
  }

  function displayTime(playerId, showRoundTime) {
    players[playerId].status.text(players[playerId].totalTime);
    if (showRoundTime) {
      $('.round-timer').text(players[playerId].roundTime);
    }
  }

  function tick() {
    if (roundTime > 0) {
      players[currentPlayer].roundTime--;
    }
    players[currentPlayer].totalTime--;
    displayTime(currentPlayer, true);
  }

  function stopTimer() {
    clearTimeout(tickIntervalId);
  }

  function startTimer() {
    tickIntervalId = setInterval(tick, 1000);
  }
	
	function addPlayer() {
    var template = $('.player-template');
    var clone = template.clone();
    clone
      	.removeClass('player-template')
    		.addClass('player')
    		.appendTo('.players');
  }

	function removePlayer() {
    $('.players .player').last().remove();
  }

  var i,
    players,
    currentPlayer,
    totalTime,
    roundTime,
    tickIntervalId;

  $('.start-button').click(function () {
    var $players;
    
    players = [];
    currentPlayer = 0;
    totalTime = 1000;
    roundTime = 100;

    if (tickIntervalId > 0) {
      clearTimeout(tickIntervalId);
    }
    $players = $('.player:not([value=""]');
    
    if ($players.length < 2) {
    	alert('Please specify at least 2 players!');
      return;
    }
    
    $players.each(function() {
      var name = $('.name', this).val();
      if (name.length > 0) {
        players.push({
          name: name,
          status: $('.time', this),
          totalTime,
          roundTime
        });
      }
    });

    for (i = 0; i < players.length; i++) {
      displayTime(i, false);
    }

    startTimer();
    console.log(players);
  });

   ...