You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.4 KiB
58 lines
1.4 KiB
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);
|
|
console.log("Sent Registration.")
|
|
this.setState({fieldValue: ''})
|
|
}
|
|
|
|
render() {
|
|
return(
|
|
<div className="container-fluid game">
|
|
<div className="row">
|
|
|
|
<div className="col-xs-12 col-sm-7">
|
|
|
|
<a className="logo">
|
|
<div>WHAT</div>
|
|
<div>THE </div>
|
|
<div>TREND?!</div>
|
|
</a>
|
|
|
|
<div className="game__main">
|
|
<form onSubmit={this.sendNickname}>
|
|
<input className="login__input" maxLength="30" placeholder="Nickname" onChange = {this.onInputChange} value={this.state.fieldValue} />
|
|
<span>
|
|
<ActiveButton input = {this.state.fieldValue} type='register' />
|
|
</span>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-xs-12 col-sm-5 game__sidebar">
|
|
|
|
<canvas className="scene scene--full" id="scene" ></canvas>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|