Merge pull request benlikescode#1 from Yaffles/dev

Added No Panning and changed world map for streaks

components/StreetView/StreetView.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useRef, useState } from 'react'
+import React, { ButtonHTMLAttributes, FC, useEffect, useRef, useState } from 'react'
 import { Game } from '@backend/models'
 import { GameStatus } from '@components/GameStatus'
 import { GuessMap } from '@components/GuessMap'
@@ -84,6 +84,7 @@ const Streetview: FC<Props> = ({ gameData, setGameData, view, setView }) => {
     })
 
     setLoading(false)
+    console.log('Pano loaded')
   }
 
   const handleSubmitGuess = async (timedOut?: boolean) => {
@@ -162,6 +163,61 @@ const Streetview: FC<Props> = ({ gameData, setGameData, view, setView }) => {
     }
   }, [view])
 
+  const handleMouseDown = (e: MouseEvent) => {
+    if (!gameData.gameSettings.canPan) {
+      e.stopPropagation();
+    }
+  };
+
+  const handleTouchStart = (e: TouchEvent) => {
+    if (!gameData.gameSettings.canPan) {
+      e.stopPropagation();
+    }
+  };
+
+  useEffect(() => {
+    if (view !== 'Game') return
+
+    const div = document.getElementById('streetview');
+    if (!div) return;
+
+    div.addEventListener('mousedown', handleMouseDown, { capture: true });
+    div.addEventListener('touchstart', handleTouchStart, { capture: true });
+
+    // Only add event listeners if `canPan` is false
+    console.log(div.getElementsByClassName('gm-control-active').length);
+
+    // Cleanup event listeners on unmount or dependency change
+    return () => {
+      div.removeEventListener('mousedown', handleMouseDown, { capture: true });
+      div.removeEventListener('touchstart', handleTouchStart, { capture: true });
+    };
+  }, [view, gameData.gameSettings.canPan]);
+
+
+  function disableCompassControls() {
+    var compassControls = document.getElementsByClassName('gm-control-active');
+    console.log(compassControls);
+    for (var i = 0; i < compassControls.length; i++) {
+      let compassControl = compassControls[i] as HTMLElement;
+      compassControl.addEventListener('click', (e) => {
+        e.stopPropagation();
+      });
+    }
+  }
+
+  useEffect(() => {
+    if (loading) return;
+
+    const div = document.getElementById('streetview');
+    if (!div) return;
+
+    if (!gameData.gameSettings.canPan) {
+      disableCompassControls();
+    }
+
+  } , [loading, gameData.gameSettings.canPan]);
+
   return (
     <StyledStreetView showMap={!loading}>
       {loading && <LoadingPage />}

components/modals/GameSettingsModal/GameSettingsModal.tsx

@@ -232,6 +232,11 @@ const GameSettingsModal: FC<Props> = ({ isOpen, closeModal, mapDetails, gameMode
                           <ToggleSwitch isActive={canZoom} setIsActive={setCanZoom} />
                           <div className="movementOptionLabel">Zoom</div>
                         </div>
+
+                        <div className="movementOption">
+                          <ToggleSwitch isActive={canPan} setIsActive={setCanPan} />
+                          <div className="movementOptionLabel">Pan</div>
+                        </div>
                       </div>
                     </div>
                   </div>

utils/constants/random.tsx

@@ -1,4 +1,4 @@
-export const OFFICIAL_WORLD_ID = '6533cef7dda2d10f45e377bd'
+export const OFFICIAL_WORLD_ID = '66a230bde441aba03e06f5e2'
 export const COUNTRY_STREAKS_ID = 'streaks'
 
 export const GUEST_ACCOUNT_ID = '636ed6784ec6f85e6f18591e'