show left mines after end #2 && reduce network traffic && better active field checking method

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

@@ -28,19 +28,25 @@ class MineSeeker extends React.Component {
         return text;
     }
 
-    /** game end control */
+    /** THE END */
     makeGameEndIfItEnds(bluePoints, redPoints) {
         var redWins = redPoints > 2,
             blueWins = bluePoints > 2;
 
         if (redWins || blueWins) {
+            this.refs.gridControl.state.sound.won.play();
+
             this.refs.gridControl.setState({
                 overlay: true,
                 overlayTitle: (redWins ? 'Red' : 'Blue') + " wins the game!",
                 overlaySubTitle: "Play again!"
             });
 
-            this.refs.gridControl.state.sound.won.play();
+            this.refs.gridControl.showLeftMines();
+
+            this.refs.gridControl.refs.userControl.setState({ activePlayer: false});
+            this.refs.gridControl.refs.userControl.refs.red.setState({ active: false });
+            this.refs.gridControl.refs.userControl.refs.blue.setState({ active: false });
         }
     }
 
@@ -107,7 +113,7 @@ class MineSeeker extends React.Component {
                                         this.refs.gridControl.refs.userControl.setState({bombSelected: payload.data.bomb});
                                         this.refs.gridControl.stepEvent(payload.data.coords);
 
-                                        /** End-game control */
+                                        /** THE END */
                                         this.makeGameEndIfItEnds(
                                             this.refs.gridControl.refs.userControl.refs.blue.state.mines,
                                             this.refs.gridControl.refs.userControl.refs.red.state.mines
@@ -159,6 +165,8 @@ class MineSeeker extends React.Component {
     onClick(coords) {
         var activePlayer = this.refs.gridControl.refs.userControl.state.activePlayer ? 'blue' : 'red';
 
+        /** if the clicked field is NEVER CLICKED */
+        if (this.refs.gridControl.checkFieldHasBeenNeverClicked(coords[0], coords[1])) {
             /** Player step and it is the current player */
             if (activePlayer === this.refs.gridControl.state.webPlayer) {
                 this.refs.gridControl.stepEvent(coords);
@@ -175,7 +183,7 @@ class MineSeeker extends React.Component {
                                 : 0
                         );
 
-            /** End-game control */
+                /** THE END */
                 this.makeGameEndIfItEnds(bluePoints, redPoints);
 
                 this.state.session
@@ -188,6 +196,7 @@ class MineSeeker extends React.Component {
                     });
             }
         }
+    }
 
     render() {
         return (

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

@@ -47,6 +47,10 @@ class GridControl extends React.Component {
         return typeof this.state.grid[row] !== 'undefined' && typeof this.state.grid[row][col] !== 'undefined' && this.state.grid[row][col] !== 'm';
     }
 
+    checkFieldHasBeenNeverClicked(row, col) {
+        return this.state.updatedFieldCache.indexOf(this.refString(row, col)) < 0 && !this.refs[this.refString(row, col)].state.active;
+    }
+
     getBombRadius(row, col) {
         let isBombTargetCenter = row > 1 && row < this.state.grid.length - 2 && col > 1 && col < this.state.grid[row].length - 2;
 
@@ -146,6 +150,20 @@ class GridControl extends React.Component {
         }
     }
 
+    showLeftMines() {
+        for (let i = 0, j = this.state.grid.length; i < j; i++) {
+            for (let k = 0, l = this.state.grid[i].length; k < l; k++) {
+                let currentField = this.refs[this.refString(i, k)];
+
+                if (this.state.grid[i][k] === 'm' && this.checkFieldHasBeenNeverClicked(i, k)) {
+                    currentField.setState({
+                        currentImage: currentField.state.icons.root + currentField.state.icons.left
+                    });
+                }
+            }
+        }
+    }
+
     /** set __ACTIVE__ player in the UserControl !!!! */
     changePlayer(idx, max, currentObject) {
         var userControl = this.refs.userControl,
@@ -183,7 +201,7 @@ class GridControl extends React.Component {
             active: true
         });
 
-        if (this.state.updatedFieldCache.indexOf(this.refString(row, col)) < 0) {
+        if (this.checkFieldHasBeenNeverClicked(row, col)) {
             this.state.updatedFieldCache.push(this.refString(row, col));
         }
 
@@ -215,8 +233,6 @@ class GridControl extends React.Component {
             activePlayer = userControl.state.activePlayer ? 'blue' : 'red',
             inactivePlayer = userControl.state.activePlayer ? 'red' : 'blue';
 
-        /** if the clicked field is NEVER CLICKED */
-        if (!gridFieldControl.state.active) {
         /** update LAST CLICKED grid field */
         if (!justOnFirstIteration) {
             if (this.state.lastClicked[activePlayer] !== null) {
@@ -279,7 +295,6 @@ class GridControl extends React.Component {
             });
         }
     }
-    }
 
     /**
      * Show elems w/ conditions
@@ -301,6 +316,8 @@ class GridControl extends React.Component {
      * @param coords
      */
     stepEvent(coords) {
+        /** if the clicked field is NEVER CLICKED */
+        if (this.checkFieldHasBeenNeverClicked(coords[0], coords[1])) {
             var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
 
             this.state.foundUserMineCache = 0;
@@ -348,6 +365,7 @@ class GridControl extends React.Component {
                 this.bombClear();
             }
         }
+    }
 
     /**
      * On Hover when you want to drop BOMB

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

@@ -27,7 +27,8 @@ class GridField extends React.Component {
                     lastRed: 'bg-last-red-outbg.png',
                     crosshair: 'bg-target-outbg.png',
                     crosshairBomb: 'bg-target-bomb-outbg.png'
-                }
+                },
+                left: 'bg-left-mine-outbg.png'
             }
         };
     }