Make game start countdown timer count down

Rather than being a static number updated on page refresh, the
countdown clock will not update itself. This makes for a more
interesting display.

Using time remaining rather than an absolute time to prevent
jittery behaviour at the start, though at the expense of accuracy.

Author: JasonTarka

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/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,
+  _remaining: 0,
+  _timeDiff: 0,
+  _interval: null,
+  
+  startCountdown: function() {
+    this._container = $('.upcoming-game-countdown');
+    if( !this._container.length ) {
+      return;
+    }
+    
+    this._remaining = parseInt(this._container.data().remaining);
+    
+    if(!this._container.length || !this._remaining) {
+      return noCountdown(this._container);
+    }
+
+    var self = this;
+    this._interval = setInterval(
+      function() {
+        self.setTimeRemaining()
+      },
+      1000
+    );
+  },
+  
+  setTimeRemaining: function setTimeRemaining() {
+    this._remaining -= 1;
+    var secs = this._remaining;
+
+    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 = {});