Allow pan and zoom in frozen mode

client/src/components/screens/GamePanel/GamePanel.jsx

@@ -1,4 +1,4 @@
-import { FROZEN, GUN_GAME, RACE } from "../../../domain/constants";
+import { GUN_GAME, RACE } from "../../../domain/constants";
 import { useGameConfig } from "../../../hooks/useGameInfo";
 import usePreventNavigation from "../../../hooks/usePreventNavigation";
 import Loading from "../../util/Loading";
@@ -23,7 +23,6 @@ const GamePanel = () => {
       <div className={styles.streetview}>
         <PositionedStreetView />
         {gameMode === GUN_GAME && <KillFeed />}
-        {gameMode === FROZEN && <div className={styles.freeze} />}
       </div>
       <GuessPane />
     </div>

client/src/components/screens/GamePanel/GamePanel.module.css

@@ -44,15 +44,6 @@
   color: #b1b1b1;
 }
 
-.freeze {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  bottom: 0px;
-  right: 0px;
-  z-index: 1;
-}
-
 .cutoff {
   position: absolute;
   top: 0;

client/src/components/screens/GamePanel/hooks.jsx

@@ -9,6 +9,8 @@ import {
   savePanoPositionToLocalStorage,
   savePanoPovToLocalStorage,
 } from "../../../domain/localStorageMethods";
+import { useGameConfig } from "../../../hooks/useGameInfo";
+import { FROZEN } from "../../../domain/constants";
 /* global google */
 
 export const useFirstSubmitter = (rate, cutoffTime) => {
@@ -57,8 +59,12 @@ export const useIsFinished = () => {
 };
 
 export const usePano = (panoDivRef, { lat, lng }, { heading, pitch }) => {
+  const { gameMode } = useGameConfig();
   const panoRef = useRef(null);
   useEffect(() => {
+    if (gameMode === undefined) {
+      return;
+    }
     const position = { lat, lng };
     const pov = { heading, pitch };
     if (panoRef.current) {
@@ -67,18 +73,28 @@ export const usePano = (panoDivRef, { lat, lng }, { heading, pitch }) => {
       return;
     }
 
+    const settings =
+      gameMode === FROZEN
+        ? {
+            disableDefaultUI: true,
+            panControl: true,
+            zoomControl: true,
+            clickToGo: false,
+          }
+        : { clickToGo: true };
+
     panoRef.current = new google.maps.StreetViewPanorama(panoDivRef.current, {
       position,
       pov,
       fullscreenControl: false,
       addressControl: false,
       showRoadLabels: false,
-      clickToGo: true,
       visible: true,
       motionTracking: false,
       motionTrackingControl: false,
+      ...settings,
     });
-  }, [panoDivRef, lat, lng, heading, pitch]);
+  }, [gameMode, panoDivRef, lat, lng, heading, pitch]);
 
   return panoRef;
 };

client/src/components/screens/Lobby/Lobby.jsx

@@ -80,7 +80,7 @@ export const GameInfo = () => {
       )}
       {gameMode === FROZEN && (
         <span className={styles.label}>
-          You will not be able to adjust your view
+          You will not be able to move, but will be able to zoom and pan
         </span>
       )}
       {gameMode === GUN_GAME && (