Make game start countdown timer count down

src/controllers/IndexController.php

@@ -124,6 +124,7 @@ class="fb-cta cta--yellow">
     );
     $game = $config_game->getValue();
     $next_game = $config_next_game->getValue();
+    $remaining = 0;
     if ($game === '1') {
       $next_game_text = tr('In Progress');
       $countdown = array('--', '--', '--', '--');
@@ -137,6 +138,7 @@ class="fb-cta cta--yellow">
       $now = new DateTime('now');
       $countdown_diff = $now->diff($game_start);
       $countdown = explode('-', $countdown_diff->format('%d-%h-%i-%s'));
+      $remaining = $game_start->getTimestamp() - $now->getTimestamp();
     }
     return
       <div class="fb-row-container full-height fb-scroll">
@@ -149,21 +151,21 @@ class=
             <h1 class="fb-glitch" data-text={$next_game_text}>
               {$next_game_text}
             </h1>
-            <ul class="upcoming-game-countdown">
+            <ul class="upcoming-game-countdown" data-remaining={$remaining}>
               <li>
-                <span class="count-number">{$countdown[0]}</span>
+                <span class="count-number countdown-days">{$countdown[0]}</span>
                 {tr('_days')}
               </li>
               <li>
-                <span class="count-number">{$countdown[1]}</span>
+                <span class="count-number countdown-hours">{$countdown[1]}</span>
                 {tr('_hours')}
               </li>
               <li>
-                <span class="count-number">{$countdown[2]}</span>
+                <span class="count-number countdown-minutes">{$countdown[2]}</span>
                 {tr('_minutes')}
               </li>
               <li>
-                <span class="count-number">{$countdown[3]}</span>
+                <span class="count-number countdown-seconds">{$countdown[3]}</span>
                 {tr('_seconds')}
               </li>
             </ul>

src/inc/gameboard/modules/game-clock.php

@@ -105,7 +105,7 @@ class ClockModuleController extends ModuleController {
             <h6>Game Clock</h6>
           </header>
           <div class="module-content module-scrollable">
-            <div class="game-clock fb-numbers">
+            <div class="game-clock fb-numbers" data-remaining={$init}>
               <span class={$clock_days_class}>{$days}</span>:
               <span class="clock-hours">{$hours}</span>:
               <span class="clock-minutes">{$minutes}</span>:
@@ -128,7 +128,7 @@ class ClockModuleController extends ModuleController {
             <h6>Game Clock</h6>
           </header>
           <div class="module-content module-scrollable">
-            <div class="game-clock fb-numbers">
+            <div class="game-clock fb-numbers" data-remaining={$init}>
               <span class="clock-days" style="display: none;">{$days}</span>
               <span class="clock-hours">{$hours}</span>:
               <span class="clock-minutes">{$minutes}</span>:

src/static/js/clock.js

@@ -2,8 +2,15 @@
 
 var $ = require('jquery');
 
+var lastValues = {
+  seconds: -1,
+  minutes: -1,
+  hours: -1,
+  days: -1
+};
+
 function formatNumber(value) {
-  return (parseInt(value) > 9) ? value : '0' + value;
+  return (value > 9) ? value : '0' + value;
 }
 
 function noClock() {
@@ -15,28 +22,44 @@ function noClock() {
 }
 
 function setMilliseconds(value) {
-  var formatted = formatNumber(value);
+  var formatted = value >= 100 ? value : '0' + (value >= 10 ? value : '0' + value);
   $('aside[data-module="game-clock"] .clock-milliseconds').text(formatted);
 }
 
 function setSeconds(value) {
-  var formatted = formatNumber(value);
-  $('aside[data-module="game-clock"] .clock-seconds').text(formatted);
+  if(value !== lastValues.seconds) {
+    lastValues.seconds = value;
+
+    var formatted = formatNumber(value);
+    $('aside[data-module="game-clock"] .clock-seconds').text(formatted);
+  }
 }
 
 function setMinutes(value) {
-  var formatted = formatNumber(value);
-  $('aside[data-module="game-clock"] .clock-minutes').text(formatted);
+  if(value !== lastValues.minutes) {
+    lastValues.minutes = value;
+
+    var formatted = formatNumber(value);
+    $('aside[data-module="game-clock"] .clock-minutes').text(formatted);
+  }
 }
 
 function setHours(value) {
-  var formatted = formatNumber(value);
-  $('aside[data-module="game-clock"] .clock-hours').text(formatted);
+  if(value !== lastValues.hours) {
+    lastValues.hours = value;
+
+    var formatted = formatNumber(value);
+    $('aside[data-module="game-clock"] .clock-hours').text(formatted);
+  }
 }
 
 function setDays(value) {
-  var formatted = formatNumber(value);
-  $('aside[data-module="game-clock"] .clock-days').text(formatted);
+  if(value !== lastValues.days) {
+    lastValues.days = value;
+
+    var formatted = formatNumber(value);
+    $('aside[data-module="game-clock"] .clock-days').text(formatted);
+  }
 }
 
 function getMilli() {
@@ -59,8 +82,13 @@ function getDays() {
   return $('aside[data-module="game-clock"] .clock-days').text();
 }
 
+function getRemaining() {
+  return $('aside[data-module="game-clock"] .game-clock[data-remaining]').data().remaining;
+}
+
 module.exports = {
   isRunning: false,
+  endTime: 0,
   isStopped: function() {
     return getMilli() === '--' &&
       getSeconds() === '--' &&
@@ -76,73 +104,40 @@ module.exports = {
       parseInt(getDays()) === 0;
   },
   runClock: function() {
-    if (this.isStopped() || this.isFinished()) {
+    var remaining = getRemaining();
+    if (this.isStopped() || this.isFinished() || !remaining || remaining < 0) {
       this.isRunning = false;
       noClock();
       return;
     }
 
     this.isRunning = true;
-    var milli = getMilli();
-    var new_milli = parseInt(milli) - 1;
-
-    if (new_milli < 0) {
-      var seconds = getSeconds();
-      if (parseInt(seconds) > 0) {
-        setMilliseconds('99');
-      } else {
-        setMilliseconds('0');
-      }
-      var new_seconds = parseInt(seconds) - 1;
-      if (new_seconds < 0) {
-        var minutes = getMinutes();
-        if (parseInt(minutes) > 0) {
-          setSeconds('59');
-          setMilliseconds('99');
-        } else {
-          setSeconds('0');
-        }
-        var new_minutes = parseInt(minutes) - 1;
-        if (new_minutes < 0) {
-          var hours = getHours();
-          if (parseInt(hours) > 0) {
-            setMinutes('59');
-            setSeconds('59');
-            setMilliseconds('99');
-          } else {
-            setMinutes('0');
-          }
-          var new_hours = parseInt(hours) - 1;
-          if (new_hours < 0) {
-            var days = getDays();
-            if (parseInt(days) > 0) {
-              setHours('23');
-              setMinutes('59');
-              setSeconds('59');
-              setMilliseconds('99');
-            } else {
-              setHours('0');
-            }
-            var new_days = parseInt(days) - 1;
-            if (new_days <= 0) {
-              setDays('0');
-            } else {
-              setDays(new_days);
-            }
-          } else {
-            setHours(new_hours);
-          }
-        } else {
-          setMinutes(new_minutes);
-        }
-      } else {
-        setSeconds(new_seconds);
-      }
-    } else {
-      setMilliseconds(new_milli);
+    this.endTime = new Date().getTime() + getRemaining()*1000;
+    this.tickDown();
+  },
+  stopClock: function() {
+    noClock();
+    this.isRunning = false;
+  },
+  tickDown: function() {
+    var remaining = this.endTime - new Date().getTime();
+    if(remaining <= 0) {
+      return this.stopClock();
     }
 
+    var milliseconds = remaining % 1000;
+    var seconds = Math.floor((remaining / 1000) % 60);
+    var minutes = Math.floor((remaining / (1000 * 60)) % 60);
+    var hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
+    var days = Math.floor(remaining / (1000 * 60 * 60 * 24));
+
+    setMilliseconds(milliseconds);
+    setSeconds(seconds);
+    setMinutes(minutes);
+    setHours(hours);
+    setDays(days);
+
     // recurse after 10 ms
-    setTimeout(this.runClock.bind(this), 10);
+    setTimeout(this.tickDown.bind(this), 10);
   }
 };

src/static/js/countdown.js

@@ -0,0 +1,61 @@
+// @flow
+
+var $ = require('jquery');
+
+function noCountdown(container) {
+  $('.countdown-days', container).text('--');
+  $('.countdown-hours', container).text('--');
+  $('.countdown-minutes', container).text('--');
+  $('.countdown-seconds', container).text('--');
+}
+
+module.exports = {
+  _container: null,
+  _endTime: 0,
+  _interval: null,
+
+  startCountdown: function() {
+    this._container = $('.upcoming-game-countdown');
+    if( !this._container.length ) {
+      return;
+    }
+
+    var remaining = parseInt(this._container.data().remaining);
+    if(!remaining || remaining <= 0) {
+      return noCountdown(this._container);
+    }
+
+    // Round up as a < 1s delay is better than the clock jumping at the beginning
+    this._endTime = Math.ceil(new Date().getTime()/1000) + remaining;
+
+    var self = this;
+    this._interval = setInterval(
+      function() {
+        self.setTimeRemaining();
+      },
+      500
+    );
+  },
+
+  setTimeRemaining: function setTimeRemaining() {
+    var secs = this._endTime - Math.ceil(new Date().getTime()/1000);
+
+    if( secs < 0 ) {
+      noCountdown(this._container);
+      if(this._interval) {
+        clearInterval(this._interval);
+      }
+      return;
+    }
+
+    var days = parseInt((secs/(60*60*24)) % 24);
+    var hours = parseInt((secs/(60*60)) % 24);
+    var minutes = parseInt((secs/60) % 60);
+    var seconds = parseInt(secs % 60);
+
+    $('.countdown-days', this._container).text(days);
+    $('.countdown-hours', this._container).text(hours);
+    $('.countdown-minutes', this._container).text(minutes);
+    $('.countdown-seconds', this._container).text(seconds);
+  }
+};

src/static/js/fb-ctf.js

@@ -7,6 +7,7 @@ var Utils = require('./utils');
 var Modal = require('./modal');
 var Slider = require('./slider');
 var Clock = require('./clock');
+var Countdown = require('./countdown');
 var Graphics = require('./graphics');
 
 var d3 = require('d3');
@@ -2862,6 +2863,9 @@ function setupInputListeners() {
       $customEmblemCarouselNotice.removeClass('active');
     });
 
+    // Start the countdown clock
+    Countdown.startCountdown();
+
   }; // FB_CTF.init()
 })(window.FB_CTF = {});