Implementing a somewhat hacky way to track the current round timer, needs testing

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

@@ -5,6 +5,7 @@ import GuessPane from "./GuessPane";
 import PositionedStreetView from "./PositionedStreetView";
 import useRoundInfo from "../../../hooks/useRoundInfo";
 import { dispatch } from '../../../domain/gameStore';
+import { useTimerFromLocalStorage } from '../../../domain/localStorageMethods';
 
 const Container = styled.div`
   height: 100%;
@@ -44,6 +45,8 @@ export default () => {
     return <Loading/>
   }
 
+  const storedTimer = useTimerFromLocalStorage();
+
   const handleSubmitGuess = async () => {
     setSubmitDisabled(true);
     await dispatch.submitGuess(selectedPoint, currentRound, targetPoint);
@@ -55,7 +58,7 @@ export default () => {
           <PositionedStreetView position={targetPoint} />
       </StreetViewWrapper>
       <GuessPane
-        roundSeconds={roundSeconds}
+        roundSeconds={storedTimer ?? roundSeconds}
         onTimeout={handleSubmitGuess}
         onSelectPoint={setSelectedPoint}
         onSubmitGuess={handleSubmitGuess}

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

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import ms from "pretty-ms";
 import useCountdown from "../../../hooks/useCountdown";
+import { clearTimerFromLocalStorage, saveTimerToLocalStorage } from "../../../domain/localStorageMethods";
 
 const TimerSpan = styled.span`
   padding: 1px;
@@ -13,9 +14,17 @@ const TimedOut = styled(TimerSpan)`
 `
 
 export default ({ seconds, onTimeout }) => {
-  const [remaining] = useCountdown(seconds, onTimeout);
+  console.log(seconds);
+  const [remaining] = useCountdown(seconds, () => {
+    clearTimerFromLocalStorage();
+    onTimeout(); 
+  });
+  console.log(remaining);
+  
+  if (remaining > 0) {
+    saveTimerToLocalStorage(remaining);
+    return <TimerSpan>Time: {ms(remaining * 1000)}</TimerSpan>;
+  }
 
-  return remaining > 0 
-    ? <TimerSpan>Time: {ms(remaining * 1000)}</TimerSpan> 
-    : <TimedOut>Time's up!</TimedOut>
+  return <TimedOut>Time's up!</TimedOut>;
 }

client/src/domain/localStorageMethods.js

@@ -2,6 +2,7 @@
 const localStorageGameId = "terrassumptions:gameId";
 const localStoragePlayerName = "terrassumptions:playerName";
 const localStoragePlayerId = "terrassumptions:playerId";
+const localStorageTimer = "terrassumptions:timer";
 
 export const saveGameInfoToLocalStorage = (gameId, playerName, playerId) => {
   localStorage.setItem(localStorageGameId, gameId);
@@ -21,3 +22,16 @@ export const useGameInfoFromLocalStorage = () => {
   const playerId = localStorage.getItem(localStoragePlayerId);
   return { gameId, playerName, playerId };
 }
+
+export const saveTimerToLocalStorage = (timer) => {
+  localStorage.setItem(localStorageTimer, timer.toString());
+}
+
+export const clearTimerFromLocalStorage = () => {
+  localStorage.removeItem(localStorageTimer);
+}
+
+export const useTimerFromLocalStorage = () => {
+  const timer = localStorage.getItem(localStorageTimer);
+  return timer === null ? null : Number.parseInt(timer);
+}