Browse Source

Front End Socket communication works!

master
Unknown 6 years ago
parent
commit
1f16c1c0b4
6 changed files with 59 additions and 14 deletions
  1. +7
    -14
      googletrendsgame/src/App.js
  2. +0
    -0
      googletrendsgame/src/components/GameScreen.js
  3. +0
    -0
      googletrendsgame/src/components/RoomList.js
  4. +0
    -0
      googletrendsgame/src/components/RoomListItem.js
  5. +17
    -0
      googletrendsgame/src/components/activeButton.js
  6. +35
    -0
      googletrendsgame/src/components/nicknameInput.js

+ 7
- 14
googletrendsgame/src/App.js View File

@ -2,6 +2,9 @@ import React, { Component } from 'react';
import logo from './logo.svg'; import logo from './logo.svg';
import './App.css'; import './App.css';
import openSocket from 'socket.io-client'; import openSocket from 'socket.io-client';
import NicknameInput from './components/NicknameInput';
const socket = openSocket('129.21.91.149:3000');
class App extends Component { class App extends Component {
constructor(props){ constructor(props){
@ -22,23 +25,13 @@ class App extends Component {
} }
componentDidMount(){ componentDidMount(){
const socket = openSocket('129.21.91.149:3000');
socket.emit('register', 'User 2');
//socket.emit('createRoom', {password: 'pass', capacity: 4});
socket.emit('joinRoom', {roomName: 'pls', password: 'pass'});
socket.on('sendRooms', payload => this.renderRooms(payload))
} }
render() { render() {
if(this.state.progression === 'register'){
return(
<div>At least I can read the goddamn state</div>
);
} else {
return(
<div>FUBAR</div>
);
}
return(
<NicknameInput socket = {socket}/>
)
} }
} }

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


+ 0
- 0
googletrendsgame/src/components/RoomList.js View File


+ 0
- 0
googletrendsgame/src/components/RoomListItem.js View File


+ 17
- 0
googletrendsgame/src/components/activeButton.js View File

@ -0,0 +1,17 @@
import React, { Component } from 'react';
export default class activeButton extends Component {
render(){
if (this.props.input != ''){
return(
<button>Let's play!</button>
)
} else {
return(
<button>Enter a nickname.</button>
)
}
}
}

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

@ -0,0 +1,35 @@
import React, { Component } from 'react';
import ActiveButton from './activeButton';
export default class NicknameInput extends Component {
constructor(props){
super(props);
this.state = {fieldValue: ''};
this.onInputChange = this.onInputChange.bind(this);
this.sendNickname = this.sendNickname.bind(this);
}
onInputChange(event) {
this.setState({ fieldValue: event.target.value });
}
sendNickname(event){
event.preventDefault();
this.props.socket.emit('register', this.state.fieldValue);
this.setState({fieldValue: ''})
}
render() {
return(
<form onSubmit={this.sendNickname}>
<input placeholder="Enter a nickname..." onChange = {this.onInputChange} value={this.state.fieldValue} />
<span>
<ActiveButton className = "" input = {this.state.fieldValue} />
</span>
</form>
)
}
}

Loading…
Cancel
Save