js and config refactor

src/Mine/SeekerBundle/Resources/config/config.yml

@@ -3,17 +3,17 @@
 #    session:
 #        handler_id: session.handler.pdo
 
-# Doctrine cache
+# Doctrine cache --> instead of PREDIS (gos_web_socket > client > storage > driver)
-doctrine_cache:
+#doctrine_cache:
-    providers:
+#    providers:
-        redis_cache:
+#        redis_cache:
-            redis:
+#            redis:
-                host: localhost
+#                host: localhost
-                port: 6379
+#                port: 6379
-                database: 3
+#                database: 3
-        websocket_cache_client:
+#        websocket_cache_client:
-            type: redis
+#            type: redis
-            alias: gos_web_socket.client_storage.driver.redis
+#            alias: gos_web_socket.client_storage.driver.redis
 
 # SNC
 snc_redis:

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

@@ -82,9 +82,10 @@ class MineSeeker extends React.Component {
                             this.state.channel,
                             (uri, payload, log) => {
 
-                                var isNotUnsubscribe = typeof payload.msg === 'undefined';
+                                var isTopicEvent = typeof payload.data !== 'undefined',
+                                    isNotUnsubscribe = typeof payload.msg === 'undefined';
 
-                                if (typeof payload.data !== 'undefined') {
+                                if (isTopicEvent) {
                                     console.warn(payload.user + " has been stepped to coords: " + payload.data.coords[0] + ', ' + payload.data.coords[1]);
 
                                     /** Auto-Step if this player is not the current user */

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

@@ -6,7 +6,7 @@ class GridControl extends React.Component {
     constructor(props) {
         super(props);
 
-        var click = new Howl({src: ['/sound/click.mp3']}),
+        let click = new Howl({src: ['/sound/click.mp3']}),
             bomb = new Howl({src: ['/sound/bomb.mp3']}),
             mine = new Howl({src: ['/sound/mine.mp3']}),
             warning = new Howl({src: ['/sound/warning.mp3']}),
@@ -46,7 +46,7 @@ class GridControl extends React.Component {
     }
 
     getBombRadius(row, col) {
-        var isBombTargetCenter = row > 1 && row < this.state.grid.length - 2 && col > 1 && col < this.state.grid[row].length - 2;
+        let isBombTargetCenter = row > 1 && row < this.state.grid.length - 2 && col > 1 && col < this.state.grid[row].length - 2;
 
         /** if the (5x5) target not fits the grid */
         if (!isBombTargetCenter) {
@@ -76,6 +76,22 @@ class GridControl extends React.Component {
         ];
     }
 
+    getBombFieldRadius() {
+        return [
+            [null, null], [0, 0], [1, 0], [2, 0], [0, 1], [2, 1], [0, 2], [1, 2], [2, 2],
+            [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], [null, null],
+            [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], [null, null],
+            [null, null], [null, null]
+        ];
+    }
+
+    getNeighbourRadius(row, col) {
+        return [
+            [row - 1, col], [row - 1, col - 1], [row - 1, col + 1], [row, col - 1], [row, col + 1], [row + 1, col],
+            [row + 1, col + 1], [row + 1, col - 1]
+        ];
+    }
+
     checkNeighbourItem(row, col) {
         if (this.checkMine(row, col)) {
             var currentField = this.refs[this.refString(row, col)];
@@ -106,44 +122,16 @@ class GridControl extends React.Component {
     }
 
     checkNeighbours(row, col) {
-        var anotherFields = [];
+        let anotherFields = [],
+            neighbours = this.getNeighbourRadius(row, col);
 
-        anotherFields.push(this.checkNeighbourItem(row - 1, col));
+        for (let i = 0, j = neighbours.length; i < j; i++) {
-        anotherFields.push(this.checkNeighbourItem(row - 1, col - 1));
+            anotherFields.push(this.checkNeighbourItem(neighbours[i][0], neighbours[i][1]));
-        anotherFields.push(this.checkNeighbourItem(row - 1, col + 1));
+        }
-        anotherFields.push(this.checkNeighbourItem(row, col - 1));
-        anotherFields.push(this.checkNeighbourItem(row, col + 1));
-        anotherFields.push(this.checkNeighbourItem(row + 1, col));
-        anotherFields.push(this.checkNeighbourItem(row + 1, col + 1));
-        anotherFields.push(this.checkNeighbourItem(row + 1, col - 1));
 
         return anotherFields;
     }
 
-    showAppropriateFields(currentField, row, col) {
-        currentField.setState({
-            currentObj: this.state.grid[row][col],
-            active: true
-        });
-
-        if (this.state.updatedFieldCache.indexOf(this.refString(row, col)) < 0) {
-            this.state.updatedFieldCache.push(this.refString(row, col));
-        }
-
-        if (this.state.grid[row][col] === 0) {
-            var neighbours = this.checkNeighbours(row, col);
-
-            neighbours
-                .filter((i) => {
-                    return i !== false;
-                })
-                .forEach((element, index, array) => {
-                    var currentField = this.refs[this.refString(element.row, element.col)];
-                    this.showAppropriateFields(currentField, element.row, element.col);
-                });
-        }
-    }
-
     bombClear() {
         if (this.state.bombFieldCache.length) {
             for (var i = 0, j = this.state.bombFieldCache.length; i < j; i++) {
@@ -156,12 +144,7 @@ class GridControl extends React.Component {
     }
 
     bombCreate(row, col) {
-        var bombFieldSymbols = [
+        var bombFieldSymbols = this.getBombFieldRadius(),
-                [null, null], [0, 0], [1, 0], [2, 0], [0, 1], [2, 1], [0, 2], [1, 2], [2, 2],
-                [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], [null, null],
-                [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], [null, null],
-                [null, null], [null, null]
-            ],
             bombFields = this.getBombRadius(row, col);
 
         for (var i = 0, j = bombFields.length; i < j; i++) {
@@ -187,6 +170,37 @@ class GridControl extends React.Component {
         });
     }
 
+    /**
+     * Show all fields that needed after click
+     *
+     * @param currentField
+     * @param row
+     * @param col
+     */
+    showAppropriateFields(currentField, row, col) {
+        currentField.setState({
+            currentObj: this.state.grid[row][col],
+            active: true
+        });
+
+        if (this.state.updatedFieldCache.indexOf(this.refString(row, col)) < 0) {
+            this.state.updatedFieldCache.push(this.refString(row, col));
+        }
+
+        if (this.state.grid[row][col] === 0) {
+            var neighbours = this.checkNeighbours(row, col);
+
+            neighbours
+                .filter((i) => {
+                    return i !== false;
+                })
+                .forEach((element, index, array) => {
+                    var currentField = this.refs[this.refString(element.row, element.col)];
+                    this.showAppropriateFields(currentField, element.row, element.col);
+                });
+        }
+    }
+
     /**
      * Player control method
      *
@@ -229,6 +243,9 @@ class GridControl extends React.Component {
                             : 'mine'
                         ].play();
 
+                    /**
+                     * TODO Csak az utolsó iterációnál kell usert váltani!! --> 10.)
+                     */
                     if (this.refs.userControl.state.bombSelected) {
                         this.changePlayer(userControl, activePlayer, inactivePlayer);
                     }
@@ -241,6 +258,9 @@ class GridControl extends React.Component {
             } else {
                 this.state.sound.click.play();
 
+                /**
+                 * TODO Csak az utolsó iterációnál kell usert váltani!! --> 10.)
+                 */
                 if (!justOnFirstIteration) {
                     this.changePlayer(userControl, activePlayer, inactivePlayer);
                 }
@@ -275,31 +295,36 @@ class GridControl extends React.Component {
         }
     }
 
+    /**
+     * Show elems w/ conditions
+     *
+     * @param row
+     * @param col
+     * @param idx
+     */
+    show(row, col, idx = 0) {
+        this.handleGridField(this.state.grid[row][col], row, col, idx);
+        this.showAppropriateFields(this.refs[this.refString(row, col)], row, col);
+    }
+
+    /**
+     * STEP one
+     *
+     * @param coords
+     */
     stepEvent(coords) {
         var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
 
         this.state.foundUserMineCache = 0;
         this.state.playBomb = true;
 
-        /** Field selected w/ BOMB */
+        /** Show elements */
         if (this.refs.userControl.state.bombSelected) {
             this.state.sound.bomb.play();
 
-            var radius = 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 = radius.length; i < j; i++) {
+                this.show(bombRadius[i][0], bombRadius[i][1], i);
-                this.handleGridField(
-                    this.state.grid[radius[i][0]][radius[i][1]],
-                    radius[i][0],
-                    radius[i][1],
-                    i
-                );
-
-                this.showAppropriateFields(
-                    this.refs[this.refString(radius[i][0], radius[i][1])],
-                    radius[i][0],
-                    radius[i][1]
-                );
             }
 
             /** remove BOMB from activePlayer */
@@ -307,24 +332,11 @@ class GridControl extends React.Component {
                 haveBomb: false
             });
         } else {
-            this.handleGridField(
+            this.show(coords[0], coords[1]);
-                this.state.grid[coords[0]][coords[1]],
-                coords[0],
-                coords[1],
-                0
-            );
-
-            this.showAppropriateFields(
-                this.refs[this.refString(coords[0], coords[1])],
-                coords[0],
-                coords[1]
-            );
         }
 
-        /** Reset mine caches */
+        /** Mine score handling */
         if (this.state.foundUserMineCache) {
-
-            /** remove the found mines from global */
             this.refs.userControl.setState({
                 mines: this.refs.userControl.state.mines - this.state.foundUserMineCache,
                 foundMines: true
@@ -370,19 +382,15 @@ class GridControl extends React.Component {
     }
 
     overlayClass() {
-        return 'game-overlay' + (
+        return 'game-overlay' + ( this.state.overlay ? '' : ' hide' );
-                this.state.overlay
-                    ? ''
-                    : ' hide'
-            );
     }
 
     render() {
         var grid = [];
 
         if (this.state.grid) {
-            for (var i = 0, j = this.state.grid.length; i < j; i++) {
+            for (let i = 0, j = this.state.grid.length; i < j; i++) {
-                for (var k = 0, l = this.state.grid[i].length; k < l; k++) {
+                for (let k = 0, l = this.state.grid[i].length; k < l; k++) {
                     grid.push(
                         <GridField row={i}
                                    col={k}

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

@@ -5,26 +5,24 @@ class UserControl extends React.Component {
     constructor() {
         super();
 
-        /**
-         * activePlayer - red: 0, blue: 1
-         * @type {{activePlayer: number, mines: number}}
-         */
         this.state = {
-            activePlayer: 0,
+            activePlayer: 0, // activePlayer - red: 0, blue: 1
             mines: 51,
             bombSelected: false,
             foundMines: false
         };
     }
 
+    youCanSelectBomb(activePlayer, clickedPlayer) {
+        return this.refs[activePlayer].state.haveBomb &&
+            this.refs[activePlayer].state.enabledBomb &&
+            this.state.activePlayer === clickedPlayer;
+    }
+
     onClickBombSelector(clickedPlayer) {
         var activePlayer = this.state.activePlayer ? 'blue' : 'red';
 
-        if (
+        if (this.youCanSelectBomb(activePlayer, clickedPlayer)) {
-            this.refs[activePlayer].state.haveBomb &&
-            this.refs[activePlayer].state.enabledBomb &&
-            this.state.activePlayer === clickedPlayer
-        ) {
             this.state.bombSelected = !this.state.bombSelected;
 
             if (!this.state.bombSelected) {

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

@@ -24,15 +24,17 @@ class User extends React.Component {
     }
 
     getBomb() {
+        let src = this.state.srcRoot;
+
         if (this.state.haveBomb) {
-            if (this.state.enabledBomb && this.state.active) {
+            src += this.state.enabledBomb && this.state.active
-                return this.state.srcRoot + 'bg-bomb-outbg.png';
+                ? 'bg-bomb-outbg.png'
-            } else {
+                : 'bg-bomb-disabled-outbg.png';
-                return this.state.srcRoot + 'bg-bomb-disabled-outbg.png';
-            }
         } else {
-            return this.state.srcRoot + 'bg-bomb-exploded-outbg.png';
+            src += 'bg-bomb-exploded-outbg.png';
         }
+
+        return src;
     }
 
     getFigure(color) {
@@ -40,10 +42,8 @@ class User extends React.Component {
     }
 
     getCursor(state, color) {
-        var cursorImg = this.state.srcRoot + 'bg-cursor-' + color + '-outbg.png';
-
         return state
-            ? <img src={cursorImg} alt="cursor" className="user-cursor"/>
+            ? <img src={this.state.srcRoot + 'bg-cursor-' + color + '-outbg.png'} alt="cursor" className="user-cursor"/>
             : '';
     }