refactor; separate app.js to 3 files (except step yet)
This commit is contained in:
@@ -1,7 +1,9 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Grid from './grid/grid';
|
|
||||||
import GridControl from './grid/grid-control';
|
import GridControl from './grid/grid-control';
|
||||||
import MineServices from '../mine-system/mine-services';
|
import MineServices from '../mine-system/mine-services';
|
||||||
|
import MineStart from './game/start'
|
||||||
|
import MineEnd from './game/end'
|
||||||
|
import MineWebsocket from './game/websocket'
|
||||||
|
|
||||||
class MineSeeker extends React.Component {
|
class MineSeeker extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@@ -12,6 +14,10 @@ class MineSeeker extends React.Component {
|
|||||||
let channel = "mineseeker/channel/" + gameAssoc;
|
let channel = "mineseeker/channel/" + gameAssoc;
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
|
startProcess: new MineStart(),
|
||||||
|
endProcess: new MineEnd(),
|
||||||
|
wsProcess: new MineWebsocket(),
|
||||||
|
|
||||||
env: props.env,
|
env: props.env,
|
||||||
ssl: props.ssl,
|
ssl: props.ssl,
|
||||||
gameInherited: props.gameId !== '',
|
gameInherited: props.gameId !== '',
|
||||||
@@ -26,18 +32,6 @@ class MineSeeker extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
currectGridSize() {
|
|
||||||
let $field = $('#mine-wrapper .grid');
|
|
||||||
$field.height($field.width());
|
|
||||||
|
|
||||||
$field = $('#mine-wrapper .grid .field-wrapper');
|
|
||||||
$field.height($field.width());
|
|
||||||
|
|
||||||
$('#mine-wrapper .grid .field-wrapper .field')
|
|
||||||
.height($field.width())
|
|
||||||
.css('line-height', ($field.width() - 2) + 'px');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* STEP
|
* STEP
|
||||||
*
|
*
|
||||||
@@ -64,383 +58,12 @@ class MineSeeker extends React.Component {
|
|||||||
return {red: redPoints, blue: bluePoints};
|
return {red: redPoints, blue: bluePoints};
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* START
|
|
||||||
*
|
|
||||||
* @param payload
|
|
||||||
*/
|
|
||||||
makeGameStart(payload) {
|
|
||||||
let steps = JSON.parse(Base64.decode(payload.steps));
|
|
||||||
|
|
||||||
if (steps.length) {
|
|
||||||
steps.forEach((item) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.refs.gridControl.refs.userControl.setState({bombSelected: item.wBomb});
|
|
||||||
this.makePointsCalcAndStep([item.row, item.col]);
|
|
||||||
}, 500);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
/** every time the blue starts when it is not a continued game */
|
|
||||||
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;
|
|
||||||
|
|
||||||
if (redWins || blueWins || resign) {
|
|
||||||
this.refs.gridControl.state.sound.won.play();
|
|
||||||
|
|
||||||
if (false === resign) {
|
|
||||||
this.refs.gridControl.setState({
|
|
||||||
overlay: true,
|
|
||||||
overlayTitle: (redWins ? 'Red' : 'Blue') + " wins the game!",
|
|
||||||
overlaySubTitle: "Play again!"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.refs.gridControl.showLeftMines();
|
|
||||||
|
|
||||||
this.refs.gridControl.refs.userControl.setState({activePlayer: false});
|
|
||||||
this.refs.gridControl.refs.userControl.refs.red.setState({desc: ""});
|
|
||||||
this.refs.gridControl.refs.userControl.refs.blue.setState({desc: ""});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
resignProcess(color) {
|
|
||||||
this.refs.gridControl.setState({
|
|
||||||
overlay: true,
|
|
||||||
overlayTitle: color === this.refs.gridControl.state.webPlayer
|
|
||||||
? "You have been give up"
|
|
||||||
: "Your opponent has been resigned",
|
|
||||||
overlaySubTitle: color === this.refs.gridControl.state.webPlayer
|
|
||||||
? "You LOSE!"
|
|
||||||
: "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'
|
|
||||||
});
|
|
||||||
this.resignProcess(this.refs.gridControl.state.webPlayer);
|
|
||||||
}
|
|
||||||
|
|
||||||
clickResignCancel() {
|
|
||||||
this.refs.gridControl.setState({
|
|
||||||
overlay: false
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** RESIGN */
|
|
||||||
resign() {
|
|
||||||
let users = this.refs.gridControl.refs.userControl,
|
|
||||||
activePlayer = users.state.activePlayer ? 'blue' : 'red';
|
|
||||||
|
|
||||||
if (this.refs.gridControl.state.webPlayer === activePlayer) {
|
|
||||||
this.refs.gridControl.setState({
|
|
||||||
overlay: true,
|
|
||||||
overlayTitle: "Are u sure u want to resign?!",
|
|
||||||
overlaySubTitle: <div className="resign">
|
|
||||||
<a onClick={this.clickResign.bind(this)}>Yes</a>
|
|
||||||
<a onClick={this.clickResignCancel.bind(this)}>No!</a>
|
|
||||||
</div>
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @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() {
|
|
||||||
let display = 'popup';
|
|
||||||
|
|
||||||
FB.getLoginStatus(function (response) {
|
|
||||||
display = response.status === 'connected'
|
|
||||||
? 'dialog'
|
|
||||||
: 'popup';
|
|
||||||
});
|
|
||||||
|
|
||||||
FB.ui({
|
|
||||||
method: 'send',
|
|
||||||
display: display,
|
|
||||||
link: window.location.href + '/' + this.state.gameAssoc,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
wInit(session, gridServer, gridClient) {
|
|
||||||
this.setState({session: session});
|
|
||||||
|
|
||||||
/** save session to GridControl */
|
|
||||||
/** render grid fields - @see #12 */
|
|
||||||
this.refs.gridControl.setState({
|
|
||||||
grid: this.state.gameInherited ? gridServer : gridClient,
|
|
||||||
channel: this.state.channel,
|
|
||||||
desc: {
|
|
||||||
buddy: <div>
|
|
||||||
Your buddy is <br/>
|
|
||||||
making a <br/>
|
|
||||||
move.
|
|
||||||
</div>,
|
|
||||||
you: <div>
|
|
||||||
It is your turn! <br/>
|
|
||||||
Make a move.
|
|
||||||
</div>
|
|
||||||
},
|
|
||||||
overlay: true,
|
|
||||||
overlayTitle: "We are waiting for your opponent...",
|
|
||||||
overlaySubTitle: this.state.gameAssoc
|
|
||||||
?
|
|
||||||
<div>
|
|
||||||
<h3>Share this unique link w/ your opponent</h3>
|
|
||||||
<div className="clippy">
|
|
||||||
<input id="foo"
|
|
||||||
defaultValue={window.location.href + '/' + this.state.gameAssoc}/>
|
|
||||||
</div>
|
|
||||||
{this.state.env !== 'dev' &&
|
|
||||||
<a onClick={this.clickFBShare.bind(this)}>Share in Facebook message</a>
|
|
||||||
}
|
|
||||||
{this.state.env === 'dev' &&
|
|
||||||
<a href={"/play/" + this.state.gameAssoc} target="_blank">Play w/ me!</a>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
: '',
|
|
||||||
renderGridFields: this.state.gameAssoc
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
clickRestorePlayer(data) {
|
|
||||||
this.refs.gridControl.setState({
|
|
||||||
overlay: true,
|
|
||||||
overlayTitle: "We are waiting for your opponent...",
|
|
||||||
overlaySubTitle: ''
|
|
||||||
});
|
|
||||||
|
|
||||||
this.refs.gridControl.state.webPlayer = data[0];
|
|
||||||
|
|
||||||
if (data[1].userCnt === 2) {
|
|
||||||
this.makeGameStart(data[1]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
wSubscribe(payload, rpcUsers = null) {
|
|
||||||
this.state.env === 'dev' && console.info(
|
|
||||||
(typeof payload.user !== 'undefined' ? payload.user : 'user') + " has been subscribed to the channel!"
|
|
||||||
);
|
|
||||||
|
|
||||||
let firstUser = !rpcUsers;
|
|
||||||
|
|
||||||
/** is it a REPLAY */
|
|
||||||
if (this.state.replay) {
|
|
||||||
this.refs.gridControl.setState({
|
|
||||||
overlay: true,
|
|
||||||
overlayTitle: "Which player has been you, in this game?",
|
|
||||||
overlaySubTitle: <div>
|
|
||||||
<button onClick={this.clickRestorePlayer.bind(this, ['blue', payload])}>
|
|
||||||
I was the BLUE, man!
|
|
||||||
</button>
|
|
||||||
<button onClick={this.clickRestorePlayer.bind(this, ['red', payload])} target="_blank">
|
|
||||||
I was RED, obviously!
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
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'
|
|
||||||
});
|
|
||||||
|
|
||||||
/** 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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** rwd */
|
|
||||||
(900 > $(document).width()) && this.currectGridSize();
|
|
||||||
}
|
|
||||||
|
|
||||||
wUnsubscribe(payload) {
|
|
||||||
this.state.env === 'dev' && console.info(payload.msg);
|
|
||||||
|
|
||||||
this.refs.gridControl.setState({
|
|
||||||
overlay: true,
|
|
||||||
overlayTitle: "The connection has been lost w/ your friend...",
|
|
||||||
overlaySubTitle: "Please, restart the game!"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
wTopic(payload) {
|
|
||||||
/** Auto-Step if this player is not the current user */
|
|
||||||
if (this.refs.gridControl.state.webPlayer !== payload.data.player) {
|
|
||||||
if (null === payload.data.resign) {
|
|
||||||
this.state.env === 'dev' && console.warn(payload.user + " has been stepped to coords: " + payload.data.coords[0] + ', ' + payload.data.coords[1]);
|
|
||||||
this.state.env === 'dev' && console.warn('Opponent stepped: Auto-Step process');
|
|
||||||
|
|
||||||
this.refs.gridControl.refs.userControl.setState({bombSelected: payload.data.bomb});
|
|
||||||
|
|
||||||
/** STEP */
|
|
||||||
let points = this.makePointsCalcAndStep(payload.data.coords);
|
|
||||||
|
|
||||||
/** THE END */
|
|
||||||
this.makeGameEndIfItEnds(points.blue, points.red);
|
|
||||||
} else {
|
|
||||||
/** RESIGN */
|
|
||||||
/** THE END */
|
|
||||||
this.resignProcess(payload.data.resign);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Connect - Subscribe */
|
|
||||||
subscribe(rpcUsers = null) {
|
|
||||||
this.state.session.subscribe(
|
|
||||||
this.state.channel,
|
|
||||||
(uri, payload, log) => {
|
|
||||||
let isTopicEvent = typeof payload.data !== 'undefined',
|
|
||||||
isNotUnsubscribe = typeof payload.msg === 'undefined';
|
|
||||||
|
|
||||||
/** CONNECTION */
|
|
||||||
if (isTopicEvent) {
|
|
||||||
this.wTopic(payload);
|
|
||||||
} else {
|
|
||||||
if (isNotUnsubscribe) {
|
|
||||||
this.wSubscribe(payload, rpcUsers);
|
|
||||||
} else {
|
|
||||||
this.wUnsubscribe(payload);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** RECONNECTION */
|
|
||||||
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({connectionLost: false, stepCache: []});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
connectWithWebsocket() {
|
|
||||||
/** Create Websocket w/ Bahnhof.js */
|
|
||||||
let websocket = WS.connect(
|
|
||||||
this.state.env === 'dev'
|
|
||||||
? "ws://mine.dev:6450"
|
|
||||||
// : (this.state.ssl === 'true' ? "wss" : "ws") + "://" + window.location.hostname + ":6450/"
|
|
||||||
: (this.state.ssl === 'true' ? "wss" : "ws") + "://www.mineseeker.ninja:6450/"
|
|
||||||
);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Connect
|
|
||||||
* Session is an Autobahn JS WAMP session.
|
|
||||||
*/
|
|
||||||
websocket.on("socket/connect", (session) => {
|
|
||||||
this.state.env === 'dev' && console.info("Successfully connected to the Server!");
|
|
||||||
|
|
||||||
if (!this.state.connectionLost) {
|
|
||||||
let gridClient = this.state.gameInherited || new Grid().state.grid;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Connect - RPC
|
|
||||||
* Send grid information to the server
|
|
||||||
*/
|
|
||||||
session
|
|
||||||
.call(
|
|
||||||
this.state.gameInherited ? "mineseeker-rpc/connectGame" : "mineseeker-rpc/startGame",
|
|
||||||
this.state.gameInherited ? this.state.gameAssoc : [Base64.encode(JSON.stringify(gridClient)), this.state.gameAssoc]
|
|
||||||
)
|
|
||||||
.then(
|
|
||||||
(data) => {
|
|
||||||
this.state.env === 'dev' && console.info('RPC has been called');
|
|
||||||
|
|
||||||
let serverData = data[0] !== true
|
|
||||||
? JSON.parse(Base64.decode(data))
|
|
||||||
: data;
|
|
||||||
|
|
||||||
/** Check the grid if the user is inherited @see #30 */
|
|
||||||
if ((this.state.gameInherited && null !== serverData.grid) || !this.state.gameInherited) {
|
|
||||||
this.wInit(session, serverData.grid, gridClient);
|
|
||||||
this.subscribe(this.state.gameInherited && serverData.users);
|
|
||||||
} else {
|
|
||||||
this.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!");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
(error, desc) => this.state.env === 'dev' && console.error(["RPC Error", error, desc])
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
this.setState({session: session});
|
|
||||||
this.subscribe();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* DisConnect
|
|
||||||
* Error provides us with some insight into the disconnection: error.reason and error.code
|
|
||||||
*/
|
|
||||||
websocket.on("socket/disconnect", (error) => {
|
|
||||||
this.state.env === 'dev' && console.error("Disconnected for " + error.reason + " with code " + error.code);
|
|
||||||
|
|
||||||
error.code === 6 && this.setState({connectionLost: true});
|
|
||||||
error.code === 3 && setTimeout(function () {
|
|
||||||
this.componentDidMount();
|
|
||||||
}.bind(this), 500);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Unregistered
|
* Unregistered
|
||||||
* http://mine.dev/re-play/I1Bx9UHZP5CWDnTZHpJqGTlkzehblfsbfz4A4xYaH9HFhBK2aN
|
* http://mine.dev/re-play/I1Bx9UHZP5CWDnTZHpJqGTlkzehblfsbfz4A4xYaH9HFhBK2aN
|
||||||
*
|
*
|
||||||
* Registered
|
* Registered - Admin -> Lang
|
||||||
* http://mine.dev/re-play/km10oOgM7Xh37vJ8PFjaRRePrHpDkZFDJgxLhNc6hkTYyLyPKD
|
* http://mine.dev/re-play/bazmegdflgkjndfgkhjn
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/** After rendering */
|
/** After rendering */
|
||||||
@@ -450,7 +73,7 @@ class MineSeeker extends React.Component {
|
|||||||
? this.setState({replay: true})
|
? this.setState({replay: true})
|
||||||
: this.setState({replay: false});
|
: this.setState({replay: false});
|
||||||
|
|
||||||
this.connectWithWebsocket();
|
this.state.wsProcess.connectWithWebsocket(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -475,7 +98,7 @@ class MineSeeker extends React.Component {
|
|||||||
let points = this.makePointsCalcAndStep(coords);
|
let points = this.makePointsCalcAndStep(coords);
|
||||||
|
|
||||||
/** THE END */
|
/** THE END */
|
||||||
this.makeGameEndIfItEnds(points.blue, points.red);
|
this.state.endProcess.makeGameEndIfItEnds(this, points.blue, points.red);
|
||||||
|
|
||||||
let dataPack = {
|
let dataPack = {
|
||||||
'coords': coords,
|
'coords': coords,
|
||||||
@@ -500,7 +123,7 @@ class MineSeeker extends React.Component {
|
|||||||
return (
|
return (
|
||||||
<GridControl ref="gridControl"
|
<GridControl ref="gridControl"
|
||||||
env={this.props.env === 'dev'}
|
env={this.props.env === 'dev'}
|
||||||
resign={this.resign.bind(this)}
|
resign={this.state.endProcess.resign.bind(this.state.endProcess, this)}
|
||||||
onClick={this.onClick.bind(this)}/>
|
onClick={this.onClick.bind(this)}/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,87 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
class MineEnd extends React.Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
makeGameEndIfItEnds(app, bluePoints, redPoints, resign = false) {
|
||||||
|
let redWins = redPoints > 25,
|
||||||
|
blueWins = bluePoints > 25,
|
||||||
|
gridControl = app.refs.gridControl,
|
||||||
|
userControl = app.refs.gridControl.refs.userControl,
|
||||||
|
bluePlayer = userControl.refs.blue,
|
||||||
|
redPlayer = userControl.refs.red;
|
||||||
|
|
||||||
|
if (redWins || blueWins || resign) {
|
||||||
|
gridControl.state.sound.won.play();
|
||||||
|
|
||||||
|
/** it is NOT a RESIGN */
|
||||||
|
if (false === resign) {
|
||||||
|
gridControl.setState({
|
||||||
|
overlay: true,
|
||||||
|
overlayTitle: (redWins ? 'Red' : 'Blue') + " wins the game!",
|
||||||
|
overlaySubTitle: "Play again!"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
gridControl.showLeftMines();
|
||||||
|
userControl.setState({activePlayer: false});
|
||||||
|
redPlayer.setState({desc: ""});
|
||||||
|
bluePlayer.setState({desc: ""});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
resignProcess(app, webPlayer) {
|
||||||
|
let gridControl = app.refs.gridControl;
|
||||||
|
|
||||||
|
gridControl.setState({
|
||||||
|
overlay: true,
|
||||||
|
overlayTitle: webPlayer === gridControl.state.webPlayer
|
||||||
|
? "You have been give up"
|
||||||
|
: "Your opponent has been resigned",
|
||||||
|
overlaySubTitle: webPlayer === gridControl.state.webPlayer
|
||||||
|
? "You LOSE!"
|
||||||
|
: "You WIN!"
|
||||||
|
});
|
||||||
|
|
||||||
|
app.setState({end: true});
|
||||||
|
this.makeGameEndIfItEnds(app, 0, 0, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
clickResign(app) {
|
||||||
|
let gridControl = app.refs.gridControl,
|
||||||
|
userControl = app.refs.gridControl.refs.userControl;
|
||||||
|
|
||||||
|
/** REMOTE */
|
||||||
|
app.state.session.publish(app.state.channel, {
|
||||||
|
'resign': userControl.state.activePlayer ? 'blue' : 'red'
|
||||||
|
});
|
||||||
|
|
||||||
|
/** LOCAL */
|
||||||
|
this.resignProcess(app, gridControl.state.webPlayer);
|
||||||
|
}
|
||||||
|
|
||||||
|
clickResignCancel(gridControl) {
|
||||||
|
gridControl.setState({overlay: false});
|
||||||
|
}
|
||||||
|
|
||||||
|
resign(app) {
|
||||||
|
let gridControl = app.refs.gridControl,
|
||||||
|
userControl = app.refs.gridControl.refs.userControl,
|
||||||
|
activePlayer = userControl.state.activePlayer ? 'blue' : 'red';
|
||||||
|
|
||||||
|
if (gridControl.state.webPlayer === activePlayer) {
|
||||||
|
gridControl.setState({
|
||||||
|
overlay: true,
|
||||||
|
overlayTitle: "Are u sure u want to resign?!",
|
||||||
|
overlaySubTitle: <div className="resign">
|
||||||
|
<a onClick={this.clickResign.bind(this, app)}>Yes</a>
|
||||||
|
<a onClick={this.clickResignCancel.bind(this, gridControl)}>No!</a>
|
||||||
|
</div>
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MineEnd;
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
class MineStart extends React.Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** MAIN */
|
||||||
|
makeGameStart(app, payload, gridControl) {
|
||||||
|
let steps = JSON.parse(Base64.decode(payload.steps)),
|
||||||
|
userControl = gridControl.refs.userControl;
|
||||||
|
|
||||||
|
if (steps.length) {
|
||||||
|
this.takeSteps(app, steps, gridControl);
|
||||||
|
} else {
|
||||||
|
/** every time the blue starts when it is not a continued game */
|
||||||
|
userControl.setState({activePlayer: 1});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setupPlayers(payload, gridControl, userControl);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Take steps if them exists
|
||||||
|
*
|
||||||
|
* @param app
|
||||||
|
* @param steps
|
||||||
|
* @param userControl
|
||||||
|
*/
|
||||||
|
takeSteps(app, steps, userControl) {
|
||||||
|
steps.forEach((item) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
userControl.setState({bombSelected: item.wBomb});
|
||||||
|
app.makePointsCalcAndStep([item.row, item.col]);
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set up player names w/ server data
|
||||||
|
*
|
||||||
|
* @param payload
|
||||||
|
* @param gridControl
|
||||||
|
* @param userControl
|
||||||
|
*/
|
||||||
|
setupPlayers(payload, gridControl, userControl) {
|
||||||
|
let redPlayer = userControl.refs.red,
|
||||||
|
bluePlayer = userControl.refs.blue;
|
||||||
|
|
||||||
|
redPlayer.setState({
|
||||||
|
name: payload.users.red !== '' ? payload.users.red : payload.users.redAnon,
|
||||||
|
});
|
||||||
|
|
||||||
|
bluePlayer.setState({
|
||||||
|
name: payload.users.blue !== '' ? payload.users.blue : payload.users.blueAnon,
|
||||||
|
desc: gridControl.state.webPlayer === 'blue'
|
||||||
|
? gridControl.state.desc.you
|
||||||
|
: gridControl.state.desc.buddy,
|
||||||
|
active: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
gridControl.setState({overlay: false});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MineStart;
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
class MineStep extends React.Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MineStep;
|
||||||
@@ -0,0 +1,273 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Grid from '../grid/grid';
|
||||||
|
|
||||||
|
class MineWebsocket extends React.Component {
|
||||||
|
constructor() {
|
||||||
|
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;
|
||||||
|
|
||||||
|
app.state.env === 'dev' && console.info(payload.msg);
|
||||||
|
|
||||||
|
gridControl.setState({
|
||||||
|
overlay: true,
|
||||||
|
overlayTitle: "The connection has been lost w/ your friend...",
|
||||||
|
overlaySubTitle: "Please, restart the game!"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleTopic(app, payload) {
|
||||||
|
/** Auto-Step if this player is not the current user */
|
||||||
|
if (app.refs.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});
|
||||||
|
|
||||||
|
/** STEP */
|
||||||
|
let points = app.makePointsCalcAndStep(payload.data.coords);
|
||||||
|
|
||||||
|
/** THE END */
|
||||||
|
app.state.endProcess.makeGameEndIfItEnds(app, points.blue, points.red);
|
||||||
|
} else {
|
||||||
|
/** RESIGN */
|
||||||
|
/** THE END */
|
||||||
|
app.state.endProcess.resignProcess(app, payload.data.resign);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Connect - Subscribe */
|
||||||
|
subscribe(app, rpcUsers = null) {
|
||||||
|
app.state.session.subscribe(
|
||||||
|
app.state.channel,
|
||||||
|
(uri, payload, log) => {
|
||||||
|
let isTopicEvent = typeof payload.data !== 'undefined',
|
||||||
|
isNotUnsubscribe = typeof payload.msg === 'undefined';
|
||||||
|
|
||||||
|
/** CONNECTION */
|
||||||
|
if (isTopicEvent) {
|
||||||
|
this.handleTopic(app, payload);
|
||||||
|
} else {
|
||||||
|
if (isNotUnsubscribe) {
|
||||||
|
this.handleSubscribe(app, payload, rpcUsers);
|
||||||
|
} else {
|
||||||
|
this.handleUnsubscribe(app, payload);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** RECONNECTION */
|
||||||
|
if (payload.userCnt === 2 && app.state.connectionLost) {
|
||||||
|
app.state.env === 'dev' && console.info('Reconnection process');
|
||||||
|
|
||||||
|
let cache = app.state.stepCache;
|
||||||
|
cache.forEach((item) => app.state.session.publish(app.state.channel, item));
|
||||||
|
app.setState({connectionLost: false, stepCache: []});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
connectWithWebsocket(app) {
|
||||||
|
/** Create Websocket w/ Bahnhof.js */
|
||||||
|
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/"
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Connect
|
||||||
|
* Session is an Autobahn JS WAMP session.
|
||||||
|
*/
|
||||||
|
websocket.on("socket/connect", (session) => {
|
||||||
|
app.state.env === 'dev' && console.info("Successfully connected to the Server!");
|
||||||
|
|
||||||
|
if (!app.state.connectionLost) {
|
||||||
|
let gridClient = app.state.gameInherited || new Grid().state.grid;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Connect - RPC
|
||||||
|
* Send grid information to the server
|
||||||
|
*/
|
||||||
|
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]
|
||||||
|
)
|
||||||
|
.then(
|
||||||
|
(data) => {
|
||||||
|
app.state.env === 'dev' && console.info('RPC has been called');
|
||||||
|
|
||||||
|
let serverData = data[0] !== true
|
||||||
|
? JSON.parse(Base64.decode(data))
|
||||||
|
: 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!");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
(error, desc) => app.state.env === 'dev' && console.error(["RPC Error", error, desc])
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
app.setState({session: session});
|
||||||
|
this.subscribe(app);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DisConnect
|
||||||
|
* Error provides us with some insight into the disconnection: error.reason and error.code
|
||||||
|
*/
|
||||||
|
websocket.on("socket/disconnect", (error) => {
|
||||||
|
app.state.env === 'dev' && console.error("Disconnected for " + error.reason + " with code " + error.code);
|
||||||
|
|
||||||
|
error.code === 6 && app.setState({connectionLost: true});
|
||||||
|
error.code === 3 && setTimeout(function () {
|
||||||
|
app.componentDidMount();
|
||||||
|
}.bind(this), 500);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
init(app, session, gridServer, gridClient) {
|
||||||
|
app.setState({session: session});
|
||||||
|
|
||||||
|
/** save session to GridControl */
|
||||||
|
/** render grid fields - @see #12 */
|
||||||
|
app.refs.gridControl.setState({
|
||||||
|
grid: app.state.gameInherited ? gridServer : gridClient,
|
||||||
|
channel: app.state.channel,
|
||||||
|
desc: {
|
||||||
|
buddy: <div>
|
||||||
|
Your buddy is <br/>
|
||||||
|
making a <br/>
|
||||||
|
move.
|
||||||
|
</div>,
|
||||||
|
you: <div>
|
||||||
|
It is your turn! <br/>
|
||||||
|
Make a move.
|
||||||
|
</div>
|
||||||
|
},
|
||||||
|
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>
|
||||||
|
: '',
|
||||||
|
renderGridFields: app.state.gameAssoc
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MineWebsocket;
|
||||||
@@ -13,6 +13,21 @@ class MineServices extends React.Component {
|
|||||||
}
|
}
|
||||||
return text;
|
return text;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* RWD
|
||||||
|
*/
|
||||||
|
currectGridSize() {
|
||||||
|
let $field = $('#mine-wrapper .grid');
|
||||||
|
$field.height($field.width());
|
||||||
|
|
||||||
|
$field = $('#mine-wrapper .grid .field-wrapper');
|
||||||
|
$field.height($field.width());
|
||||||
|
|
||||||
|
$('#mine-wrapper .grid .field-wrapper .field')
|
||||||
|
.height($field.width())
|
||||||
|
.css('line-height', ($field.width() - 2) + 'px');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default MineServices;
|
export default MineServices;
|
||||||
Reference in New Issue
Block a user