improve game && start sound creating

src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user-control.js

@@ -11,16 +11,58 @@ class UserControl extends React.Component {
          */
         this.state = {
             activePlayer: 0,
-            mines: 51
+            mines: 51,
+            bombSelected: false,
+            foundMines: false
         };
     }
 
+    onClickBombSelector(clickedPlayer) {
+        var activePlayer = this.state.activePlayer ? 'blue' : 'red';
+
+        if (
+            this.refs[activePlayer].state.haveBomb &&
+            this.refs[activePlayer].state.enabledBomb &&
+            this.state.activePlayer === clickedPlayer
+        ) {
+            this.state.bombSelected = !this.state.bombSelected;
+
+            if (!this.state.bombSelected) {
+                this.props.bombClear();
+            }
+        }
+    }
+
+    activeMines() {
+        return "active-mines" + (this.state.foundMines ? ' found-mine' : '');
+    }
+
     render() {
         return (
-            <div>
-                <User ref="blue" name={this.props.blue}/>
-                <div>Active mines: {this.state.mines} pcs</div>
-                <User ref="red" name={this.props.red}/>
+            <div className="users">
+                <User ref="blue"
+                      color="blue"
+                      name={this.props.blue}
+                      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"
+                      name={this.props.red}
+                      active={this.state.activePlayer === 0}
+                      onClickBombSelector={this.onClickBombSelector.bind(this, 0)}/>
+                <div className="resign">
+                    <div className="resign-shine"></div>
+                    Resign
+                </div>
             </div>
         );
     }

src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user.js

@@ -5,16 +5,69 @@ class User extends React.Component {
         super(props);
 
         this.state = {
-            name: this.props.name,
-            bomb: 1,
-            mines: 0
+            name: props.name,
+            active: props.active,
+            color: props.color === 'blue' ? 1 : 0,
+            mines: 0,
+            haveBomb: true,
+            enabledBomb: true
+        };
+    }
+
+    setColor(color) {
+        return 'user-container user-' + color;
+    }
+
+    getSrc(color) {
+        return 'bundles/mineseeker/images/bg-flag-' + color + '-outbg.png';
+    }
+
+    getBomb() {
+        if (this.state.haveBomb) {
+            if (this.state.enabledBomb && this.state.active) {
+                return 'bundles/mineseeker/images/bg-bomb-outbg.png';
+            } else {
+                return 'bundles/mineseeker/images/bg-bomb-disabled-outbg.png';
+            }
+        } else {
+            return 'bundles/mineseeker/images/bg-bomb-exploded-outbg.png';
         }
     }
 
+    getFigure(color) {
+        return 'bundles/mineseeker/images/bg-figure-' + color + '-outbg.png';
+    }
+
+    getCursor(state, color) {
+        var cursorImg = 'bundles/mineseeker/images/bg-cursor-' + color + '-outbg.png';
+
+        return state
+            ? <img src={cursorImg} alt="cursor" className="user-cursor"/>
+            : '';
+    }
+
     render() {
         return (
-            <div>
-                {this.state.name}: {this.state.mines}
+            <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-control">
+                    <img src={this.getSrc(this.props.color)} alt="flag"/>
+                    <div className="user-control-mines">
+                        {this.state.mines}
+                    </div>
+                    <div className="bomb-container" onClick={this.props.onClickBombSelector}>
+                        <div className="bomb">
+                            <img src={this.getBomb()} alt="bomb"/>
+                        </div>
+                    </div>
+                    <div className="clear"></div>
+                </div>
             </div>
         );
     }