Putting the last round content in a store as well

client/src/components/Game/Game.jsx

@@ -17,7 +17,6 @@ import { gameIdStore } from "../../domain/store";
 
 const initialState = {
   gameState: PRE_GAME,
-  lastRound: null,
   joined: false,
 }
 
@@ -30,11 +29,9 @@ const extractAndRemoveSearchParam = param => {
 }
 
 const Game = () => {
-  const [ state, rawSetState ] = useState(initialState);
-
-  const setGameState = gameState => rawSetState({ ...state, gameState });
-  const setGameStateAnd = (gameState, updates) => rawSetState({ ...state, gameState, ...updates });
-  const onGameJoined = () => setGameStateAnd(PRE_ROUND, { joined: true });
+  const [ state, setState ] = useState(initialState);
+  const setGameState = gameState => setState({ ...state, gameState });
+  const onGameJoined = () => setState({ gameState: PRE_ROUND, joined: true });
   
   const joinCode = extractAndRemoveSearchParam("join");
   if (joinCode) {
@@ -52,9 +49,7 @@ const Game = () => {
     case PRE_GAME:
       return (
         <HeaderAndFooter>
-          <PreGame
-            onGameJoined={onGameJoined}
-          />
+          <PreGame onGameJoined={onGameJoined} />
         </HeaderAndFooter>
       );
     case PRE_ROUND:
@@ -69,23 +64,15 @@ const Game = () => {
       );
     case IN_ROUND:
       return <GamePanel
-        onRoundEnd={lastRound => setGameStateAnd(POST_ROUND, { lastRound })}
+        onRoundEnd={() => setGameState(POST_ROUND)}
         onGameEnd={() => setGameState(POST_GAME)}
       />
     case POST_ROUND:
-      return <RoundSummary
-        round={state.lastRound}
-        onNext={() => setGameState(IN_ROUND)}
-      />
+      return <RoundSummary onNext={() => setGameState(IN_ROUND)} />
     case POST_GAME:
       return (
         <HeaderAndFooter>
-          <PlayerScores
-            onReturnToStart={() => {
-              gameIdStore.set(null);
-              setGameStateAnd(PRE_GAME, { joined: false });
-            }}
-          />
+          <PlayerScores onReturnToStart={() => setState(initialState)} />
         </HeaderAndFooter>
       );
     case ERROR:

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

@@ -5,6 +5,7 @@ import Loading from '../../util/Loading';
 import GuessPane from "./GuessPane";
 import PositionedStreetView from "./PositionedStreetView";
 import useRoundInfo from "../../../hooks/useRoundInfo";
+import { lastRoundStore } from '../../../domain/store';
 
 const Container = styled.div`
   height: 100%;
@@ -47,13 +48,14 @@ const GamePanelContainer = ({ onRoundEnd, onGameEnd }) => {
   const handleSubmitGuess = async () => {
     setSubmitDisabled(true);
     const { score, totalScore } = await sendGuess(currentRound, selectedPoint || { timeout: true });
-    onRoundEnd({
+    lastRoundStore.set({
       roundNum: currentRound,
       selectedPoint,
       targetPoint,
       score,
       totalScore,
     });
+    onRoundEnd();
   }
 
   return (

client/src/components/screens/RoundSummary/RoundSummary.jsx

@@ -4,7 +4,7 @@ import useMap from "../../../hooks/useMap";
 import useMarkedPoints from "./useMarkedPoints";
 import RoundInfoPane from "./RoundInfoPane";
 import useObservable from "../../../hooks/useObservable";
-import { gameIdStore, playerNameStore } from "../../../domain/store";
+import { gameIdStore, playerNameStore, lastRoundStore } from "../../../domain/store";
 
 const Container = styled.div`
   flex: 1;
@@ -27,7 +27,7 @@ const MapDiv = styled.div`
   }
 `
 
-export default ({ round, onNext }) => {
+export default ({ onNext }) => {
   const gameId = useObservable(gameIdStore);
   const playerName = useObservable(playerNameStore);
   const {
@@ -36,7 +36,7 @@ export default ({ round, onNext }) => {
     targetPoint,
     score,
     totalScore,
-  } = round;
+  } = useObservable(lastRoundStore);
   const mapDivRef = useRef(null);
   // TODO dynamically determine this zoom level?
   const mapRef = useMap(mapDivRef, targetPoint.lat, targetPoint.lng, 4);

client/src/domain/store.js

@@ -2,3 +2,4 @@ import { createObservable } from "../hooks/useObservable";
 
 export const gameIdStore = createObservable(null);
 export const playerNameStore = createObservable(null);
+export const lastRoundStore = createObservable(null);