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,33 +165,36 @@ class MineSeeker extends React.Component {
     onClick(coords) {
         var activePlayer = this.refs.gridControl.refs.userControl.state.activePlayer ? 'blue' : 'red';
 
-        /** Player step and it is the current player */
+        /** if the clicked field is NEVER CLICKED */
-        if (activePlayer === this.refs.gridControl.state.webPlayer) {
+        if (this.refs.gridControl.checkFieldHasBeenNeverClicked(coords[0], coords[1])) {
-            this.refs.gridControl.stepEvent(coords);
+            /** Player step and it is the current player */
+            if (activePlayer === this.refs.gridControl.state.webPlayer) {
+                this.refs.gridControl.stepEvent(coords);
 
-            var mineCache = this.refs.gridControl.state.foundUserMineCache,
+                var mineCache = this.refs.gridControl.state.foundUserMineCache,
-                redPoints = this.refs.gridControl.refs.userControl.refs.red.state.mines + (
+                    redPoints = this.refs.gridControl.refs.userControl.refs.red.state.mines + (
-                        this.refs.gridControl.refs.userControl.refs.red.state.active
+                            this.refs.gridControl.refs.userControl.refs.red.state.active
-                            ? mineCache
+                                ? mineCache
-                            : 0
+                                : 0
-                    ),
+                        ),
-                bluePoints = this.refs.gridControl.refs.userControl.refs.blue.state.mines + (
+                    bluePoints = this.refs.gridControl.refs.userControl.refs.blue.state.mines + (
-                        this.refs.gridControl.refs.userControl.refs.blue.state.active
+                            this.refs.gridControl.refs.userControl.refs.blue.state.active
-                            ? mineCache
+                                ? mineCache
-                            : 0
+                                : 0
-                    );
+                        );
 
-            /** End-game control */
+                /** THE END */
-            this.makeGameEndIfItEnds(bluePoints, redPoints);
+                this.makeGameEndIfItEnds(bluePoints, redPoints);
 
-            this.state.session
+                this.state.session
-                .publish(this.state.channel, {
+                    .publish(this.state.channel, {
-                    'coords': coords,
+                        'coords': coords,
-                    'player': activePlayer,
+                        'player': activePlayer,
-                    'bomb': this.refs.gridControl.refs.userControl.state.bombSelected,
+                        'bomb': this.refs.gridControl.refs.userControl.state.bombSelected,
-                    'redPoints': redPoints,
+                        'redPoints': redPoints,
-                    'bluePoints': bluePoints
+                        'bluePoints': bluePoints
-                });
+                    });
+            }
         }
     }
 

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,70 +233,67 @@ class GridControl extends React.Component {
             activePlayer = userControl.state.activePlayer ? 'blue' : 'red',
             inactivePlayer = userControl.state.activePlayer ? 'red' : 'blue';
 
-        /** if the clicked field is NEVER CLICKED */
+        /** update LAST CLICKED grid field */
-        if (!gridFieldControl.state.active) {
+        if (!justOnFirstIteration) {
-            /** update LAST CLICKED grid field */
+            if (this.state.lastClicked[activePlayer] !== null) {
-            if (!justOnFirstIteration) {
+                this.refs[this.refString(this.state.lastClicked[activePlayer][0], this.state.lastClicked[activePlayer][1])].setState({
-                if (this.state.lastClicked[activePlayer] !== null) {
+                    lastClickedRed: false,
-                    this.refs[this.refString(this.state.lastClicked[activePlayer][0], this.state.lastClicked[activePlayer][1])].setState({
+                    lastClickedBlue: false
-                        lastClickedRed: false,
-                        lastClickedBlue: false
-                    });
-                }
-            }
-
-            this.state.lastClicked[activePlayer] = [x, y];
-
-            /** if you found mine */
-            if (currentObject === 'm') {
-                this.state.foundUserMineCache++;
-
-                if (!justOnFirstIteration) {
-                    /** set last clicked field w/ color */
-                    this.state.lastClicked[activePlayer] = [x, y];
-
-                    this.state.sound[
-                        (userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache) > 20
-                            ? 'warning'
-                            : 'mine'
-                        ].play();
-                }
-
-                /** set current image in field */
-                gridFieldControl.setState({
-                    currentImage: gridFieldControl.state.icons.root + gridFieldControl.state.icons.flag[activePlayer]
-                });
-            } else {
-                this.state.sound.click.play();
-
-                /** set current image in field - WHEN it is a number */
-                if (!isNaN(currentObject)) {
-                    gridFieldControl.setState({
-                        currentImage: currentObject
-                    });
-                }
-            }
-
-            /**
-             * set bombs status - we must add one mine (currentObject === 'm' ? 1 : 0) to current mine
-             * when it found NOW because the status is not refreshed unless the handleGridField() ends
-             */
-            userControl.refs[activePlayer].setState({
-                enabledBomb: userControl.refs[activePlayer].state.mines + (currentObject === 'm' ? 1 : 0) <= userControl.refs[inactivePlayer].state.mines
-            });
-
-            userControl.refs[inactivePlayer].setState({
-                enabledBomb: userControl.refs[activePlayer].state.mines + (currentObject === 'm' ? 1 : 0) >= userControl.refs[inactivePlayer].state.mines
-            });
-
-            /** set-up last clicked */
-            if (!justOnFirstIteration) {
-                gridFieldControl.setState({
-                    lastClickedRed: activePlayer === 'red',
-                    lastClickedBlue: activePlayer === 'blue'
                 });
             }
         }
+
+        this.state.lastClicked[activePlayer] = [x, y];
+
+        /** if you found mine */
+        if (currentObject === 'm') {
+            this.state.foundUserMineCache++;
+
+            if (!justOnFirstIteration) {
+                /** set last clicked field w/ color */
+                this.state.lastClicked[activePlayer] = [x, y];
+
+                this.state.sound[
+                    (userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache) > 20
+                        ? 'warning'
+                        : 'mine'
+                    ].play();
+            }
+
+            /** set current image in field */
+            gridFieldControl.setState({
+                currentImage: gridFieldControl.state.icons.root + gridFieldControl.state.icons.flag[activePlayer]
+            });
+        } else {
+            this.state.sound.click.play();
+
+            /** set current image in field - WHEN it is a number */
+            if (!isNaN(currentObject)) {
+                gridFieldControl.setState({
+                    currentImage: currentObject
+                });
+            }
+        }
+
+        /**
+         * set bombs status - we must add one mine (currentObject === 'm' ? 1 : 0) to current mine
+         * when it found NOW because the status is not refreshed unless the handleGridField() ends
+         */
+        userControl.refs[activePlayer].setState({
+            enabledBomb: userControl.refs[activePlayer].state.mines + (currentObject === 'm' ? 1 : 0) <= userControl.refs[inactivePlayer].state.mines
+        });
+
+        userControl.refs[inactivePlayer].setState({
+            enabledBomb: userControl.refs[activePlayer].state.mines + (currentObject === 'm' ? 1 : 0) >= userControl.refs[inactivePlayer].state.mines
+        });
+
+        /** set-up last clicked */
+        if (!justOnFirstIteration) {
+            gridFieldControl.setState({
+                lastClickedRed: activePlayer === 'red',
+                lastClickedBlue: activePlayer === 'blue'
+            });
+        }
     }
 
     /**
@@ -301,51 +316,54 @@ class GridControl extends React.Component {
      * @param coords
      */
     stepEvent(coords) {
-        var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
+        /** 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;
+            this.state.foundUserMineCache = 0;
-        this.state.playBomb = true;
+            this.state.playBomb = true;
 
-        /** Show elements */
+            /** Show elements */
-        if (this.refs.userControl.state.bombSelected) {
+            if (this.refs.userControl.state.bombSelected) {
-            this.state.sound.bomb.play();
+                this.state.sound.bomb.play();
 
-            var bombRadius = this.getBombRadius(coords[0], coords[1]);
+                var bombRadius = this.getBombRadius(coords[0], coords[1]);
-            for (var i = 0, j = bombRadius.length; i < j; i++) {
+                for (var i = 0, j = bombRadius.length; i < j; i++) {
-                this.show(bombRadius[i][0], bombRadius[i][1], i, j);
+                    this.show(bombRadius[i][0], bombRadius[i][1], i, j);
+                }
+
+                /** remove BOMB from activePlayer */
+                this.refs.userControl.refs[activePlayer].setState({
+                    haveBomb: false
+                });
+            } else {
+                this.show(coords[0], coords[1]);
             }
 
-            /** remove BOMB from activePlayer */
+            /** Mine score handling */
-            this.refs.userControl.refs[activePlayer].setState({
+            if (this.state.foundUserMineCache) {
-                haveBomb: false
+                this.refs.userControl.setState({
-            });
+                    mines: this.refs.userControl.state.mines - this.state.foundUserMineCache,
-        } else {
+                    foundMines: true
-            this.show(coords[0], coords[1]);
+                }, () => {
-        }
+                    /** because of CSS animation in .found-mine */
+                    setTimeout(() => this.refs.userControl.setState({foundMines: false}), 500);
 
-        /** Mine score handling */
+                    /** add the found mines to the active Player */
-        if (this.state.foundUserMineCache) {
+                    this.refs.userControl.refs[activePlayer].setState({
-            this.refs.userControl.setState({
+                        mines: this.refs.userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache
-                mines: this.refs.userControl.state.mines - this.state.foundUserMineCache,
+                    });
-                foundMines: true
-            }, () => {
-                /** because of CSS animation in .found-mine */
-                setTimeout(() => this.refs.userControl.setState({foundMines: false}), 500);
-
-                /** add the found mines to the active Player */
-                this.refs.userControl.refs[activePlayer].setState({
-                    mines: this.refs.userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache
                 });
-            });
+            }
-        }
 
-        /** Reset BOMB status */
+            /** Reset BOMB status */
-        if (this.refs.userControl.state.bombSelected) {
+            if (this.refs.userControl.state.bombSelected) {
-            /** reset bomb selected status */
+                /** reset bomb selected status */
-            this.refs.userControl.setState({bombSelected: false});
+                this.refs.userControl.setState({bombSelected: false});
 
-            /** clear cache, reset symbols */
+                /** clear cache, reset symbols */
-            this.bombClear();
+                this.bombClear();
+            }
         }
     }
 

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'
             }
         };
     }