A little more reorganization

ui/src/App.js

@@ -4,6 +4,7 @@ import GamePanel from "./components/game-panel.component";
 import ApiInfo from "./components/api-info.component";
 import PlayerScores from "./components/player-scores.component";
 import './App.css';
+import RoundSummary from './components/round-summary.component';
 
 const GameInfo = ({game}) => {
   const {
@@ -127,38 +128,56 @@ class Game extends React.Component {
     await this.updateRoundState();
   }
 
+  handleRoundEnd(coords, currentRound) {
+    const targetPoint = coords[currentRound];
+    this.setState({
+      loading: false,
+      currentRound,
+      targetPoint,
+      selectedPoint: null,
+      betweenRounds: false,
+    });
+  }
+
+  handleGameEnd(playerScores) {
+    this.setState({
+      loading: false,
+      gameId: null,
+      currentRound: null,
+      targetPoint: null,
+      selectedPoint: null,
+      betweenRounds: false,
+      playerScores,
+    });
+  }
+
   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,
-        selectedPoint: null,
-        betweenRounds: false,
-      });
+      this.handleRoundEnd(coords, currentRound);
     } else {
-      this.setState({
-        loading: false,
-        gameId: null,
-        currentRound: null,
-        targetPoint: null,
-        selectedPoint: null,
-        betweenRounds: false,
-        playerScores: players,
-      });
+      this.handleGameEnd(players);
     }
   }
 
   async handleSubmitGuess() {
-    const { gameId, playerName, currentRound, selectedPoint } = this.state;
+    const { 
+      gameId, 
+      playerName, 
+      currentRound, 
+      selectedPoint 
+    } = this.state;
     this.setState({ loading: true });
     const { score, totalScore } = await sendGuess(gameId, playerName, currentRound, selectedPoint);
-    this.setState({ loading: false, betweenRounds: true, lastScore: score, totalScore });
+    this.setState({ 
+      loading: false, 
+      betweenRounds: true, 
+      lastScore: score, 
+      totalScore 
+    });
   }
 
   render() {
@@ -180,8 +199,11 @@ class Game extends React.Component {
     if (betweenRounds) {
       return (
         <div>
-          <p>Score For Round {currentRound}: {lastScore}</p>
-          <p>Running Total Score: {totalScore}</p>
+          <RoundSummary
+            roundNum={currentRound}
+            score={lastScore}
+            totalScore={totalScore}
+          />
           <button 
             onClick={() => this.updateRoundState()}>
             {currentRound === "5" ? "View Summary" : "Next Round"}

ui/src/components/round-summary.component.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+// TODO eventually - we want this to query and show other players
+
+const RoundSummary = ({roundNum, score, totalScore}) => (
+  <div>
+    <p>Score For Round {roundNum}: {score}</p>
+    <p>Running Total Score: {totalScore}</p>
+  </div>
+);
+  
+export default RoundSummary;
+