some refactor #13

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

@@ -689,6 +689,10 @@ main {
     display: block;
 }
 
+/*#mine-wrapper .grid .field-wrapper.targeted > img.field-target {*/
+    /*display: block;*/
+/*}*/
+
 /** width = 4 x .field */
 #mine-wrapper .grid .field-wrapper > img.field-bomb-target {
     position: absolute;

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

@@ -71,13 +71,12 @@ class MineSeeker extends React.Component {
                     (gridServer) => {
                         console.info("Grid has been created! Return w/ gameAssoc.");
 
-                        this.state.session = session;
+                        this.setState({session: session});
 
                         /** save session to GridControl */
                         /** render grid fields - #12 */
                         this.refs.gridControl.setState({
                             grid: this.state.gameInherited ? JSON.parse(Base64.decode(gridServer)) : gridClient,
-                            session: this.state.session,
                             channel: this.state.channel,
                             overlay: true,
                             overlayTitle: "We are waiting for your opponent...",
@@ -88,13 +87,7 @@ class MineSeeker extends React.Component {
                         });
 
                         /** setup the web player */
-                        if (this.refs.gridControl.state.webPlayer === null) {
+                        this.refs.gridControl.state.webPlayer === null && this.refs.gridControl.setState({webPlayer: this.state.gameInherited ? 'blue' : 'red'});
-                            if (this.state.gameInherited) {
-                                this.refs.gridControl.state.webPlayer = 'blue';
-                            } else {
-                                this.refs.gridControl.state.webPlayer = 'red';
-                            }
-                        }
 
                         /** Connect - Subscribe */
                         this.state.session.subscribe(
@@ -111,7 +104,7 @@ class MineSeeker extends React.Component {
                                     if (this.refs.gridControl.state.webPlayer !== payload.data.player) {
                                         console.warn('Opponent stepped: Auto-Step process');
 
-                                        this.refs.gridControl.refs.userControl.state.bombSelected = payload.data.bomb;
+                                        this.refs.gridControl.refs.userControl.setState({bombSelected: payload.data.bomb});
                                         this.refs.gridControl.stepEvent(payload.data.coords);
 
                                         /** End-game control */
@@ -128,8 +121,6 @@ class MineSeeker extends React.Component {
                                             (typeof payload.user !== 'undefined' ? payload.user : 'user') + " has been subscribed to the channel!"
                                         );
 
-                                        var activePlayer = this.refs.gridControl.refs.userControl.state.activePlayer ? 'blue' : 'red';
-
                                         /** remove overlay when every user has been came */
                                         this.refs.gridControl.setState({overlay: payload.userCnt < 2});
 

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

@@ -52,21 +52,10 @@ class GridControl extends React.Component {
 
         /** if the (5x5) target not fits the grid */
         if (!isBombTargetCenter) {
-            if (col < 2) {
+            col = col < 2 ? 2 : col;
-                col = 2;
+            row = row < 2 ? 2 : row;
-            }
+            row = row > this.state.grid.length - 3 ? this.state.grid.length - 3 : row;
-
+            col = col > this.state.grid[0].length - 3 ? this.state.grid[0].length - 3 : col;
-            if (row < 2) {
-                row = 2;
-            }
-
-            if (row > this.state.grid.length - 3) {
-                row = this.state.grid.length - 3;
-            }
-
-            if (col > this.state.grid[0].length - 3) {
-                col = this.state.grid[0].length - 3;
-            }
         }
 
         return [
@@ -362,9 +351,10 @@ class GridControl extends React.Component {
 
     /**
      * On Hover when you want to drop BOMB
+     * Target grid field
      * @param coords
      */
-    onHoverWithBomb(coords) {
+    onHoverGridField(coords) {
         if (this.refs.userControl.state.bombSelected) {
             var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
 
@@ -393,7 +383,7 @@ class GridControl extends React.Component {
                                    col={k}
                                    ref={this.refString(i, k)}
                                    key={i + k * Math.random() * 0.5}
-                                   handleHoverOn={this.onHoverWithBomb.bind(this, [i, k])}
+                                   handleHoverOn={this.onHoverGridField.bind(this, [i, k])}
                                    onClick={this.props.onClick.bind(null, [i, k])}/>
                     );
                 }