Try it out: http://codepen.io/anon/pen/oXqNoO
TODO:
| <html> | |
| <!-- Try it out: http://codepen.io/anon/pen/oXqNoO --> | |
| <head> | |
| <script> | |
| function timer(Id, timeCheckCallback) { | |
| // timer keeps track of how much time is left. | |
| // Instantiate for each player | |
| // timeCheckCallback lets the caller decide how to handle time keeping | |
| // i.e., trigger win/loss, add time, pause, overtime, etc. | |
| var clockId = Id; | |
| var time = 0; | |
| var running = false; | |
| var timerId; | |
| this.start = function() { | |
| if (!running) { | |
| running = true; | |
| timerId = setInterval(function() { | |
| if (time) { | |
| time--; | |
| formatTime(); | |
| if(typeof(timeCheckCallback) === 'function') timeCheckCallback(clockId, time); | |
| } | |
| }, 1000); | |
| } | |
| }; | |
| this.stop = function() { | |
| if (running) { | |
| running = false; | |
| clearInterval(timerId); | |
| } | |
| }; | |
| this.reset = function(seconds) { | |
| if (running) { | |
| stop(); | |
| } | |
| seconds = (typeof(seconds) !== 'undefined') ? seconds : 0; | |
| time = seconds; | |
| formatTime(); | |
| document.querySelector('#' + clockId + 'game').innerHTML = ' '; | |
| }; | |
| function formatTime() { | |
| var seconds = time % 60, | |
| minutes = Math.floor(time / 60) % 60; | |
| seconds = (seconds < 10) ? '0' + seconds : seconds; | |
| minutes = (minutes < 10) ? '0' + minutes : minutes; | |
| document.querySelector('#' + clockId).innerHTML = minutes + ':' + seconds; | |
| } | |
| } | |
| function onLoss(clock, time) { | |
| if (time === 0) { | |
| whiteTimer.stop(); | |
| blackTimer.stop(); | |
| document.querySelector('#' + clock + 'game').innerHTML = 'Lost!'; | |
| console.log(clock + ' lost'); | |
| endOfGame = true; | |
| } | |
| } | |
| var whiteTimer, blackTimer, | |
| timeAllowed = (4 * 60), // in Seconds | |
| // timeAllowed = (5), // for testing | |
| endOfGame = false; // used to keep the loser from clocking in and running down winner's timer | |
| function startTurn(player) { | |
| if (endOfGame) return; | |
| switch (player) { | |
| case 'black': | |
| whiteTimer.stop(); | |
| blackTimer.start(); | |
| break; | |
| case 'white': | |
| blackTimer.stop(); | |
| whiteTimer.start(); | |
| break; | |
| } | |
| } | |
| function reset() { | |
| endOfGame = false; | |
| whiteTimer.stop(); | |
| blackTimer.stop(); | |
| blackTimer.reset(timeAllowed); | |
| whiteTimer.reset(timeAllowed); | |
| } | |
| document.addEventListener("DOMContentLoaded", function(event) { | |
| whiteTimer = new timer('white', onLoss); | |
| blackTimer = new timer('black', onLoss); | |
| whiteTimer.reset(timeAllowed); | |
| blackTimer.reset(timeAllowed); | |
| }); | |
| </script> | |
| <style> | |
| span.Clock { | |
| border: 1px black solid; | |
| width: 190px; | |
| height: 50px; | |
| line-height: 50px; | |
| font-size: 36px; | |
| font-family: "Courier New"; | |
| text-align: center; | |
| margin: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="Heading"> | |
| <p>Chess speed timer</p> | |
| <button onClick="reset()">Reset</button> | |
| </div> | |
| <div id="ClockField"> | |
| <div id="WhiteClock"> | |
| <span id="white" class="Clock"> </span> | |
| <button onClick="startTurn('black')">White</button> | |
| <span id="whitegame" class="game"> </span> | |
| </div> | |
| <div id="BlackClock"> | |
| <span id="black" class="Clock"> </span> | |
| <button onClick="startTurn('white')">Black</button> | |
| <span id="blackgame" class="game"> </span> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |