MAPG-235 timelimit restriction per round functionality implemented for challenges

public/static/js/game.js

@@ -20,6 +20,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
         adaptGuess: false,
         googleLink: null,
         history: [],
+        restrictions: null,
 
         readyToContinue: true,
         timeoutEnd: null,
@@ -304,17 +305,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
 
                 } else {
 
-                    if (this.response.restrictions) {
-                        Game.panorama.setOptions({
-                            clickToGo: !this.response.restrictions.noMove,
-                            linksControl: !this.response.restrictions.noMove,
-                            scrollwheel: !this.response.restrictions.noZoom
-                        });
-
-                        if (this.response.restrictions.noPan) {
-                            document.getElementById('panningBlockerCover').style.display = 'block';
-                        }
-                    }
+                    Game.restrictions = this.response.restrictions;
 
                     Game.panoId = this.response.place.panoId;
                     Game.pov = this.response.place.pov;
@@ -327,6 +318,40 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             });
         },
 
+        enableRestrictions: function () {
+            if (!Game.restrictions) {
+                return;
+            }
+
+            Game.panorama.setOptions({
+                clickToGo: !Game.restrictions.noMove,
+                linksControl: !(Game.restrictions.noMove || Game.restrictions.noPan),
+                scrollwheel: !Game.restrictions.noZoom
+            });
+
+            if (Game.restrictions.noPan) {
+                document.getElementById('panningBlockerCover').style.display = 'block';
+            }
+
+            if (Game.restrictions.timeLimit) {
+                Game.startCountdown(Game.restrictions.timeLimit, function() {
+                    Game.guess();
+                });
+            }
+        },
+
+        disableRestrictions: function () {
+            Game.panorama.setOptions({
+                clickToGo: true,
+                linksControl: true,
+                scrollwheel: true
+            });
+
+            document.getElementById('panningBlockerCover').style.display = null;
+
+            Game.startCountdown(0);
+        },
+
         transitToResultMap: function () {
             // TODO: refactor - it is necessary for mobile
             if (window.getComputedStyle(document.getElementById('guess')).visibility === 'hidden') {
@@ -452,11 +477,8 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             // needs to be set visible after the show guess map hid it in mobile view
             document.getElementById("navigation").style.visibility = 'visible';
 
-            Game.panorama.setOptions({
-                clickToGo: true,
-                linksControl: true,
-                scrollwheel: true
-            });
+            Game.disableRestrictions();
+
             document.getElementById('panningBlockerCover').style.display = null;
 
             Game.initialize();
@@ -511,6 +533,8 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             // update the compass
             const heading = Game.panorama.getPov().heading;
             document.getElementById("compass").style.transform = "translateY(-50%) rotate(" + heading + "deg)";
+
+            Game.enableRestrictions();
         },
 
         handleErrorResponse: function (error) {
@@ -625,22 +649,24 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
         },
 
         guess: function () {
-            if (!Game.guessMarker) {
-                return;
-            }
+            
+            Game.disableRestrictions();
 
-            var guessPosition = Game.guessMarker.getPosition().toJSON();
-            Game.rounds[Game.rounds.length - 1].guessPosition = guessPosition;
+            var data = new FormData();
+
+            if (Game.guessMarker) {
+                var guessPosition = Game.guessMarker.getPosition().toJSON();
+                Game.rounds[Game.rounds.length - 1].guessPosition = guessPosition;
+
+                data.append('lat', String(guessPosition.lat));
+                data.append('lng', String(guessPosition.lng));
+            }
 
             document.getElementById('guessButton').disabled = true;
             document.getElementById('panoCover').style.visibility = 'visible';
-
-            var data = new FormData();
-            data.append('lat', String(guessPosition.lat));
-            data.append('lng', String(guessPosition.lng));
-
             document.getElementById('loading').style.visibility = 'visible';
             var url = Game.getGameIdentifier() + '/guess.json';
+
             MapGuesser.httpRequest('POST', url, function () {
                 document.getElementById('loading').style.visibility = 'hidden';
 
@@ -650,6 +676,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
                 }
 
                 Game.history = this.response.history;
+                Game.restrictions = this.response.restrictions;
 
                 Game.receiveResult(this.response.position, guessPosition, this.response.result, this.response.allResults);
 
@@ -851,7 +878,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             }, 1);
         },
 
-        startCountdown: function (timeout) {
+        startCountdown: function (timeout, timedOutHandler) {
             if (Game.countdownHandler) {
                 clearInterval(Game.countdownHandler);
             }
@@ -873,7 +900,12 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
                 Game.setCountdownTime(timeLeft);
 
                 if (timeLeft <= 0) {
-                    document.getElementById('panoCover').style.visibility = 'visible';
+                    if (typeof timedOutHandler === 'function') {
+                        timedOutHandler();
+                    } else {
+                        document.getElementById('panoCover').style.visibility = 'visible';
+                    }
+
                     clearInterval(Game.countdownHandler);
                 }
             }, 1000);