public/static/css/game.css

@@ -15,6 +15,17 @@
     right: 0;
     background-color: #000000;
     opacity: 0.5;
+    z-index: 4;
+}
+
+#panningBlockerCover {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    opacity: 0;
     z-index: 3;
 }
 
@@ -22,7 +33,7 @@
     position: absolute;
     bottom: 30px;
     right: 20px;
-    z-index: 2;
+    z-index: 3;
 }
 
 #guess.result {

public/static/css/maps.css

@@ -77,6 +77,7 @@ div.mapItem>div.buttonContainer {
 
 #restrictions {
     margin-top: 1em;
+    margin-bottom: 1em;
     font-family: 'Roboto', sans-serif;
 }
 

public/static/js/game.js

@@ -301,11 +301,21 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
 
                     Game.transitToResultMap();
                     Game.showSummary();
-                    //document.getElementById('continueButton').style.display = 'none';
-
 
                 } 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.panoId = this.response.place.panoId;
                     Game.pov = this.response.place.pov;
 
@@ -442,6 +452,13 @@ 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
+            });
+            document.getElementById('panningBlockerCover').style.display = null;
+
             Game.initialize();
         },
 

src/Controller/GameFlowController.php

@@ -194,6 +194,13 @@ class GameFlowController
                     }
                 }
             }
+
+            $response['restrictions'] = [
+                    'timeLimit' => $challenge->getTimeLimit(),
+                    'noMove' => $challenge->getNoMove(),
+                    'noPan' => $challenge->getNoPan(),
+                    'noZoom' => $challenge->getNoZoom()
+            ];
         }
 
         return $response;

views/game.php

@@ -25,6 +25,7 @@
         <p id="countdownTime" class="mono bold"></p>
     </div>
     <div id="panoCover"></div>
+    <div id="panningBlockerCover"></div>
     <div id="panorama"></div>
     <div id="showGuessButtonContainer">
         <button id="showGuessButton" class="fullWidth">Show guess map</button>

views/maps.php

@@ -65,14 +65,14 @@ TODO: condition!
                 <input type="checkbox" id="noMove" name="noMove" value="noMove" />
                 <label for="noMove">No movement allowed</label>
             </div>
-            <div>
-                <input type="checkbox" id="noPan" name="noPan" value="noPan" />
-                <label for="noPan">No camera rotation allowed</label>
-            </div>
             <div>
                 <input type="checkbox" id="noZoom" name="noZoom" value="noZoom" />
                 <label for="noMove">No zoom allowed</label>
             </div>
+            <div>
+                <input type="checkbox" id="noPan" name="noPan" value="noPan" />
+                <label for="noPan">No camera change allowed</label>
+            </div>
             <input type="hidden" name="mapId" id="challengeMapId" />
         </div>
         <button id="createNewChallengeButton" type="submit" class="button fullWidth green" href="" title="Create new challenge">Create new challenge</button>