current username checked && refactor && remove players in channel when they are more than 2

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

@@ -4,6 +4,7 @@ import MineSeeker from './mine-seeker/app';
 
 ReactDOM.render(
     <MineSeeker env={document.getElementById('mine-wrapper').dataset.env}
-                gameId={document.getElementById('mine-wrapper').dataset.gameId}/>,
+                gameId={document.getElementById('mine-wrapper').dataset.gameId}
+                userName={document.getElementById('mine-wrapper').dataset.userName}/>,
     document.getElementById('mine-wrapper')
 );

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

@@ -8,11 +8,13 @@ class MineSeeker extends React.Component {
 
         var gameAssoc = props.gameId !== '' ? props.gameId : this.makeGameAssoc(50);
         var channel = "acme/channel/" + gameAssoc;
+        var userName = props.userName;
 
         this.state = {
             gameInherited: props.gameId !== '',
             gameAssoc: gameAssoc,
             channel: channel,
+            userName: userName,
             session: null,
             createGrid: false,
             stepCache: null
@@ -66,12 +68,14 @@ class MineSeeker extends React.Component {
                             channel: this.state.channel
                         });
 
-                        /** setup the web player */
+                        /** setup the web player && save player name */
                         if (this.refs.gridControl.state.webPlayer === null) {
                             if (this.state.gameInherited) {
                                 this.refs.gridControl.state.webPlayer = 'blue';
+                                this.refs.gridControl.refs.userControl.refs.blue.setState({name: this.state.userName});
                             } else {
                                 this.refs.gridControl.state.webPlayer = 'red';
+                                this.refs.gridControl.refs.userControl.refs.red.setState({name: this.state.userName});
                             }
                         }
 
@@ -86,12 +90,19 @@ class MineSeeker extends React.Component {
                                     /** Auto-Step if this player is not the current user */
                                     if (this.refs.gridControl.state.webPlayer !== payload.data.player) {
                                         console.warn('Opponent stepped: Auto-Step process');
-                                        
+
                                         this.refs.gridControl.refs.userControl.state.bombSelected = payload.data.bomb;
                                         this.refs.gridControl.stepEvent(payload.data.coords);
                                     }
                                 } else {
-                                    console.info("User has been subscribed to the channel!");
+                                    console.info(
+                                        (typeof payload.user !== 'undefined' ? payload.user : 'user') + " has been subscribed to the channel!"
+                                    );
+
+                                    // /** Save the opponent's player name */
+                                    // if (this.state.gameInherited) {
+                                    //     this.refs.gridControl.refs.userControl.refs.blue.setState({name: payload.user});
+                                    // }
                                 }
                             }
                         );

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

@@ -368,14 +368,8 @@ class GridControl extends React.Component {
         return (
             <div className="game-wrapper">
                 <UserControl ref="userControl"
-                             blue="Olcsó János"
-                             red="Eszet Lenke"
                              bombClear={this.bombClear.bind(this)}/>
-                <div className="grid">
+                <div className="grid"> {grid} </div>
-                    {/*{this.renderGridFields()}*/}
-                    {grid}
-                </div>
-                {/*{this.playingSound()}*/}
             </div>
         );
     }

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

@@ -42,7 +42,6 @@ class UserControl extends React.Component {
             <div className="users">
                 <User ref="blue"
                       color="blue"
-                      name={this.props.blue}
                       active={this.state.activePlayer === 1}
                       onClickBombSelector={this.onClickBombSelector.bind(this, 1)}/>
                 <div className="active-mines-container">
@@ -56,7 +55,6 @@ class UserControl extends React.Component {
                 <div className="clear"></div>
                 <User ref="red"
                       color="red"
-                      name={this.props.red}
                       active={this.state.activePlayer === 0}
                       onClickBombSelector={this.onClickBombSelector.bind(this, 0)}/>
                 <div className="resign">

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

@@ -5,7 +5,7 @@ class User extends React.Component {
         super(props);
 
         this.state = {
-            name: props.name,
+            name: "...",
             active: props.active,
             color: props.color === 'blue' ? 1 : 0,
             mines: 0,

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

@@ -10,7 +10,8 @@
 {% block body %}
     <div id="mine-wrapper"
          data-env="{{ env }}"
-         data-game-id="{{ app.request.get('gameAssoc') }}">
+         data-game-id="{{ app.request.get('gameAssoc') }}"
+         data-user-name="{{ app.user.username }}">
     </div>
 {% endblock %}
 

src/Mine/SeekerBundle/Topic/AcmeTopic.php

@@ -43,12 +43,17 @@ class AcmeTopic implements TopicInterface
         $user = $this->clientManipulator->getClient($connection);
         $userName = is_string($user) ? $user : $user->getUsername();
 
-        $topic->broadcast([
+        /** if more user wants to connect than 2 to one channel */
-            'userTopicId' => $connection->resourceId,
+        if ($topic->count() > 2) {
-            'channel' => $topic->getId(),
+            $topic->remove($connection);
-            'user' => $userName,
+        } else {
-            'userCnt' => $topic->count()
+            $topic->broadcast([
-        ]);
+                'userTopicId' => $connection->resourceId,
+                'channel' => $topic->getId(),
+                'user' => $userName,
+                'userCnt' => $topic->count()
+            ]);
+        }
     }
 
     /**