From e5d9266c9d6e450f6219ee17f63fce2a8b83ad30 Mon Sep 17 00:00:00 2001 From: Lang Date: Wed, 2 Nov 2016 18:05:10 +0100 Subject: [PATCH] js and config refactor --- .../SeekerBundle/Resources/config/config.yml | 22 +-- .../Resources/public/js/mine-seeker/app.js | 5 +- .../js/mine-seeker/grid/grid-control.js | 166 +++++++++--------- .../js/mine-seeker/user/user-control.js | 18 +- .../public/js/mine-seeker/user/user.js | 18 +- 5 files changed, 118 insertions(+), 111 deletions(-) diff --git a/src/Mine/SeekerBundle/Resources/config/config.yml b/src/Mine/SeekerBundle/Resources/config/config.yml index 7182832..c314493 100644 --- a/src/Mine/SeekerBundle/Resources/config/config.yml +++ b/src/Mine/SeekerBundle/Resources/config/config.yml @@ -3,17 +3,17 @@ # session: # handler_id: session.handler.pdo -# Doctrine cache -doctrine_cache: - providers: - redis_cache: - redis: - host: localhost - port: 6379 - database: 3 - websocket_cache_client: - type: redis - alias: gos_web_socket.client_storage.driver.redis +# Doctrine cache --> instead of PREDIS (gos_web_socket > client > storage > driver) +#doctrine_cache: +# providers: +# redis_cache: +# redis: +# host: localhost +# port: 6379 +# database: 3 +# websocket_cache_client: +# type: redis +# alias: gos_web_socket.client_storage.driver.redis # SNC snc_redis: 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 b5cd586..8436e56 100644 --- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js +++ b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js @@ -82,9 +82,10 @@ class MineSeeker extends React.Component { this.state.channel, (uri, payload, log) => { - var isNotUnsubscribe = typeof payload.msg === 'undefined'; + var isTopicEvent = typeof payload.data !== 'undefined', + isNotUnsubscribe = typeof payload.msg === 'undefined'; - if (typeof payload.data !== 'undefined') { + if (isTopicEvent) { console.warn(payload.user + " has been stepped to coords: " + payload.data.coords[0] + ', ' + payload.data.coords[1]); /** Auto-Step if this player is not the current user */ 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 63151c4..c88e296 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 @@ -6,7 +6,7 @@ class GridControl extends React.Component { constructor(props) { super(props); - var click = new Howl({src: ['/sound/click.mp3']}), + let click = new Howl({src: ['/sound/click.mp3']}), bomb = new Howl({src: ['/sound/bomb.mp3']}), mine = new Howl({src: ['/sound/mine.mp3']}), warning = new Howl({src: ['/sound/warning.mp3']}), @@ -46,7 +46,7 @@ class GridControl extends React.Component { } getBombRadius(row, col) { - var isBombTargetCenter = row > 1 && row < this.state.grid.length - 2 && col > 1 && col < this.state.grid[row].length - 2; + let isBombTargetCenter = row > 1 && row < this.state.grid.length - 2 && col > 1 && col < this.state.grid[row].length - 2; /** if the (5x5) target not fits the grid */ if (!isBombTargetCenter) { @@ -76,6 +76,22 @@ class GridControl extends React.Component { ]; } + getBombFieldRadius() { + return [ + [null, null], [0, 0], [1, 0], [2, 0], [0, 1], [2, 1], [0, 2], [1, 2], [2, 2], + [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], + [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], + [null, null], [null, null] + ]; + } + + getNeighbourRadius(row, col) { + return [ + [row - 1, col], [row - 1, col - 1], [row - 1, col + 1], [row, col - 1], [row, col + 1], [row + 1, col], + [row + 1, col + 1], [row + 1, col - 1] + ]; + } + checkNeighbourItem(row, col) { if (this.checkMine(row, col)) { var currentField = this.refs[this.refString(row, col)]; @@ -106,44 +122,16 @@ class GridControl extends React.Component { } checkNeighbours(row, col) { - var anotherFields = []; + let anotherFields = [], + neighbours = this.getNeighbourRadius(row, col); - anotherFields.push(this.checkNeighbourItem(row - 1, col)); - anotherFields.push(this.checkNeighbourItem(row - 1, col - 1)); - anotherFields.push(this.checkNeighbourItem(row - 1, col + 1)); - anotherFields.push(this.checkNeighbourItem(row, col - 1)); - anotherFields.push(this.checkNeighbourItem(row, col + 1)); - anotherFields.push(this.checkNeighbourItem(row + 1, col)); - anotherFields.push(this.checkNeighbourItem(row + 1, col + 1)); - anotherFields.push(this.checkNeighbourItem(row + 1, col - 1)); + for (let i = 0, j = neighbours.length; i < j; i++) { + anotherFields.push(this.checkNeighbourItem(neighbours[i][0], neighbours[i][1])); + } return anotherFields; } - showAppropriateFields(currentField, row, col) { - currentField.setState({ - currentObj: this.state.grid[row][col], - active: true - }); - - if (this.state.updatedFieldCache.indexOf(this.refString(row, col)) < 0) { - this.state.updatedFieldCache.push(this.refString(row, col)); - } - - if (this.state.grid[row][col] === 0) { - var neighbours = this.checkNeighbours(row, col); - - neighbours - .filter((i) => { - return i !== false; - }) - .forEach((element, index, array) => { - var currentField = this.refs[this.refString(element.row, element.col)]; - this.showAppropriateFields(currentField, element.row, element.col); - }); - } - } - bombClear() { if (this.state.bombFieldCache.length) { for (var i = 0, j = this.state.bombFieldCache.length; i < j; i++) { @@ -156,12 +144,7 @@ class GridControl extends React.Component { } bombCreate(row, col) { - var bombFieldSymbols = [ - [null, null], [0, 0], [1, 0], [2, 0], [0, 1], [2, 1], [0, 2], [1, 2], [2, 2], - [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], - [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], - [null, null], [null, null] - ], + var bombFieldSymbols = this.getBombFieldRadius(), bombFields = this.getBombRadius(row, col); for (var i = 0, j = bombFields.length; i < j; i++) { @@ -187,6 +170,37 @@ class GridControl extends React.Component { }); } + /** + * Show all fields that needed after click + * + * @param currentField + * @param row + * @param col + */ + showAppropriateFields(currentField, row, col) { + currentField.setState({ + currentObj: this.state.grid[row][col], + active: true + }); + + if (this.state.updatedFieldCache.indexOf(this.refString(row, col)) < 0) { + this.state.updatedFieldCache.push(this.refString(row, col)); + } + + if (this.state.grid[row][col] === 0) { + var neighbours = this.checkNeighbours(row, col); + + neighbours + .filter((i) => { + return i !== false; + }) + .forEach((element, index, array) => { + var currentField = this.refs[this.refString(element.row, element.col)]; + this.showAppropriateFields(currentField, element.row, element.col); + }); + } + } + /** * Player control method * @@ -229,6 +243,9 @@ class GridControl extends React.Component { : 'mine' ].play(); + /** + * TODO Csak az utolsó iterációnál kell usert váltani!! --> 10.) + */ if (this.refs.userControl.state.bombSelected) { this.changePlayer(userControl, activePlayer, inactivePlayer); } @@ -241,6 +258,9 @@ class GridControl extends React.Component { } else { this.state.sound.click.play(); + /** + * TODO Csak az utolsó iterációnál kell usert váltani!! --> 10.) + */ if (!justOnFirstIteration) { this.changePlayer(userControl, activePlayer, inactivePlayer); } @@ -275,31 +295,36 @@ class GridControl extends React.Component { } } + /** + * Show elems w/ conditions + * + * @param row + * @param col + * @param idx + */ + show(row, col, idx = 0) { + this.handleGridField(this.state.grid[row][col], row, col, idx); + this.showAppropriateFields(this.refs[this.refString(row, col)], row, col); + } + + /** + * STEP one + * + * @param coords + */ stepEvent(coords) { var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red'; this.state.foundUserMineCache = 0; this.state.playBomb = true; - /** Field selected w/ BOMB */ + /** Show elements */ if (this.refs.userControl.state.bombSelected) { this.state.sound.bomb.play(); - var radius = this.getBombRadius(coords[0], coords[1]); - - for (var i = 0, j = radius.length; i < j; i++) { - 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] - ); + var bombRadius = this.getBombRadius(coords[0], coords[1]); + for (var i = 0, j = bombRadius.length; i < j; i++) { + this.show(bombRadius[i][0], bombRadius[i][1], i); } /** remove BOMB from activePlayer */ @@ -307,24 +332,11 @@ class GridControl extends React.Component { haveBomb: false }); } else { - 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] - ); + this.show(coords[0], coords[1]); } - /** Reset mine caches */ + /** Mine score handling */ 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 @@ -370,19 +382,15 @@ class GridControl extends React.Component { } overlayClass() { - return 'game-overlay' + ( - this.state.overlay - ? '' - : ' hide' - ); + return 'game-overlay' + ( this.state.overlay ? '' : ' hide' ); } render() { var grid = []; if (this.state.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++) { + for (let i = 0, j = this.state.grid.length; i < j; i++) { + for (let k = 0, l = this.state.grid[i].length; k < l; k++) { grid.push( + ? cursor : ''; }