add player names to UI

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

@@ -33,6 +33,7 @@ services:
         arguments:
             clientManipulator: "@gos_web_socket.websocket.client_manipulator"
             doctrine: '@doctrine.orm.entity_manager'
+            requestStack: '@request_stack'
 
     acme_hello.rpc_sample_service:
         class: Mine\SeekerBundle\Rpc\AcmeRpc

src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css

@@ -177,14 +177,18 @@
 #mine-wrapper .game-wrapper .users .user-container .user-name {
     font-weight: normal;
     text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
     padding: 3px 0;
     margin: 0 5px;
+
+    overflow: hidden;
 }
 
 #mine-wrapper .game-wrapper .users .user-container.user-blue .user-name {
-    color: #0b3776;
     border-top: 1px dashed #0b3776;
     border-bottom: 1px dashed #0b3776;
+    color: #0b3776;
 }
 
 #mine-wrapper .game-wrapper .users .user-container.user-red .user-name {

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

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

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

@@ -8,13 +8,11 @@ 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
@@ -70,14 +68,12 @@ class MineSeeker extends React.Component {
                             overlayTitle: "We are waiting for your opponent..."
                         });
 
-                        /** setup the web player && save player name */
+                        /** setup the web player */
                         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});
                             }
                         }
 
@@ -99,19 +95,27 @@ class MineSeeker extends React.Component {
                                         this.refs.gridControl.stepEvent(payload.data.coords);
                                     }
                                 } else {
-                                    console.info(
-                                        (typeof payload.user !== 'undefined' ? payload.user : 'user') + " has been subscribed to the channel!"
-                                    );
 
-                                    /** remove overlay when every user has been came */
+                                    /** It is subscribe or unsubscribe */
                                     if (isNotUnsubscribe) {
-                                        this.refs.gridControl.setState({overlay: payload.userCnt < 2});
-                                    }
+                                        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});
-                                    // }
+                                        /** remove overlay when every user has been came */
+                                        this.refs.gridControl.setState({overlay: payload.userCnt < 2});
+
+                                        /** Set up player names w/ server data */
+                                        this.refs.gridControl.refs.userControl.refs.red.setState({
+                                            name: payload.users.red !== '' ? payload.users.red : payload.users.redAnon
+                                        });
+
+                                        this.refs.gridControl.refs.userControl.refs.blue.setState({
+                                            name: payload.users.blue !== '' ? payload.users.blue : payload.users.blueAnon
+                                        });
+                                    } else {
+                                        console.info(payload.msg);
+                                    }
                                 }
                             }
                         );

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

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