MAPG-205 show countdown time

public/static/js/game.js

@@ -17,6 +17,9 @@
         adaptGuess: false,
         googleLink: null,
 
+        timeoutEnd: null,
+        countdownHandler: null,
+
         MultiConnector: {
             connection: null,
             reconnectCounter: 0,
@@ -68,6 +71,10 @@
                             Game.MultiConnector.guess(json.data);
                             break;
 
+                        case 'timeout_changed':
+                            Game.MultiConnector.timeoutChanged(json.data);
+                            break;
+
                         case 'end_round':
                             Game.MultiConnector.endRound(json.data);
                             break;
@@ -109,6 +116,10 @@
                     document.getElementById('currentScoreSum').innerHTML = String(Game.scoreSum) + '/' + String(Game.rounds.length * Game.MAX_SCORE);
                 }
 
+                if (data.timeout) {
+                    Game.startCountdown(data.timeout);
+                }
+
                 if (data.place) {
                     Game.panoId = data.place.panoId;
                     Game.pov = data.place.pov;
@@ -151,6 +162,8 @@
                 document.getElementById('multi').style.visibility = 'hidden';
                 Game.resetRound();
                 Game.startNewRound();
+
+                Game.startCountdown(data.timeout);
             },
 
             guess: function (data) {
@@ -162,6 +175,10 @@
                 Game.map.fitBounds(resultBounds);
             },
 
+            timeoutChanged: function (data) {
+                Game.startCountdown(data.timeout);
+            },
+
             endRound: function (data) {
                 // TODO: refactor - it is necessary for mobile
                 if (window.getComputedStyle(document.getElementById('guess')).visibility === 'hidden') {
@@ -670,6 +687,47 @@
                     Game.googleLink.href = 'https://maps.google.com/maps';
                 }
             }, 1);
+        },
+
+        startCountdown: function (timeout) {
+            if (Game.countdownHandler) {
+                clearInterval(Game.countdownHandler);
+            }
+
+            Game.timeoutEnd = new Date(new Date().getTime() + timeout);
+            Game.countdownElement = document.getElementById('countdown');
+            Game.countdownTimeElement = document.getElementById('countdownTime');
+
+            Game.setCountdownTime(Math.round(timeout / 1000));
+
+            Game.countdownHandler = setInterval(function () {
+                var timeLeft = Math.round((Game.timeoutEnd - new Date()) / 1000);
+
+                Game.setCountdownTime(timeLeft);
+
+                if (timeLeft <= 0) {
+                    document.getElementById('panoCover').style.visibility = 'visible';
+                    clearInterval(Game.countdownHandler);
+                }
+            }, 1000);
+        },
+
+        setCountdownTime: function (time) {
+            if (time <= 0) {
+                Game.countdownElement.style.visibility = 'hidden';
+                return;
+            }
+
+            if (time <= 15) {
+                Game.countdownElement.className = 'red';
+            } else if (time <= 30) {
+                Game.countdownElement.className = 'yellow';
+            } else {
+                Game.countdownElement.className = '';
+            }
+
+            Game.countdownElement.style.visibility = 'visible';
+            Game.countdownTimeElement.innerHTML = time;
         }
     };