83 lines
2.3 KiB
JavaScript
83 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import User from './user';
|
|
|
|
class UserControl extends React.Component {
|
|
constructor() {
|
|
super();
|
|
|
|
/**
|
|
* activePlayer - red: 0, blue: 1
|
|
* @type {{activePlayer: boolean, mines: number, bombSelected: boolean, foundMines: boolean}}
|
|
*/
|
|
this.state = {
|
|
activePlayer: false,
|
|
mines: 51,
|
|
bombSelected: false,
|
|
foundMines: false,
|
|
};
|
|
}
|
|
|
|
youCanSelectBomb(activePlayer, clickedPlayer) {
|
|
return this.refs[activePlayer].state.haveBomb
|
|
&& this.refs[activePlayer].state.enabledBomb
|
|
&& this.state.activePlayer === clickedPlayer;
|
|
}
|
|
|
|
onClickBombSelector(clickedPlayer) {
|
|
let activePlayer = this.state.activePlayer ? 'blue' : 'red';
|
|
|
|
if (this.youCanSelectBomb(activePlayer, clickedPlayer)) {
|
|
this.state.bombSelected = !this.state.bombSelected;
|
|
|
|
if (!this.state.bombSelected) {
|
|
this.props.bombClear();
|
|
}
|
|
}
|
|
}
|
|
|
|
getResignClass(webPlayer) {
|
|
let activePlayer = 1 === this.state.activePlayer ? 'blue' : 'red';
|
|
return 'resign' + (webPlayer !== activePlayer ? ' disabled' : '');
|
|
}
|
|
|
|
activeMines() {
|
|
return 'active-mines' + (this.state.foundMines ? ' found-mine' : '');
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="users">
|
|
<User
|
|
ref="blue"
|
|
color="blue"
|
|
webPlayer={this.props.webPlayer}
|
|
active={1 === this.state.activePlayer}
|
|
onClickBombSelector={this.onClickBombSelector.bind(this, 1)}
|
|
/>
|
|
<div className="active-mines-container">
|
|
<i className="fa fa-star" />
|
|
<div className={this.activeMines()}>
|
|
<div className="active-mines-nbr">{this.state.mines}</div>
|
|
<div className="active-mines-shine" />
|
|
</div>
|
|
<i className="fa fa-star" />
|
|
</div>
|
|
<div className="clear" />
|
|
<User
|
|
ref="red"
|
|
color="red"
|
|
webPlayer={this.props.webPlayer}
|
|
active={0 === this.state.activePlayer}
|
|
onClickBombSelector={this.onClickBombSelector.bind(this, 0)}
|
|
/>
|
|
<button className={this.getResignClass(this.props.webPlayer)} onClick={this.props.resign}>
|
|
<div className="resign-shine" />
|
|
Resign
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default UserControl;
|