add desc to every user #9

src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css

@@ -294,8 +294,8 @@ main {
 }
 
 #mine-wrapper .game-wrapper .users .user-container .user-caret {
-    height: 35px;
-    font-size: 35px;
+    height: 30px;
+    font-size: 30px;
     text-align: center;
     line-height: 15px;
 }
@@ -309,9 +309,20 @@ main {
 }
 
 #mine-wrapper .game-wrapper .users .user-container .user-desc {
-    height: 60px;
+    height: 65px;
+    font-size: 14px;
+    text-align: center;
 }
 
+#mine-wrapper .game-wrapper .users .user-container.user-blue .user-desc {
+    color: #0b3776;
+}
+
+#mine-wrapper .game-wrapper .users .user-container.user-red .user-desc {
+    color: #fdf612;
+}
+
+
 #mine-wrapper .game-wrapper .users .user-container .user-control {
     background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 0%, rgba(125, 185, 232, 0) 100%);
     background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 0%, rgba(125, 185, 232, 0) 100%);

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

@@ -45,6 +45,8 @@ class MineSeeker extends React.Component {
             this.refs.gridControl.showLeftMines();
 
             this.refs.gridControl.refs.userControl.setState({activePlayer: false});
+            this.refs.gridControl.refs.userControl.refs.red.setState({desc: ""});
+            this.refs.gridControl.refs.userControl.refs.blue.setState({desc: ""});
         }
     }
 
@@ -82,6 +84,17 @@ class MineSeeker extends React.Component {
                         this.refs.gridControl.setState({
                             grid: this.state.gameInherited ? JSON.parse(Base64.decode(gridServer)) : gridClient,
                             channel: this.state.channel,
+                            desc: {
+                                buddy: <div>
+                                    Your buddy is <br/>
+                                    making a <br/>
+                                    move.
+                                </div>,
+                                you: <div>
+                                    It is your turn! <br/>
+                                    Make a move.
+                                </div>
+                            },
                             overlay: true,
                             overlayTitle: "We are waiting for your opponent...",
                             overlaySubTitle: this.state.gameAssoc
@@ -146,11 +159,14 @@ class MineSeeker extends React.Component {
 
                                             /** Set up player names w/ server data */
                                             this.refs.gridControl.refs.userControl.refs.red.setState({
-                                                name: payload.users.red !== '' ? payload.users.red : payload.users.redAnon
+                                                name: payload.users.red !== '' ? payload.users.red : payload.users.redAnon,
                                             });
 
                                             this.refs.gridControl.refs.userControl.refs.blue.setState({
-                                                name: payload.users.blue !== '' ? payload.users.blue : payload.users.blueAnon
+                                                name: payload.users.blue !== '' ? payload.users.blue : payload.users.blueAnon,
+                                                desc: this.refs.gridControl.state.webPlayer === 'blue'
+                                                    ? this.refs.gridControl.state.desc.you
+                                                    : this.refs.gridControl.state.desc.buddy
                                             });
 
                                             this.refs.gridControl.setState({overlay: false});

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

@@ -16,6 +16,7 @@ class GridControl extends React.Component {
             env: props.env,
             webPlayer: null,
             grid: null,
+            desc: null,
             renderGridFields: false,
             gridFields: [],
             updatedFieldCache: [],
@@ -178,12 +179,17 @@ class GridControl extends React.Component {
                 activePlayer: userControl.state.activePlayer ? 0 : 1
             });
 
+            /** the desc is inversely because the user.active is not changed yet !!! */
             userControl.refs[activePlayer].setState({
-                active: false
+                active: false,
+                desc: ""
             });
 
             userControl.refs[inactivePlayer].setState({
-                active: true
+                active: true,
+                desc: activePlayer === this.state.webPlayer
+                    ? this.state.desc.buddy
+                    : this.state.desc.you
             });
         }
     }

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

@@ -6,6 +6,7 @@ class User extends React.Component {
 
         this.state = {
             name: "...",
+            desc: "",
             active: props.active,
             color: props.color === 'blue' ? 1 : 0,
             mines: 0,
@@ -57,7 +58,7 @@ class User extends React.Component {
                 </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"></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">