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 25ebae2..edb6274 100644
--- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js
+++ b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js
@@ -1,7 +1,9 @@
import React from 'react';
-import Grid from './grid/grid';
import GridControl from './grid/grid-control';
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 {
constructor(props) {
@@ -12,6 +14,10 @@ class MineSeeker extends React.Component {
let channel = "mineseeker/channel/" + gameAssoc;
this.state = {
+ startProcess: new MineStart(),
+ endProcess: new MineEnd(),
+ wsProcess: new MineWebsocket(),
+
env: props.env,
ssl: props.ssl,
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
*
@@ -64,383 +58,12 @@ class MineSeeker extends React.Component {
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:
- });
- }
- }
-
- /**
- * @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:
- Your buddy is
- making a
- move.
-
,
- you:
- It is your turn!
- Make a move.
-
- },
- overlay: true,
- overlayTitle: "We are waiting for your opponent...",
- overlaySubTitle: this.state.gameAssoc
- ?
-
- : '',
- 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:
-
-
-
- });
- } 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: Restart game!
- });
-
- 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
* http://mine.dev/re-play/I1Bx9UHZP5CWDnTZHpJqGTlkzehblfsbfz4A4xYaH9HFhBK2aN
*
- * Registered
- * http://mine.dev/re-play/km10oOgM7Xh37vJ8PFjaRRePrHpDkZFDJgxLhNc6hkTYyLyPKD
+ * Registered - Admin -> Lang
+ * http://mine.dev/re-play/bazmegdflgkjndfgkhjn
*/
/** After rendering */
@@ -450,7 +73,7 @@ class MineSeeker extends React.Component {
? this.setState({replay: true})
: 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);
/** THE END */
- this.makeGameEndIfItEnds(points.blue, points.red);
+ this.state.endProcess.makeGameEndIfItEnds(this, points.blue, points.red);
let dataPack = {
'coords': coords,
@@ -500,7 +123,7 @@ class MineSeeker extends React.Component {
return (
);
}
diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/end.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/end.js
new file mode 100644
index 0000000..3217c0c
--- /dev/null
+++ b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/end.js
@@ -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:
+ });
+ }
+ }
+}
+
+export default MineEnd;
diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/start.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/start.js
new file mode 100644
index 0000000..e8c190d
--- /dev/null
+++ b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/start.js
@@ -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;
diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/step.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/step.js
new file mode 100644
index 0000000..7c023c1
--- /dev/null
+++ b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/step.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+class MineStep extends React.Component {
+ constructor() {
+ super();
+ }
+
+}
+
+export default MineStep;
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
new file mode 100644
index 0000000..3d3de38
--- /dev/null
+++ b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/websocket.js
@@ -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:
+
+
+
+ });
+ } 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: Restart game!
+ });
+
+ 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:
+ Your buddy is
+ making a
+ move.
+
,
+ you:
+ It is your turn!
+ Make a move.
+
+ },
+ overlay: true,
+ overlayTitle: "We are waiting for your opponent...",
+ overlaySubTitle: app.state.gameAssoc
+ ?
+
+ : '',
+ renderGridFields: app.state.gameAssoc
+ });
+ }
+}
+
+export default MineWebsocket;
diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-system/mine-services.js b/src/Mine/SeekerBundle/Resources/public/js/mine-system/mine-services.js
index 0b40028..95d0abf 100644
--- a/src/Mine/SeekerBundle/Resources/public/js/mine-system/mine-services.js
+++ b/src/Mine/SeekerBundle/Resources/public/js/mine-system/mine-services.js
@@ -13,6 +13,21 @@ class MineServices extends React.Component {
}
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;
\ No newline at end of file
+export default MineServices;