add player names to UI

app/config/security.yml

@@ -26,4 +26,4 @@ security:
         - { path: ^/register, role: IS_AUTHENTICATED_ANONYMOUSLY }
         - { path: ^/resetting, role: IS_AUTHENTICATED_ANONYMOUSLY }
         - { path: ^/admin, role: ROLE_SUPER_ADMIN }
-        - { path: ^/, role: ROLE_SUPER_ADMIN }
+#        - { path: ^/, role: ROLE_SUPER_ADMIN }

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 %}
 

src/Mine/SeekerBundle/Topic/AcmeTopic.php

@@ -6,8 +6,11 @@ use Doctrine\ORM\EntityManager;
 use Gos\Bundle\WebSocketBundle\Client\ClientManipulatorInterface;
 use Gos\Bundle\WebSocketBundle\Topic\TopicInterface;
 use Gos\Bundle\WebSocketBundle\Router\WampRequest;
+use Guzzle\Http\Message\Request;
+use Mine\SeekerBundle\Entity\Gamer;
 use Ratchet\ConnectionInterface;
 use Ratchet\Wamp\Topic;
+use Symfony\Component\HttpFoundation\RequestStack;
 
 class AcmeTopic implements TopicInterface
 {
@@ -15,18 +18,23 @@ class AcmeTopic implements TopicInterface
     protected $clientManipulator;
 
     /** @var EntityManager */
-    protected $entityManager;
+    protected $em;
+
+    /** @var RequestStack */
+    protected $requestStack;
 
     /**
      * AcmeTopic constructor.
      *
      * @param $clientManipulator ClientManipulatorInterface
      * @param EntityManager $entityManager
+     * @param RequestStack $requestStack
      */
-    public function __construct(ClientManipulatorInterface $clientManipulator, EntityManager $entityManager)
+    public function __construct(ClientManipulatorInterface $clientManipulator, EntityManager $entityManager, RequestStack $requestStack)
     {
         $this->clientManipulator = $clientManipulator;
-        $this->entityManager = $entityManager;
+        $this->em = $entityManager;
+        $this->requestStack = $requestStack;
     }
 
     /**
@@ -47,11 +55,14 @@ class AcmeTopic implements TopicInterface
         if ($topic->count() > 2) {
             $topic->remove($connection);
         } else {
+            $users = $this->saveUserToDb($topic, $userName, $user, $topic->count());
+
             $topic->broadcast([
                 'userTopicId' => $connection->resourceId,
                 'channel' => $topic->getId(),
                 'user' => $userName,
-                'userCnt' => $topic->count()
+                'userCnt' => $topic->count(),
+                'users' => $users
             ]);
         }
     }
@@ -105,4 +116,39 @@ class AcmeTopic implements TopicInterface
     {
         return 'acme.topic';
     }
+
+    private function saveUserToDb($topic, $userName, $user, $count)
+    {
+        $gameAssoc = explode('/', $topic->getId())[2];
+
+        $playedGame = $this->em
+            ->getRepository('MineSeekerBundle:PlayedGame')
+            ->findOneByGameAssoc($gameAssoc);
+
+        if (!is_string($user)) {
+            $FOSUser = $this->em
+                ->getRepository('JotunheimrUserBundle:User')
+                ->findOneByUsername($userName);
+
+            $count == 1 ? $playedGame->setRed($FOSUser) : $playedGame->setBlue($FOSUser);
+        } else {
+            // $request = $this->requestStack->getCurrentRequest(); // TODO nem megy...
+
+            $anon = new Gamer();
+            $anon->setUserName($userName);
+            $this->em->persist($anon);
+
+            $count == 1 ? $playedGame->setRedAnon($anon) : $playedGame->setBlueAnon($anon);
+        }
+
+        $this->em->persist($playedGame);
+        $this->em->flush();
+
+        return array(
+            'red' => $playedGame->getRed() !== null ? $playedGame->getRed()->getUsername() : '',
+            'blue' => $playedGame->getBlue() !== null ? $playedGame->getBlue()->getUsername() : '',
+            'redAnon' => $playedGame->getRedAnon() !== null ? $playedGame->getRedAnon()->getUserName() : '',
+            'blueAnon' => $playedGame->getBlueAnon() !== null ? $playedGame->getBlueAnon()->getUserName() : ''
+        );
+    }
 }