Improving game flow with separate results page

ui/src/App.js

@@ -112,6 +112,9 @@ class Game extends React.Component {
       currentRound: null,
       targetPoint: null,
       selectedPoint: null,
+      betweenRounds: false,
+      lastScore: null,
+      totalScore: null,
       playerScores: null,
     }
   }
@@ -125,48 +128,87 @@ class Game extends React.Component {
   }
 
   async updateRoundState() {
+    this.setState({ loading: true })
     const { gameId, playerName } = this.state;
     const { currentRound } = await getGuesses(gameId, playerName);
     const { coords, players } = await gameInfo(gameId);
     if (currentRound) {
       const targetPoint = coords[currentRound];
-      this.setState({ 
-        loading: false, 
-        currentRound, 
-        targetPoint 
+      this.setState({
+        loading: false,
+        currentRound,
+        targetPoint,
+        selectedPoint: null,
+        betweenRounds: false,
       });
     } else {
-      this.setState({ 
-        loading: false, 
-        gameId: null, 
-        currentRound: null, 
-        targetPoint: null, 
-        playerScores: players, 
+      this.setState({
+        loading: false,
+        gameId: null,
+        currentRound: null,
+        targetPoint: null,
+        selectedPoint: null,
+        betweenRounds: false,
+        playerScores: players,
       });
     }
   }
 
   async handleSubmitGuess() {
     const { gameId, playerName, currentRound, selectedPoint } = this.state;
-    this.setState({ loading: true, selectedPoint: null });
-    const score = await sendGuess(gameId, playerName, currentRound, selectedPoint);
-    console.log(`Score: ${score}`);
-    await this.updateRoundState();
+    this.setState({ loading: true });
+    const { score, totalScore } = await sendGuess(gameId, playerName, currentRound, selectedPoint);
+    this.setState({ loading: false, betweenRounds: true, lastScore: score, totalScore });
   }
 
   render() {
-    const { loading, selectedPoint, targetPoint, playerScores } = this.state;
+    const {
+      loading,
+      currentRound,
+      selectedPoint,
+      targetPoint,
+      betweenRounds,
+      lastScore,
+      totalScore,
+      playerScores,
+    } = this.state;
 
     if (loading) {
       return <p>Loading...</p>
     }
 
+    if (betweenRounds) {
+      return (
+        <div>
+          <p>Score For Round {currentRound}: {lastScore}</p>
+          <p>Running Total Score: {totalScore}</p>
+          <button 
+            onClick={() => this.updateRoundState()}>
+            {currentRound === "5" ? "View Summary" : "Next Round"}
+          </button>
+        </div>
+      )
+    }
+
+    if (playerScores) {
+      return (
+        <div>
+          <PlayerScores scores={playerScores} />
+          <button 
+            onClick={() => this.setState({ playerScores: null })}>
+            Return to Start
+          </button>
+        </div>
+      );
+    }
+
     if (!targetPoint) {
-      return (<div>
-      {(playerScores ? [<PlayerScores scores={playerScores}/>, <hr/>] : null)}
-        <p>No game in progress!</p>
-        <button onClick={() => this.handleGameCreate()}>Create New Game</button>
-      </div>);
+      return (
+        <div>
+          <p>No game in progress!</p>
+          <button onClick={() => this.handleGameCreate()}>Create New Game</button>
+        </div>
+      );
     }
 
     return <GamePanel
@@ -181,7 +223,7 @@ class Game extends React.Component {
 
 const App = () => {
   return (
-    <div className="App" style={{ 
+    <div className="App" style={{
       display: "flex",
       flexDirection: "column",
       justifyContent: "space-between",