|
@@ -1,5 +1,5 @@
|
|
import React from 'react';
|
|
import React from 'react';
|
|
-import { getStatus, createGame, gameInfo, joinGame } from "./services/ggsh.service";
|
|
|
|
|
|
+import { getStatus, createGame, gameInfo, joinGame, getGuesses } from "./services/ggsh.service";
|
|
import './App.css';
|
|
import './App.css';
|
|
|
|
|
|
class InfoComponent extends React.Component {
|
|
class InfoComponent extends React.Component {
|
|
@@ -50,6 +50,33 @@ const GameInfo = ({game}) => {
|
|
);
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+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 {
|
|
class GameMakerComp extends React.Component {
|
|
constructor(props) {
|
|
constructor(props) {
|
|
super(props);
|
|
super(props);
|
|
@@ -75,14 +102,18 @@ class GameMakerComp extends React.Component {
|
|
}
|
|
}
|
|
|
|
|
|
render() {
|
|
render() {
|
|
- if (this.state.loading) {
|
|
|
|
|
|
+ const { loading, game } = this.state;
|
|
|
|
+
|
|
|
|
+ if (loading) {
|
|
return <div><p>Loading...</p></div>
|
|
return <div><p>Loading...</p></div>
|
|
}
|
|
}
|
|
|
|
|
|
- if (this.state.game) {
|
|
|
|
|
|
+ if (game) {
|
|
return (
|
|
return (
|
|
<div>
|
|
<div>
|
|
- <GameInfo game={this.state.game}/>
|
|
|
|
|
|
+ <GameInfo game={game}/>
|
|
|
|
+ <p>Your Guesses:</p>
|
|
|
|
+ <GuessComp gameId={game.gameId} name="testing"/>
|
|
<button onClick={() => this.handleGameJoin()}>Add second user!</button>
|
|
<button onClick={() => this.handleGameJoin()}>Add second user!</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
);
|