Adding join game logic

ui/src/App.js

@@ -7,20 +7,21 @@ import RoundSummary from './components/round-summary.component';
 import './App.css';
 import PreGame from './components/pre-game.component';
 
-const LOADING    = "LOADING";
-const PRE_GAME   = "PREGAME";
-const IN_ROUND   = "INROUND";
-const POST_ROUND = "POSTROUND";
-const POST_GAME  = "POSTGAME";
+const LOADING    = "LOADING";   // Application is loading
+const PRE_GAME   = "PREGAME";   // Game is not yet started
+const PRE_ROUND  = "PREROUND";  // Game is started or joined, but not playing yet
+const IN_ROUND   = "INROUND";   // Actively playing
+const POST_ROUND = "POSTROUND"; // Round has finished
+const POST_GAME  = "POSTGAME";  // Game has finished
+const ERROR      = "ERROR";     // Error state
 
 class Game extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       gameState: PRE_GAME,
-      playerName: "testing", // TODO mechanism for setting this
-      loading: false,
-      gameId: null, // TODO mechanism for joining game
+      playerName: null,
+      gameId: null,
       currentRound: null,
       targetPoint: null,
       selectedPoint: null,
@@ -30,11 +31,20 @@ class Game extends React.Component {
     }
   }
 
-  async handleGameCreate() {
+  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();
+  }
+
+  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();
   }
 
@@ -80,9 +90,17 @@ class Game extends React.Component {
       case LOADING:
         return <p>Loading...</p>
       case PRE_GAME:
+        const { gameId, playerName } = this.state;
         return <PreGame
-          onGameCreate={() => this.handleGameCreate()}
+          onCreateGame={() => this.handleCreateGame()}
+          onJoinGame={() => this.handleJoinGame()}
+          onChangeGameId={({ target }) => this.setState({gameId: target.value.trim()})}
+          onChangePlayerName={({ target }) => this.setState({playerName: target.value.trim()})}
+          gameId={gameId || ""}
+          playerName={playerName || ""}
         />
+      case PRE_ROUND:
+        return <p>TODO!</p>
       case IN_ROUND:
         const { targetPoint, selectedPoint } = this.state;
         return <GamePanel
@@ -106,7 +124,10 @@ class Game extends React.Component {
           players={players}
           onReturnToStart={() => this.setState({ gameState: PRE_GAME })}
         />
+      case ERROR:
+        return <p>Application encountered unrecoverable error, please refresh the page.</p>
       default:
+        this.setState({ gameState: ERROR });
         return <p>Application state is inconsistent, please refresh and rejoin your previous game.</p>
     } 
   }

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

@@ -1,9 +1,34 @@
 import React from "react";
 
-const PreGame = ({onGameCreate}) => (
+const PreGame = ({
+  onCreateGame,
+  onJoinGame,
+  onChangeGameId,
+  onChangePlayerName,
+  gameId,
+  playerName
+}) => (
   <div>
-    <p>No game in progress!</p>
-    <button onClick={onGameCreate}>Create New Game</button>
+    <p>Player Name</p>
+    <input type="text" value={playerName} onChange={onChangePlayerName} />
+    <hr/>
+    <button 
+      onClick={onCreateGame}
+      disabled={!playerName || playerName.length === 0}
+    >
+      Create New Game
+    </button>
+    <hr/>
+    
+    <p>Game ID:</p>
+    <input type="text" value={gameId} onChange={onChangeGameId} />
+    <br/>
+    <button 
+      onClick={onJoinGame}
+      disabled={!gameId || !playerName || gameId.length === 0 || playerName.length === 0}
+    >
+      Join Existing Game
+    </button>
   </div>
 );