Game info service function

README.md

@@ -21,7 +21,7 @@ PUT /game
     }
 GET /game/{ID}
     Returns {
-        "game_id": string,
+        "gameId": string,
         "creator": string,
         "timer": number,
         "coords": {

ui/src/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getStatus, createGame } from "./services/ggsh.service";
+import { getStatus, createGame, gameInfo } from "./services/ggsh.service";
 import './App.css';
 
 class InfoComponent extends React.Component {
@@ -30,19 +30,60 @@ class InfoComponent extends React.Component {
   }
 }
 
-const NewGameButton = () => (
-  <button 
-    onClick={async () => console.log(await createGame("testing", 300))}>
-    Create Game!
-  </button>
-);
+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 GameMakerComp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      game: null,
+    }
+  }
+
+  async onClick() {
+    this.setState({loading: true});
+    const gameId = await createGame("testing", 300);
+    const game = await gameInfo(gameId);
+    this.setState({loading: false, game});
+  }
+
+  render() {
+    if (this.state.loading) {
+      return <div><p>Loading...</p></div>
+    }
+
+    if (this.state.game) {
+      return <div><GameInfo game={this.state.game}/></div>
+    }
+    return <div><button onClick={() => this.onClick()}>Create Game!</button></div>
+  }
+}
 
 const App = () => {
   return (
     <div className="App">
       <p>TerrAssumptions!</p>
       <hr/>
-      <NewGameButton/>
+      <GameMakerComp/>
       <hr/>
       <InfoComponent/>
     </div>

ui/src/services/ggsh.service.js

@@ -28,3 +28,10 @@ export const createGame = async (name, timer) => {
     return gameId;
 }
 
+export const gameInfo = async (gameId) => {
+    const res = await fetch(API_BASE + `/game/${gameId}`);
+    if (!res.ok) {
+        throw Error(res.statusText);
+    }
+    return await res.json();
+}