refact && game reconnection and restore w/o refresh #3 && bugfix bomb explosion on opponent mines #19

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

@@ -6,8 +6,8 @@ class MineSeeker extends React.Component {
     constructor(props) {
         super(props);
 
-        var gameAssoc = props.gameId !== '' ? props.gameId : this.makeGameAssoc(50);
+        let gameAssoc = props.gameId !== '' ? props.gameId : this.makeGameAssoc(50);
-        var channel = "mineseeker/channel/" + gameAssoc;
+        let channel = "mineseeker/channel/" + gameAssoc;
 
         this.state = {
             env: props.env,
@@ -16,14 +16,15 @@ class MineSeeker extends React.Component {
             channel: channel,
             session: null,
             createGrid: false,
-            stepCache: null
+            stepCache: [],
+            disconnect: false
         }
     }
 
     makeGameAssoc(len) {
-        var text = "";
+        let text = "";
-        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+        let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-        for (var i = 0; i < len; i++) {
+        for (let i = 0; i < len; i++) {
             text += possible.charAt(Math.floor(Math.random() * possible.length));
         }
         return text;
@@ -52,7 +53,7 @@ class MineSeeker extends React.Component {
 
     /** THE END */
     makeGameEndIfItEnds(bluePoints, redPoints, resign = false) {
-        var redWins = redPoints > 25,
+        let redWins = redPoints > 25,
             blueWins = bluePoints > 25;
 
         if (redWins || blueWins || resign) {
@@ -89,8 +90,7 @@ class MineSeeker extends React.Component {
     }
 
     clickResign() {
-        this.state.session
+        this.state.session.publish(this.state.channel, {
-            .publish(this.state.channel, {
             'resign': this.refs.gridControl.refs.userControl.state.activePlayer ? 'blue' : 'red'
         });
         this.resignProcess(this.refs.gridControl.state.webPlayer);
@@ -119,37 +119,7 @@ class MineSeeker extends React.Component {
         }
     }
 
-    /** after rendering */
+    wInit(session, gridServer, gridClient) {
-    componentDidMount() {
-        /** Create Websocket w/ Bahnhof.js */
-        var websocket = WS.connect(
-            this.state.env === 'dev'
-                ? "ws://mine.dev:6450"
-                : "ws://www.mineseeker.ninja:6450"
-        );
-
-        /**
-         * Connect
-         * Session is an Autobahn JS WAMP session.
-         */
-        websocket.on("socket/connect", (session) => {
-            console.info("Successfully connected to the Server!");
-
-            var gridClient = this.state.gameInherited || new Grid().state.grid;
-
-            /**
-             * Connect - RPC
-             * Send grid information to the server
-             */
-            session
-                .call(
-                    this.state.gameInherited ? "mineseeker-rpc/connectGame" : "mineseeker-rpc/startGame",
-                    this.state.gameInherited ? this.state.gameAssoc : [Base64.encode(JSON.stringify(gridClient)), this.state.gameAssoc]
-                )
-                .then(
-                    (gridServer) => {
-                        console.info("Grid has been created! Return w/ gameAssoc.");
-
         this.setState({session: session});
 
         /** save session to GridControl */
@@ -185,44 +155,14 @@ class MineSeeker extends React.Component {
                 : '',
             renderGridFields: this.state.gameAssoc
         });
-
-                        /** Connect - Subscribe */
-                        this.state.session.subscribe(
-                            this.state.channel,
-                            (uri, payload, log) => {
-
-                                var isTopicEvent = typeof payload.data !== 'undefined',
-                                    isNotUnsubscribe = typeof payload.msg === 'undefined';
-
-                                if (isTopicEvent) {
-
-                                    /** Auto-Step if this player is not the current user */
-                                    if (this.refs.gridControl.state.webPlayer !== payload.data.player) {
-                                        if (null === payload.data.resign) {
-                                            console.warn(payload.user + " has been stepped to coords: " + payload.data.coords[0] + ', ' + payload.data.coords[1]);
-                                            console.warn('Opponent stepped: Auto-Step process');
-
-                                            this.refs.gridControl.refs.userControl.setState({bombSelected: payload.data.bomb});
-
-                                            /** STEP */
-                                            let points = this.makePointsCalcAndStep(payload.data.coords);
-
-                                            /** THE END */
-                                            this.makeGameEndIfItEnds(points.blue, points.red);
-                                        } else {
-                                            /** RESIGN */
-                                            /** THE END */
-                                            this.resignProcess(payload.data.resign);
     }
-                                    }
-                                } else {
 
-                                    /** It is subscribe or unsubscribe */
+    wSubscribe(payload) {
-                                    if (isNotUnsubscribe) {
+        this.state.env === 'dev' && console.info(
-                                        console.info(
             (typeof payload.user !== 'undefined' ? payload.user : 'user') + " has been subscribed to the channel!"
         );
 
+        if (!this.state.disconnect) {
             /** setup the web player */
             null === this.refs.gridControl.state.webPlayer && this.refs.gridControl.setState({
                 webPlayer: payload.user === payload.users.blue || payload.user === payload.users.blueAnon
@@ -250,8 +190,11 @@ class MineSeeker extends React.Component {
 
                 this.refs.gridControl.setState({overlay: false});
             }
-                                    } else {
+        }
-                                        console.info(payload.msg);
+    }
+
+    wUnsubscribe(payload) {
+        this.state.env === 'dev' && console.info(payload.msg);
 
         this.refs.gridControl.setState({
             overlay: true,
@@ -259,23 +202,125 @@ class MineSeeker extends React.Component {
             overlaySubTitle: "Please, restart the game!"
         });
     }
+
+    wTopic(payload) {
+        /** Auto-Step if this player is not the current user */
+        if (this.refs.gridControl.state.webPlayer !== payload.data.player) {
+            if (null === payload.data.resign) {
+                this.state.env === 'dev' && console.warn(payload.user + " has been stepped to coords: " + payload.data.coords[0] + ', ' + payload.data.coords[1]);
+                this.state.env === 'dev' && console.warn('Opponent stepped: Auto-Step process');
+
+                this.refs.gridControl.refs.userControl.setState({bombSelected: payload.data.bomb});
+
+                /** STEP */
+                let points = this.makePointsCalcAndStep(payload.data.coords);
+
+                /** THE END */
+                this.makeGameEndIfItEnds(points.blue, points.red);
+            } else {
+                /** RESIGN */
+                /** THE END */
+                this.resignProcess(payload.data.resign);
             }
         }
+    }
+
+    /** Connect - Subscribe */
+    subscribe() {
+        this.state.session.subscribe(
+            this.state.channel,
+            (uri, payload, log) => {
+                let isTopicEvent = typeof payload.data !== 'undefined',
+                    isNotUnsubscribe = typeof payload.msg === 'undefined';
+
+                /** CONNECTION */
+                if (isTopicEvent) {
+                    this.wTopic(payload);
+                } else {
+                    if (isNotUnsubscribe) {
+                        this.wSubscribe(payload);
+                    } else {
+                        this.wUnsubscribe(payload);
+                    }
+                }
+
+                /** RECONNECTION */
+                if (payload.userCnt === 2 && this.state.disconnect) {
+                    this.state.env === 'dev' && console.info('Reconnection process');
+
+                    let cache = this.state.stepCache;
+                    cache.forEach((item) => this.state.session.publish(this.state.channel, item));
+                    this.setState({disconnect: false, stepCache: []});
+                }
+            });
+    }
+
+    /** after rendering */
+    componentDidMount() {
+        /** Create Websocket w/ Bahnhof.js */
+        let websocket = WS.connect(
+            this.state.env === 'dev'
+                ? "ws://mine.dev:6450"
+                : "ws://www.mineseeker.ninja:6450"
         );
+
+        /**
+         * Connect
+         * Session is an Autobahn JS WAMP session.
+         */
+        websocket.on("socket/connect", (session) => {
+            this.state.env === 'dev' && console.info("Successfully connected to the Server!");
+
+            if (!this.state.disconnect) {
+                let gridClient = this.state.gameInherited || new Grid().state.grid;
+
+                /**
+                 * Connect - RPC
+                 * Send grid information to the server
+                 */
+                session
+                    .call(
+                        this.state.gameInherited ? "mineseeker-rpc/connectGame" : "mineseeker-rpc/startGame",
+                        this.state.gameInherited ? this.state.gameAssoc : [Base64.encode(JSON.stringify(gridClient)), this.state.gameAssoc]
+                    )
+                    .then(
+                        (gridServer) => {
+                            this.state.env === 'dev' && console.info("Grid has been created! Return w/ gameAssoc.");
+
+                            this.wInit(session, gridServer, gridClient);
+                            this.subscribe();
                         },
-                    (error, desc) => console.error(["RPC Error", error, desc])
+                        (error, desc) => this.state.env === 'dev' && console.error(["RPC Error", error, desc])
                     );
+            } else {
+                this.setState({session: session});
+                this.subscribe();
+            }
         });
 
         /**
          * DisConnect
          * Error provides us with some insight into the disconnection: error.reason and error.code
          */
-        websocket.on("socket/disconnect", (error) => console.error("Disconnected for " + error.reason + " with code " + error.code));
+        websocket.on("socket/disconnect", (error) => {
+            this.state.env === 'dev' && console.error("Disconnected for " + error.reason + " with code " + error.code);
+            this.setState({disconnect: true});
+        });
+    }
+
+    /**
+     * Cache the steps unless reconnection
+     *
+     * @param dataPack
+     */
+    cachePublish(dataPack) {
+        let cache = this.state.stepCache;
+        cache.push(dataPack);
+        this.setState({stepCache: cache});
     }
 
     onClick(coords) {
-        var activePlayer = this.refs.gridControl.refs.userControl.state.activePlayer ? 'blue' : 'red';
+        let 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])) {
@@ -287,8 +332,7 @@ class MineSeeker extends React.Component {
                 /** THE END */
                 this.makeGameEndIfItEnds(points.blue, points.red);
 
-                this.state.session
+                let dataPack = {
-                    .publish(this.state.channel, {
                     'coords': coords,
                     'player': activePlayer,
                     'bomb': this.refs.gridControl.refs.userControl.state.bombSelected,
@@ -297,7 +341,12 @@ class MineSeeker extends React.Component {
                     'resign': null,
                     'redExplodedBomb': activePlayer === 'red' && this.refs.gridControl.refs.userControl.state.bombSelected,
                     'blueExplodedBomb': activePlayer === 'blue' && this.refs.gridControl.refs.userControl.state.bombSelected
-                    });
+                };
+
+                /** PUBLISH */
+                !this.state.disconnect
+                    ? this.state.session.publish(this.state.channel, dataPack)
+                    : this.cachePublish(dataPack);
             }
         }
     }

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

@@ -96,7 +96,7 @@ class GridControl extends React.Component {
              * It must be cached because the GridField.state not updated until
              * all showAppropriateFields() method runned out!!
              */
-            if (this.state.updatedFieldCache.indexOf(this.refString(row, col)) < 0 && !currentField.state.active) {
+            if (this.checkFieldHasBeenNeverClicked(row, col)) {
                 this.state.updatedFieldCache.push(this.refString(row, col));
 
                 currentField.setState({
@@ -229,16 +229,18 @@ class GridControl extends React.Component {
      * Player control method
      *
      * @param currentObject {int|string} Current object from Grid class
-     * @param x {int}
+     * @param row {int}
-     * @param y {int}
+     * @param col {int}
      * @param justOnFirstIteration {int} When bomb is being used check the whole explosion area
      */
-    handleGridField(currentObject, x, y, justOnFirstIteration = 0) {
+    handleGridField(currentObject, row, col, justOnFirstIteration = 0) {
         var userControl = this.refs.userControl,
-            gridFieldControl = this.refs[this.refString(x, y)],
+            gridFieldControl = this.refs[this.refString(row, col)],
             activePlayer = userControl.state.activePlayer ? 'blue' : 'red',
             inactivePlayer = userControl.state.activePlayer ? 'red' : 'blue';
 
+        /** if the clicked field is NEVER CLICKED */
+        if (this.checkFieldHasBeenNeverClicked(row, col)) {
             /** update LAST CLICKED grid field */
             if (!justOnFirstIteration) {
                 if (this.state.lastClicked[activePlayer] !== null) {
@@ -249,7 +251,7 @@ class GridControl extends React.Component {
                 }
             }
 
-        this.state.lastClicked[activePlayer] = [x, y];
+            this.state.lastClicked[activePlayer] = [row, col];
 
             /** if you found mine */
             if (currentObject === 'm') {
@@ -257,7 +259,7 @@ class GridControl extends React.Component {
 
                 if (!justOnFirstIteration) {
                     /** set last clicked field w/ color */
-                this.state.lastClicked[activePlayer] = [x, y];
+                    this.state.lastClicked[activePlayer] = [row, col];
 
                     this.state.sound[
                         (userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache) > 20
@@ -301,6 +303,7 @@ class GridControl extends React.Component {
                 });
             }
         }
+    }
 
     /**
      * Show elems w/ conditions

src/Mine/SeekerBundle/Topic/MineseekerTopic.php

@@ -44,7 +44,7 @@ class MineseekerTopic implements TopicInterface
      * @param ConnectionInterface $connection
      * @param Topic $topic
      * @param WampRequest $request
-     * @return void4
+     * @return void
      */
     public function onSubscribe(ConnectionInterface $connection, Topic $topic, WampRequest $request)
     {
@@ -56,8 +56,7 @@ class MineseekerTopic implements TopicInterface
         if ($topic->count() > 2) {
             $topic->remove($connection);
         } else {
-            /** @var $users array Save users to database */
+            $users = $this->controlUsers($topic, $userName, $user);
-            $users = $this->saveUserToDb($topic, $userName, $user, $topic->count());
 
             $topic->broadcast([
                 'userTopicId' => $connection->resourceId,
@@ -129,6 +128,9 @@ class MineseekerTopic implements TopicInterface
 
     /**
      * Save Resign event to database
+     *
+     * @param $topic
+     * @param $color
      */
     private function saveResignToDb($topic, $color)
     {
@@ -176,6 +178,36 @@ class MineseekerTopic implements TopicInterface
         $this->em->flush();
     }
 
+    /**
+     * Control all users in a channel
+     *
+     * @param $topic
+     * @param $userName
+     * @param $user
+     * @return array
+     */
+    private function controlUsers($topic, $userName, $user)
+    {
+        $gameAssoc = explode('/', $topic->getId())[2];
+
+        $playedGame = $this->em
+            ->getRepository('MineSeekerBundle:PlayedGame')
+            ->findOneByGameAssoc($gameAssoc);
+
+        $users = $this->getUserCollection($playedGame);
+
+        /** This checks it is a reconnection */
+        if (
+            (null !== $users['red'] || null !== $users['redAnon']) &&
+            (null !== $users['blue'] || null !== $users['blueAnon'])
+        ) {
+            /** @var $users array Save users to database */
+            $users = $this->saveUserToDb($topic, $userName, $user, $topic->count());
+        }
+
+        return $users;
+    }
+
     /**
      * Save user data to database
      *
@@ -231,6 +263,17 @@ class MineseekerTopic implements TopicInterface
         $this->em->persist($playedGame);
         $this->em->flush();
 
+        return $this->getUserCollection($playedGame);
+    }
+
+    /**
+     * Get user collection from PlayedGame entity
+     *
+     * @param $playedGame
+     * @return array
+     */
+    private function getUserCollection($playedGame)
+    {
         return array(
             'red' => null !== $playedGame->getRed() ? $playedGame->getRed()->getUsername() : '',
             'blue' => null !== $playedGame->getBlue() ? $playedGame->getBlue()->getUsername() : '',
@@ -239,7 +282,9 @@ class MineseekerTopic implements TopicInterface
         );
     }
 
-    /** Handle prod MySQL timeout */
+    /**
+     * Handle prod MySQL timeout
+     */
     private function reConnect()
     {
         try {

webpack.config.js

@@ -1,6 +1,6 @@
 'use strict';
 
-module.exports = {
+const config = module.exports = {
     entry: './web/bundles/mineseeker/js/mine-seeker.js',
     output: {
         path: './src/Mine/SeekerBundle/Resources/public/js',
@@ -19,3 +19,5 @@ module.exports = {
         ]
     }
 };
+
+module.exports = config;