From fe5378f69b29e480ad42e2909068cb14a3b56176 Mon Sep 17 00:00:00 2001 From: Lang Date: Tue, 24 Jan 2017 23:00:51 +0100 Subject: [PATCH] debug the connections - no disconnect threatment and graphics design --- .../Resources/views/Security/login.html.twig | 2 +- .../Resources/public/js/mine-seeker.js | 1 + .../Resources/public/js/mine-seeker/app.js | 2 + .../public/js/mine-seeker/game/websocket.js | 255 +++++++++--------- .../Resources/public/js/mine-user-list/app.js | 9 +- .../Resources/views/Game/play.html.twig | 3 +- src/Mine/SeekerBundle/Rpc/MineseekerRpc.php | 80 ++---- .../SeekerBundle/Topic/MineseekerTopic.php | 11 +- 8 files changed, 154 insertions(+), 209 deletions(-) diff --git a/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig b/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig index ba9565d..9d17cb0 100644 --- a/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig +++ b/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig @@ -32,7 +32,7 @@ + placeholder="Username or Email" autofocus /> , mineWrapper ); diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js index edb6274..44bf2e6 100644 --- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js +++ b/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, diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/websocket.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/websocket.js index 3d3de38..e990f0b 100644 --- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/websocket.js +++ b/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:
- - -
- }); - } 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 + ? +
+

Share this unique link w/ your opponent

+
+ +
+ {app.state.env !== 'dev' && + Share in Facebook message + } + {app.state.env === 'dev' && + Play w/ me! + } +
+ : '' + }); + } + } + + 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", - app.state.gameInherited ? app.state.gameAssoc : [Base64.encode(JSON.stringify(gridClient)), app.state.gameAssoc] + "mineseeker-rpc/connectGame", + [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 - ? JSON.parse(Base64.decode(data)) - : data; + let grid = JSON.parse(Base64.decode(data)); - /** Check the grid if the user is inherited @see #30 */ - if ((app.state.gameInherited && null !== serverData.grid) || !app.state.gameInherited) { - 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: Restart game! - }); - - console.error("This channel does not exists!"); - } + this.init(app, session, grid); + this.subscribe(app); }, (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({ - grid: app.state.gameInherited ? gridServer : gridClient, + gridControl.setState({ + grid: grid, channel: app.state.channel, desc: { buddy:
@@ -249,25 +236,31 @@ class MineWebsocket extends React.Component { }, overlay: true, overlayTitle: "We are waiting for your opponent...", - overlaySubTitle: app.state.gameAssoc - ? -
-

Share this unique link w/ your opponent

-
- -
- {app.state.env !== 'dev' && - Share in Facebook message - } - {app.state.env === 'dev' && - Play w/ me! - } -
- : '', + overlaySubTitle: "", 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; diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-user-list/app.js b/src/Mine/SeekerBundle/Resources/public/js/mine-user-list/app.js index 2400b2b..ef4aa2e 100644 --- a/src/Mine/SeekerBundle/Resources/public/js/mine-user-list/app.js +++ b/src/Mine/SeekerBundle/Resources/public/js/mine-user-list/app.js @@ -80,8 +80,10 @@ class MineUserList extends React.Component { } getProfilePicture(id) { - return Facebook profile; + return id !== null ? + Facebook profile : + ""; } clickChallengeFriend(username) { @@ -121,7 +123,8 @@ class MineUserList extends React.Component { ? this.state.requests.forEach((item) => { req.push(

{item.username} challenged you!

- +
) }) : ''; diff --git a/src/Mine/SeekerBundle/Resources/views/Game/play.html.twig b/src/Mine/SeekerBundle/Resources/views/Game/play.html.twig index 102de23..92a7c2a 100644 --- a/src/Mine/SeekerBundle/Resources/views/Game/play.html.twig +++ b/src/Mine/SeekerBundle/Resources/views/Game/play.html.twig @@ -10,7 +10,8 @@
+ data-game-id="{{ app.request.get('gameAssoc') }}" + data-web-player-name="{{ app.user.username is defined ? app.user.username : '' }}">
{% endblock %} diff --git a/src/Mine/SeekerBundle/Rpc/MineseekerRpc.php b/src/Mine/SeekerBundle/Rpc/MineseekerRpc.php index 1ae0808..6553620 100644 --- a/src/Mine/SeekerBundle/Rpc/MineseekerRpc.php +++ b/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( - array( - 'grid' => $grid, - 'users' => $users - ) - )); + return base64_encode(json_encode($grid)); } /** - * @param $gameAssoc - * @return array + * @param $data + * @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) { - foreach ($grid->getGrid()->getGridRow()->toArray() as $row) { - $getsee[] = $row->getGridCol(); + if (null !== $game) { + foreach ($game->getGrid()->getGridRow()->toArray() as $row) { + $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() : '' - ); } /** @@ -169,7 +119,7 @@ class MineseekerRpc implements RpcInterface $connection->close(); $connection->connect(); } - } catch(PDOException $ex) { + } catch (PDOException $ex) { throw PDOException::class; } } diff --git a/src/Mine/SeekerBundle/Topic/MineseekerTopic.php b/src/Mine/SeekerBundle/Topic/MineseekerTopic.php index 2a155e1..1c57aae 100644 --- a/src/Mine/SeekerBundle/Topic/MineseekerTopic.php +++ b/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)) {