From 0a22968e56d500132b4609f1bd09f58bd38e1d8e Mon Sep 17 00:00:00 2001 From: Lang Date: Fri, 28 Oct 2016 16:16:27 +0200 Subject: [PATCH] refact && remove sound and logging && bugfix BIGBUG - handleGridField and showAppropriateFields sort order... --- package.json | 3 +- .../Resources/public/js/mine-seeker/app.js | 141 ++++++++--------- .../js/mine-seeker/grid/grid-control.js | 142 ++++++------------ .../public/js/mine-seeker/system/logging.js | 41 ----- src/Mine/SeekerBundle/Rpc/AcmeRpc.php | 6 +- src/Mine/SeekerBundle/Topic/AcmeTopic.php | 18 --- 6 files changed, 113 insertions(+), 238 deletions(-) delete mode 100644 src/Mine/SeekerBundle/Resources/public/js/mine-seeker/system/logging.js diff --git a/package.json b/package.json index 25d3cb4..05068a5 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,7 @@ "babel-preset-es2015": "^6.14.0", "babel-preset-react": "^6.11.1", "react": "^15.3.2", - "react-dom": "^15.3.2", - "react-sound": "^0.5.2" + "react-dom": "^15.3.2" }, "devDependencies": {}, "scripts": { 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 0a752ca..c19360b 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,6 @@ import React from 'react'; import Grid from './grid/grid'; import GridControl from './grid/grid-control'; -import Logging from './system/logging'; class MineSeeker extends React.Component { constructor(props) { @@ -9,19 +8,14 @@ class MineSeeker extends React.Component { var gameAssoc = props.gameId !== '' ? props.gameId : this.makeGameAssoc(50); var channel = "acme/channel/" + gameAssoc; - var log = new Logging(); - log.state.logging = props.env === 'dev'; - - var grid = new Grid(); this.state = { gameInherited: props.gameId !== '', gameAssoc: gameAssoc, - log: log, - websocket: null, channel: channel, + session: null, createGrid: false, - grid: grid.state.grid + stepCache: null } } @@ -34,101 +28,100 @@ class MineSeeker extends React.Component { return text; } - topicProcess(payload, grid) { - var log = this.state.log; - - /** It is a PUBLISH */ - if (typeof payload.data !== 'undefined') { - log.i([payload.user + " has been stepped to coords: " + payload.data.coords[0] + ', ' + payload.data.coords[0], payload]); - - /** because the activePlayer has been changed before the data come */ - if (this.refs.gridControl.state.webPlayer !== payload.data.player) { - this.refs.gridControl.stepEvent(payload.data.coords, true); - } - } else { - /** It is a SUBSCRIBE */ - log.i(["Something happened on the channel!", payload]); - - if (this.refs.gridControl.state.webPlayer === null) { - if (payload.userCnt === 1) { - this.refs.gridControl.state.webPlayer = 'red'; - } - - if (payload.userCnt === 2) { - this.refs.gridControl.state.webPlayer = 'blue'; - this.refs.gridControl.state.grid = JSON.parse(grid); - } - } - } - } - /** after rendering */ componentDidMount() { - this.state.websocket = WS.connect("ws://mine.dev:6450"); - - var log = this.state.log; + /** Create Websocket w/ Bahnhof.js */ + var websocket = WS.connect("ws://mine.dev:6450"); /** * Connect * Session is an Autobahn JS WAMP session. */ - this.state.websocket.on("socket/connect", (session) => { - log.i("Successfully connected to the Server!"); + websocket.on("socket/connect", (session) => { + console.info("Successfully connected to the Server!"); + + if (!this.state.gameInherited) { + var gridClient = new Grid().state.grid; + } /** - * Connect + * Connect - RPC * Send grid information to the server */ session .call( this.state.gameInherited ? "sample/connectGame" : "sample/startGame", - [this.state.grid, this.state.gameAssoc] + this.state.gameInherited ? this.state.gameAssoc : [gridClient, this.state.gameAssoc] ) .then( - (grid) => { - log.l(["Grid has been created! Return w/ gameAssoc."]); + (gridServer) => { + console.info("Grid has been created! Return w/ gameAssoc."); - /** Connect */ - session.subscribe( + this.state.session = session; + + this.refs.gridControl.setState({ + grid: this.state.gameInherited ? JSON.parse(gridServer) : gridClient, + session: this.state.session, + channel: this.state.channel + }); + + if (this.refs.gridControl.state.webPlayer === null) { + if (this.state.gameInherited) { + this.refs.gridControl.state.webPlayer = 'blue'; + + // this.refs.gridControl.refs.userControl.setState({activePlayer: this.refs.gridControl.refs.userControl.state.activePlayer ? 0 : 1}); + // this.refs.gridControl.refs.userControl.refs.red.setState({active: false}); + // this.refs.gridControl.refs.userControl.refs.blue.setState({active: true}); + } else { + this.refs.gridControl.state.webPlayer = 'red'; + } + } + + /** Connect - subscribe */ + this.state.session.subscribe( this.state.channel, (uri, payload, log) => { - /** Create GridControl class */ - if (this.state.createGrid) { - this.topicProcess(payload, grid); - } else { - this.setState({createGrid: true}, () => { - /** Start GridControl tag */ - this.refs.gridControl.setState({grid: this.state.grid}, () => { - this.refs.gridControl.state.session = session; - this.refs.gridControl.state.channel = this.state.channel; + if (typeof payload.data !== 'undefined') { + console.warn(payload.user + " has been stepped to coords: " + payload.data.coords[0] + ', ' + payload.data.coords[1]); - this.topicProcess(payload, grid); - }); - }); + /** Auto-Step if this player is not the current user */ + if (this.refs.gridControl.state.webPlayer !== payload.data.player) { + console.warn('Opponent stepped: Auto-Step process'); + this.refs.gridControl.stepEvent(payload.data.coords); + } else { + // this.refs.gridControl.stepEvent(payload.data.coords); + } + } else { + console.info("User has been subscribed to the channel!"); } } ); }, - (error, desc) => log.e(["RPC Error", error, desc]) + (error, desc) => console.log(["RPC Error", error, desc]) ); }); /** - * Connect + * DisConnect * Error provides us with some insight into the disconnection: error.reason and error.code */ - this.state.websocket.on("socket/disconnect", function (error) { - log.w("Disconnected for " + error.reason + " with code " + error.code); - }); + websocket.on("socket/disconnect", (error) => console.log("Disconnected for " + error.reason + " with code " + error.code)); } - createGrid() { - return this.state.createGrid - ? - : ''; + onClick(coords) { + var activePlayer = this.refs.gridControl.refs.userControl.state.activePlayer ? 'blue' : 'red'; + + /** Player can step if it turns */ + if (activePlayer === this.refs.gridControl.state.webPlayer) { + this.refs.gridControl.stepEvent(coords); + + this.state.session + .publish(this.state.channel, { + 'coords': coords, + 'player': activePlayer + }); + } } /** FOR DEVELOPMENT */ @@ -144,14 +137,12 @@ class MineSeeker extends React.Component {
{this.createLink()}
- {this.createGrid()} - {/**/} + ); } } export default MineSeeker; - diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js index 8773bea..bc42488 100644 --- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js +++ b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js @@ -1,5 +1,4 @@ import React from 'react'; -import Sound from 'react-sound'; import GridField from './grid-field'; import UserControl from '../user/user-control'; @@ -9,16 +8,12 @@ class GridControl extends React.Component { this.state = { env: props.env, - log: props.log, - session: null, - channel: null, webPlayer: null, grid: null, updatedFieldCache: [], bombFieldCache: [], foundUserMineCache: 0, playBomb: false, - sound: null, lastClicked: { red: null, blue: null @@ -30,8 +25,8 @@ class GridControl extends React.Component { return 'gridField_' + row + '_' + col; } - checkMine(field, i, j) { - return typeof field[i] !== 'undefined' && typeof field[i][j] !== 'undefined' && field[i][j] !== 'm'; + checkMine(row, col) { + return typeof this.state.grid[row] !== 'undefined' && typeof this.state.grid[row][col] !== 'undefined' && this.state.grid[row][col] !== 'm'; } getBombRadius(row, col) { @@ -66,7 +61,7 @@ class GridControl extends React.Component { } checkNeighbourItem(row, col) { - if (this.checkMine(this.state.grid, row, col)) { + if (this.checkMine(row, col)) { var currentField = this.refs[this.refString(row, col)]; currentField.setState({ @@ -175,18 +170,18 @@ class GridControl extends React.Component { activePlayer = userControl.state.activePlayer ? 'blue' : 'red', inactivePlayer = userControl.state.activePlayer ? 'red' : 'blue'; - /** update last cliked grid field */ - if (!justOnFirstIteration) { - if (this.state.lastClicked[activePlayer] !== null) { - this.refs[this.refString(this.state.lastClicked[activePlayer][0], this.state.lastClicked[activePlayer][1])].setState({ - lastClickedRed: false, - lastClickedBlue: false - }); - } - } - /** if the clicked field is NEVER CLICKED */ if (!gridFieldControl.state.active) { + /** update LAST CLICKED grid field */ + if (!justOnFirstIteration) { + if (this.state.lastClicked[activePlayer] !== null) { + this.refs[this.refString(this.state.lastClicked[activePlayer][0], this.state.lastClicked[activePlayer][1])].setState({ + lastClickedRed: false, + lastClickedBlue: false + }); + } + } + this.state.lastClicked[activePlayer] = [x, y]; /** if you found mine */ @@ -194,8 +189,6 @@ class GridControl extends React.Component { this.state.foundUserMineCache++; if (!justOnFirstIteration) { - this.playingSound('mine'); - /** set last clicked field w/ color */ this.state.lastClicked[activePlayer] = [x, y]; } @@ -206,8 +199,6 @@ class GridControl extends React.Component { }); } else { if (!justOnFirstIteration) { - this.playingSound('click'); - /** set __ACTIVE__ player in the UserControl !!!! */ userControl.setState({ activePlayer: userControl.state.activePlayer ? 0 : 1 @@ -252,74 +243,68 @@ class GridControl extends React.Component { } } - stepEvent(coords, isOpponentStepped) { + stepEvent(coords) { var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red'; this.state.foundUserMineCache = 0; this.state.playBomb = true; - /** Step automatically when not this user stepped */ - if (!isOpponentStepped) { - this.state.session - .publish(this.state.channel, { - 'coords': coords, - 'player': activePlayer - }); - } - + /** Field selected w/ BOMB */ if (this.refs.userControl.state.bombSelected) { var radius = this.getBombRadius(coords[0], coords[1]); for (var i = 0, j = radius.length; i < j; i++) { - this.showAppropriateFields( - this.refs[this.refString(radius[i][0], radius[i][1])], - radius[i][0], - radius[i][1] - ); - this.handleGridField( this.state.grid[radius[i][0]][radius[i][1]], radius[i][0], radius[i][1], i ); + + this.showAppropriateFields( + this.refs[this.refString(radius[i][0], radius[i][1])], + radius[i][0], + radius[i][1] + ); } + /** remove BOMB from activePlayer */ this.refs.userControl.refs[activePlayer].setState({ haveBomb: false }); } else { - this.showAppropriateFields( - this.refs[this.refString(coords[0], coords[1])], - coords[0], - coords[1] - ); - this.handleGridField( this.state.grid[coords[0]][coords[1]], coords[0], coords[1], 0 ); + + this.showAppropriateFields( + this.refs[this.refString(coords[0], coords[1])], + coords[0], + coords[1] + ); } + /** Reset mine caches */ if (this.state.foundUserMineCache) { + /** remove the found mines from global */ this.refs.userControl.setState({ mines: this.refs.userControl.state.mines - this.state.foundUserMineCache, foundMines: true - }); + }, () => { + this.refs.userControl.setState({foundMines: false}); - setTimeout(function () { - this.refs.userControl.setState({foundMines: false}) - }.bind(this), 500); - - /** add the found mines to the active Player */ - this.refs.userControl.refs[activePlayer].setState({ - mines: this.refs.userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache + /** add the found mines to the active Player */ + this.refs.userControl.refs[activePlayer].setState({ + mines: this.refs.userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache + }); }); } + /** Reset BOMB status */ if (this.refs.userControl.state.bombSelected) { /** reset bomb selected status */ this.refs.userControl.setState({bombSelected: false}); @@ -329,19 +314,6 @@ class GridControl extends React.Component { } } - /** - * Most important event!! - * Click only when the active player is the current client. - * @param coords - */ - onClick(coords) { - var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red'; - - if (activePlayer === this.state.webPlayer) { - this.stepEvent(coords, false); - } - } - /** * On Hover when you want to drop BOMB * @param coords @@ -356,33 +328,10 @@ class GridControl extends React.Component { } } - /** - * Play sound effets - * @param type - * @returns {*} - */ - playingSound(type) { - this.state.log.i('Sound playing type: ' + type); + render() { + var grid = []; - return type !== null - ? - : ''; - } - - /** after rendering */ - componentDidMount() { - /** disable console of soundmanager */ - soundManager.setup({ - debugMode: this.state.env, - useConsole: this.state.env - }); - } - - renderGridFields() { - /** If the app.js filled the this.state.grid var, START the grid render */ if (this.state.grid) { - var grid = []; - for (var i = 0, j = this.state.grid.length; i < j; i++) { for (var k = 0, l = this.state.grid[i].length; k < l; k++) { grid.push( @@ -391,18 +340,12 @@ class GridControl extends React.Component { ref={this.refString(i, k)} key={i + k * Math.random() * 0.5} handleHoverOn={this.onHoverWithBomb.bind(this, [i, k])} - onClick={this.onClick.bind(this, [i, k])}/> + onClick={this.props.onClick.bind(null, [i, k])}/> ); } } - - return grid; } - return ""; - } - - render() { return (
- {this.renderGridFields()} + {/*{this.renderGridFields()}*/} + {grid}
- {this.playingSound(this.state.sound)} + {/*{this.playingSound()}*/}
); } diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/system/logging.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/system/logging.js deleted file mode 100644 index 93c25be..0000000 --- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/system/logging.js +++ /dev/null @@ -1,41 +0,0 @@ -class Logging { - constructor() { - this.state = { - logging: null - }; - } - - output(data, method) { - if (this.state.logging) { - if (typeof data === 'object') { - console.log('-------'); - data.forEach((item) => console[method](item)); - console.log('\n'); - } else { - console[method](data); - } - } - } - - i(data) { - this.output(data, 'info'); - } - - w(data) { - this.output(data, 'warn'); - } - - t(data) { - this.output(data, 'table'); - } - - e(data) { - this.output(data, 'error'); - } - - l(data) { - this.output(data, 'log'); - } -} - -export default Logging; diff --git a/src/Mine/SeekerBundle/Rpc/AcmeRpc.php b/src/Mine/SeekerBundle/Rpc/AcmeRpc.php index 50ae164..cf85e8f 100644 --- a/src/Mine/SeekerBundle/Rpc/AcmeRpc.php +++ b/src/Mine/SeekerBundle/Rpc/AcmeRpc.php @@ -54,11 +54,11 @@ class AcmeRpc implements RpcInterface * @param ConnectionInterface $connection * @param WampRequest $request * @param array $params - * @return string Json string for frontend. + * @return string Json string for frontend w/ numbering consideration. (=> a number is not string) */ public function connectGame(ConnectionInterface $connection, WampRequest $request, array $params) { - return json_encode($this->getGrid($params[1]), JSON_NUMERIC_CHECK); + return json_encode($this->getGrid($params), JSON_NUMERIC_CHECK); } /** @@ -127,6 +127,6 @@ class AcmeRpc implements RpcInterface $this->entityManager->flush(); - return $data[1]; + return true; } } diff --git a/src/Mine/SeekerBundle/Topic/AcmeTopic.php b/src/Mine/SeekerBundle/Topic/AcmeTopic.php index 388466e..9a3d7b2 100644 --- a/src/Mine/SeekerBundle/Topic/AcmeTopic.php +++ b/src/Mine/SeekerBundle/Topic/AcmeTopic.php @@ -17,10 +17,6 @@ class AcmeTopic implements TopicInterface /** @var EntityManager */ protected $entityManager; - protected $red; - - protected $blue; - /** * AcmeTopic constructor. * @@ -47,21 +43,10 @@ class AcmeTopic implements TopicInterface $user = $this->clientManipulator->getClient($connection); $userName = is_string($user) ? $user : $user->getUsername(); - if ($topic->count() === 1) { - $this->red = $userName; - } - - if ($topic->count() === 2) { - $this->blue = $userName; - } - $topic->broadcast([ 'userTopicId' => $connection->resourceId, 'channel' => $topic->getId(), 'user' => $userName, - 'color' => $userName === $this->red ? 'red' : 'blue', - 'red' => $this->red, - 'blue' => $this->blue, 'userCnt' => $topic->count() ]); } @@ -102,9 +87,6 @@ class AcmeTopic implements TopicInterface 'userTopicId' => $connection->resourceId, 'channel' => $topic->getId(), 'user' => $userName, - 'color' => $userName === $this->red ? 'red' : 'blue', - 'red' => $this->red, - 'blue' => $this->blue, 'userCnt' => $topic->count(), 'data' => $event ]);