Genericizing round number for the RoundSummary component

client/src/components/Game/Game.jsx

@@ -78,6 +78,7 @@ const Game = () => {
     case POST_ROUND:
       return <RoundSummary
         gameId={state.gameId}
+        playerName={state.playerName}
         round={state.lastRound}
         onNext={() => setGameState(IN_ROUND)}
       />

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

@@ -4,7 +4,7 @@ import { sendGuess } from "../../../domain/GGSHService";
 import Loading from '../../util/Loading';
 import GuessPane from "./GuessPane";
 import PositionedStreetView from "./PositionedStreetView";
-import useRoundInfo from "./useRoundInfo";
+import useRoundInfo from "../../../hooks/useRoundInfo";
 
 const Container = styled.div`
   height: 100%;

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

@@ -3,6 +3,8 @@ import styled from "styled-components";
 import ClickToCopy from "../../util/ClickToCopy";
 import usePlayerScores from "../../../hooks/usePlayerScores";
 import DelayedButton from "../../util/DelayedButton";
+import useRoundInfo from "../../../hooks/useRoundInfo";
+import Button from "../../util/Button";
 
 const useTopScorer = (gameId, roundNum) => {
   const scores = usePlayerScores(gameId);
@@ -41,6 +43,11 @@ const TimedOut = styled.span`
   color: red;
 `
 
+const FinishedButton = styled(Button)`
+  margin-top: 5px;
+  padding: 1em;
+`
+
 const NextButton = styled(DelayedButton)`
   margin-top: 5px;
   padding: 1em;
@@ -48,6 +55,7 @@ const NextButton = styled(DelayedButton)`
 
 export default ({
   gameId,
+  playerName,
   selectedPoint,
   targetPoint,
   roundNum,
@@ -56,6 +64,7 @@ export default ({
   onNext
 }) => {
   const { topPlayer, topScore } = useTopScorer(gameId, roundNum);
+  const [gameFinished] = useRoundInfo(gameId, playerName)
 
   return (
     <Container>
@@ -69,12 +78,15 @@ export default ({
       <span>Score For Round {roundNum}: {score}</span>
       <span>Running Total Score: {totalScore}</span>
       {topPlayer ? <span className="round-summary__top-score">Current best is {topPlayer} with {topScore}</span> : null}
-      <NextButton 
-        onEnd={onNext}
-        countDownFormatter={rem => `Click to cancel, ${rem}s...`}
-      >
-        {roundNum === "5" ? "View Summary" : "Next Round"}
-      </NextButton>
+      {
+        gameFinished 
+          ? <FinishedButton onClick={onNext}>
+              View Summary
+            </FinishedButton>
+          : <NextButton onEnd={onNext} countDownFormatter={rem => `Click to cancel, ${rem}s...`}>
+              Next Round
+            </NextButton>
+      }
     </Container>
   );
 }

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

@@ -25,7 +25,7 @@ const MapDiv = styled.div`
   }
 `
 
-export default ({ gameId, round, onNext }) => {
+export default ({ gameId, playerName, round, onNext }) => {
   const {
     roundNum,
     selectedPoint,
@@ -41,7 +41,7 @@ export default ({ gameId, round, onNext }) => {
   return (
     <Container>
       <MapDiv ref={mapDivRef} />
-      <RoundInfoPane {...{ gameId, selectedPoint, targetPoint, roundNum, score, totalScore, onNext }}/>
+      <RoundInfoPane {...{ gameId, playerName, selectedPoint, targetPoint, roundNum, score, totalScore, onNext }}/>
     </Container>
   );
 };

client/src/components/screens/GamePanel/useRoundInfo.jsx → client/src/hooks/useRoundInfo.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { getCurrentRound } from "../../../domain/GGSHService";
+import { getCurrentRound } from "../domain/GGSHService";
 
 export default (gameId, playerName) => {
   const [finished, setFinished] = useState(false);