Submit from Client works

Does what it says on the tin, need to add progression to next round next.

googletrendsgame/src/App.js

@@ -72,7 +72,7 @@ class App extends Component {
       )
     } else if (this.state.progression === 'gameScreen') {
       return(
-        <GameScreen gameData={this.state.roomUpdateData} />
+        <GameScreen socket = {socket} gameData={this.state.roomUpdateData} />
       )
     }
   }

googletrendsgame/src/components/GameScreen.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import UserList from './UserList';
+import WordInput from './wordInput';
 
 export default class GameScreen extends Component{
   constructor(props){
@@ -23,7 +24,10 @@ export default class GameScreen extends Component{
 
     render(){
       return(
-        <UserList gameDataPassed={this.props.gameData} userArray = {this.props.gameData.users} />
+        <div>
+          <UserList gameDataPassed={this.props.gameData} userArray = {this.props.gameData.users} />
+          <WordInput socket={this.props.socket}/>
+        </div>
       )
     };
   }

googletrendsgame/src/components/RoomListItem.js

@@ -39,7 +39,7 @@ render(){
         <h3>{this.props.occupancy}/{this.props.capacity}</h3>
         <h5>Private</h5>
         <input onChange={this.onInputChange} placeholder="Password"></input>
-        <button type='submit' onClick={this.props.socket.emit('joinRoom', {roomName: this.props.roomName, password: this.state.term })}>Join Room</button>
+        <button type='submit' onClick={this.buttonClickHandler}>Join Room</button>
       </div>
     )
   }

googletrendsgame/src/components/activeButton.js

@@ -26,6 +26,16 @@ export default class activeButton extends Component {
             <button disabled>Enter password (optional) and capacity to create a room.</button>
           )
         }
+      case 'inputWord':
+        if(this.props.input != '' && this.props.input <= 20){
+          return(
+            <button>Submit my answer!</button>
+          )
+        } else {
+          return(
+            <button disabled>Enter a term!</button>
+          )
+        }
     }
   }
 

googletrendsgame/src/components/createRoomInput.js

@@ -25,7 +25,7 @@ export default class CreateRoomInput extends Component {
 
   sendRoomData(event){
     event.preventDefault();
-
+     console.log("sendRoomData called");
     this.props.socket.emit('createRoom', {password: this.state.passwordFieldValue, capacity: this.state.capacityFieldValue});
     this.setState({ passwordFieldValue: '', capacityFieldValue: '' });
     this.props.socket.emit('joinRoom', {})

googletrendsgame/src/components/wordInput.js

@@ -1,12 +1,35 @@
 import React, {Component} from 'react';
+import ActiveButton from './activeButton';
 
-class wordInput extends Component {
+export default class wordInput extends Component {
   constructor(props){
     super(props);
 
     this.state={fieldValue:''}
 
     this.onInputChange = this.onInputChange.bind(this);
-    this.onInputChange
+    this.onSubmit = this.onSubmit.bind(this);
+  }
+
+  onInputChange(event){
+      console.log(event.target.value)
+      this.setState({ fieldValue: event.target.value });
+  }
+
+  onSubmit(event){
+    event.preventDefault();
+    console.log(this.state.fieldValue);
+    this.props.socket.emit('submitWord', this.state.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>
+    )
   }
 }