chg: usr: created the first working solution since 7 yrs #4

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

@@ -2,77 +2,81 @@ import React from 'react';
 import User from './user';
 
 class UserControl extends React.Component {
-    constructor() {
-        super();
+  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
-        };
+    /**
+     * 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();
+      }
     }
+  }
 
-    youCanSelectBomb(activePlayer, clickedPlayer) {
-        return this.refs[activePlayer].state.haveBomb &&
-            this.refs[activePlayer].state.enabledBomb &&
-            this.state.activePlayer === clickedPlayer;
-    }
+  getResignClass(webPlayer) {
+    let activePlayer = 1 === this.state.activePlayer ? 'blue' : 'red';
+    return 'resign' + (webPlayer !== activePlayer ? ' disabled' : '');
+  }
 
-    onClickBombSelector(clickedPlayer) {
-        let activePlayer = this.state.activePlayer ? 'blue' : 'red';
+  activeMines() {
+    return 'active-mines' + (this.state.foundMines ? ' found-mine' : '');
+  }
 
-        if (this.youCanSelectBomb(activePlayer, clickedPlayer)) {
-            this.state.bombSelected = !this.state.bombSelected;
-
-            if (!this.state.bombSelected) {
-                this.props.bombClear();
-            }
-        }
-    }
-
-    getResignClass(webPlayer) {
-        let activePlayer = this.state.activePlayer === 1 ? '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={this.state.activePlayer === 1}
-                      onClickBombSelector={this.onClickBombSelector.bind(this, 1)}/>
-                <div className="active-mines-container">
-                    <i className="fa fa-star"></i>
-                    <div className={this.activeMines()}>
-                        <div className="active-mines-nbr">{this.state.mines}</div>
-                        <div className="active-mines-shine"></div>
-                    </div>
-                    <i className="fa fa-star"></i>
-                </div>
-                <div className="clear"></div>
-                <User ref="red"
-                      color="red"
-                      webPlayer={this.props.webPlayer}
-                      active={this.state.activePlayer === 0}
-                      onClickBombSelector={this.onClickBombSelector.bind(this, 0)}/>
-                <button className={this.getResignClass(this.props.webPlayer)} onClick={this.props.resign}>
-                    <div className="resign-shine"></div>
-                    Resign
-                </button>
-            </div>
-        );
-    }
+  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;

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

@@ -1,90 +1,90 @@
 import React from 'react';
 
 class User extends React.Component {
-    constructor(props) {
-        super(props);
+  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
-        };
+    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';
     }
 
-    setColor(color) {
-        return 'user-container user-' + color;
-    }
+    return src;
+  }
 
-    getSrc(color) {
-        return this.state.srcRoot + 'bg-flag-' + color + '-outbg.png';
-    }
+  getFigure(color) {
+    return this.state.srcRoot + 'bg-figure-' + color + '-outbg.png';
+  }
 
-    getBombBuzzClass(webPlayer) {
-        let activePlayer = this.state.color === 1 ? 'blue' : 'red';
+  getCursor(state, color) {
+    return state
+      ? <img src={this.state.srcRoot + 'bg-cursor-' + color + '-outbg.png'} alt="cursor" className="user-cursor" />
+      : '';
+  }
 
-        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>
+  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;