Saving current pano location to local storage for game rejoining

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

@@ -5,7 +5,12 @@ import GuessPane from "./GuessPane";
 import PositionedStreetView from "./PositionedStreetView";
 import useRoundInfo from "../../../hooks/useRoundInfo";
 import { dispatch } from '../../../domain/gameStore';
-import { useTimerFromLocalStorage, clearTimerFromLocalStorage } from '../../../domain/localStorageMethods';
+import { 
+  useTimerFromLocalStorage, 
+  clearTimerFromLocalStorage, 
+  clearPointFromLocalStorage, 
+  usePointFromLocalStorage 
+} from '../../../domain/localStorageMethods';
 import usePreventNavigation from '../../../hooks/usePreventNavigation';
 
 const Container = styled.div`
@@ -34,7 +39,7 @@ const StreetViewWrapper = styled.div`
 export default () => {
   // warn the user if they navigate away
   usePreventNavigation();
-  
+
   const [submitDisabled, setSubmitDisabled] = useState(false);
   const [selectedPoint, setSelectedPoint] = useState(null);
   const [finished, roundInfo] = useRoundInfo();
@@ -50,17 +55,19 @@ export default () => {
   }
 
   const storedTimer = useTimerFromLocalStorage();
+  const storedPoint = usePointFromLocalStorage();
 
   const handleSubmitGuess = async () => {
     setSubmitDisabled(true);
     await dispatch.submitGuess(selectedPoint, currentRound, targetPoint);
     clearTimerFromLocalStorage();
+    clearPointFromLocalStorage();
   }
 
   return (
     <Container>
       <StreetViewWrapper>
-          <PositionedStreetView position={targetPoint} />
+        <PositionedStreetView position={storedPoint ?? targetPoint} resetPosition={targetPoint} />
       </StreetViewWrapper>
       <GuessPane
         roundSeconds={storedTimer ?? roundSeconds}

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

@@ -1,6 +1,7 @@
-import React, { useRef } from "react";
+import React, { useRef, useEffect } from "react";
 import usePano from "./usePano";
 import styled from "styled-components";
+import { savePointToLocalStorage } from "../../../domain/localStorageMethods";
 
 const Container = styled.div`
   position: relative;
@@ -32,15 +33,22 @@ const ResetButton = styled.div`
   }
 `
 
-// TODO don't use memo to prevent re-render
-export default ({ position }) => {
+export default ({ position, resetPosition }) => {
   const panoDivRef = useRef(null);
   const panoRef = usePano(panoDivRef, position);
+  useEffect(() => {
+    if (panoRef.current) {
+      panoRef.current.addListener("position_changed", () => {
+        const pos = panoRef.current.getPosition();
+        savePointToLocalStorage(pos.lat(), pos.lng());
+      });
+    }
+  }, [panoRef]);
 
   return (
     <Container>
       <Pano ref={panoDivRef}/>
-      <ResetButton onClick={() => panoRef.current.setPosition(position)}>
+      <ResetButton onClick={() => panoRef.current.setPosition(resetPosition)}>
         Reset
       </ResetButton>
     </Container>

client/src/domain/localStorageMethods.js

@@ -3,6 +3,8 @@ const localStorageGameId = "terrassumptions:gameId";
 const localStoragePlayerName = "terrassumptions:playerName";
 const localStoragePlayerId = "terrassumptions:playerId";
 const localStorageTimer = "terrassumptions:timer";
+const localStoragePointLat = "terrassumptions:point:lat";
+const localStoragePointLng = "terrassumptions:point:lng";
 
 export const saveGameInfoToLocalStorage = (gameId, playerName, playerId) => {
   localStorage.setItem(localStorageGameId, gameId);
@@ -14,7 +16,6 @@ export const clearGameInfoFromLocalStorage = () => {
   localStorage.removeItem(localStorageGameId);
   localStorage.removeItem(localStoragePlayerName);
   localStorage.removeItem(localStoragePlayerId);
-  localStorage.removeItem(localStorageTimer);
 }
 
 export const useGameInfoFromLocalStorage = () => {
@@ -35,4 +36,20 @@ export const clearTimerFromLocalStorage = () => {
 export const useTimerFromLocalStorage = () => {
   const timer = localStorage.getItem(localStorageTimer);
   return timer === null ? null : Number.parseInt(timer);
-}
+}
+
+export const savePointToLocalStorage = (lat, lng) => {
+  localStorage.setItem(localStoragePointLat, lat.toString());
+  localStorage.setItem(localStoragePointLng, lng.toString());
+}
+
+export const clearPointFromLocalStorage = () => {
+  localStorage.removeItem(localStoragePointLat);
+  localStorage.removeItem(localStoragePointLng);
+}
+
+export const usePointFromLocalStorage = () => {
+  const lat = localStorage.getItem(localStoragePointLat);
+  const lng = localStorage.getItem(localStoragePointLng);
+  return lat === null || lng === null ? null : { lat: Number.parseFloat(lat), lng: Number.parseFloat(lng) };
+}