chg: usr: created the first working solution since 7 yrs #4
This commit is contained in:
@@ -1,445 +1,447 @@
|
||||
import React from 'react';
|
||||
import GridField from './grid-field';
|
||||
import UserControl from '../user/user-control';
|
||||
import {Howl, Howler} from 'howler';
|
||||
import { Howl } from 'howler';
|
||||
|
||||
class GridControl extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
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']}),
|
||||
won = new Howl({src: ['/sound/won.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'] }),
|
||||
won = new Howl({ src: ['/sound/won.mp3'] });
|
||||
|
||||
this.state = {
|
||||
env: props.env,
|
||||
webPlayer: null,
|
||||
grid: null,
|
||||
desc: null,
|
||||
renderGridFields: false,
|
||||
gridFields: [],
|
||||
updatedFieldCache: [],
|
||||
bombFieldCache: [],
|
||||
foundUserMineCache: 0,
|
||||
playBomb: false,
|
||||
overlay: false,
|
||||
overlayTitle: "",
|
||||
overlaySubTitle: "",
|
||||
sound: {
|
||||
click: click,
|
||||
bomb: bomb,
|
||||
mine: mine,
|
||||
warning: warning,
|
||||
won: won
|
||||
},
|
||||
lastClicked: {
|
||||
red: null,
|
||||
blue: null
|
||||
}
|
||||
};
|
||||
this.state = {
|
||||
env: props.env,
|
||||
webPlayer: null,
|
||||
grid: null,
|
||||
desc: null,
|
||||
renderGridFields: false,
|
||||
gridFields: [],
|
||||
updatedFieldCache: [],
|
||||
bombFieldCache: [],
|
||||
foundUserMineCache: 0,
|
||||
playBomb: false,
|
||||
overlay: false,
|
||||
overlayTitle: '',
|
||||
overlaySubTitle: '',
|
||||
sound: {
|
||||
click: click,
|
||||
bomb: bomb,
|
||||
mine: mine,
|
||||
warning: warning,
|
||||
won: won,
|
||||
},
|
||||
lastClicked: {
|
||||
red: null,
|
||||
blue: null,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
refString(row, col) {
|
||||
return 'gridField_' + row + '_' + col;
|
||||
}
|
||||
|
||||
checkMine(row, col) {
|
||||
return 'undefined' !== typeof this.state.grid[row] && 'undefined' !== typeof this.state.grid[row][col] && 'm' !== this.state.grid[row][col];
|
||||
}
|
||||
|
||||
checkFieldHasBeenNeverClicked(row, col) {
|
||||
return 0 > this.state.updatedFieldCache.indexOf(this.refString(row, col)) && !this.refs[this.refString(row, col)].state.active;
|
||||
}
|
||||
|
||||
getBombRadius(row, col) {
|
||||
let isBombTargetCenter = 1 < row && row < this.state.grid.length - 2 && 1 < col && col < this.state.grid[row].length - 2;
|
||||
|
||||
/** if the (5x5) target not fits the grid */
|
||||
if (!isBombTargetCenter) {
|
||||
col = 2 > col ? 2 : col;
|
||||
row = 2 > row ? 2 : row;
|
||||
row = row > this.state.grid.length - 3 ? this.state.grid.length - 3 : row;
|
||||
col = col > this.state.grid[0].length - 3 ? this.state.grid[0].length - 3 : col;
|
||||
}
|
||||
|
||||
refString(row, col) {
|
||||
return 'gridField_' + row + '_' + col;
|
||||
}
|
||||
return [
|
||||
[row, col], [row - 2, col - 2], [row - 2, col], [row - 2, col + 2], [row, col - 2], [row, col + 2],
|
||||
[row + 2, col - 2], [row + 2, col], [row + 2, col + 2], [row - 2, col + 1], [row - 2, col - 1],
|
||||
[row - 1, col - 2], [row - 1, col - 1], [row - 1, col], [row - 1, col + 1], [row - 1, col + 2],
|
||||
[row, col - 1], [row, col + 1], [row + 1, col - 2], [row + 1, col - 1], [row + 1, col],
|
||||
[row + 1, col + 1], [row + 1, col + 2], [row + 2, col - 1], [row + 2, col + 1],
|
||||
];
|
||||
}
|
||||
|
||||
checkMine(row, col) {
|
||||
return typeof this.state.grid[row] !== 'undefined' && typeof this.state.grid[row][col] !== 'undefined' && this.state.grid[row][col] !== 'm';
|
||||
}
|
||||
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],
|
||||
];
|
||||
}
|
||||
|
||||
checkFieldHasBeenNeverClicked(row, col) {
|
||||
return this.state.updatedFieldCache.indexOf(this.refString(row, col)) < 0 && !this.refs[this.refString(row, col)].state.active;
|
||||
}
|
||||
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],
|
||||
];
|
||||
}
|
||||
|
||||
getBombRadius(row, col) {
|
||||
let isBombTargetCenter = row > 1 && row < this.state.grid.length - 2 && col > 1 && col < this.state.grid[row].length - 2;
|
||||
checkNeighbourItem(row, col) {
|
||||
if (this.checkMine(row, col)) {
|
||||
var currentField = this.refs[this.refString(row, col)];
|
||||
|
||||
/** if the (5x5) target not fits the grid */
|
||||
if (!isBombTargetCenter) {
|
||||
col = col < 2 ? 2 : col;
|
||||
row = row < 2 ? 2 : row;
|
||||
row = row > this.state.grid.length - 3 ? this.state.grid.length - 3 : row;
|
||||
col = col > this.state.grid[0].length - 3 ? this.state.grid[0].length - 3 : col;
|
||||
}
|
||||
/**
|
||||
* It must be cached because the GridField.state not updated until
|
||||
* all showAppropriateFields() method runned out!!
|
||||
*/
|
||||
if (this.checkFieldHasBeenNeverClicked(row, col)) {
|
||||
this.state.updatedFieldCache.push(this.refString(row, col));
|
||||
|
||||
return [
|
||||
[row, col], [row - 2, col - 2], [row - 2, col], [row - 2, col + 2], [row, col - 2], [row, col + 2],
|
||||
[row + 2, col - 2], [row + 2, col], [row + 2, col + 2], [row - 2, col + 1], [row - 2, col - 1],
|
||||
[row - 1, col - 2], [row - 1, col - 1], [row - 1, col], [row - 1, col + 1], [row - 1, col + 2],
|
||||
[row, col - 1], [row, col + 1], [row + 1, col - 2], [row + 1, col - 1], [row + 1, col],
|
||||
[row + 1, col + 1], [row + 1, col + 2], [row + 2, col - 1], [row + 2, col + 1]
|
||||
];
|
||||
}
|
||||
|
||||
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)];
|
||||
|
||||
/**
|
||||
* It must be cached because the GridField.state not updated until
|
||||
* all showAppropriateFields() method runned out!!
|
||||
*/
|
||||
if (this.checkFieldHasBeenNeverClicked(row, col)) {
|
||||
this.state.updatedFieldCache.push(this.refString(row, col));
|
||||
|
||||
currentField.setState({
|
||||
currentImage: this.state.grid[row][col],
|
||||
currentObj: this.state.grid[row][col],
|
||||
active: true
|
||||
});
|
||||
|
||||
if (this.state.grid[row][col] === 0) {
|
||||
return {
|
||||
row: row,
|
||||
col: col
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
checkNeighbours(row, col) {
|
||||
let anotherFields = [],
|
||||
neighbours = this.getNeighbourRadius(row, col);
|
||||
|
||||
for (let i = 0, j = neighbours.length; i < j; i++) {
|
||||
anotherFields.push(this.checkNeighbourItem(neighbours[i][0], neighbours[i][1]));
|
||||
}
|
||||
|
||||
return anotherFields;
|
||||
}
|
||||
|
||||
bombClear() {
|
||||
if (this.state.bombFieldCache.length) {
|
||||
for (var i = 0, j = this.state.bombFieldCache.length; i < j; i++) {
|
||||
var cacheItem = this.state.bombFieldCache[i];
|
||||
this.refs[this.refString(cacheItem[0], cacheItem[1])]
|
||||
.setState({bombTargetArea: null});
|
||||
}
|
||||
this.state.bombFieldCache = [];
|
||||
}
|
||||
}
|
||||
|
||||
bombCreate(row, col) {
|
||||
var bombFieldSymbols = this.getBombFieldRadius(),
|
||||
bombFields = this.getBombRadius(row, col);
|
||||
|
||||
for (var i = 0, j = bombFields.length; i < j; i++) {
|
||||
this.state.bombFieldCache.push(bombFields[i]);
|
||||
|
||||
this.refs[this.refString(bombFields[i][0], bombFields[i][1])]
|
||||
.setState({bombTargetArea: bombFieldSymbols[i]});
|
||||
}
|
||||
}
|
||||
|
||||
showLeftMines() {
|
||||
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++) {
|
||||
let currentField = this.refs[this.refString(i, k)];
|
||||
|
||||
if (this.state.grid[i][k] === 'm' && this.checkFieldHasBeenNeverClicked(i, k)) {
|
||||
currentField.setState({
|
||||
currentImage: currentField.state.icons.root + currentField.state.icons.left
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** set __ACTIVE__ player in the UserControl !!!! */
|
||||
changePlayer(idx, max, currentObject) {
|
||||
var userControl = this.refs.userControl,
|
||||
activePlayer = userControl.state.activePlayer ? 'blue' : 'red',
|
||||
inactivePlayer = userControl.state.activePlayer ? 'red' : 'blue';
|
||||
|
||||
if (
|
||||
userControl.state.bombSelected && idx === (max - 1) ||
|
||||
!idx && !userControl.state.bombSelected && currentObject !== 'm'
|
||||
) {
|
||||
userControl.setState({
|
||||
activePlayer: userControl.state.activePlayer ? 0 : 1
|
||||
});
|
||||
|
||||
/** the desc is inversely because the user.active is not changed yet !!! */
|
||||
userControl.refs[activePlayer].setState({
|
||||
active: false,
|
||||
desc: ""
|
||||
});
|
||||
|
||||
userControl.refs[inactivePlayer].setState({
|
||||
active: true,
|
||||
desc: activePlayer === this.state.webPlayer
|
||||
? this.state.desc.buddy
|
||||
: this.state.desc.you
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
currentImage: this.state.grid[row][col],
|
||||
currentObj: this.state.grid[row][col],
|
||||
active: true,
|
||||
});
|
||||
|
||||
if (this.checkFieldHasBeenNeverClicked(row, col)) {
|
||||
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);
|
||||
});
|
||||
if (0 === this.state.grid[row][col]) {
|
||||
return {
|
||||
row: row,
|
||||
col: col,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Player control method
|
||||
*
|
||||
* @param currentObject {int|string} Current object from Grid class
|
||||
* @param row {int}
|
||||
* @param col {int}
|
||||
* @param justOnFirstIteration {int} When bomb is being used check the whole explosion area
|
||||
*/
|
||||
handleGridField(currentObject, row, col, justOnFirstIteration = 0) {
|
||||
var userControl = this.refs.userControl,
|
||||
gridFieldControl = this.refs[this.refString(row, col)],
|
||||
activePlayer = userControl.state.activePlayer ? 'blue' : 'red',
|
||||
inactivePlayer = userControl.state.activePlayer ? 'red' : 'blue';
|
||||
return false;
|
||||
}
|
||||
|
||||
/** if the clicked field is NEVER CLICKED */
|
||||
if (this.checkFieldHasBeenNeverClicked(row, col)) {
|
||||
/** 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
|
||||
});
|
||||
}
|
||||
}
|
||||
checkNeighbours(row, col) {
|
||||
let anotherFields = [],
|
||||
neighbours = this.getNeighbourRadius(row, col);
|
||||
|
||||
this.state.lastClicked[activePlayer] = [row, col];
|
||||
for (let i = 0, j = neighbours.length; i < j; i++) {
|
||||
anotherFields.push(this.checkNeighbourItem(neighbours[i][0], neighbours[i][1]));
|
||||
}
|
||||
|
||||
/** if you found mine */
|
||||
if (currentObject === 'm') {
|
||||
this.state.foundUserMineCache++;
|
||||
return anotherFields;
|
||||
}
|
||||
|
||||
if (!justOnFirstIteration) {
|
||||
/** set last clicked field w/ color */
|
||||
this.state.lastClicked[activePlayer] = [row, col];
|
||||
bombClear() {
|
||||
if (this.state.bombFieldCache.length) {
|
||||
for (var i = 0, j = this.state.bombFieldCache.length; i < j; i++) {
|
||||
var cacheItem = this.state.bombFieldCache[i];
|
||||
this.refs[this.refString(cacheItem[0], cacheItem[1])]
|
||||
.setState({ bombTargetArea: null });
|
||||
}
|
||||
this.state.bombFieldCache = [];
|
||||
}
|
||||
}
|
||||
|
||||
this.state.sound[
|
||||
(userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache) > 20
|
||||
? 'warning'
|
||||
: 'mine'
|
||||
].play();
|
||||
}
|
||||
bombCreate(row, col) {
|
||||
var bombFieldSymbols = this.getBombFieldRadius(),
|
||||
bombFields = this.getBombRadius(row, col);
|
||||
|
||||
/** set current image in field */
|
||||
gridFieldControl.setState({
|
||||
currentImage: gridFieldControl.state.icons.root + gridFieldControl.state.icons.flag[activePlayer]
|
||||
});
|
||||
} else {
|
||||
this.state.sound.click.play();
|
||||
for (var i = 0, j = bombFields.length; i < j; i++) {
|
||||
this.state.bombFieldCache.push(bombFields[i]);
|
||||
|
||||
/** set current image in field - WHEN it is a number */
|
||||
if (!isNaN(currentObject)) {
|
||||
gridFieldControl.setState({
|
||||
currentImage: currentObject
|
||||
});
|
||||
}
|
||||
}
|
||||
this.refs[this.refString(bombFields[i][0], bombFields[i][1])]
|
||||
.setState({ bombTargetArea: bombFieldSymbols[i] });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* set bombs status - we must add one mine (currentObject === 'm' ? 1 : 0) to current mine
|
||||
* when it found NOW because the status is not refreshed unless the handleGridField() ends
|
||||
*/
|
||||
userControl.refs[activePlayer].setState({
|
||||
enabledBomb: userControl.refs[activePlayer].state.mines + (currentObject === 'm' ? 1 : 0) <= userControl.refs[inactivePlayer].state.mines
|
||||
});
|
||||
showLeftMines() {
|
||||
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++) {
|
||||
let currentField = this.refs[this.refString(i, k)];
|
||||
|
||||
userControl.refs[inactivePlayer].setState({
|
||||
enabledBomb: userControl.refs[activePlayer].state.mines + (currentObject === 'm' ? 1 : 0) >= userControl.refs[inactivePlayer].state.mines
|
||||
});
|
||||
|
||||
/** set-up last clicked */
|
||||
if (!justOnFirstIteration) {
|
||||
gridFieldControl.setState({
|
||||
lastClickedRed: activePlayer === 'red',
|
||||
lastClickedBlue: activePlayer === 'blue'
|
||||
});
|
||||
}
|
||||
if ('m' === this.state.grid[i][k] && this.checkFieldHasBeenNeverClicked(i, k)) {
|
||||
currentField.setState({
|
||||
currentImage: currentField.state.icons.root + currentField.state.icons.left,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** set __ACTIVE__ player in the UserControl !!!! */
|
||||
changePlayer(idx, max, currentObject) {
|
||||
var userControl = this.refs.userControl,
|
||||
activePlayer = userControl.state.activePlayer ? 'blue' : 'red',
|
||||
inactivePlayer = userControl.state.activePlayer ? 'red' : 'blue';
|
||||
|
||||
if (
|
||||
userControl.state.bombSelected && idx === (max - 1)
|
||||
|| !idx && !userControl.state.bombSelected && 'm' !== currentObject
|
||||
) {
|
||||
userControl.setState({
|
||||
activePlayer: userControl.state.activePlayer ? 0 : 1,
|
||||
});
|
||||
|
||||
/** the desc is inversely because the user.active is not changed yet !!! */
|
||||
userControl.refs[activePlayer].setState({
|
||||
active: false,
|
||||
desc: '',
|
||||
});
|
||||
|
||||
userControl.refs[inactivePlayer].setState({
|
||||
active: true,
|
||||
desc: activePlayer === this.state.webPlayer
|
||||
? this.state.desc.buddy
|
||||
: this.state.desc.you,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.checkFieldHasBeenNeverClicked(row, col)) {
|
||||
this.state.updatedFieldCache.push(this.refString(row, col));
|
||||
}
|
||||
|
||||
/**
|
||||
* Show elems w/ conditions
|
||||
*
|
||||
* @param row
|
||||
* @param col
|
||||
* @param idx
|
||||
* @param max
|
||||
*/
|
||||
show(row, col, idx = 0, max = 0) {
|
||||
this.handleGridField(this.state.grid[row][col], row, col, idx);
|
||||
this.showAppropriateFields(this.refs[this.refString(row, col)], row, col);
|
||||
this.changePlayer(idx, max, this.state.grid[row][col]);
|
||||
if (0 === this.state.grid[row][col]) {
|
||||
let neighbours = this.checkNeighbours(row, col);
|
||||
|
||||
neighbours
|
||||
.filter(i => false !== i)
|
||||
.forEach(element => {
|
||||
let currentField = this.refs[this.refString(element.row, element.col)];
|
||||
this.showAppropriateFields(currentField, element.row, element.col);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* STEP one
|
||||
*
|
||||
* @param coords
|
||||
*/
|
||||
stepEvent(coords) {
|
||||
/** if the clicked field is NEVER CLICKED */
|
||||
if (this.checkFieldHasBeenNeverClicked(coords[0], coords[1])) {
|
||||
var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
|
||||
/**
|
||||
* Player control method
|
||||
*
|
||||
* @param currentObject {int|string} Current object from Grid class
|
||||
* @param row {int}
|
||||
* @param col {int}
|
||||
* @param justOnFirstIteration {int} When bomb is being used check the whole explosion area
|
||||
*/
|
||||
handleGridField(currentObject, row, col, justOnFirstIteration = 0) {
|
||||
var userControl = this.refs.userControl,
|
||||
gridFieldControl = this.refs[this.refString(row, col)],
|
||||
activePlayer = userControl.state.activePlayer ? 'blue' : 'red',
|
||||
inactivePlayer = userControl.state.activePlayer ? 'red' : 'blue';
|
||||
|
||||
this.state.foundUserMineCache = 0;
|
||||
this.state.playBomb = true;
|
||||
|
||||
/** Show elements */
|
||||
if (this.refs.userControl.state.bombSelected) {
|
||||
this.state.sound.bomb.play();
|
||||
|
||||
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, j);
|
||||
}
|
||||
|
||||
/** remove BOMB from activePlayer */
|
||||
this.refs.userControl.refs[activePlayer].setState({
|
||||
haveBomb: false
|
||||
});
|
||||
} else {
|
||||
this.show(coords[0], coords[1]);
|
||||
}
|
||||
|
||||
/** Mine score handling */
|
||||
if (this.state.foundUserMineCache) {
|
||||
this.refs.userControl.setState({
|
||||
mines: this.refs.userControl.state.mines - this.state.foundUserMineCache,
|
||||
foundMines: true
|
||||
}, () => {
|
||||
/** because of CSS animation in .found-mine */
|
||||
setTimeout(() => this.refs.userControl.setState({foundMines: false}), 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
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** Reset BOMB status */
|
||||
if (this.refs.userControl.state.bombSelected) {
|
||||
/** reset bomb selected status */
|
||||
this.refs.userControl.setState({bombSelected: false});
|
||||
|
||||
/** clear cache, reset symbols */
|
||||
this.bombClear();
|
||||
}
|
||||
/** if the clicked field is NEVER CLICKED */
|
||||
if (this.checkFieldHasBeenNeverClicked(row, col)) {
|
||||
/** update LAST CLICKED grid field */
|
||||
if (!justOnFirstIteration) {
|
||||
if (null !== this.state.lastClicked[activePlayer]) {
|
||||
this.refs[this.refString(this.state.lastClicked[activePlayer][0], this.state.lastClicked[activePlayer][1])].setState({
|
||||
lastClickedRed: false,
|
||||
lastClickedBlue: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On Hover when you want to drop BOMB
|
||||
* Target grid field
|
||||
* @param coords
|
||||
*/
|
||||
onHoverGridField(coords) {
|
||||
if (this.refs.userControl.state.bombSelected) {
|
||||
var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
|
||||
this.state.lastClicked[activePlayer] = [row, col];
|
||||
|
||||
if (activePlayer === this.state.webPlayer) {
|
||||
/** clear cache, reset symbols */
|
||||
this.bombClear();
|
||||
/** if you found mine */
|
||||
if ('m' === currentObject) {
|
||||
this.state.foundUserMineCache++;
|
||||
|
||||
/** new cache && field activate */
|
||||
this.bombCreate(coords[0], coords[1]);
|
||||
} else {
|
||||
this.refs.userControl.setState({bombSelected: false});
|
||||
}
|
||||
if (!justOnFirstIteration) {
|
||||
/** set last clicked field w/ color */
|
||||
this.state.lastClicked[activePlayer] = [row, col];
|
||||
|
||||
this.state.sound[
|
||||
20 < (userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache)
|
||||
? 'warning'
|
||||
: 'mine'
|
||||
].play();
|
||||
}
|
||||
}
|
||||
|
||||
renderGridFields() {
|
||||
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++) {
|
||||
this.state.gridFields.push(
|
||||
<GridField row={i}
|
||||
col={k}
|
||||
ref={this.refString(i, k)}
|
||||
key={this.refString(i, k)}
|
||||
handleHoverOn={this.onHoverGridField.bind(this, [i, k])}
|
||||
onClick={this.props.onClick.bind(null, [i, k])}/>
|
||||
);
|
||||
}
|
||||
/** set current image in field */
|
||||
gridFieldControl.setState({
|
||||
currentImage: gridFieldControl.state.icons.root + gridFieldControl.state.icons.flag[activePlayer],
|
||||
});
|
||||
} else {
|
||||
this.state.sound.click.play();
|
||||
|
||||
/** set current image in field - WHEN it is a number */
|
||||
if (!isNaN(currentObject)) {
|
||||
gridFieldControl.setState({
|
||||
currentImage: currentObject,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* set bombs status - we must add one mine (currentObject === 'm' ? 1 : 0) to current mine
|
||||
* when it found NOW because the status is not refreshed unless the handleGridField() ends
|
||||
*/
|
||||
userControl.refs[activePlayer].setState({
|
||||
enabledBomb: userControl.refs[activePlayer].state.mines + ('m' === currentObject ? 1 : 0) <= userControl.refs[inactivePlayer].state.mines,
|
||||
});
|
||||
|
||||
userControl.refs[inactivePlayer].setState({
|
||||
enabledBomb: userControl.refs[activePlayer].state.mines + ('m' === currentObject ? 1 : 0) >= userControl.refs[inactivePlayer].state.mines,
|
||||
});
|
||||
|
||||
/** set-up last clicked */
|
||||
if (!justOnFirstIteration) {
|
||||
gridFieldControl.setState({
|
||||
lastClickedRed: 'red' === activePlayer,
|
||||
lastClickedBlue: 'blue' === activePlayer,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
/** Render the grid fields just one time in one party #12 */
|
||||
this.state.renderGridFields && this.renderGridFields();
|
||||
this.state.renderGridFields = false;
|
||||
/**
|
||||
* Show elems w/ conditions
|
||||
*
|
||||
* @param row
|
||||
* @param col
|
||||
* @param idx
|
||||
* @param max
|
||||
*/
|
||||
show(row, col, idx = 0, max = 0) {
|
||||
this.handleGridField(this.state.grid[row][col], row, col, idx);
|
||||
this.showAppropriateFields(this.refs[this.refString(row, col)], row, col);
|
||||
this.changePlayer(idx, max, this.state.grid[row][col]);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="game-wrapper">
|
||||
<div className={`game-overlay ${this.state.overlay ? '' : ' hide'}`}>
|
||||
<div className="game-overlay-window">
|
||||
<h1>{this.state.overlayTitle}</h1>
|
||||
<h2>{this.state.overlaySubTitle}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<UserControl ref="userControl"
|
||||
resign={this.props.resign}
|
||||
webPlayer={this.state.webPlayer}
|
||||
bombClear={this.bombClear.bind(this)}/>
|
||||
<div className="grid-container">
|
||||
<div className="grid">
|
||||
<>
|
||||
{this.state.gridFields}
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
/**
|
||||
* STEP one
|
||||
*
|
||||
* @param coords
|
||||
*/
|
||||
stepEvent(coords) {
|
||||
/** if the clicked field is NEVER CLICKED */
|
||||
if (this.checkFieldHasBeenNeverClicked(coords[0], coords[1])) {
|
||||
var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
|
||||
|
||||
this.state.foundUserMineCache = 0;
|
||||
this.state.playBomb = true;
|
||||
|
||||
/** Show elements */
|
||||
if (this.refs.userControl.state.bombSelected) {
|
||||
this.state.sound.bomb.play();
|
||||
|
||||
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, j);
|
||||
}
|
||||
|
||||
/** remove BOMB from activePlayer */
|
||||
this.refs.userControl.refs[activePlayer].setState({
|
||||
haveBomb: false,
|
||||
});
|
||||
} else {
|
||||
this.show(coords[0], coords[1]);
|
||||
}
|
||||
|
||||
/** Mine score handling */
|
||||
if (this.state.foundUserMineCache) {
|
||||
this.refs.userControl.setState({
|
||||
mines: this.refs.userControl.state.mines - this.state.foundUserMineCache,
|
||||
foundMines: true,
|
||||
}, () => {
|
||||
/** because of CSS animation in .found-mine */
|
||||
setTimeout(() => this.refs.userControl.setState({ foundMines: false }), 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,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** Reset BOMB status */
|
||||
if (this.refs.userControl.state.bombSelected) {
|
||||
/** reset bomb selected status */
|
||||
this.refs.userControl.setState({ bombSelected: false });
|
||||
|
||||
/** clear cache, reset symbols */
|
||||
this.bombClear();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On Hover when you want to drop BOMB
|
||||
* Target grid field
|
||||
* @param coords
|
||||
*/
|
||||
onHoverGridField(coords) {
|
||||
if (this.refs.userControl.state.bombSelected) {
|
||||
var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
|
||||
|
||||
if (activePlayer === this.state.webPlayer) {
|
||||
/** clear cache, reset symbols */
|
||||
this.bombClear();
|
||||
|
||||
/** new cache && field activate */
|
||||
this.bombCreate(coords[0], coords[1]);
|
||||
} else {
|
||||
this.refs.userControl.setState({ bombSelected: false });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
renderGridFields() {
|
||||
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++) {
|
||||
this.state.gridFields.push(
|
||||
<GridField
|
||||
row={i}
|
||||
col={k}
|
||||
ref={this.refString(i, k)}
|
||||
key={this.refString(i, k)}
|
||||
handleHoverOn={this.onHoverGridField.bind(this, [i, k])}
|
||||
onClick={this.props.onClick.bind(null, [i, k])}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
/** Render the grid fields just one time in one party #12 */
|
||||
this.state.renderGridFields && this.renderGridFields();
|
||||
this.state.renderGridFields = false;
|
||||
|
||||
return (
|
||||
<div className="game-wrapper">
|
||||
<div className={`game-overlay ${this.state.overlay ? '' : ' hide'}`}>
|
||||
<div className="game-overlay-window">
|
||||
<h1>{this.state.overlayTitle}</h1>
|
||||
<h2>{this.state.overlaySubTitle}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<UserControl
|
||||
ref="userControl"
|
||||
resign={this.props.resign}
|
||||
webPlayer={this.state.webPlayer}
|
||||
bombClear={this.bombClear.bind(this)}
|
||||
/>
|
||||
<div className="grid-container">
|
||||
<div className="grid">
|
||||
<>
|
||||
{this.state.gridFields}
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default GridControl;
|
||||
|
||||
@@ -1,145 +1,156 @@
|
||||
import React from 'react';
|
||||
|
||||
class GridField extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
currentObj: 'w',
|
||||
currentImage: null,
|
||||
active: false,
|
||||
lastClickedRed: false,
|
||||
lastClickedBlue: false,
|
||||
bombTargetArea: null,
|
||||
icons: {
|
||||
root: '/images/',
|
||||
water: {
|
||||
1: 'bg-wave-1-outbg.png',
|
||||
2: 'bg-wave-1-outbg.png',
|
||||
3: 'bg-wave-2-outbg.png'
|
||||
},
|
||||
flag: {
|
||||
red: 'bg-flag-red-outbg.png',
|
||||
blue: 'bg-flag-blue-outbg.png'
|
||||
},
|
||||
target: {
|
||||
lastBlue: 'bg-last-blue-outbg.png',
|
||||
lastRed: 'bg-last-red-outbg.png',
|
||||
crosshair: 'bg-target-outbg.png',
|
||||
crosshairBomb: 'bg-target-bomb-outbg.png'
|
||||
},
|
||||
left: 'bg-left-mine-outbg.png'
|
||||
}
|
||||
};
|
||||
this.state = {
|
||||
currentObj: 'w',
|
||||
currentImage: null,
|
||||
active: false,
|
||||
lastClickedRed: false,
|
||||
lastClickedBlue: false,
|
||||
bombTargetArea: null,
|
||||
icons: {
|
||||
root: '/images/',
|
||||
water: {
|
||||
1: 'bg-wave-1-outbg.png',
|
||||
2: 'bg-wave-1-outbg.png',
|
||||
3: 'bg-wave-2-outbg.png',
|
||||
},
|
||||
flag: {
|
||||
red: 'bg-flag-red-outbg.png',
|
||||
blue: 'bg-flag-blue-outbg.png',
|
||||
},
|
||||
target: {
|
||||
lastBlue: 'bg-last-blue-outbg.png',
|
||||
lastRed: 'bg-last-red-outbg.png',
|
||||
crosshair: 'bg-target-outbg.png',
|
||||
crosshairBomb: 'bg-target-bomb-outbg.png',
|
||||
},
|
||||
left: 'bg-left-mine-outbg.png',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
var wave = Math.floor(Math.random() * 3) + 1;
|
||||
|
||||
this.setState({
|
||||
currentImage: this.state.icons.root + this.state.icons.water[wave],
|
||||
});
|
||||
}
|
||||
|
||||
classNameWhenActive() {
|
||||
return 'field'
|
||||
+ (true === this.state.active ? ' active' : '')
|
||||
+ (true === this.state.active && 'm' === this.state.currentObj ? ' mine' : '')
|
||||
+ ' color-' + this.state.currentObj;
|
||||
}
|
||||
|
||||
currentImage() {
|
||||
return isNaN(this.state.currentImage)
|
||||
? (
|
||||
<div className="flag-mine">
|
||||
<img src={this.state.currentImage} alt="current image" />
|
||||
<div className="flag-mine-base" />
|
||||
</div>
|
||||
) : this.state.currentImage ? <div className="flag-number">{this.state.currentImage}</div> : '';
|
||||
}
|
||||
|
||||
lastClickedClass() {
|
||||
return 'field-'
|
||||
+ (this.state.lastClickedRed ? 'red' : '')
|
||||
+ (this.state.lastClickedBlue ? 'blue' : '') + '-last last-clicked';
|
||||
}
|
||||
|
||||
lastClickedSrc() {
|
||||
return this.state.lastClickedRed
|
||||
? '/images/bg-last-red-outbg.png'
|
||||
: '/images/bg-last-blue-outbg.png';
|
||||
}
|
||||
|
||||
currentLastClicked() {
|
||||
return this.state.lastClickedRed || this.state.lastClickedBlue
|
||||
? (
|
||||
<img
|
||||
className={this.lastClickedClass()}
|
||||
src={this.lastClickedSrc()}
|
||||
alt="blue last"
|
||||
/>
|
||||
) : '';
|
||||
}
|
||||
|
||||
createBombTarget() {
|
||||
if (null !== this.state.bombTargetArea) {
|
||||
let vert, hor = '';
|
||||
|
||||
switch (this.state.bombTargetArea[0]) {
|
||||
case 0:
|
||||
vert = 'left';
|
||||
break;
|
||||
case 1:
|
||||
vert = 'center';
|
||||
break;
|
||||
case 2:
|
||||
vert = 'right';
|
||||
break;
|
||||
default:
|
||||
vert = null;
|
||||
break;
|
||||
}
|
||||
|
||||
switch (this.state.bombTargetArea[1]) {
|
||||
case 0:
|
||||
hor = 'top';
|
||||
break;
|
||||
case 1:
|
||||
hor = 'middle';
|
||||
break;
|
||||
case 2:
|
||||
hor = 'bottom';
|
||||
break;
|
||||
default:
|
||||
vert = null;
|
||||
break;
|
||||
}
|
||||
|
||||
var src = null === vert
|
||||
? '/images/bg-bomb-empty-outbg.png'
|
||||
: '/images/bg-bomb-' + hor + '-' + vert + '-outbg.png';
|
||||
|
||||
return (
|
||||
<img
|
||||
className="field-bomb-target"
|
||||
src={src}
|
||||
alt="bomb target"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
var wave = Math.floor(Math.random() * 3) + 1;
|
||||
|
||||
this.setState({
|
||||
currentImage: this.state.icons.root + this.state.icons.water[wave]
|
||||
});
|
||||
}
|
||||
|
||||
classNameWhenActive() {
|
||||
return 'field'
|
||||
+ (this.state.active === true ? ' active' : '')
|
||||
+ (this.state.active === true && this.state.currentObj === 'm' ? ' mine' : '')
|
||||
+ ' color-' + this.state.currentObj;
|
||||
}
|
||||
|
||||
currentImage() {
|
||||
return isNaN(this.state.currentImage)
|
||||
?
|
||||
<div className="flag-mine">
|
||||
<img src={this.state.currentImage}/>
|
||||
<div className="flag-mine-base"></div>
|
||||
</div>
|
||||
: this.state.currentImage ? <div className="flag-number">{this.state.currentImage}</div> : '';
|
||||
}
|
||||
|
||||
lastClickedClass() {
|
||||
return 'field-'
|
||||
+ (this.state.lastClickedRed ? 'red' : '')
|
||||
+ (this.state.lastClickedBlue ? 'blue' : '') + '-last last-clicked';
|
||||
}
|
||||
|
||||
lastClickedSrc() {
|
||||
return this.state.lastClickedRed
|
||||
? "/images/bg-last-red-outbg.png"
|
||||
: "/images/bg-last-blue-outbg.png";
|
||||
}
|
||||
|
||||
currentLastClicked() {
|
||||
return this.state.lastClickedRed || this.state.lastClickedBlue
|
||||
? <img className={this.lastClickedClass()}
|
||||
src={this.lastClickedSrc()}
|
||||
alt="blue last"/>
|
||||
: '';
|
||||
}
|
||||
|
||||
createBombTarget() {
|
||||
if (this.state.bombTargetArea !== null) {
|
||||
var vert = '', hor = '';
|
||||
|
||||
switch (this.state.bombTargetArea[0]) {
|
||||
case 0:
|
||||
vert = 'left';
|
||||
break;
|
||||
case 1:
|
||||
vert = 'center';
|
||||
break;
|
||||
case 2:
|
||||
vert = 'right';
|
||||
break;
|
||||
default:
|
||||
vert = null;
|
||||
break;
|
||||
}
|
||||
|
||||
switch (this.state.bombTargetArea[1]) {
|
||||
case 0:
|
||||
hor = 'top';
|
||||
break;
|
||||
case 1:
|
||||
hor = 'middle';
|
||||
break;
|
||||
case 2:
|
||||
hor = 'bottom';
|
||||
break;
|
||||
default:
|
||||
vert = null;
|
||||
break;
|
||||
}
|
||||
|
||||
var src = vert === null
|
||||
? '/images/bg-bomb-empty-outbg.png'
|
||||
: '/images/bg-bomb-' + hor + '-' + vert + '-outbg.png';
|
||||
|
||||
return <img className="field-bomb-target"
|
||||
src={src}
|
||||
alt="bomb target"/>
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="field-wrapper"
|
||||
onClick={this.props.onClick}
|
||||
onMouseEnter={this.props.handleHoverOn}>
|
||||
<img className="field-target"
|
||||
src="/images/bg-target-outbg.png"
|
||||
alt="target"/>
|
||||
{this.createBombTarget()}
|
||||
{this.currentLastClicked()}
|
||||
<div className={this.classNameWhenActive()}>
|
||||
<div className="field-corner">
|
||||
{this.currentImage()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
className="field-wrapper"
|
||||
onClick={this.props.onClick}
|
||||
onMouseEnter={this.props.handleHoverOn}
|
||||
>
|
||||
<img
|
||||
className="field-target"
|
||||
src="/images/bg-target-outbg.png"
|
||||
alt="target"
|
||||
/>
|
||||
{this.createBombTarget()}
|
||||
{this.currentLastClicked()}
|
||||
<div className={this.classNameWhenActive()}>
|
||||
<div className="field-corner">
|
||||
{this.currentImage()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default GridField;
|
||||
|
||||
@@ -1,101 +1,101 @@
|
||||
import React from 'react';
|
||||
|
||||
class Grid extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.state = {
|
||||
row: 16,
|
||||
col: 16,
|
||||
mines: 51,
|
||||
set: []
|
||||
};
|
||||
this.state = {
|
||||
row: 16,
|
||||
col: 16,
|
||||
mines: 51,
|
||||
set: [],
|
||||
};
|
||||
|
||||
this.state.grid = this.numberingGrid(
|
||||
this.createGrid(
|
||||
this.shuffleSet(
|
||||
this.createSet(
|
||||
this.state.set
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
this.state.grid = this.numberingGrid(
|
||||
this.createGrid(
|
||||
this.shuffleSet(
|
||||
this.createSet(
|
||||
this.state.set,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
createSet(obj) {
|
||||
for (let i = 0, j = this.state.row * this.state.col; i < j; i++) {
|
||||
obj.push(
|
||||
0 < this.state.mines
|
||||
? 'm'
|
||||
: 'w',
|
||||
);
|
||||
this.state.mines--;
|
||||
}
|
||||
|
||||
createSet(obj) {
|
||||
for (var i = 0, j = this.state.row * this.state.col; i < j; i++) {
|
||||
obj.push(
|
||||
this.state.mines > 0
|
||||
? "m"
|
||||
: "w"
|
||||
);
|
||||
this.state.mines--;
|
||||
return obj;
|
||||
}
|
||||
|
||||
shuffleSet(obj) {
|
||||
return obj.sort(function() {
|
||||
return Math.round(Math.random()) - .5;
|
||||
});
|
||||
}
|
||||
|
||||
createGrid(obj) {
|
||||
let grid = [[]],
|
||||
row = 0,
|
||||
col = 0;
|
||||
|
||||
for (let i = 0, j = obj.length; i < j; i++) {
|
||||
grid[row][col] = obj[i];
|
||||
|
||||
if (15 === col && 15 !== row) {
|
||||
row++;
|
||||
col = 0;
|
||||
grid.push([]);
|
||||
} else {
|
||||
col++;
|
||||
}
|
||||
}
|
||||
|
||||
return grid;
|
||||
}
|
||||
|
||||
checkMine(field, i, j) {
|
||||
return 'undefined' !== typeof field[i] && 'undefined' !== typeof field[i][j] && 'm' === field[i][j];
|
||||
}
|
||||
|
||||
isThereMine(obj, row, col) {
|
||||
if (this.checkMine(obj, row, col)) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
numberingGrid(obj) {
|
||||
let nbr = 0;
|
||||
|
||||
for (let i = 0; i < this.state.row; i++) {
|
||||
for (let j = 0; j < this.state.col; j++) {
|
||||
if ('w' === obj[i][j]) {
|
||||
nbr = 0;
|
||||
|
||||
nbr += this.isThereMine(obj, i - 1, j);
|
||||
nbr += this.isThereMine(obj, i - 1, j - 1);
|
||||
nbr += this.isThereMine(obj, i - 1, j + 1);
|
||||
nbr += this.isThereMine(obj, i, j - 1);
|
||||
nbr += this.isThereMine(obj, i, j + 1);
|
||||
nbr += this.isThereMine(obj, i + 1, j);
|
||||
nbr += this.isThereMine(obj, i + 1, j + 1);
|
||||
nbr += this.isThereMine(obj, i + 1, j - 1);
|
||||
|
||||
obj[i][j] = nbr;
|
||||
}
|
||||
|
||||
return obj;
|
||||
}
|
||||
}
|
||||
|
||||
shuffleSet(obj) {
|
||||
return obj.sort(function () {
|
||||
return Math.round(Math.random()) - .5;
|
||||
});
|
||||
}
|
||||
|
||||
createGrid(obj) {
|
||||
var grid = [[]],
|
||||
row = 0,
|
||||
col = 0;
|
||||
|
||||
for (var i = 0, j = obj.length; i < j; i++) {
|
||||
grid[row][col] = obj[i];
|
||||
|
||||
if (col === 15 && row !== 15) {
|
||||
row++;
|
||||
col = 0;
|
||||
grid.push([]);
|
||||
} else {
|
||||
col++;
|
||||
}
|
||||
}
|
||||
|
||||
return grid;
|
||||
}
|
||||
|
||||
checkMine(field, i, j) {
|
||||
return typeof field[i] !== 'undefined' && typeof field[i][j] !== 'undefined' && field[i][j] === 'm';
|
||||
}
|
||||
|
||||
isThereMine(obj, row, col) {
|
||||
if (this.checkMine(obj, row, col)) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
numberingGrid(obj) {
|
||||
var nbr = 0;
|
||||
|
||||
for (var i = 0; i < this.state.row; i++) {
|
||||
for (var j = 0; j < this.state.col; j++) {
|
||||
if (obj[i][j] === 'w') {
|
||||
nbr = 0;
|
||||
|
||||
nbr += this.isThereMine(obj, i - 1, j);
|
||||
nbr += this.isThereMine(obj, i - 1, j - 1);
|
||||
nbr += this.isThereMine(obj, i - 1, j + 1);
|
||||
nbr += this.isThereMine(obj, i, j - 1);
|
||||
nbr += this.isThereMine(obj, i, j + 1);
|
||||
nbr += this.isThereMine(obj, i + 1, j);
|
||||
nbr += this.isThereMine(obj, i + 1, j + 1);
|
||||
nbr += this.isThereMine(obj, i + 1, j - 1);
|
||||
|
||||
obj[i][j] = nbr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return obj;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
}
|
||||
|
||||
export default Grid;
|
||||
|
||||
Reference in New Issue
Block a user