Moving pre-game screen to its own component

ui/src/App.js

@@ -3,17 +3,18 @@ import { createGame, gameInfo, joinGame, getGuesses, sendGuess } from "./service
 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';
+import './App.css';
+import PreGame from './components/pre-game.component';
 
 
 class Game extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      playerName: "testing",
+      playerName: "testing", // TODO mechanism for setting this
       loading: false,
-      gameId: null,
+      gameId: null, // TODO mechanism for joining game
       currentRound: null,
       targetPoint: null,
       selectedPoint: null,
@@ -120,12 +121,9 @@ class Game extends React.Component {
     }
 
     if (!targetPoint) {
-      return (
-        <div>
-          <p>No game in progress!</p>
-          <button onClick={() => this.handleGameCreate()}>Create New Game</button>
-        </div>
-      );
+      return <PreGame
+        onGameCreate={() => this.handleGameCreate()}
+      />
     }
 
     return <GamePanel

ui/src/components/pre-game.component.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+const PreGame = ({onGameCreate}) => (
+  <div>
+    <p>No game in progress!</p>
+    <button onClick={onGameCreate}>Create New Game</button>
+  </div>
+);
+
+export default PreGame;