Merge remote-tracking branch 'origin/master'

googletrendsgame/src/App.js

@@ -5,6 +5,7 @@ import openSocket from 'socket.io-client';
 import NicknameInput from './components/nicknameInput';
 import CreateRoomInput from './components/createRoomInput';
 import RoomList from './components/RoomList';
+import GameScreen from './components/GameScreen';
 
 const socket = openSocket('129.21.91.149:3000');
 
@@ -12,20 +13,30 @@ class App extends Component {
   constructor(props){
     super(props);
 
-    this.state={
+    this.state = {
       progression: 'register',
-      roomsList: []
+      roomsList: [],
+      roomUpdateData: {}
     }
 
     socket.on('sendRooms', payload => {
-      var rooms = payload.rooms;
+      console.log(payload);
       this.setState({
-        progression: 'roomChoose',
-        roomsList: rooms
+        roomsList: payload.rooms,
+        progression: 'roomChoose'
       })
     });
+
+    socket.on('roomUpdate', payload => {
+      this.setState({
+        progression: 'gameScreen',
+        roomUpdateData: payload
+      })
+    });
+
     this.modifyStateToCreateRoom = this.modifyStateToCreateRoom.bind(this);
     this.modifyStateToRoomsScreen = this.modifyStateToRoomsScreen.bind(this);
+    this.modifyStateToGameScreen = this.modifyStateToGameScreen.bind(this);
   }
 
   modifyStateToCreateRoom() {
@@ -36,17 +47,16 @@ class App extends Component {
 
   modifyStateToGameScreen() {
     this.setState({
-      progression: ''
-    })
+      progression: 'gameScreen'
+    });
   }
 
   modifyStateToRoomsScreen(){
     this.setState({
       progression: 'roomChoose'
-    })
+    });
   }
 
-
   render() {
     if (this.state.progression === 'register') {
       return(
@@ -54,12 +64,16 @@ class App extends Component {
       )
     } else if(this.state.progression === 'roomChoose') {
         return(
-          <RoomList stateModifier={this.modifyStateToCreateRoom} roomArray = {this.state.roomsList}/>
+          <RoomList socket = {socket} stateModifier={this.modifyStateToCreateRoom} roomsArray = {this.state.roomsList} />
         )
 
     } else if (this.state.progression === 'createRoom') {
       return(
-        <CreateRoomInput goBack={this.modifyStateToRoomsScreen} socket = {socket}/>
+        <CreateRoomInput  goToRoom={this.modifyStateToGameScreen} socket = {socket} />
+      )
+    } else if (this.state.progression === 'gameScreen') {
+      return(
+        <GameScreen socket = {socket} gameData={this.state.roomUpdateData} />
       )
     }
   }

googletrendsgame/src/components/GameScreen.js

@@ -1 +1,50 @@
 import React, {Component} from 'react';
+import UserList from './UserList';
+import WordInput from './wordInput';
+
+export default class GameScreen extends Component{
+  constructor(props){
+    super(props);
+
+    console.log(this.props.gameData);
+
+    this.state={
+      inputValue: ''
+    }
+  }
+
+
+
+    render(){
+      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/RoomList.js

@@ -3,17 +3,26 @@ import RoomListItem from './RoomListItem';
 import {modifyStateToCreateRoom} from '../App'
 
 export default (props) => {
-  let rooms = props.roomArray;
+  let rooms = props.roomsArray;
+  console.log(props);
   if (rooms.length != 0) {
-      let roomsList = rooms.map((room) =>
-      <RoomListItem roomName={room.name} private={room.passwordBool} capacity={room.capacity} occupancy={room.occupants} />
-    );
+    const roomNameArray = rooms.map(room => room.name);
+    const publicPrivateArray = rooms.map(room => room.passwordBool);
+    const capacityArray = rooms.map(room => room.capacity);
+    const occupancyArray = rooms.map(room => room.occupants)
+
+    var roomsArray = [];
+
+    for(var i = 0; i < roomNameArray.length; i++){
+      roomsArray.push(<RoomListItem roomName={roomNameArray[i]} occupancy={occupancyArray[i]} private={publicPrivateArray[i]} capcity={capacityArray[i]} socket={props.socket}/>);
+    }
+
     return(
       <div>
-       <div>{roomsList}</div>
+        <div>{roomsArray}</div>
        <button onClick={props.stateModifier}>Create Room</button>
       </div>
-    );
+    )
   } else {
     return (
       <div>

googletrendsgame/src/components/RoomListItem.js

@@ -1,17 +1,47 @@
-import React from 'react';
+import React, {Component} from 'react';
 
-export default (props) => {
-  var privateString =''
-  if (props.private === false){
-    privateString = "Public"
+export default class RoomListItem extends Component {
+  constructor(props){
+    super(props);
+
+    this.state={
+      term:''
+    }
+
+    this.onInputChange = this.onInputChange.bind(this);
+    this.buttonClickHandler = this.buttonClickHandler.bind(this);
+  }
+
+
+  onInputChange(event) {
+    this.setState( { term: event.target.value });
+  }
+
+  buttonClickHandler(event){
+    this.props.socket.emit('joinRoom', {roomName: this.props.roomName, password: this.state.term})
+  }
+
+
+render(){
+  if (this.props.private === 'false'){
+    return(
+      <div>
+        <h1>{this.props.roomName}'s Room</h1>
+        <h3>{this.props.occupancy}/{this.props.capacity}</h3>
+        <h5>Public</h5>
+        <button type="submit" onClick={this.buttonClickHandler}>Join Room</button>
+      </div>
+    );
   } else {
-    privateString = "Private"
+    return(
+      <div>
+        <h1>{this.props.roomName}'s Room</h1>
+        <h3>{this.props.occupancy}/{this.props.capacity}</h3>
+        <h5>Private</h5>
+        <input onChange={this.onInputChange} placeholder="Password"></input>
+        <button type='submit' onClick={this.buttonClickHandler}>Join Room</button>
+      </div>
+    )
   }
-  return(
-    <div>
-      <h1>{props.roomName}'s Room</h1>
-      <h3>{props.occupancy}/{props.capacity}</h3>
-      <h5>{privateString}</h5>
-    </div>
-  )
+}
 }

googletrendsgame/src/components/User.js

@@ -2,31 +2,32 @@ import React from 'react';
 import FontAwesome from 'react-fontawesome';
 
 export default (props) => {
-  const name = this.props.name;
-  const score = this.props.score;
+  console.log('entered user obj')
+  const name = props.name;
+  const score = props.score;
   var word;
-  if (this.props.word === ''){
+  if (props.word === ''){
     word = 'true'
   } else {
     word = 'false'
   }
-
-
     if (word === 'true') {
+      console.log('Word is true');
       return(
-      <li>
-        <div>{name}</div>
-        <div>{score}</div>
+      <div>
+        <div>Name: {name}</div>
+        <div>Score: {score}</div>
         <FontAwesome name='check-circle' />
-      </li>
+      </div>
     )
   } else {
+    console.log('Word is false')
     return (
-      <li>
+      <div>
         <div>Name: {name}</div>
         <div>Score: {score}</div>
         <FontAwesome name='times-circle' />
-      </li>
+      </div>
     )
   }
 }

googletrendsgame/src/components/UserList.js

@@ -2,14 +2,26 @@ import React from 'react';
 import User from './User'
 
 export default (props) => {
-  var users = props.users;
+  console.log(props.gameDataPassed);
+
+  const nameArray = props.gameDataPassed.users.map(name => name.name);
+  const scoreArray = props.gameDataPassed.users.map(score => score.score);
+  const wordArray = props.gameDataPassed.users.map(word => word.word);
+
+  console.log(nameArray);
+  console.log(scoreArray);
+  console.log(wordArray);
+
+  var users = [];
+
+  for(var i = 0; i < nameArray.length; i++){
+    users.push(<User name={nameArray[i]} score={scoreArray[i]} word={wordArray[i]} />);
+  }
 
-  var userList = users.map((user) =>
-    <User name={user.name} score={user.score} word={user.word}>
-  );
   return(
+
     <div>
-      <ol> {userList} </ol>
+      {users}
     </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,9 +25,11 @@ 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', {})
+    //this.props.goToRoom()
   }
 
   render(){
@@ -36,7 +38,7 @@ export default class CreateRoomInput extends Component {
         <input type="password" placeholder="Password" onChange = {this.onInputChangePass} value={this.state.passwordFieldValue} />
         <input type='number' placeholder="Max room members" onChange = {this.onInputChangeCapacity} value={this.state.capacityFieldValue} />
         <span>
-          <ActiveButton goBack={this.props.goBack} passInput={this.state.passwordFieldValue} capacityInput={this.state.capacityFieldValue} type='createRoom' />
+          <ActiveButton passInput={this.state.passwordFieldValue} capacityInput={this.state.capacityFieldValue} type='createRoom' />
         </span>
       </form>
     )

googletrendsgame/src/components/nicknameInput.js

@@ -19,6 +19,7 @@ export default class NicknameInput extends Component {
       event.preventDefault();
 
       this.props.socket.emit('register', this.state.fieldValue);
+      console.log("Sent Registration.")
       this.setState({fieldValue: ''})
   }
 

googletrendsgame/src/components/wordInput.js

@@ -1,12 +1,44 @@
 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.onInputChange = this.onInputChange.bind(this);
+    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);
+    this.setState({
+      fieldValue: ''
+    });
+  }
+
+  render() {
+    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>
+      )
+    }
   }
 }