terrassumptions/ui/src/App.js

import React from 'react';
import { createGame, gameInfo, joinGame, getGuesses, sendGuess } from "./services/ggsh.service";
import GamePanel from "./components/game-panel.component";
import ApiInfo from "./components/api-info.component";
import PlayerScores from "./components/player-scores.component";
import RoundSummary from './components/round-summary.component';
import './App.css';
import PreGame from './components/pre-game.component';

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: null,
      gameId: null,
      currentRound: null,
      targetPoint: null,
      selectedPoint: null,
      lastScore: null,
      totalScore: null,
      players: null,
    }
  }

  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();
  }

  async updateRoundState() {
    this.setState({ gameState: LOADING })
    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({
        gameState: IN_ROUND,
        currentRound,
        targetPoint,
        selectedPoint: null,
        players,
      });
    } else {
      this.setState({ gameState: POST_GAME, players });
    }
  }

  async handleSubmitGuess() {
    const {
      gameId,
      playerName,
      currentRound,
      selectedPoint
    } = this.state;
    this.setState({ gameState: LOADING });
    const { score, totalScore } = await sendGuess(gameId, playerName, currentRound, selectedPoint);
    this.setState({
      gameState: POST_ROUND,
      lastScore: score,
      totalScore
    });
  }

  render() {
    const { gameState } = 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()}
          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
          onSelectPoint={latLng => this.setState({selectedPoint: latLng})}
          onSubmitGuess={() => this.handleSubmitGuess()}
          streetViewPoint={targetPoint}
          selectedPoint={selectedPoint}
        />
      case POST_ROUND:
        const { currentRound, lastScore, totalScore } = this.state;
        return <RoundSummary
          roundNum={currentRound}
          score={lastScore}
          totalScore={totalScore}
          onAdvanceState={() => this.updateRoundState()}
          buttonText={currentRound === "5" ? "View Summary" : "Next Round"}
        />
      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 (
    <div className="App" style={{
      display: "flex",
      flexDirection: "column",
      justifyContent: "space-between",
      height: "100vh",
    }}>
      <div>
        <p>TerrAssumptions!</p>
        <hr/>
      </div>
      <Game style={{flex: 1}}/>
      <div>
        <hr/>
        <ApiInfo/>
      </div>
    </div>
  );
}

export default App;