91 lines
2.8 KiB
JavaScript
91 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
|
|
class User extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
name: "...",
|
|
desc: "",
|
|
active: props.active,
|
|
color: props.color === 'blue' ? 1 : 0,
|
|
mines: 0,
|
|
srcRoot: '/images/',
|
|
haveBomb: true,
|
|
enabledBomb: true
|
|
};
|
|
}
|
|
|
|
setColor(color) {
|
|
return 'user-container user-' + color;
|
|
}
|
|
|
|
getSrc(color) {
|
|
return this.state.srcRoot + 'bg-flag-' + color + '-outbg.png';
|
|
}
|
|
|
|
getBombBuzzClass(webPlayer) {
|
|
let activePlayer = this.state.color === 1 ? 'blue' : 'red';
|
|
|
|
return "bomb-container" +
|
|
(
|
|
this.state.active && (activePlayer === webPlayer) && this.state.haveBomb && this.state.enabledBomb
|
|
? ' buzz'
|
|
: ''
|
|
);
|
|
}
|
|
|
|
getBomb() {
|
|
let src = this.state.srcRoot;
|
|
|
|
if (this.state.haveBomb) {
|
|
src += this.state.enabledBomb && this.state.active
|
|
? 'bg-bomb-outbg.png'
|
|
: 'bg-bomb-disabled-outbg.png';
|
|
} else {
|
|
src += 'bg-bomb-exploded-outbg.png';
|
|
}
|
|
|
|
return src;
|
|
}
|
|
|
|
getFigure(color) {
|
|
return this.state.srcRoot + 'bg-figure-' + color + '-outbg.png';
|
|
}
|
|
|
|
getCursor(state, color) {
|
|
return state
|
|
? <img src={this.state.srcRoot + 'bg-cursor-' + color + '-outbg.png'} alt="cursor" className="user-cursor"/>
|
|
: '';
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className={this.setColor(this.props.color)}>
|
|
<div className="user-header">
|
|
<div className="user-color">{this.props.color}</div>
|
|
{this.getCursor(this.props.active, this.props.color)}
|
|
<img src={this.getFigure(this.props.color)} alt="figure"/>
|
|
</div>
|
|
<div className="user-name"> {this.state.name} </div>
|
|
<div className="user-caret"><i className="fa fa-caret-down"></i></div>
|
|
<div className="user-desc"> {this.state.desc} </div>
|
|
<div className="user-control">
|
|
<img src={this.getSrc(this.props.color)} alt="flag"/>
|
|
<div className="user-control-mines">
|
|
{this.state.mines}
|
|
</div>
|
|
<div className={this.getBombBuzzClass(this.props.webPlayer)} onClick={this.props.onClickBombSelector}>
|
|
<div className="bomb">
|
|
<img src={this.getBomb()} alt="bomb"/>
|
|
</div>
|
|
</div>
|
|
<div className="clear"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default User;
|