add new websocket topic - userList - and handle it

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import Grid from './grid/grid';
 import GridControl from './grid/grid-control';
+import MineServices from '../mine-system/mine-services';
 
 class MineSeeker extends React.Component {
     constructor(props) {
         super(props);
 
-        let gameAssoc = props.gameId !== '' ? props.gameId : this.makeGameAssoc(50);
+        let services = new MineServices();
+        let gameAssoc = props.gameId !== '' ? props.gameId : services.randomString(50);
         let channel = "mineseeker/channel/" + gameAssoc;
 
         this.state = {
@@ -19,19 +21,11 @@ class MineSeeker extends React.Component {
             createGrid: false,
             stepCache: [],
             connectionLost: false,
-            end: false
+            end: false,
+            replay: false
         }
     }
 
-    makeGameAssoc(len) {
-        let text = "";
-        let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-        for (let i = 0; i < len; i++) {
-            text += possible.charAt(Math.floor(Math.random() * possible.length));
-        }
-        return text;
-    }
-
     currectGridSize() {
         let $field = $('#mine-wrapper .grid');
         $field.height($field.width());
@@ -76,8 +70,19 @@ class MineSeeker extends React.Component {
      * @param payload
      */
     makeGameStart(payload) {
-        /** every time the blue starts */
-        this.refs.gridControl.refs.userControl.setState({activePlayer: 1});
+        let steps = JSON.parse(Base64.decode(payload.steps));
+
+        if (steps.length) {
+            steps.forEach((item) => {
+                setTimeout(() => {
+                    this.refs.gridControl.refs.userControl.setState({bombSelected: item.wBomb});
+                    this.makePointsCalcAndStep([item.row, item.col]);
+                }, 500);
+            });
+        } else {
+            /** every time the blue starts when it is not a continued game */
+            this.refs.gridControl.refs.userControl.setState({activePlayer: 1});
+        }
 
         /** Set up player names w/ server data */
         this.refs.gridControl.refs.userControl.refs.red.setState({
@@ -234,6 +239,20 @@ class MineSeeker extends React.Component {
         });
     }
 
+    clickRestorePlayer(data) {
+        this.refs.gridControl.setState({
+            overlay: true,
+            overlayTitle: "We are waiting for your opponent...",
+            overlaySubTitle: ''
+        });
+
+        this.refs.gridControl.state.webPlayer = data[0];
+
+        if (data[1].userCnt === 2) {
+            this.makeGameStart(data[1]);
+        }
+    }
+
     wSubscribe(payload, rpcUsers = null) {
         this.state.env === 'dev' && console.info(
             (typeof payload.user !== 'undefined' ? payload.user : 'user') + " has been subscribed to the channel!"
@@ -241,28 +260,44 @@ class MineSeeker extends React.Component {
 
         let firstUser = !rpcUsers;
 
-        this.refs.gridControl.state.webPlayer === null && this.refs.gridControl.setState({
-            webPlayer: payload.user === payload.users.blue ||
-            (
-                firstUser && payload.users.blueAnon !== '' ||
-                !firstUser && (rpcUsers.blueAnon === '' && rpcUsers.blue === '')
-            )
-                ? 'blue' : 'red'
-        });
+        /** is it a REPLAY */
+        if (this.state.replay) {
+            this.refs.gridControl.setState({
+                overlay: true,
+                overlayTitle: "Which player has been you, in this game?",
+                overlaySubTitle: <div>
+                    <button onClick={this.clickRestorePlayer.bind(this, ['blue', payload])}>
+                        I was the BLUE, man!
+                    </button>
+                    <button onClick={this.clickRestorePlayer.bind(this, ['red', payload])} target="_blank">
+                        I was RED, obviously!
+                    </button>
+                </div>
+            });
+        } else {
+            this.refs.gridControl.state.webPlayer === null && this.refs.gridControl.setState({
+                webPlayer: payload.user === payload.users.blue ||
+                (
+                    firstUser && payload.users.blueAnon !== '' ||
+                    !firstUser && (rpcUsers.blueAnon === '' && rpcUsers.blue === '')
+                )
+                    ? 'blue' : 'red'
+            });
+
+            /** every user has been came */
+            if (
+                payload.userCnt === 2 &&
+                (
+                    !this.state.connectionLost ||
+                    this.state.connectionLost && false === this.refs.gridControl.refs.userControl.state.activePlayer && !this.state.end
+                )
+            ) {
+                this.makeGameStart(payload);
+            }
+        }
 
         /** rwd */
         (900 > $(document).width()) && this.currectGridSize();
-
-        /** every user has been came */
-        if (
-            payload.userCnt === 2 &&
-            (
-                !this.state.connectionLost ||
-                this.state.connectionLost && false === this.refs.gridControl.refs.userControl.state.activePlayer && !this.state.end
-            )
-        ) {
-            this.makeGameStart(payload);
-        }
     }
 
     wUnsubscribe(payload) {
@@ -400,8 +435,21 @@ class MineSeeker extends React.Component {
         });
     }
 
+    /**
+     * Unregistered
+     * http://mine.dev/re-play/I1Bx9UHZP5CWDnTZHpJqGTlkzehblfsbfz4A4xYaH9HFhBK2aN
+     *
+     * Registered
+     * http://mine.dev/re-play/km10oOgM7Xh37vJ8PFjaRRePrHpDkZFDJgxLhNc6hkTYyLyPKD
+     */
+
     /** After rendering */
     componentDidMount() {
+        /** is it a REPLAY */
+        window.location.pathname.indexOf('re-play') > 0
+            ? this.setState({replay: true})
+            : this.setState({replay: false});
+
         this.connectWithWebsocket();
     }