diff --git a/game.html b/game.html new file mode 100644 index 0000000..2260521 --- /dev/null +++ b/game.html @@ -0,0 +1,74 @@ + + + + + + + Trend Spotter | Game + + + + + + + + + + + + +
+
+ + +
+ + +
jesseg89: 20,005 points
+
Round 4/7
+
+ +
car
+ +
+
You're in dave61's room | 12/20 players
+ Leave Game + +
+ + + + + + + + + + + + + diff --git a/googletrendsgame/src/App.js b/googletrendsgame/src/App.js index 631a556..aaf0a13 100644 --- a/googletrendsgame/src/App.js +++ b/googletrendsgame/src/App.js @@ -2,8 +2,8 @@ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import openSocket from 'socket.io-client'; -import NicknameInput from './components/NicknameInput'; -import CreateRoomInput from './components/CreateRoomInput'; +import NicknameInput from './components/nicknameInput'; +import CreateRoomInput from './components/createRoomInput'; import RoomList from './components/RoomList'; const socket = openSocket('129.21.91.149:3000'); @@ -13,19 +13,26 @@ class App extends Component { super(props); this.state={ - progression: 'createRoom', - roomList: [] + progression: 'register', + roomsList: [] } + this.modifyStateToCreateRoom = this.modifyStateToCreateRoom.bind(this); } - componentDidMount(){ + modifyStateToCreateRoom() { + this.setState({ + progression: 'createRoom' + }); } - stateHandler(){ - socket.on('sendRooms', payload => this.setState({ - progression: 'roomChoose', - roomList: payload.rooms - })); + componentDidMount(){ + socket.on('sendRooms', payload => { + const rooms = payload.rooms; + this.setState({ + progression: 'roomChoose', + roomsList: rooms + }) + }); } render() { @@ -34,9 +41,8 @@ class App extends Component { ) } else if(this.state.progression === 'roomChoose') { - return( - + ) } else if (this.state.progression === 'createRoom') { diff --git a/googletrendsgame/src/components/GameScreen.js b/googletrendsgame/src/components/GameScreen.js index e69de29..ef867d9 100644 --- a/googletrendsgame/src/components/GameScreen.js +++ b/googletrendsgame/src/components/GameScreen.js @@ -0,0 +1 @@ +import React, {Component} from 'react'; diff --git a/googletrendsgame/src/components/RoomList.js b/googletrendsgame/src/components/RoomList.js index ec9f3ca..5b8d5a5 100644 --- a/googletrendsgame/src/components/RoomList.js +++ b/googletrendsgame/src/components/RoomList.js @@ -1,18 +1,25 @@ -import React, { Component } from 'react'; -import RoomListItem from 'roomListItem'; +import React from 'react'; +import RoomListItem from './RoomListItem'; +import {modifyStateToCreateRoom} from '../App' -class RoomList extends Component { - - renderRooms(roomArray) { - return( - - ) - } - - render(){ +export default (props) => { + let rooms = props.roomArray; + console.log(rooms); + if (rooms.length != 0) { + let roomsList = rooms.map((room) => + + ); return(
- {this.props.roomArray.map(this.renderRooms)} +
{roomsList}
+ +
+ ); + } else { + return ( +
+
No current rooms, you should create one!
+
) } diff --git a/googletrendsgame/src/components/RoomListItem.js b/googletrendsgame/src/components/RoomListItem.js index 411a536..91ed786 100644 --- a/googletrendsgame/src/components/RoomListItem.js +++ b/googletrendsgame/src/components/RoomListItem.js @@ -1,10 +1,11 @@ import React from 'react'; export default (props) => { + var privateString ='' if (props.private = false){ - const privateString = "Public" + privateString = "Public" } else { - const privateString = "Private" + privateString = "Private" } return(
diff --git a/googletrendsgame/src/components/User.js b/googletrendsgame/src/components/User.js new file mode 100644 index 0000000..e69de29 diff --git a/googletrendsgame/src/components/activeButton.js b/googletrendsgame/src/components/activeButton.js index a53fb57..d90ab06 100644 --- a/googletrendsgame/src/components/activeButton.js +++ b/googletrendsgame/src/components/activeButton.js @@ -16,7 +16,7 @@ export default class activeButton extends Component { ) } case 'createRoom': - if(this.props.passInput != '' && this.props.capacityInput != '' && this.props.capacityInput <= 25 && this.props.capacityInput>=2 && this.props.capacityInput.length <= 2){ + if(this.props.passInput !== '' && this.props.capacityInput !== '' && this.props.capacityInput <= 25 && this.props.capacityInput>=2 && this.props.capacityInput.length <= 2){ return( ) diff --git a/googletrendsgame/src/components/createRoomInput.js b/googletrendsgame/src/components/createRoomInput.js index 65e4ed3..39cab29 100644 --- a/googletrendsgame/src/components/createRoomInput.js +++ b/googletrendsgame/src/components/createRoomInput.js @@ -9,7 +9,7 @@ export default class CreateRoomInput extends Component { passwordFieldValue: '', capacityFieldValue:'' } - + //test Comment this.onInputChangePass = this.onInputChangePass.bind(this); this.onInputChangeCapacity = this.onInputChangeCapacity.bind(this); this.sendRoomData = this.sendRoomData.bind(this); diff --git a/googletrendsgame/src/components/nicknameInput.js b/googletrendsgame/src/components/nicknameInput.js index 5d395aa..ae3365f 100644 --- a/googletrendsgame/src/components/nicknameInput.js +++ b/googletrendsgame/src/components/nicknameInput.js @@ -25,7 +25,7 @@ export default class NicknameInput extends Component { render() { return(
- +