MineSeeker/assets/js/mine-seeker/user/user.js

import React from 'react';

class User extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name: '...',
      desc: '',
      active: props.active,
      color: 'blue' === props.color ? 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 = 1 === this.state.color ? '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" /></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>
    );
  }
}

export default User;