Implemented Game States on Front End

googletrendsgame/src/App.js

@@ -32,7 +32,8 @@ class App extends Component {
         progression: 'gameScreen',
         roomUpdateData: payload
       })
-    })
+    });
+
     this.modifyStateToCreateRoom = this.modifyStateToCreateRoom.bind(this);
     this.modifyStateToRoomsScreen = this.modifyStateToRoomsScreen.bind(this);
     this.modifyStateToGameScreen = this.modifyStateToGameScreen.bind(this);

googletrendsgame/src/components/GameScreen.js

@@ -9,25 +9,42 @@ export default class GameScreen extends Component{
     console.log(this.props.gameData);
 
     this.state={
-      userScore:0,
-      round:1,
-      inputValue: '',
-      currentWord: ''
+      inputValue: ''
     }
   }
 
-    setInputState(word) {
-      this.setState({
-        input: word
-      });
-    }
+
 
     render(){
-      return(
-        <div>
-          <UserList gameDataPassed={this.props.gameData} userArray = {this.props.gameData.users} />
-          <WordInput socket={this.props.socket}/>
-        </div>
-      )
+      if(this.props.gameData.gameState === 3){
+        return(
+          <div>
+            <h2>Round:</h2>
+            <h1>Results!</h1>
+            <h1>Round Winner{this.props.gameData.roundWinner}</h1>
+            <UserList gameDataPassed={this.props.gameData} />
+          </div>
+        )
+      } else if(this.props.gameData.gameState === 2){
+          console.log('multiple players in lobby')
+          return(
+            <div>
+              <h1>Round: {this.props.gameData.round}</h1>
+
+              <UserList gameDataPassed={this.props.gameData} />
+              <WordInput active='true' socket={this.props.socket} />
+            </div>
+          )
+        } else if (this.props.gameData.gameState === 1){
+          console.log('single player method called')
+          return(
+            <div>
+              <h2>Round: {this.props.gameData.round}</h2>
+              <h1></h1>
+              <UserList gameDataPassed={this.props.gameData} />
+              <WordInput active='false' socket={this.props.socket} />
+            </div>
+          )
+        }
     };
   }

googletrendsgame/src/components/UserList.js

@@ -22,8 +22,6 @@ export default (props) => {
 
     <div>
       {users}
-      <h1>Leader: {props.gameDataPassed.roundWinner}</h1>
-      <h1>Current Word: {props.gameDataPassed.currentWord}</h1>
     </div>
   )
 }

googletrendsgame/src/components/wordInput.js

@@ -20,16 +20,25 @@ export default class wordInput extends Component {
     event.preventDefault();
     console.log(this.state.fieldValue);
     this.props.socket.emit('submitWord', this.state.fieldValue);
+    this.setState({
+      fieldValue: ''
+    });
   }
 
   render() {
-    return(
-      <form onSubmit={this.onSubmit}>
-        <input onChange={this.onInputChange} placeholder="e.g. green" />
-        <span>
-          <button placeholder="Submit my Answer!" type="submit"></button>
-        </span>
-      </form>
-    )
+    if(this.props.active === 'true'){
+      return(
+        <form onSubmit={this.onSubmit}>
+          <input  onChange={this.onInputChange} placeholder="e.g. green" />
+          <span>
+            <button placeholder="Submit my Answer!" type="submit"></button>
+          </span>
+        </form>
+      )
+    } else {
+      return(
+        <h1>Waiting for players...</h1>
+      )
+    }
   }
 }