+
{$days}
{$hours}:
{$minutes}:
diff --git a/src/static/js/clock.js b/src/static/js/clock.js
index 1f43de8b..63affba5 100644
--- a/src/static/js/clock.js
+++ b/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);
}
};
diff --git a/src/static/js/countdown.js b/src/static/js/countdown.js
new file mode 100644
index 00000000..d377c428
--- /dev/null
+++ b/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);
+ }
+};
\ No newline at end of file
diff --git a/src/static/js/fb-ctf.js b/src/static/js/fb-ctf.js
index a59058cc..617c68b0 100644
--- a/src/static/js/fb-ctf.js
+++ b/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 = {});