SplendidBear-Websites/MineSeeker
Private
Public Access
1
0
Fork 0
Code Pull Requests 1 Releases Activity

debug the connections - no disconnect threatment and graphics design

Browse Source
This commit is contained in:
Root
2017-01-24 23:00:51 +01:00
parent e8691f29bb
commit fe5378f69b
8 changed files with 154 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig
View File

@@ -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"

1
src/Mine/SeekerBundle/Resources/public/js/mine-seeker.js
View File

@@ -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
);

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

@@ -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,

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

@@ -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",
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: <a href={"/play"} target="_self">Restart game!</a>
});
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: <div>
@@ -249,25 +236,31 @@ class MineWebsocket extends React.Component {
},
overlay: true,
overlayTitle: "We are waiting for your opponent...",
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>
: '',
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;

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

@@ -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"}
alt="Facebook profile"/>;
return id !== null ?
<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>)
})
: '';

3
src/Mine/SeekerBundle/Resources/views/Game/play.html.twig
View File

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

78
src/Mine/SeekerBundle/Rpc/MineseekerRpc.php
View File

@@ -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() : ''
);
}
/**

11
src/Mine/SeekerBundle/Topic/MineseekerTopic.php
View File

@@ -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)) {