Browse Source

Auto stash before merge of "master" and "origin/master"

master
Unknown 6 years ago
parent
commit
8e6c162d5e
9 changed files with 148 additions and 50 deletions
  1. +24
    -11
      googletrendsgame/src/App.js
  2. +28
    -0
      googletrendsgame/src/components/GameScreen.js
  3. +15
    -6
      googletrendsgame/src/components/RoomList.js
  4. +43
    -13
      googletrendsgame/src/components/RoomListItem.js
  5. +12
    -11
      googletrendsgame/src/components/User.js
  6. +20
    -6
      googletrendsgame/src/components/UserList.js
  7. +3
    -1
      googletrendsgame/src/components/createRoomInput.js
  8. +1
    -0
      googletrendsgame/src/components/nicknameInput.js
  9. +2
    -2
      googletrendsgame/src/components/wordInput.js

+ 24
- 11
googletrendsgame/src/App.js View File

@ -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} />
)
}
}

+ 28
- 0
googletrendsgame/src/components/GameScreen.js View File

@ -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} />
)
};
}

+ 15
- 6
googletrendsgame/src/components/RoomList.js View File

@ -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>

+ 43
- 13
googletrendsgame/src/components/RoomListItem.js View File

@ -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>
)
}
}

+ 12
- 11
googletrendsgame/src/components/User.js View File

@ -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>
)
}
}

+ 20
- 6
googletrendsgame/src/components/UserList.js View File

@ -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>
);
)
}

+ 3
- 1
googletrendsgame/src/components/createRoomInput.js View File

@ -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>
)

+ 1
- 0
googletrendsgame/src/components/nicknameInput.js View File

@ -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: ''})
}

+ 2
- 2
googletrendsgame/src/components/wordInput.js View File

@ -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
}
}

Loading…
Cancel
Save