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 './App.css';

const GameInfo = ({game}) => {
  const {
    gameId,
    creator,
    timer,
    coords,
    players
  } = game;

  return (
    <div className="GameInfo">
      <p>Game ID: {gameId}</p>
      <p>Creator: {creator}</p>
      <p>Time Limit: {timer}</p>
      <p>Coordinates: {JSON.stringify(coords)}</p>
      <p>Players: {JSON.stringify(players)}</p>
    </div>
  );
}

class GuessComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      guesses: null,
    }
  }

  async componentDidMount() {
    const { gameId, name } = this.props;
    const guesses = await getGuesses(gameId, name);
    this.setState({loading: false, guesses});
  }

  render() {
    const { loading, guesses } = this.state;

    if (loading) {
      return <p>Loading...</p>
    }

    const { name } = this.props;
    return <p>Guesses for {name}: {JSON.stringify(guesses)}</p>
  }
}

class GameMakerComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      game: null,
    }
  }

  async handleGameJoin() {
    this.setState({loading: true});
    const { gameId } = this.state.game
    await joinGame(gameId, "testing2");
    const game = await gameInfo(gameId);
    this.setState({loading: false, game});
  }

  async handleSendGuess() {
    this.setState({loading: true});
    const { gameId, coords } = this.state.game
    const { currentRound } = await getGuesses(gameId, "testing");
    const { lat, lng } = coords[currentRound];
    await sendGuess(gameId, "testing", currentRound, lat, lng);
    const game = await gameInfo(gameId);
    this.setState({loading: false, game});
  }

  render() {
    const { loading, game } = this.state;

    if (loading) {
      return <div><p>Loading...</p></div>
    }

    if (game) {
      return (
        <div>
          <GameInfo game={game}/>
          <p>Your Guesses:</p>
          <GuessComp gameId={game.gameId} name="testing"/>
          <button onClick={() => this.handleGameJoin()}>Add second user!</button>
          <button onClick={() => this.handleSendGuess()}>Send perfect guess!</button>
        </div>
      );
    }
    // return <div><button onClick={() => this.handleGameCreate()}>Create Game!</button></div>
    return <div><GamePanel /></div>
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      playerName: "testing",
      loading: false,
      gameId: null,
      currentRound: null,
      targetPoint: null,
      selectedPoint: null,
      playerScores: null,
    }
  }

  async handleGameCreate() {
    this.setState({loading: true});
    const { playerName } = this.state;
    const gameId = await createGame(playerName, 300);
    this.setState({ gameId });
    await this.updateRoundState();
  }

  async updateRoundState() {
    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({ 
        loading: false, 
        currentRound, 
        targetPoint 
      });
    } else {
      this.setState({ 
        loading: false, 
        gameId: null, 
        currentRound: null, 
        targetPoint: null, 
        playerScores: players, 
      });
    }
  }

  async handleSubmitGuess() {
    const { gameId, playerName, currentRound, selectedPoint } = this.state;
    this.setState({ loading: true, selectedPoint: null });
    const score = await sendGuess(gameId, playerName, currentRound, selectedPoint);
    console.log(`Score: ${score}`);
    await this.updateRoundState();
  }

  render() {
    const { loading, selectedPoint, targetPoint, playerScores } = this.state;

    if (loading) {
      return <p>Loading...</p>
    }

    if (!targetPoint) {
      return (<div>
      {(playerScores ? [<PlayerScores scores={playerScores}/>, <hr/>] : null)}
        <p>No game in progress!</p>
        <button onClick={() => this.handleGameCreate()}>Create New Game</button>
      </div>);
    }

    return <GamePanel
      onSelectPoint={latLng => this.setState({selectedPoint: latLng})}
      onSubmitGuess={() => this.handleSubmitGuess()}
      streetViewPoint={targetPoint}
      selectedPoint={selectedPoint}
    />
  }

}

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;