Using the shared stores for the round info

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

@@ -5,6 +5,8 @@ import usePlayerScores from "../../../hooks/usePlayerScores";
 import DelayedButton from "../../util/DelayedButton";
 import useRoundInfo from "../../../hooks/useRoundInfo";
 import Button from "../../util/Button";
+import useObservable from "../../../hooks/useObservable";
+import { lastRoundStore } from "../../../domain/store";
 
 const useTopScorer = (roundNum) => {
   const scores = usePlayerScores();
@@ -53,14 +55,14 @@ const NextButton = styled(DelayedButton)`
   padding: 1em;
 `
 
-export default ({
-  selectedPoint,
-  targetPoint,
-  roundNum,
-  score,
-  totalScore,
-  onNext
-}) => {
+export default ({ onNext }) => {
+  const {
+    roundNum,
+    selectedPoint,
+    targetPoint,
+    score,
+    totalScore,
+  } = useObservable(lastRoundStore);
   const { topPlayer, topScore } = useTopScorer(roundNum);
   const [gameFinished] = useRoundInfo()
 

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, lastRoundStore } from "../../../domain/store";
+import { lastRoundStore } from "../../../domain/store";
 
 const Container = styled.div`
   flex: 1;
@@ -28,14 +28,9 @@ const MapDiv = styled.div`
 `
 
 export default ({ onNext }) => {
-  const gameId = useObservable(gameIdStore);
-  const playerName = useObservable(playerNameStore);
   const {
-    roundNum,
     selectedPoint,
     targetPoint,
-    score,
-    totalScore,
   } = useObservable(lastRoundStore);
   const mapDivRef = useRef(null);
   // TODO dynamically determine this zoom level?
@@ -45,7 +40,7 @@ export default ({ onNext }) => {
   return (
     <Container>
       <MapDiv ref={mapDivRef} />
-      <RoundInfoPane {...{ gameId, playerName, selectedPoint, targetPoint, roundNum, score, totalScore, onNext }}/>
+      <RoundInfoPane onNext={onNext} />
     </Container>
   );
 };