From fcd490ef4e1f7486aa50537989bc2f23b738d662 Mon Sep 17 00:00:00 2001 From: Lang Date: Mon, 23 Jan 2017 14:43:58 +0100 Subject: [PATCH] refactor; separate app.js to 3 files (except step yet) --- .../Resources/public/js/mine-seeker/app.js | 401 +----------------- .../public/js/mine-seeker/game/end.js | 87 ++++ .../public/js/mine-seeker/game/start.js | 66 +++ .../public/js/mine-seeker/game/step.js | 10 + .../public/js/mine-seeker/game/websocket.js | 273 ++++++++++++ .../public/js/mine-system/mine-services.js | 17 +- 6 files changed, 464 insertions(+), 390 deletions(-) create mode 100644 src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/end.js create mode 100644 src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/start.js create mode 100644 src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/step.js create mode 100644 src/Mine/SeekerBundle/Resources/public/js/mine-seeker/game/websocket.js 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:
- Yes - No! -
- }); - } - } - - /** - * @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 - ? -
-

Share this unique link w/ your opponent

-
- -
- {this.state.env !== 'dev' && - Share in Facebook message - } - {this.state.env === 'dev' && - Play w/ me! - } -
- : '', - 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:
+ Yes + No! +
+ }); + } + } +} + +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 + ? +
+

Share this unique link w/ your opponent

+
+ +
+ {app.state.env !== 'dev' && + Share in Facebook message + } + {app.state.env === 'dev' && + Play w/ me! + } +
+ : '', + 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;