Adding a pre-round stage to get the game code

ui/src/App.js

@@ -6,6 +6,7 @@ import PlayerScores from "./components/player-scores.component";
 import RoundSummary from './components/round-summary.component';
 import './App.css';
 import PreGame from './components/pre-game.component';
+import PreRound from './components/pre-round.component';
 
 const LOADING    = "LOADING";   // Application is loading
 const PRE_GAME   = "PREGAME";   // Game is not yet started
@@ -31,21 +32,20 @@ class Game extends React.Component {
     }
   }
 
+  // TODO error handling throughout - at the moment it assumes all calls always succeed
+
   async handleCreateGame() {
     this.setState({ gameState: LOADING });
     const { playerName } = this.state;
     const gameId = await createGame(playerName, 300);
-    this.setState({ gameId });
-    // TODO transition to a pre-round state
-    await this.updateRoundState();
+    this.setState({ gameState: PRE_ROUND, gameId });
   }
 
   async handleJoinGame() {
     this.setState({ gameState: LOADING });
     const { gameId, playerName } = this.state;
     await joinGame(gameId, playerName);
-    // TODO transition to a pre-round state
-    await this.updateRoundState();
+    this.setState({ gameState: PRE_ROUND, gameId });
   }
 
   async updateRoundState() {
@@ -84,13 +84,12 @@ class Game extends React.Component {
   }
 
   render() {
-    const { gameState } = this.state;
+    const { gameState, gameId, playerName } = this.state;
 
     switch (gameState) {
       case LOADING:
         return <p>Loading...</p>
       case PRE_GAME:
-        const { gameId, playerName } = this.state;
         return <PreGame
           onCreateGame={() => this.handleCreateGame()}
           onJoinGame={() => this.handleJoinGame()}
@@ -100,7 +99,11 @@ class Game extends React.Component {
           playerName={playerName || ""}
         />
       case PRE_ROUND:
-        return <p>TODO!</p>
+        return <PreRound
+          gameId={gameId}
+          playerName={playerName}
+          onStart={() => this.updateRoundState()}
+        />
       case IN_ROUND:
         const { targetPoint, selectedPoint } = this.state;
         return <GamePanel

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

@@ -0,0 +1,31 @@
+import React from "react";
+
+class PreRound extends React.Component {
+  copyGameId() {
+    const { gameId } = this.props;
+    const textarea = this.textarea;
+		textarea.value = gameId;
+    textarea.select();
+    document.execCommand("copy");
+  }
+
+  render() {
+    const { gameId, playerName, onStart } = this.props;
+    return (
+      <div>
+        <p>Playing as {playerName}</p>
+        <p>
+          Game Code: {gameId} <button onClick={() => this.copyGameId()}>Copy</button>
+        </p>
+        <button onClick={onStart}>Start Game</button>
+				<textarea
+					ref={textarea => this.textarea = textarea}
+					style={{ position: "absolute", top: "-1000px" }}
+				/>
+      </div>
+    );
+  }
+}
+  
+export default PreRound;
+