From 1f16c1c0b488230a32f2e33bec6f55eafb7078c8 Mon Sep 17 00:00:00 2001 From: Unknown Date: Sat, 27 Jan 2018 19:54:15 -0500 Subject: [PATCH] Front End Socket communication works! --- googletrendsgame/src/App.js | 21 ++++------- googletrendsgame/src/components/GameScreen.js | 0 googletrendsgame/src/components/RoomList.js | 0 .../src/components/RoomListItem.js | 0 .../src/components/activeButton.js | 17 +++++++++ .../src/components/nicknameInput.js | 35 +++++++++++++++++++ 6 files changed, 59 insertions(+), 14 deletions(-) create mode 100644 googletrendsgame/src/components/GameScreen.js create mode 100644 googletrendsgame/src/components/RoomList.js create mode 100644 googletrendsgame/src/components/RoomListItem.js create mode 100644 googletrendsgame/src/components/activeButton.js diff --git a/googletrendsgame/src/App.js b/googletrendsgame/src/App.js index 3b77bf4..483daf4 100644 --- a/googletrendsgame/src/App.js +++ b/googletrendsgame/src/App.js @@ -2,6 +2,9 @@ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import openSocket from 'socket.io-client'; +import NicknameInput from './components/NicknameInput'; + +const socket = openSocket('129.21.91.149:3000'); class App extends Component { constructor(props){ @@ -22,23 +25,13 @@ class App extends Component { } 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() { - if(this.state.progression === 'register'){ - return( -
At least I can read the goddamn state
- ); - } else { - return( -
FUBAR
- ); - } + return( + + ) } } diff --git a/googletrendsgame/src/components/GameScreen.js b/googletrendsgame/src/components/GameScreen.js new file mode 100644 index 0000000..e69de29 diff --git a/googletrendsgame/src/components/RoomList.js b/googletrendsgame/src/components/RoomList.js new file mode 100644 index 0000000..e69de29 diff --git a/googletrendsgame/src/components/RoomListItem.js b/googletrendsgame/src/components/RoomListItem.js new file mode 100644 index 0000000..e69de29 diff --git a/googletrendsgame/src/components/activeButton.js b/googletrendsgame/src/components/activeButton.js new file mode 100644 index 0000000..cbc1da9 --- /dev/null +++ b/googletrendsgame/src/components/activeButton.js @@ -0,0 +1,17 @@ +import React, { Component } from 'react'; + +export default class activeButton extends Component { + + render(){ + if (this.props.input != ''){ + return( + + ) + } else { + return( + + ) + } + } + +} diff --git a/googletrendsgame/src/components/nicknameInput.js b/googletrendsgame/src/components/nicknameInput.js index e69de29..9693e6d 100644 --- a/googletrendsgame/src/components/nicknameInput.js +++ b/googletrendsgame/src/components/nicknameInput.js @@ -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( +
+ + + + +
+ ) + } +}