debug the connections - no disconnect threatment and graphics design

src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig

@@ -32,7 +32,7 @@
 
             <input type="text" id="username" name="_username" value="{{ last_username }}"
                    class="form-input form-username"
-                   placeholder="Username or Email"/>
+                   placeholder="Username or Email" autofocus />
 
             <input type="password" id="password" name="_password"
                    class="form-input"

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

@@ -7,6 +7,7 @@ let mineWrapper = document.getElementById('mine-wrapper');
 ReactDOM.render(
     <MineSeeker env={mineWrapper.dataset.env}
                 gameId={mineWrapper.dataset.gameId}
+                webPlayerName={mineWrapper.dataset.webPlayerName}
                 ssl={mineWrapper.dataset.ssl}/>,
     mineWrapper
 );

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

@@ -17,10 +17,12 @@ class MineSeeker extends React.Component {
             startProcess: new MineStart(),
             endProcess: new MineEnd(),
             wsProcess: new MineWebsocket(),
+            services: services,
 
             env: props.env,
             ssl: props.ssl,
             gameInherited: props.gameId !== '',
+            webPlayerName: props.webPlayerName === '' ? null : props.webPlayerName,
             gameAssoc: gameAssoc,
             channel: channel,
             session: null,

src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/websocket.js

@@ -6,92 +6,6 @@ class MineWebsocket extends React.Component {
         super();
     }
 
-    /**
-     * @see https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus
-     * @see https://developers.facebook.com/docs/sharing/reference/send-dialog
-     * @see https://developers.facebook.com/docs/plugins/share-button/
-     */
-    clickFBShare(app) {
-        let display = 'popup';
-
-        FB.getLoginStatus(function (response) {
-            display = response.status === 'connected'
-                ? 'dialog'
-                : 'popup';
-        });
-
-        FB.ui({
-            method: 'send',
-            display: display,
-            link: window.location.href + '/' + app.state.gameAssoc,
-        });
-    }
-
-    clickRestorePlayer(app, data) {
-        let gridControl = app.refs.gridControl;
-
-        gridControl.setState({
-            overlay: true,
-            overlayTitle: "We are waiting for your opponent...",
-            overlaySubTitle: ''
-        });
-
-        gridControl.state.webPlayer = data[0];
-
-        if (data[1].userCnt === 2) {
-            app.state.startProcess.makeGameStart(app, data[1], gridControl);
-        }
-    }
-
-    handleSubscribe(app, payload, rpcUsers = null) {
-        let firstUser = !rpcUsers,
-            gridControl = app.refs.gridControl,
-            userControl = gridControl.refs.userControl;
-
-        app.state.env === 'dev' && console.info(
-            (typeof payload.user !== 'undefined' ? payload.user : 'user') + " has been subscribed to the channel!"
-        );
-
-        /** is it a REPLAY */
-        if (app.state.replay) {
-            gridControl.setState({
-                overlay: true,
-                overlayTitle: "Which player has been you, in this game?",
-                overlaySubTitle: <div>
-                    <button onClick={this.clickRestorePlayer.bind(this, app, ['blue', payload])}>
-                        I was the BLUE, man!
-                    </button>
-                    <button onClick={this.clickRestorePlayer.bind(this, app, ['red', payload])} target="_blank">
-                        I was RED, obviously!
-                    </button>
-                </div>
-            });
-        } else {
-            gridControl.state.webPlayer === null && 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 &&
-                (
-                    !app.state.connectionLost ||
-                    app.state.connectionLost && false === userControl.state.activePlayer && !app.state.end
-                )
-            ) {
-                app.state.startProcess.makeGameStart(app, payload, gridControl);
-            }
-        }
-
-        /** rwd */
-        (900 > $(document).width()) && app.state.services.currectGridSize();
-    }
-
     handleUnsubscribe(app, payload) {
         let gridControl = app.refs.gridControl;
 
@@ -104,19 +18,104 @@ class MineWebsocket extends React.Component {
         });
     }
 
+    nbrUsersWasInGame(users) {
+        let nbr = 0;
+
+        nbr += users.blueAnon === "" ? 0 : 1;
+        nbr += users.redAnon === "" ? 0 : 1;
+        nbr += users.blue === "" ? 0 : 1;
+        nbr += users.red === "" ? 0 : 1;
+
+        return nbr;
+    }
+
+    wereYouInTheParty(users, user) {
+        return users.blueAnon === user ||
+            users.redAnon === user ||
+            users.blue === user ||
+            users.red === user;
+    }
+
+    whichWereYouInTheParty(users, user) {
+        return users.blue === user ? 'blue' : 'red';
+    }
+
+    handleSubscribe(app, payload) {
+        let gridControl = app.refs.gridControl,
+            user = payload.user,
+            usersInTheParty = payload.users,
+            webPlayerName = app.state.webPlayerName;
+
+        app.state.env === 'dev' && console.info(
+            (typeof payload.user !== 'undefined' ? payload.user : 'user') + " has been subscribed to the channel!"
+        );
+
+        /** set up webPlayer */
+        if (gridControl.state.webPlayer === null) {
+            if (app.state.replay) {
+                if (this.wereYouInTheParty(usersInTheParty, webPlayerName)) {
+                    let opponent = user === webPlayerName && webPlayerName === payload.users.red
+                        ? payload.users.blue
+                        : payload.users.red;
+
+                    gridControl.setState({
+                        webPlayer: this.whichWereYouInTheParty(usersInTheParty, webPlayerName),
+                        overlayTitle: "We are waitin' for " + opponent + "!",
+                        overlaySubTitle: ""
+                    });
+                } else {
+                    gridControl.setState({
+                        overlayTitle: "It was not your party!",
+                        overlaySubTitle: ""
+                    });
+                }
+            } else {
+                gridControl.setState({
+                    webPlayer: payload.user === payload.users.blue || payload.user === payload.users.blueAnon
+                        ? 'blue' : 'red',
+                    overlaySubTitle: app.state.gameAssoc
+                        ?
+                        <div>
+                            <h3>Share this unique link w/ your opponent</h3>
+                            <div className="clippy">
+                                <input id="foo"
+                                       defaultValue={window.location.href + '/' + app.state.gameAssoc}/>
+                            </div>
+                            {app.state.env !== 'dev' &&
+                            <a onClick={this.clickFBShare.bind(this, app)}>Share in Facebook message</a>
+                            }
+                            {app.state.env === 'dev' &&
+                            <a href={"/play/" + app.state.gameAssoc} target="_blank">Play w/ me!</a>
+                            }
+                        </div>
+                        : ''
+                });
+            }
+        }
+
+        if (payload.userCnt === 2 && !app.state.end) {
+            app.state.startProcess.makeGameStart(app, payload, gridControl);
+        }
+
+        /** rwd */
+        (900 > $(document).width()) && app.state.services.currectGridSize();
+    }
+
     handleTopic(app, payload) {
+        let gridControl = app.refs.gridControl,
+            userControl = gridControl.refs.userControl;
+
         /** Auto-Step if this player is not the current user */
-        if (app.refs.gridControl.state.webPlayer !== payload.data.player) {
+        if (gridControl.state.webPlayer !== payload.data.player) {
             if (null === payload.data.resign) {
                 app.state.env === 'dev' && console.warn(payload.user + " has been stepped to coords: " + payload.data.coords[0] + ', ' + payload.data.coords[1]);
                 app.state.env === 'dev' && console.warn('Opponent stepped: Auto-Step process');
 
-                app.refs.gridControl.refs.userControl.setState({bombSelected: payload.data.bomb});
+                userControl.setState({bombSelected: payload.data.bomb});
 
                 /** STEP */
                 let points = app.makePointsCalcAndStep(payload.data.coords);
-
+                /** THE END? */
-                /** THE END */
                 app.state.endProcess.makeGameEndIfItEnds(app, points.blue, points.red);
             } else {
                 /** RESIGN */
@@ -127,7 +126,7 @@ class MineWebsocket extends React.Component {
     }
 
     /** Connect - Subscribe */
-    subscribe(app, rpcUsers = null) {
+    subscribe(app) {
         app.state.session.subscribe(
             app.state.channel,
             (uri, payload, log) => {
@@ -139,7 +138,7 @@ class MineWebsocket extends React.Component {
                     this.handleTopic(app, payload);
                 } else {
                     if (isNotUnsubscribe) {
-                        this.handleSubscribe(app, payload, rpcUsers);
+                        this.handleSubscribe(app, payload);
                     } else {
                         this.handleUnsubscribe(app, payload);
                     }
@@ -161,7 +160,6 @@ class MineWebsocket extends React.Component {
         let websocket = WS.connect(
             app.state.env === 'dev'
                 ? "ws://mine.dev:6450"
-                // : (app.state.ssl === 'true' ? "wss" : "ws") + "://" + window.location.hostname + ":6450/"
                 : (app.state.ssl === 'true' ? "wss" : "ws") + "://www.mineseeker.ninja:6450/"
         );
 
@@ -173,7 +171,7 @@ class MineWebsocket extends React.Component {
             app.state.env === 'dev' && console.info("Successfully connected to the Server!");
 
             if (!app.state.connectionLost) {
-                let gridClient = app.state.gameInherited || new Grid().state.grid;
+                let gridClient = new Grid().state.grid;
 
                 /**
                  * Connect - RPC
@@ -181,30 +179,17 @@ class MineWebsocket extends React.Component {
                  */
                 session
                     .call(
-                        app.state.gameInherited ? "mineseeker-rpc/connectGame" : "mineseeker-rpc/startGame",
+                        "mineseeker-rpc/connectGame",
-                        app.state.gameInherited ? app.state.gameAssoc : [Base64.encode(JSON.stringify(gridClient)), app.state.gameAssoc]
+                        [Base64.encode(JSON.stringify(gridClient)), app.state.gameAssoc]
                     )
                     .then(
                         (data) => {
                             app.state.env === 'dev' && console.info('RPC has been called');
 
-                            let serverData = data[0] !== true
+                            let grid = JSON.parse(Base64.decode(data));
-                                ? JSON.parse(Base64.decode(data))
-                                : data;
 
-                            /** Check the grid if the user is inherited @see #30 */
+                            this.init(app, session, grid);
-                            if ((app.state.gameInherited && null !== serverData.grid) || !app.state.gameInherited) {
+                            this.subscribe(app);
-                                this.init(app, session, serverData.grid, gridClient);
-                                this.subscribe(app, app.state.gameInherited && serverData.users);
-                            } else {
-                                app.refs.gridControl.setState({
-                                    overlay: true,
-                                    overlayTitle: "This channel does not exists!",
-                                    overlaySubTitle: <a href={"/play"} target="_self">Restart game!</a>
-                                });
-
-                                console.error("This channel does not exists!");
-                            }
                         },
                         (error, desc) => app.state.env === 'dev' && console.error(["RPC Error", error, desc])
                     );
@@ -228,13 +213,15 @@ class MineWebsocket extends React.Component {
         });
     }
 
-    init(app, session, gridServer, gridClient) {
+    init(app, session, grid) {
+        let gridControl = app.refs.gridControl;
+
         app.setState({session: session});
 
         /** save session to GridControl */
         /** render grid fields - @see #12 */
-        app.refs.gridControl.setState({
+        gridControl.setState({
-            grid: app.state.gameInherited ? gridServer : gridClient,
+            grid: grid,
             channel: app.state.channel,
             desc: {
                 buddy: <div>
@@ -249,25 +236,31 @@ class MineWebsocket extends React.Component {
             },
             overlay: true,
             overlayTitle: "We are waiting for your opponent...",
-            overlaySubTitle: app.state.gameAssoc
+            overlaySubTitle: "",
-                ?
-                <div>
-                    <h3>Share this unique link w/ your opponent</h3>
-                    <div className="clippy">
-                        <input id="foo"
-                               defaultValue={window.location.href + '/' + app.state.gameAssoc}/>
-                    </div>
-                    {app.state.env !== 'dev' &&
-                    <a onClick={this.clickFBShare.bind(this, app)}>Share in Facebook message</a>
-                    }
-                    {app.state.env === 'dev' &&
-                    <a href={"/play/" + app.state.gameAssoc} target="_blank">Play w/ me!</a>
-                    }
-                </div>
-                : '',
             renderGridFields: app.state.gameAssoc
         });
     }
+
+    /**
+     * @see https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus
+     * @see https://developers.facebook.com/docs/sharing/reference/send-dialog
+     * @see https://developers.facebook.com/docs/plugins/share-button/
+     */
+    clickFBShare(app) {
+        let display = 'popup';
+
+        FB.getLoginStatus(function (response) {
+            display = response.status === 'connected'
+                ? 'dialog'
+                : 'popup';
+        });
+
+        FB.ui({
+            method: 'send',
+            display: display,
+            link: window.location.href + '/' + app.state.gameAssoc,
+        });
+    }
 }
 
 export default MineWebsocket;

src/Mine/SeekerBundle/Resources/public/js/mine-user-list/app.js

@@ -80,8 +80,10 @@ class MineUserList extends React.Component {
     }
 
     getProfilePicture(id) {
-        return <img src={"http://graph.facebook.com/" + id + "/picture?type=square&width=100&height=100"}
+        return id !== null ?
-                    alt="Facebook profile"/>;
+            <img src={"http://graph.facebook.com/" + id + "/picture?type=square&width=100&height=100"}
+                 alt="Facebook profile"/> :
+            "";
     }
 
     clickChallengeFriend(username) {
@@ -121,7 +123,8 @@ class MineUserList extends React.Component {
             ? this.state.requests.forEach((item) => {
                 req.push(<div key={this.state.services.randomString(50)} className="user-friend">
                     <h1>{item.username} <strong>challenged you</strong>!</h1>
-                    <button onClick={this.clickChallengeAccepted.bind(this, [item.username, item.gameAssoc])}>Accept</button>
+                    <button onClick={this.clickChallengeAccepted.bind(this, [item.username, item.gameAssoc])}>Accept
+                    </button>
                 </div>)
             })
             : '';

src/Mine/SeekerBundle/Resources/views/Game/play.html.twig

@@ -10,7 +10,8 @@
         <div id="mine-wrapper"
              data-env="{{ env }}"
              data-ssl="{{ ssl }}"
-             data-game-id="{{ app.request.get('gameAssoc') }}">
+             data-game-id="{{ app.request.get('gameAssoc') }}"
+             data-web-player-name="{{ app.user.username is defined ? app.user.username : '' }}">
         </div>
     </div>
 {% endblock %}

src/Mine/SeekerBundle/Rpc/MineseekerRpc.php

@@ -16,8 +16,6 @@ class MineseekerRpc implements RpcInterface
     /** @var EntityManager */
     protected $em;
 
-    protected $grid;
-
     /**
      * MineseekerRpc constructor.
      * @param EntityManager $entityManager
@@ -37,17 +35,6 @@ class MineseekerRpc implements RpcInterface
         return 'mineseeker.rpc';
     }
 
-    /**
-     * @param ConnectionInterface $connection
-     * @param WampRequest $request
-     * @param array $params
-     * @return boolean
-     */
-    public function startGame(ConnectionInterface $connection, WampRequest $request, array $params)
-    {
-        return $this->saveGrid($params);
-    }
-
     /**
      * @param ConnectionInterface $connection
      * @param WampRequest $request
@@ -57,70 +44,33 @@ class MineseekerRpc implements RpcInterface
     public function connectGame(ConnectionInterface $connection, WampRequest $request, array $params)
     {
         $grid = $this->getGrid($params);
-        $users = null !== $grid ? $this->getUsers($params) : null;
+        return base64_encode(json_encode($grid));
-
-        return base64_encode(json_encode(
-            array(
-                'grid' => $grid,
-                'users' => $users
-            )
-        ));
     }
 
     /**
-     * @param $gameAssoc
+     * @param $data
-     * @return array
+     * @return array|bool
      */
-    private function getGrid($gameAssoc)
+    private function getGrid($data)
     {
         $this->reConnect();
-        $getsee = array();
-
         $this->em->clear();
 
-        $grid = $this->em
+        $grid = array();
+        $game = $this->em
             ->getRepository('MineSeekerBundle:PlayedGame')
-            ->findOneByGameAssoc($gameAssoc);
+            ->findOneByGameAssoc($data[1]);
 
-        if (null !== $grid) {
+        if (null !== $game) {
-            foreach ($grid->getGrid()->getGridRow()->toArray() as $row) {
+            foreach ($game->getGrid()->getGridRow()->toArray() as $row) {
-                $getsee[] = $row->getGridCol();
+                $grid[] = $row->getGridCol();
             }
 
-            return $getsee;
+            return $grid;
+        } else {
+            $this->saveGrid($data);
+            return $this->getGrid($data);
         }
-
-        return null;
-    }
-
-    /**
-     * @param $gameAssoc
-     * @return array
-     */
-    private function getUsers($gameAssoc)
-    {
-        $this->reConnect();
-        return $this->getUserCollection(
-            $this->em
-                ->getRepository('MineSeekerBundle:PlayedGame')
-                ->findOneByGameAssoc($gameAssoc)
-        );
-    }
-
-    /**
-     * 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() : '',
-            'redAnon' => null !== $playedGame->getRedAnon() ? $playedGame->getRedAnon()->getUserName() : '',
-            'blueAnon' => null !== $playedGame->getBlueAnon() ? $playedGame->getBlueAnon()->getUserName() : ''
-        );
     }
 
     /**

src/Mine/SeekerBundle/Topic/MineseekerTopic.php

@@ -231,7 +231,7 @@ class MineseekerTopic implements TopicInterface
         /** This checks it is a reconnection */
         if (($one && ($red + $blue === 0)) || ($two && ($red + $blue === 1))) {
             /** @var $users {array} w/ save users to database */
-            $users = $this->saveUserToDb($topic, $userName, $user, $topic->count());
+            $users = $this->saveUserToDb($playedGame, $userName, $user, $topic->count());
         }
 
         return $users;
@@ -240,20 +240,15 @@ class MineseekerTopic implements TopicInterface
     /**
      * Save user data to database
      *
-     * @param $topic
+     * @param $playedGame
      * @param $userName
      * @param $user
      * @param $count
      * @return array
      */
-    private function saveUserToDb($topic, $userName, $user, $count)
+    private function saveUserToDb($playedGame, $userName, $user, $count)
     {
         $this->reConnect();
-        $gameAssoc = explode('/', $topic->getId())[2];
-
-        $playedGame = $this->em
-            ->getRepository('MineSeekerBundle:PlayedGame')
-            ->findOneByGameAssoc($gameAssoc);
 
         /** the user is not anonym */
         if (!is_string($user)) {