Frozen gamemode

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

@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react';
 import { dispatch, useCurrentRound } from '../../../domain/gameStore';
+import { FROZEN } from '../../../domain/ruleSets';
+import { useGameConfig } from '../../../hooks/useGameInfo';
 import usePreventNavigation from '../../../hooks/usePreventNavigation';
 import Loading from '../../util/Loading';
 import styles from './GamePanel.module.css';
@@ -9,6 +11,7 @@ import PositionedStreetView from './PositionedStreetView';
 export default () => {
   // warn the user if they navigate away
   usePreventNavigation();
+  const { ruleSet } = useGameConfig();
   const finished = useCurrentRound() === null;
   useEffect(
     () => {
@@ -25,6 +28,7 @@ export default () => {
     <div className={styles.page}>
       <div className={styles.streetview}>
         <PositionedStreetView />
+        {ruleSet === FROZEN && <div className={styles.freeze} />}
       </div>
       <GuessPane />
     </div>

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

@@ -44,6 +44,15 @@
   color: #b1b1b1;
 }
 
+.freeze {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  bottom: 0px;
+  right: 0px;
+  z-index: 1;
+}
+
 @media only screen and (min-width: 600px) and (min-height: 600px) {
   .page {
     display: block;

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

@@ -51,7 +51,7 @@
     position: absolute;
     left: var(--margin);
     bottom: var(--margin);
-    z-index: 1;
+    z-index: 2;
     display: flex;
     flex-flow: column nowrap;
     justify-content: center;

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

@@ -23,6 +23,8 @@ export default (panoDivRef, position, pov) => {
       showRoadLabels: false,
       clickToGo: true,
       visible: true,
+      motionTracking: false,
+      motionTrackingControl: false,
     });
   }, [panoDivRef, lat, lng, heading, pitch]);
 

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

@@ -7,7 +7,7 @@ import Loading from '../../util/Loading';
 import JoinForm from './JoinForm';
 import styles from './Lobby.module.css';
 import StartGame from './StartGame';
-import { NORMAL, TIME_BANK } from '../../../domain/ruleSets';
+import { NORMAL, TIME_BANK, FROZEN } from '../../../domain/ruleSets';
 
 const GameInfo = () => {
   const { rounds, timer, onlyAmerica, ruleSet } = useGameConfig();
@@ -16,21 +16,24 @@ const GameInfo = () => {
     return <Loading />
   }
 
-  let timeExplanation;
+  let explanation;
   switch (ruleSet) {
+    case FROZEN:
+      explanation = `${rounds !== 1 ? ", each" : ""} with a ${ms(timer * 1000)} time limit, and you will not be able to adjust your view`;
+      break;
     case TIME_BANK:
-      timeExplanation = `with a ${ms(timer * 1000 * rounds)} time bank across all rounds`;
+      explanation = `with a ${ms(timer * 1000 * rounds)} time bank across all rounds`;
       break;
     case NORMAL: // fall-through
     default:
-      timeExplanation = `${rounds !== 1 ? ", each" : ""} with a ${ms(timer * 1000)} time limit`;
+      explanation = `${rounds !== 1 ? ", each" : ""} with a ${ms(timer * 1000)} time limit`;
       break;
   }
 
   return (
     <>
       <span className={styles.label}>
-        Game will run for {rounds} round{rounds !== 1 && 's'}{timeExplanation}
+        Game will run for {rounds} round{rounds !== 1 && 's'}{explanation}
       </span>
       {onlyAmerica && (
         <span className={styles.label}>This game will only use locations within the United States of America</span>

client/src/components/util/GameCreationForm/GameCreationForm.jsx

@@ -2,10 +2,10 @@ import ms from 'pretty-ms';
 import React, { useState } from 'react';
 import { createGame } from '../../../domain/apiMethods';
 import { MAP_CRUNCH, RANDOM_STREET_VIEW, URBAN } from '../../../domain/genMethods';
+import { FROZEN, NORMAL, TIME_BANK } from '../../../domain/ruleSets';
 import Loading from '../Loading';
-import { Dropdown, Item, DropdownGroup } from './Dropdown';
+import { Dropdown, DropdownGroup, Item } from './Dropdown';
 import styles from './GameCreationForm.module.css';
-import { NORMAL, TIME_BANK } from '../../../domain/ruleSets';
 
 export default ({ afterCreate }) => {
   const [ loading, setLoading ] = useState(false);
@@ -55,6 +55,7 @@ export default ({ afterCreate }) => {
           <Dropdown onSelect={setRuleSet} open='rule'>
             <Item value={NORMAL} display='⏰' default>Normal</Item>
             <Item value={TIME_BANK} display='🏦'>Time Bank</Item>
+            <Item value={FROZEN} display='❄️'>Frozen</Item>
           </Dropdown>
         </DropdownGroup>
       </div>

client/src/domain/ruleSets.js

@@ -1,2 +1,3 @@
 export const NORMAL = "NORMAL";
-export const TIME_BANK = "TIMEBANK";
+export const TIME_BANK = "TIMEBANK";
+export const FROZEN = "FROZEN";