From 8e6c162d5e7a519a5f2da19283cb105b13b12a18 Mon Sep 17 00:00:00 2001
From: Unknown <jpramassini@gmail.com>
Date: Sun, 28 Jan 2018 05:58:35 -0500
Subject: [PATCH 1/3] Auto stash before merge of "master" and "origin/master"

---
 googletrendsgame/src/App.js                   | 35 ++++++++----
 googletrendsgame/src/components/GameScreen.js | 28 ++++++++++
 googletrendsgame/src/components/RoomList.js   | 21 +++++--
 .../src/components/RoomListItem.js            | 56 ++++++++++++++-----
 googletrendsgame/src/components/User.js       | 23 ++++----
 googletrendsgame/src/components/UserList.js   | 26 +++++++--
 .../src/components/createRoomInput.js         |  4 +-
 .../src/components/nicknameInput.js           |  1 +
 googletrendsgame/src/components/wordInput.js  |  4 +-
 9 files changed, 148 insertions(+), 50 deletions(-)

diff --git a/googletrendsgame/src/App.js b/googletrendsgame/src/App.js
index 2716b06..a29e512 100644
--- a/googletrendsgame/src/App.js
+++ b/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,29 @@ 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 +46,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 +63,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 gameData={this.state.roomUpdateData} />
       )
     }
   }
diff --git a/googletrendsgame/src/components/GameScreen.js b/googletrendsgame/src/components/GameScreen.js
index ef867d9..e4bf34d 100644
--- a/googletrendsgame/src/components/GameScreen.js
+++ b/googletrendsgame/src/components/GameScreen.js
@@ -1 +1,29 @@
 import React, {Component} from 'react';
+import UserList from './UserList';
+
+export default class GameScreen extends Component{
+  constructor(props){
+    super(props);
+
+    console.log(this.props.gameData);
+
+    this.state={
+      userScore:0,
+      round:1,
+      inputValue: '',
+      currentWord: ''
+    }
+  }
+
+    setInputState(word) {
+      this.setState({
+        input: word
+      });
+    }
+
+    render(){
+      return(
+        <UserList gameDataPassed={this.props.gameData} userArray = {this.props.gameData.users} />
+      )
+    };
+  }
diff --git a/googletrendsgame/src/components/RoomList.js b/googletrendsgame/src/components/RoomList.js
index aa95502..4fe3e8b 100644
--- a/googletrendsgame/src/components/RoomList.js
+++ b/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>
diff --git a/googletrendsgame/src/components/RoomListItem.js b/googletrendsgame/src/components/RoomListItem.js
index af2d943..d47a65f 100644
--- a/googletrendsgame/src/components/RoomListItem.js
+++ b/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.props.socket.emit('joinRoom', {roomName: this.props.roomName, password: this.state.term })}>Join Room</button>
+      </div>
+    )
   }
-  return(
-    <div>
-      <h1>{props.roomName}'s Room</h1>
-      <h3>{props.occupancy}/{props.capacity}</h3>
-      <h5>{privateString}</h5>
-    </div>
-  )
+}
 }
diff --git a/googletrendsgame/src/components/User.js b/googletrendsgame/src/components/User.js
index 4d97ebf..a5a4fdc 100644
--- a/googletrendsgame/src/components/User.js
+++ b/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>
     )
   }
 }
diff --git a/googletrendsgame/src/components/UserList.js b/googletrendsgame/src/components/UserList.js
index f4f173d..80838d5 100644
--- a/googletrendsgame/src/components/UserList.js
+++ b/googletrendsgame/src/components/UserList.js
@@ -2,14 +2,28 @@ 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}
+      <h1>Leader: {props.gameDataPassed.roundWinner}</h1>
+      <h1>Current Word: {props.gameDataPassed.currentWord}</h1>
     </div>
-  );
+  )
 }
diff --git a/googletrendsgame/src/components/createRoomInput.js b/googletrendsgame/src/components/createRoomInput.js
index cf51ed2..0e1c296 100644
--- a/googletrendsgame/src/components/createRoomInput.js
+++ b/googletrendsgame/src/components/createRoomInput.js
@@ -28,6 +28,8 @@ export default class CreateRoomInput extends Component {
 
     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>
     )
diff --git a/googletrendsgame/src/components/nicknameInput.js b/googletrendsgame/src/components/nicknameInput.js
index ae3365f..83a66c5 100644
--- a/googletrendsgame/src/components/nicknameInput.js
+++ b/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: ''})
   }
 
diff --git a/googletrendsgame/src/components/wordInput.js b/googletrendsgame/src/components/wordInput.js
index e57f8e4..4a72751 100644
--- a/googletrendsgame/src/components/wordInput.js
+++ b/googletrendsgame/src/components/wordInput.js
@@ -6,7 +6,7 @@ class wordInput extends Component {
 
     this.state={fieldValue:''}
 
-    //this.onInputChange = this.onInputChange.bind(this);
-    //this.onInputChange
+    this.onInputChange = this.onInputChange.bind(this);
+    this.onInputChange
   }
 }

From 03817b09c923fd0aa7167f1704b493a2d9dd929e Mon Sep 17 00:00:00 2001
From: Unknown <jpramassini@gmail.com>
Date: Sun, 28 Jan 2018 06:46:47 -0500
Subject: [PATCH 2/3] Submit from Client works

Does what it says on the tin, need to add progression to next round next.
---
 googletrendsgame/src/App.js                   |  2 +-
 googletrendsgame/src/components/GameScreen.js |  6 ++++-
 .../src/components/RoomListItem.js            |  2 +-
 .../src/components/activeButton.js            | 10 +++++++
 .../src/components/createRoomInput.js         |  2 +-
 googletrendsgame/src/components/wordInput.js  | 27 +++++++++++++++++--
 6 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/googletrendsgame/src/App.js b/googletrendsgame/src/App.js
index a29e512..0e7b311 100644
--- a/googletrendsgame/src/App.js
+++ b/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} />
       )
     }
   }
diff --git a/googletrendsgame/src/components/GameScreen.js b/googletrendsgame/src/components/GameScreen.js
index e4bf34d..53841f0 100644
--- a/googletrendsgame/src/components/GameScreen.js
+++ b/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>
       )
     };
   }
diff --git a/googletrendsgame/src/components/RoomListItem.js b/googletrendsgame/src/components/RoomListItem.js
index d47a65f..b39ae8b 100644
--- a/googletrendsgame/src/components/RoomListItem.js
+++ b/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>
     )
   }
diff --git a/googletrendsgame/src/components/activeButton.js b/googletrendsgame/src/components/activeButton.js
index e4577d9..fcafd12 100644
--- a/googletrendsgame/src/components/activeButton.js
+++ b/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>
+          )
+        }
     }
   }
 
diff --git a/googletrendsgame/src/components/createRoomInput.js b/googletrendsgame/src/components/createRoomInput.js
index 0e1c296..dcc90be 100644
--- a/googletrendsgame/src/components/createRoomInput.js
+++ b/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', {})
diff --git a/googletrendsgame/src/components/wordInput.js b/googletrendsgame/src/components/wordInput.js
index 4a72751..30451db 100644
--- a/googletrendsgame/src/components/wordInput.js
+++ b/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>
+    )
   }
 }

From e36b80a9df2b7447666dc4cfe86fb5e7f2730491 Mon Sep 17 00:00:00 2001
From: Unknown <jpramassini@gmail.com>
Date: Sun, 28 Jan 2018 07:30:56 -0500
Subject: [PATCH 3/3] Implemented Game States on Front End

---
 googletrendsgame/src/App.js                   |  3 +-
 googletrendsgame/src/components/GameScreen.js | 47 +++++++++++++------
 googletrendsgame/src/components/UserList.js   |  2 -
 googletrendsgame/src/components/wordInput.js  | 25 ++++++----
 4 files changed, 51 insertions(+), 26 deletions(-)

diff --git a/googletrendsgame/src/App.js b/googletrendsgame/src/App.js
index 0e7b311..19de815 100644
--- a/googletrendsgame/src/App.js
+++ b/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);
diff --git a/googletrendsgame/src/components/GameScreen.js b/googletrendsgame/src/components/GameScreen.js
index 53841f0..783fc1b 100644
--- a/googletrendsgame/src/components/GameScreen.js
+++ b/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>
+          )
+        }
     };
   }
diff --git a/googletrendsgame/src/components/UserList.js b/googletrendsgame/src/components/UserList.js
index 80838d5..03ea559 100644
--- a/googletrendsgame/src/components/UserList.js
+++ b/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>
   )
 }
diff --git a/googletrendsgame/src/components/wordInput.js b/googletrendsgame/src/components/wordInput.js
index 30451db..3f88301 100644
--- a/googletrendsgame/src/components/wordInput.js
+++ b/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>
+      )
+    }
   }
 }