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

ssl handling #22 && reconnection issues #20, #21

Browse Source
This commit is contained in:
Root
2016-11-30 20:15:56 +01:00
parent e6264c4eb0
commit 50b3663889
10 changed files with 199 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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}
ssl={document.getElementById('mine-wrapper').dataset.ssl}/>,
document.getElementById('mine-wrapper')
);

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

@@ -11,13 +11,15 @@ class MineSeeker extends React.Component {
this.state = {
env: props.env,
ssl: props.ssl,
gameInherited: props.gameId !== '',
gameAssoc: gameAssoc,
channel: channel,
session: null,
createGrid: false,
stepCache: [],
disconnect: false
connectionLost: false,
end: false
}
}
@@ -30,7 +32,12 @@ class MineSeeker extends React.Component {
return text;
}
/** STEP */
/**
* STEP
*
* @param coords
* @returns {{red: *, blue: *}}
*/
makePointsCalcAndStep(coords) {
let users = this.refs.gridControl.refs.userControl,
activePlayer = users.state.activePlayer ? 'blue' : 'red',
@@ -51,7 +58,38 @@ class MineSeeker extends React.Component {
return {red: redPoints, blue: bluePoints};
}
/** THE END */
/**
* START
*
* @param payload
*/
makeGameStart(payload) {
/** every time the blue starts */
this.refs.gridControl.refs.userControl.setState({activePlayer: 1});
/** 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,
desc: this.refs.gridControl.state.webPlayer === 'blue'
? this.refs.gridControl.state.desc.you
: this.refs.gridControl.state.desc.buddy,
active: true,
});
this.refs.gridControl.setState({overlay: false});
}
/**
* THE END
*
* @param bluePoints
* @param redPoints
* @param resign
*/
makeGameEndIfItEnds(bluePoints, redPoints, resign = false) {
let redWins = redPoints > 25,
blueWins = bluePoints > 25;
@@ -86,10 +124,13 @@ class MineSeeker extends React.Component {
: "You WIN!"
});
this.setState({end: true});
this.makeGameEndIfItEnds(0, 0, true);
}
clickResign() {
/** PUBLISH */
this.state.session.publish(this.state.channel, {
'resign': this.refs.gridControl.refs.userControl.state.activePlayer ? 'blue' : 'red'
});
@@ -119,13 +160,13 @@ class MineSeeker extends React.Component {
}
}
wInit(session, gridServer, gridClient) {
wInit(session, data, gridClient) {
this.setState({session: session});
/** save session to GridControl */
/** render grid fields - #12 */
this.refs.gridControl.setState({
grid: this.state.gameInherited ? JSON.parse(Base64.decode(gridServer)) : gridClient,
grid: this.state.gameInherited ? JSON.parse(Base64.decode(data))['grid'] : gridClient,
channel: this.state.channel,
desc: {
buddy: <div>
@@ -157,39 +198,31 @@ class MineSeeker extends React.Component {
});
}
wSubscribe(payload) {
wSubscribe(payload, rpcUsers = null) {
this.state.env === 'dev' && console.info(
(typeof payload.user !== 'undefined' ? payload.user : 'user') + " has been subscribed to the channel!"
);
if (!this.state.disconnect) {
/** setup the web player */
null === this.refs.gridControl.state.webPlayer && this.refs.gridControl.setState({
webPlayer: payload.user === payload.users.blue || payload.user === payload.users.blueAnon
? 'blue'
: 'red'
});
let firstUser = !rpcUsers;
/** every user has been came */
if (payload.userCnt === 2) {
/** every time the blue starts */
this.refs.gridControl.refs.userControl.setState({activePlayer: 1});
this.refs.gridControl.state.webPlayer === null && this.refs.gridControl.setState({
webPlayer: payload.user === payload.users.blue ||
(
firstUser && payload.users.blueAnon !== '' ||
!firstUser && (rpcUsers.blueAnon === '' && rpcUsers.blue === '')
)
? 'blue' : 'red'
});
/** 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,
desc: this.refs.gridControl.state.webPlayer === 'blue'
? this.refs.gridControl.state.desc.you
: this.refs.gridControl.state.desc.buddy,
active: true,
});
this.refs.gridControl.setState({overlay: false});
}
/** every user has been came */
if (
payload.userCnt === 2 &&
(
!this.state.connectionLost ||
this.state.connectionLost && false === this.refs.gridControl.refs.userControl.state.activePlayer && !this.state.end
)
) {
this.makeGameStart(payload);
}
}
@@ -226,7 +259,7 @@ class MineSeeker extends React.Component {
}
/** Connect - Subscribe */
subscribe() {
subscribe(rpcUsers = null) {
this.state.session.subscribe(
this.state.channel,
(uri, payload, log) => {
@@ -238,30 +271,31 @@ class MineSeeker extends React.Component {
this.wTopic(payload);
} else {
if (isNotUnsubscribe) {
this.wSubscribe(payload);
this.wSubscribe(payload, rpcUsers);
} else {
this.wUnsubscribe(payload);
}
}
/** RECONNECTION */
if (payload.userCnt === 2 && this.state.disconnect) {
if (payload.userCnt === 2 && this.state.connectionLost) {
this.state.env === 'dev' && console.info('Reconnection process');
/** PUBLISH */
let cache = this.state.stepCache;
cache.forEach((item) => this.state.session.publish(this.state.channel, item));
this.setState({disconnect: false, stepCache: []});
this.setState({connectionLost: false, stepCache: []});
}
});
}
/** after rendering */
/** After rendering */
componentDidMount() {
/** Create Websocket w/ Bahnhof.js */
let websocket = WS.connect(
this.state.env === 'dev'
? "ws://mine.dev:6450"
: "ws://www.mineseeker.ninja:6450"
: (this.state.ssl === 'true' ? "wss" : "ws") + "://www.mineseeker.ninja:6450"
);
/**
@@ -271,7 +305,7 @@ class MineSeeker extends React.Component {
websocket.on("socket/connect", (session) => {
this.state.env === 'dev' && console.info("Successfully connected to the Server!");
if (!this.state.disconnect) {
if (!this.state.connectionLost) {
let gridClient = this.state.gameInherited || new Grid().state.grid;
/**
@@ -284,11 +318,11 @@ class MineSeeker extends React.Component {
this.state.gameInherited ? this.state.gameAssoc : [Base64.encode(JSON.stringify(gridClient)), this.state.gameAssoc]
)
.then(
(gridServer) => {
this.state.env === 'dev' && console.info("Grid has been created! Return w/ gameAssoc.");
(data) => {
this.state.env === 'dev' && console.info('RPC has been called');
this.wInit(session, gridServer, gridClient);
this.subscribe();
this.wInit(session, data, gridClient);
this.subscribe(this.state.gameInherited && JSON.parse(Base64.decode(data))['users']);
},
(error, desc) => this.state.env === 'dev' && console.error(["RPC Error", error, desc])
);
@@ -304,7 +338,11 @@ class MineSeeker extends React.Component {
*/
websocket.on("socket/disconnect", (error) => {
this.state.env === 'dev' && console.error("Disconnected for " + error.reason + " with code " + error.code);
this.setState({disconnect: true});
error.code === 6 && this.setState({connectionLost: true});
error.code === 3 && setTimeout(function () {
this.componentDidMount();
}.bind(this), 500);
});
}
@@ -344,7 +382,7 @@ class MineSeeker extends React.Component {
};
/** PUBLISH */
!this.state.disconnect
!this.state.connectionLost
? this.state.session.publish(this.state.channel, dataPack)
: this.cachePublish(dataPack);
}

2
src/Mine/SeekerBundle/Resources/views/Game/index.html.twig
View File

@@ -2,7 +2,7 @@
{% block header %}
<h1>MineSeeker</h1>
<h3>version 1.0a</h3>
<h3>version 1.1.3a</h3>
<a href="{{ path('MineSeekerBundle_gamePlay') }}">Play now</a>
<img src="{{ asset('bundles/mineseeker/images/homepage/mineseeker-2.png') }}" alt="" border="0">
{% endblock %}

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

@@ -4,6 +4,7 @@
<div class="mine-container">
<div id="mine-wrapper"
data-env="{{ env }}"
data-ssl="{{ ssl }}"
data-game-id="{{ app.request.get('gameAssoc') }}">
</div>
</div>