SplendidBear-Websites/MineSeeker
Private
Public Access
1
0
Fork 0
Code Pull Requests 1 Releases Activity

js and config refactor

Browse Source
This commit is contained in:
Root
2016-11-02 18:05:10 +01:00
parent 2ed938f22a
commit e5d9266c9d
5 changed files with 118 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/Mine/SeekerBundle/Resources/config/config.yml
View File

@@ -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:

5
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js
View File

@@ -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 */

166
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js
View File

@@ -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(
<GridField row={i}
col={k}

18
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user-control.js
View File

@@ -5,26 +5,24 @@ class UserControl extends React.Component {
constructor() {
super();
/**
* activePlayer - red: 0, blue: 1
* @type {{activePlayer: number, mines: number}}
*/
this.state = {
activePlayer: 0,
activePlayer: 0, // activePlayer - red: 0, blue: 1
mines: 51,
bombSelected: false,
foundMines: false
};
}
youCanSelectBomb(activePlayer, clickedPlayer) {
return this.refs[activePlayer].state.haveBomb &&
this.refs[activePlayer].state.enabledBomb &&
this.state.activePlayer === clickedPlayer;
}
onClickBombSelector(clickedPlayer) {
var activePlayer = this.state.activePlayer ? 'blue' : 'red';
if (
this.refs[activePlayer].state.haveBomb &&
this.refs[activePlayer].state.enabledBomb &&
this.state.activePlayer === clickedPlayer
) {
if (this.youCanSelectBomb(activePlayer, clickedPlayer)) {
this.state.bombSelected = !this.state.bombSelected;
if (!this.state.bombSelected) {

18
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user.js
View File

@@ -24,15 +24,17 @@ class User extends React.Component {
}
getBomb() {
let src = this.state.srcRoot;
if (this.state.haveBomb) {
if (this.state.enabledBomb && this.state.active) {
return this.state.srcRoot + 'bg-bomb-outbg.png';
} else {
return this.state.srcRoot + 'bg-bomb-disabled-outbg.png';
}
src += this.state.enabledBomb && this.state.active
? 'bg-bomb-outbg.png'
: 'bg-bomb-disabled-outbg.png';
} else {
return this.state.srcRoot + 'bg-bomb-exploded-outbg.png';
src += 'bg-bomb-exploded-outbg.png';
}
return src;
}
getFigure(color) {
@@ -40,10 +42,8 @@ class User extends React.Component {
}
getCursor(state, color) {
var cursorImg = this.state.srcRoot + 'bg-cursor-' + color + '-outbg.png';
return state
? <img src={cursorImg} alt="cursor" className="user-cursor"/>
? <img src={this.state.srcRoot + 'bg-cursor-' + color + '-outbg.png'} alt="cursor" className="user-cursor"/>
: '';
}