MAPG-235 information of the current restrictions displayed on the ribbon in the top

public/static/css/game.css

@@ -199,6 +199,12 @@
     font-weight: 500;
 }
 
+@media screen and (max-width: 899px) {
+    .hideOnNarrowScreen {
+        display: none;
+    }
+}
+
 @media screen and (max-width: 599px) {
     #mapName {
         display: none;
@@ -226,9 +232,6 @@
         bottom: 25px;
         left: 10px;
     }
-    .hideOnMobile {
-        display: none;
-    }
 }
 
 @media screen and (min-width: 600px) {

public/static/js/game.js

@@ -299,6 +299,9 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
 
                 Game.loadHistory(this.response);
 
+                Game.restrictions = this.response.restrictions;
+                Game.displayRestrictions();
+
                 if (this.response.finished) {
 
                     Game.transitToResultMap();
@@ -306,8 +309,6 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
 
                 } else {
 
-                    Game.restrictions = this.response.restrictions;
-
                     Game.panoId = this.response.place.panoId;
                     Game.pov = this.response.place.pov;
 
@@ -339,6 +340,47 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
                     Game.guess();
                 });
             }
+            
+        },
+
+        displayRestrictions: function () {
+            if (!Game.restrictions) {
+                return;
+            }
+
+            
+
+            var restrictionsForDisplay = [];
+            if (Game.restrictions.timeLimit) {
+                restrictionsForDisplay.push('time limit per ' + Game.restrictions.timeLimitType);
+            }
+            if (Game.restrictions.noPan) {
+                restrictionsForDisplay.push('no camera change');
+            }
+            else {
+                if (Game.restrictions.noMove) {
+                    restrictionsForDisplay.push('no move');
+                }
+                if (Game.restrictions.noZoom) {
+                    restrictionsForDisplay.push('no zoom');
+                }
+            }
+
+            // create restrictions span for header
+            var restrictions = document.createElement('span');
+            restrictions.setAttribute('id', 'restrictions');
+            restrictions.setAttribute('class', 'hideOnNarrowScreen');
+            var restrictionsTitle = document.createElement('span');
+            restrictionsTitle.setAttribute('class', 'bold');
+            restrictionsTitle.innerText = 'Restrictions: ';
+            var restrictionsList = document.createElement('span');
+            restrictionsList.innerText = restrictionsForDisplay.join(', ');
+            restrictions.appendChild(restrictionsTitle);
+            restrictions.appendChild(restrictionsList);
+
+            var roundContainer = document.getElementById('roundContainer');
+            var header = roundContainer.parentNode;
+            header.insertBefore(restrictions, roundContainer);
         },
 
         disableRestrictions: function () {
@@ -355,6 +397,14 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             Game.timeoutEnd = null;
         },
 
+        hideRestrictions: function() {
+            var restrictions = document.getElementById('restrictions');
+            if (restrictions) {
+                var header = restrictions.parentNode;
+                header.removeChild(restrictions);
+            }
+        },
+
         transitToResultMap: function () {
             // TODO: refactor - it is necessary for mobile
             if (window.getComputedStyle(document.getElementById('guess')).visibility === 'hidden') {
@@ -487,6 +537,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             document.getElementById("navigation").style.visibility = 'visible';
 
             Game.disableRestrictions();
+            Game.hideRestrictions();
 
             document.getElementById('panningBlockerCover').style.display = null;
 
@@ -900,6 +951,12 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor;
             scoreBar.style.width = scoreBarProperties.width;
 
+            Game.showHighscores();
+
+        },
+
+        showHighscores: function() {
+
             if (Game.type == GameType.CHALLENGE) {
                 var highscores = this.calculateHighScores();
                 var summaryInfo = document.getElementById('summaryInfo');
@@ -925,18 +982,16 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
                 } else if (highscores.length == 2) {
 
                     if (highscores[0].userName === 'me') {
-                        summaryInfo.innerHTML = 'You won! <span class="hideOnMobile">' + highscores[1].userName + ' got only ' + highscores[1].score + ' points.</span>';
+                        summaryInfo.innerHTML = 'You won! <span class="hideOnNarrowScreen">' + highscores[1].userName + ' got only ' + highscores[1].score + ' points.</span>';
                     } else {
-                        summaryInfo.innerHTML = 'You lost! <span class="hideOnMobile">' + highscores[0].userName + ' won with ' + highscores[0].score + ' points.</span>';
+                        summaryInfo.innerHTML = 'You lost! <span class="hideOnNarrowScreen">' + highscores[0].userName + ' won with ' + highscores[0].score + ' points.</span>';
                     }
 
                 } else if (highscores.length == 1) {
-                    // summaryInfo.innerHTML = 'You are the first to finish. Challenge other by sending them the link and come back for the results.'
+                    summaryInfo.innerHTML = 'You are the first to finish. <span class="hideOnNarrowScreen">Invite your friends by sending them the link.</span>'
-                    summaryInfo.innerHTML = 'You are the first to finish.'
                 }
 
             }
-
         },
 
         rewriteGoogleLink: function () {

src/Controller/GameFlowController.php

@@ -226,15 +226,16 @@ class GameFlowController implements ISecured
                     }
                 }
             }
-
-            $response['restrictions'] = [
-                    'timeLimit' => $challenge->getTimeLimit() * 1000,
-                    'noMove' => $challenge->getNoMove(),
-                    'noPan' => $challenge->getNoPan(),
-                    'noZoom' => $challenge->getNoZoom()
-            ];
         }
 
+        $response['restrictions'] = [
+            'timeLimit' => $challenge->getTimeLimit() * 1000,
+            'timeLimitType' => $challenge->getTimeLimitType(),
+            'noMove' => $challenge->getNoMove(),
+            'noPan' => $challenge->getNoPan(),
+            'noZoom' => $challenge->getNoZoom()
+        ];
+
         return $response;
     }