Merge remote-tracking branch 'origin/master'

6 years ago · 8bb6bc5983
--- a/googletrendsgame/public/index.html
+++ b/googletrendsgame/public/index.html
@ -19,7 +19,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
    <title>Google Trends Game</title>
  </head>
  <body>
    <noscript>
--- a/googletrendsgame/src/App.js
+++ b/googletrendsgame/src/App.js
@ -3,6 +3,8 @@ 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 RoomList from './components/RoomList';

 const socket = openSocket('129.21.91.149:3000');

@ -11,27 +13,37 @@ class App extends Component {
    super(props);

    this.state={
      progression: '',
      progression: 'createRoom',
      roomList: []
    }
  }

  renderRooms(payload) {
    this.setState({
      roomList: payload,
      progression: 'register'
    });
    console.log(this.state.roomList);
  }

  componentDidMount(){
  }

  stateHandler(){
    socket.on('sendRooms', payload => this.setState({
    progression: 'roomChoose',
    roomList: payload.rooms
    }));
  }

  render() {
    return(
      <NicknameInput socket = {socket}/>
    )
    if (this.state.progression === 'register') {
      return(
        <NicknameInput socket = {socket}/>
      )
    } else if(this.state.progression === 'roomChoose') {

        return(
          <RoomList roomArray = {this.state.roomList}/>
        )

    } else if (this.state.progression === 'createRoom') {
      return(
        <CreateRoomInput socket = {socket}/>
      )
    }
  }
 }

--- a/googletrendsgame/src/components/RoomList.js
+++ b/googletrendsgame/src/components/RoomList.js
@ -0,0 +1,19 @@
 import React, { Component } from 'react';
 import RoomListItem from 'roomListItem';

 class RoomList extends Component {

  renderRooms(roomArray) {
      return(
        <RoomListItem key = {room.name} roomName = {room.name} private = {room.passwordBool} capacity = {room.capacity} occupancy = {room.occupants} />
      )
  }

  render(){
    return(
      <div>
        {this.props.roomArray.map(this.renderRooms)}
      </div>
    )
  }
 }
--- a/googletrendsgame/src/components/RoomListItem.js
+++ b/googletrendsgame/src/components/RoomListItem.js
@ -0,0 +1,16 @@
 import React from 'react';

 export default (props) => {
  if (props.private = false){
    const privateString = "Public"
  } else {
    const privateString = "Private"
  }
  return(
    <div>
      <h1>{props.roomName}</h1>
      <h3>`${props.occupancy}/${props.capacity}`</h3>
      <p>{privateString}</p>
    </div>
  )
 }
--- a/googletrendsgame/src/components/activeButton.js
+++ b/googletrendsgame/src/components/activeButton.js
@ -1,16 +1,30 @@
 import React, { Component } from 'react';
 import ROOM_CAPACITY from '../App'

 export default class activeButton extends Component {

  render(){
    if (this.props.input != ''){
      return(
        <button>Let's play!</button>
      )
    } else {
      return(
        <button>Enter a nickname.</button>
      )
    switch (this.props.type) {
      case 'register':
        if(this.props.input != ''){
          return(
            <button>Let's play!</button>
          )
        } else {
          return(
            <button disabled>Enter a nickname to play.</button>
          )
        }
      case 'createRoom':
        if(this.props.passInput != '' && this.props.capacityInput != '' && this.props.capacityInput <= 25 && this.props.capacityInput>=2 && this.props.capacityInput.length <= 2){
          return(
            <button>Create Room</button>
          )
        } else {
          return(
            <button disabled>Enter password and capacity to create a room.</button>
          )
        }
    }
  }

--- a/googletrendsgame/src/components/createRoomInput.js
+++ b/googletrendsgame/src/components/createRoomInput.js
@ -0,0 +1,45 @@
 import React, { Component } from 'react';
 import ActiveButton from './activeButton';

 export default class CreateRoomInput extends Component {
  constructor(props){
    super(props);

    this.state={
      passwordFieldValue: '',
      capacityFieldValue:''
    }

    this.onInputChangePass = this.onInputChangePass.bind(this);
    this.onInputChangeCapacity = this.onInputChangeCapacity.bind(this);
    this.sendRoomData = this.sendRoomData.bind(this);
  }

  onInputChangePass(event) {
    this.setState({ passwordFieldValue: event.target.value });
  }

  onInputChangeCapacity(event) {
    this.setState({ capacityFieldValue: event.target.value});
  }

  sendRoomData(event){
    event.preventDefault();

    this.props.socket.emit('createRoom', {password: this.state.passwordFieldValue, capacity: this.state.capacityFieldValue});
    this.setState({ passwordFieldValue: '', capacityFieldValue: '' });
  }

  render(){
    return(
      <form onSubmit={this.sendRoomData}>
        <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 passInput={this.state.passwordFieldValue} capacityInput={this.state.capacityFieldValue} type='createRoom' />
        </span>
      </form>
    )
  }

 }
--- a/googletrendsgame/src/components/nicknameInput.js
+++ b/googletrendsgame/src/components/nicknameInput.js
@ -27,7 +27,7 @@ export default class NicknameInput extends Component {
       <form onSubmit={this.sendNickname}>
        <input placeholder="Enter a nickname..." onChange = {this.onInputChange} value={this.state.fieldValue} />
        <span>
          <ActiveButton className = "" input = {this.state.fieldValue} />
          <ActiveButton input = {this.state.fieldValue} type='register' />
        </span>
       </form>
     )