Moved Game component into its own module

ui/src/App.js

@@ -1,170 +1,8 @@
 import React from 'react';
-import { getGoogleApiKey, createGame, gameInfo, joinGame, getGuesses, sendGuess } from "./services/ggsh.service";
-import GamePanel from "./components/game-panel.component";
+import Game from "./components/game.component";
 import ApiInfo from "./components/api-info.component";
-import PlayerScores from "./components/player-scores.component";
-import RoundSummary from './components/round-summary.component';
-import PreGame from './components/pre-game.component';
-import PreRound from './components/pre-round.component';
 import './App.css';
 
-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 = {
-      googleApiKey: null,
-      gameState: LOADING,
-      playerName: null,
-      gameId: null,
-      currentRound: null,
-      targetPoint: null,
-      selectedPoint: null,
-      lastScore: null,
-      totalScore: null,
-      players: null,
-      roundTimer: null,
-    }
-  }
-
-  // TODO error handling throughout - at the moment it assumes all calls always succeed
-
-  async componentDidMount() {
-    const googleApiKey = await getGoogleApiKey();
-    this.setState({ googleApiKey, gameState: PRE_GAME });
-  }
-
-  async handleCreateGame() {
-    this.setState({ gameState: LOADING });
-    const { playerName } = this.state;
-    const gameId = await createGame(playerName, 300);
-    this.setState({ gameState: PRE_ROUND, gameId });
-  }
-
-  async handleJoinGame() {
-    this.setState({ gameState: LOADING });
-    const { gameId, playerName } = this.state;
-    await joinGame(gameId, playerName);
-    this.setState({ gameState: PRE_ROUND });
-  }
-
-  async updateRoundState() {
-    this.setState({ gameState: LOADING })
-    const { gameId, playerName } = this.state;
-    const { currentRound } = await getGuesses(gameId, playerName);
-    const { coords, players, timer } = await gameInfo(gameId);
-    if (currentRound) {
-      const targetPoint = coords[currentRound];
-      this.setState({
-        gameState: IN_ROUND,
-        currentRound,
-        targetPoint,
-        selectedPoint: null,
-        players,
-        roundTimer: timer,
-      });
-    } else {
-      this.setState({ gameState: POST_GAME, players });
-    }
-  }
-
-  async handleSubmitGuess() {
-    this.setState({ gameState: LOADING });
-    const {
-      gameId,
-      playerName,
-      currentRound,
-      selectedPoint
-    } = this.state;
-    if (selectedPoint) {
-      const { score, totalScore } = await sendGuess(gameId, playerName, currentRound, selectedPoint);
-      this.setState({
-        gameState: POST_ROUND,
-        lastScore: score,
-        totalScore
-      });
-    } else {
-      const { score, totalScore } = await sendGuess(gameId, playerName, currentRound, { timeout: true });
-      this.setState({
-        gameState: POST_ROUND,
-        lastScore: score,
-        totalScore
-      });
-    }
-  }
-
-  render() {
-    const {
-      googleApiKey,
-      gameState,
-      gameId,
-      playerName,
-      targetPoint,
-      selectedPoint,
-    } = this.state;
-
-    switch (gameState) {
-      case LOADING:
-        return <p>Loading...</p>
-      case PRE_GAME:
-        return <PreGame
-          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 <PreRound
-          gameId={gameId}
-          playerName={playerName}
-          onStart={() => this.updateRoundState()}
-        />
-      case IN_ROUND:
-        const { roundTimer } = this.state;
-        return <GamePanel
-          googleApiKey={googleApiKey}
-          onSelectPoint={latLng => this.setState({selectedPoint: latLng})}
-          onSubmitGuess={() => this.handleSubmitGuess()}
-          streetViewPoint={targetPoint}
-          selectedPoint={selectedPoint}
-          roundSeconds={roundTimer}
-          onTimeout={() => this.handleSubmitGuess()}
-        />
-      case POST_ROUND:
-        const { currentRound, lastScore, totalScore } = this.state;
-        return <RoundSummary
-          googleApiKey={googleApiKey}
-          roundNum={currentRound}
-          score={lastScore}
-          totalScore={totalScore}
-          onAdvanceState={() => this.updateRoundState()}
-          buttonText={currentRound === "5" ? "View Summary" : "Next Round"}
-          selectedPoint={selectedPoint}
-          targetPoint={targetPoint}
-        />
-      case POST_GAME:
-        const { players } = this.state;
-        return <PlayerScores
-          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>
-    }
-  }
-}
 
 const App = () => {
   return (

ui/src/components/game.component/game-state.enum.js

@@ -0,0 +1,7 @@
+export const LOADING    = "LOADING";   // Application is loading
+export const PRE_GAME   = "PREGAME";   // Game is not yet started
+export const PRE_ROUND  = "PREROUND";  // Game is started or joined, but not playing yet
+export const IN_ROUND   = "INROUND";   // Actively playing
+export const POST_ROUND = "POSTROUND"; // Round has finished
+export const POST_GAME  = "POSTGAME";  // Game has finished
+export const ERROR      = "ERROR";     // Error state

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

@@ -0,0 +1,198 @@
+import React from "react";
+import {
+  LOADING,
+  PRE_GAME,
+  PRE_ROUND,
+  IN_ROUND,
+  POST_ROUND,
+  POST_GAME,
+  ERROR,
+} from "./game-state.enum";
+import PreGame from '../pre-game.component';
+import PreRound from '../pre-round.component';
+import GamePanel from "../game-panel.component";
+import RoundSummary from '../round-summary.component';
+import PlayerScores from "../player-scores.component";
+import { 
+  getGoogleApiKey, 
+  createGame, 
+  gameInfo, 
+  joinGame, 
+  getGuesses, 
+  sendGuess 
+} from "../../services/ggsh.service";
+
+// TODO I want to break this down into some smaller container components that can handle making the API calls
+
+class Game extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      googleApiKey: null,
+      gameState: LOADING,
+      playerName: null,
+      gameId: null,
+      currentRound: null,
+      targetPoint: null,
+      selectedPoint: null,
+      lastScore: null,
+      totalScore: null,
+      players: null,
+      roundTimer: null,
+    }
+  }
+  
+  // TODO error handling throughout - at the moment it assumes all calls always succeed
+  
+  async componentDidMount() {
+    const googleApiKey = await getGoogleApiKey();
+    this.setState({ googleApiKey, gameState: PRE_GAME });
+  }
+  
+  async handleCreateGame() {
+    this.setState({ gameState: LOADING });
+    const { playerName } = this.state;
+    const gameId = await createGame(playerName, 300);
+    this.setState({ gameState: PRE_ROUND, gameId });
+  }
+  
+  async handleJoinGame() {
+    this.setState({ gameState: LOADING });
+    const { gameId, playerName } = this.state;
+    await joinGame(gameId, playerName);
+    this.setState({ gameState: PRE_ROUND });
+  }
+  
+  async updateRoundState() {
+    this.setState({ gameState: LOADING })
+    const { gameId, playerName } = this.state;
+    const { currentRound } = await getGuesses(gameId, playerName);
+    const { coords, players, timer } = await gameInfo(gameId);
+    if (currentRound) {
+      const targetPoint = coords[currentRound];
+      this.setState({
+        gameState: IN_ROUND,
+        currentRound,
+        targetPoint,
+        selectedPoint: null,
+        players,
+        roundTimer: timer,
+      });
+    } else {
+      this.setState({ gameState: POST_GAME, players });
+    }
+  }
+  
+  async handleSubmitGuess() {
+    this.setState({ gameState: LOADING });
+    const {
+      gameId,
+      playerName,
+      currentRound,
+      selectedPoint
+    } = this.state;
+    const { score, totalScore } = await sendGuess(gameId, playerName, currentRound, selectedPoint || { timeout: true });
+    this.setState({
+      gameState: POST_ROUND,
+      lastScore: score,
+      totalScore
+    });
+  }
+  
+  renderLoading() {
+    return <p>Loading...</p>
+  }
+  
+  renderPreGame() {
+    const { gameId, playerName } = this.state;
+    return <PreGame
+    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 || ""}
+    />
+  }
+  
+  renderPreRound() {
+    const { gameId, playerName } = this.state;
+    return <PreRound
+    gameId={gameId}
+    playerName={playerName}
+    onStart={() => this.updateRoundState()}
+    />
+  }
+  
+  renderInRound() {
+    const { googleApiKey, targetPoint, selectedPoint, roundTimer } = this.state;
+    return <GamePanel
+    googleApiKey={googleApiKey}
+    onSelectPoint={latLng => this.setState({selectedPoint: latLng})}
+    onSubmitGuess={() => this.handleSubmitGuess()}
+    streetViewPoint={targetPoint}
+    selectedPoint={selectedPoint}
+    roundSeconds={roundTimer}
+    onTimeout={() => this.handleSubmitGuess()}
+    />
+  }
+  
+  renderPostRound() {
+    const {
+      googleApiKey,
+      currentRound,
+      lastScore,
+      totalScore,
+      targetPoint,
+      selectedPoint,
+    } = this.state;
+    return <RoundSummary
+    googleApiKey={googleApiKey}
+    roundNum={currentRound}
+    score={lastScore}
+    totalScore={totalScore}
+    onAdvanceState={() => this.updateRoundState()}
+    buttonText={currentRound === "5" ? "View Summary" : "Next Round"}
+    targetPoint={targetPoint}
+    selectedPoint={selectedPoint}
+    />
+  }
+  
+  renderPostGame() {
+    const { players } = this.state;
+    return <PlayerScores
+    players={players}
+    onReturnToStart={() => this.setState({ gameState: PRE_GAME })}
+    />
+  }
+  
+  renderError() {
+    return <p>Application encountered unrecoverable error, please refresh the page.</p>
+  }
+  
+  render() {
+    const { gameState } = this.state;
+    
+    switch (gameState) {
+      case LOADING:
+      return this.renderLoading();
+      case PRE_GAME:
+      return this.renderPreGame();
+      case PRE_ROUND:
+      return this.renderPreRound();
+      case IN_ROUND:
+      return this.renderInRound();
+      case POST_ROUND:
+      return this.renderPostRound();
+      case POST_GAME:
+      return this.renderPostGame();
+      case ERROR:
+      return this.renderError();
+      default:
+      this.setState({ gameState: ERROR });
+      return <p>Application state is inconsistent, please refresh and rejoin your previous game.</p>
+    }
+  }
+}
+
+export default Game;

ui/src/components/game.component/index.js

@@ -0,0 +1,3 @@
+import Game from "./game";
+
+export default Game;