Working out the most basic game loop

ui/src/App.js

@@ -1,36 +1,9 @@
 import React from 'react';
-import { getStatus, createGame, gameInfo, joinGame, getGuesses, sendGuess } from "./services/ggsh.service";
+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 './App.css';
 
-class InfoComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      loading: true,
-      version: null,
-      status: null,
-    }
-  }
-
-  async componentDidMount() {
-    const { version, status } = await getStatus();
-    this.setState({loading: false, version, status});
-  }
-
-  render() {
-    if (this.state.loading) {
-      return <p>Connecting to back-end...</p>
-    }
-
-    if (this.state.status !== "healthy") {
-      return <p>Unable to communicate with API server! Error: {this.state.status}</p>
-    }
-    
-    return <p>API Version: {this.state.version}</p>
-  }
-}
-
 const GameInfo = ({game}) => {
   const {
     gameId,
@@ -87,13 +60,6 @@ class GameMakerComp extends React.Component {
     }
   }
 
-  async handleGameCreate() {
-    this.setState({loading: true});
-    const gameId = await createGame("testing", 300);
-    const game = await gameInfo(gameId);
-    this.setState({loading: false, game});
-  }
-
   async handleGameJoin() {
     this.setState({loading: true});
     const { gameId } = this.state.game
@@ -139,19 +105,57 @@ class Game extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      targetPoint: {lat: 42.57343, lng: 1.58651},
+      playerName: "testing",
+      loading: false,
+      gameId: null,
+      currentRound: null,
+      targetPoint: null,
       selectedPoint: null,
     }
   }
 
-  handleSubmitGuess() {
-    const { selectedPoint } = this.state;
-    console.log(JSON.stringify(selectedPoint));
-    // TODO actually submit
+  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);
+    if (currentRound) {
+      const { coords } = await gameInfo(gameId);
+      const targetPoint = coords[currentRound];
+      this.setState({ loading: false, currentRound, targetPoint });
+    } else {
+      this.setState({ loading: false, gameId: null, currentRound: null, targetPoint: null });
+    }
+  }
+
+  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 { selectedPoint, targetPoint } = this.state;
+    const { loading, selectedPoint, targetPoint } = this.state;
+
+    if (loading) {
+      return <p>Loading...</p>
+    }
+
+    if (!targetPoint) {
+      return (<div>
+        <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()}
@@ -169,7 +173,7 @@ const App = () => {
       <hr/>
       <Game/>
       <hr/>
-      <InfoComponent/>
+      <ApiInfo/>
     </div>
   );
 }

ui/src/components/api-info.component.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { getStatus } from "../services/ggsh.service";
+
+class ApiInfo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      version: null,
+      status: null,
+    }
+  }
+  
+  async componentDidMount() {
+    const { version, status } = await getStatus();
+    this.setState({loading: false, version, status});
+  }
+  
+  render() {
+    if (this.state.loading) {
+      return <p>Connecting to back-end...</p>
+    }
+    
+    if (this.state.status !== "healthy") {
+      return <p>Unable to communicate with API server! Error: {this.state.status}</p>
+    }
+    
+    return <p>API Version: {this.state.version}</p>
+  }
+}
+
+export default ApiInfo;

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

@@ -12,9 +12,9 @@ const PositionedStreetView = compose(
   }),
   withScriptjs,
   withGoogleMap
-)(({ point }) => 
-  <StreetViewPanorama 
-    defaultPosition={point} 
+)(({ point }) =>
+  <StreetViewPanorama
+    defaultPosition={point}
     options={{
       addressControl: false,
       showRoadLabels: false,
@@ -33,7 +33,7 @@ const SelectionMap = compose(
   }),
   withScriptjs,
   withGoogleMap
-)(({onClick, markerPosition}) => 
+)(({onClick, markerPosition}) =>
   <GoogleMap
     defaultZoom={0}
     defaultCenter={{ lat: 25, lng: -25}}
@@ -51,28 +51,33 @@ const SelectionMap = compose(
   </GoogleMap>
 );
 
-const GamePanel = ({ onSelectPoint, onSubmitGuess, streetViewPoint, selectedPoint }) => (
+const GamePanel = ({
+  onSelectPoint,
+  onSubmitGuess,
+  streetViewPoint,
+  selectedPoint,
+}) => (
   <div style={{
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center"
   }}>
     <div style={{ flexGrow: 3 }}>
-      <PositionedStreetView 
+      <PositionedStreetView
         point={streetViewPoint}
       />
     </div>
-    <div style={{ 
-      flexGrow: 1, 
-      display: "flex", 
-      flexDirection: "column", 
+    <div style={{
+      flexGrow: 1,
+      display: "flex",
+      flexDirection: "column",
       justifyContent:"space-around",
     }}>
       <SelectionMap
         onClick={({ latLng }) => onSelectPoint(latLng)}
         markerPosition={selectedPoint}
       />
-      <button 
+      <button
         onClick={onSubmitGuess}
         disabled={selectedPoint === null}
       >

ui/src/services/ggsh.service.js

@@ -60,14 +60,14 @@ export const getGuesses = async (gameId, name) => {
     return await res.json();
 }
 
-export const sendGuess = async (gameId, name, round, lat, lng) => {
+export const sendGuess = async (gameId, name, round, point) => {
     const res = await fetch(`${API_BASE}/game/${gameId}/guesses/${round}`, {
         method: "POST",
         headers: {
             "Authorization": `Name ${name}`,
             "Content-Type": "application/json",
         },
-        body: JSON.stringify({ lat, lng }),
+        body: JSON.stringify(point),
     });
     if (!res.ok) {
         throw Error(res.statusText);