improve game && start sound creating
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import Sound from 'react-sound';
|
||||
import Grid from './grid';
|
||||
import GridField from './grid-field';
|
||||
import UserControl from '../user/user-control';
|
||||
@@ -12,6 +13,9 @@ class GridControl extends React.Component {
|
||||
this.state = {
|
||||
grid: grid.state.grid,
|
||||
updatedFieldCache: [],
|
||||
bombFieldCache: [],
|
||||
foundUserMineCache: 0,
|
||||
playBomb: false,
|
||||
lastClicked: {
|
||||
red: null,
|
||||
blue: null
|
||||
@@ -27,6 +31,37 @@ class GridControl extends React.Component {
|
||||
return typeof field[i] !== 'undefined' && typeof field[i][j] !== 'undefined' && field[i][j] !== 'm';
|
||||
}
|
||||
|
||||
getBombRadius(row, col) {
|
||||
var 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) {
|
||||
if (col < 2) {
|
||||
col = 2;
|
||||
}
|
||||
|
||||
if (row < 2) {
|
||||
row = 2;
|
||||
}
|
||||
|
||||
if (row > this.state.grid.length - 3) {
|
||||
row = this.state.grid.length - 3;
|
||||
}
|
||||
|
||||
if (col > this.state.grid[0].length - 3) {
|
||||
col = this.state.grid[0].length - 3;
|
||||
}
|
||||
}
|
||||
|
||||
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]
|
||||
];
|
||||
}
|
||||
|
||||
checkNeighbourItem(row, col) {
|
||||
if (this.checkMine(this.state.grid, row, col)) {
|
||||
var currentField = this.refs[this.refString(row, col)];
|
||||
@@ -95,47 +130,92 @@ class GridControl extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
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 = [
|
||||
[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]
|
||||
],
|
||||
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]});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Player control method
|
||||
* @param currentObject
|
||||
* @param x
|
||||
* @param y
|
||||
*
|
||||
* @param currentObject {int|string} Current object from Grid class
|
||||
* @param x {int}
|
||||
* @param y {int}
|
||||
* @param justOnFirstIteration {int} When bomb is being used check the whole explosion area
|
||||
*/
|
||||
handleGridField(currentObject, x, y) {
|
||||
handleGridField(currentObject, x, y, justOnFirstIteration = 0) {
|
||||
var userControl = this.refs.userControl,
|
||||
gridFieldControl = this.refs[this.refString(x, y)],
|
||||
activePlayer = userControl.state.activePlayer ? 'blue' : 'red';
|
||||
activePlayer = userControl.state.activePlayer ? 'blue' : 'red',
|
||||
inactivePlayer = userControl.state.activePlayer ? 'red' : 'blue';
|
||||
|
||||
/** update last cliked grid field */
|
||||
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 (!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) {
|
||||
this.state.lastClicked[activePlayer] = [x, y];
|
||||
|
||||
/** If you found mine */
|
||||
/** if you found mine */
|
||||
if (currentObject === 'm') {
|
||||
userControl.setState({
|
||||
mines: userControl.state.mines - 1
|
||||
});
|
||||
this.state.foundUserMineCache++;
|
||||
|
||||
userControl.refs[activePlayer].setState({
|
||||
mines: userControl.refs[activePlayer].state.mines + 1
|
||||
});
|
||||
|
||||
this.state.lastClicked[activePlayer] = [x, y];
|
||||
if (!justOnFirstIteration) {
|
||||
/** set last clicked field w/ color */
|
||||
this.state.lastClicked[activePlayer] = [x, y];
|
||||
}
|
||||
|
||||
/** set current image in field */
|
||||
gridFieldControl.setState({
|
||||
currentImage: gridFieldControl.state.icons.root + gridFieldControl.state.icons.flag[activePlayer]
|
||||
});
|
||||
} else {
|
||||
userControl.state.activePlayer = userControl.state.activePlayer ? 0 : 1;
|
||||
if (!justOnFirstIteration) {
|
||||
/** set ACTIVE player */
|
||||
userControl.setState({
|
||||
activePlayer: userControl.state.activePlayer ? 0 : 1
|
||||
});
|
||||
|
||||
/** It is a number */
|
||||
userControl.refs[activePlayer].setState({
|
||||
active: false
|
||||
});
|
||||
|
||||
userControl.refs[inactivePlayer].setState({
|
||||
active: true
|
||||
});
|
||||
}
|
||||
|
||||
/** set current image in field - WHEN it is a number */
|
||||
if (!isNaN(currentObject)) {
|
||||
gridFieldControl.setState({
|
||||
currentImage: currentObject
|
||||
@@ -143,11 +223,25 @@ class GridControl extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
/** set-up last clicked */
|
||||
gridFieldControl.setState({
|
||||
lastClickedRed: activePlayer === 'red',
|
||||
lastClickedBlue: activePlayer === 'blue'
|
||||
/**
|
||||
* 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
|
||||
});
|
||||
|
||||
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'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -156,9 +250,99 @@ class GridControl extends React.Component {
|
||||
* @param coords
|
||||
*/
|
||||
onClick(coords) {
|
||||
var currentField = this.refs[this.refString(coords[0], coords[1])];
|
||||
this.showAppropriateFields(currentField, coords[0], coords[1]);
|
||||
this.handleGridField(this.state.grid[coords[0]][coords[1]], coords[0], coords[1]);
|
||||
var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
|
||||
this.state.foundUserMineCache = 0;
|
||||
|
||||
this.state.playBomb = true;
|
||||
|
||||
console.log(
|
||||
this.state.playBomb
|
||||
);
|
||||
|
||||
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.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
|
||||
);
|
||||
}
|
||||
|
||||
if (this.state.foundUserMineCache) {
|
||||
/** remove ONE mine from global */
|
||||
this.refs.userControl.setState({
|
||||
mines: this.refs.userControl.state.mines - this.state.foundUserMineCache,
|
||||
foundMines: true
|
||||
});
|
||||
|
||||
setTimeout(function () {
|
||||
this.refs.userControl.setState({foundMines: false})
|
||||
}.bind(this), 500);
|
||||
|
||||
/** add ONE mine to active Player */
|
||||
this.refs.userControl.refs[activePlayer].setState({
|
||||
mines: this.refs.userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache
|
||||
});
|
||||
}
|
||||
|
||||
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
|
||||
* @param coords
|
||||
*/
|
||||
onHoverWithBomb(coords) {
|
||||
if (this.refs.userControl.state.bombSelected) {
|
||||
/** clear cache, reset symbols */
|
||||
this.bombClear();
|
||||
|
||||
/** new cache && field activate */
|
||||
this.bombCreate(coords[0], coords[1]);
|
||||
}
|
||||
}
|
||||
|
||||
playingBomb() {
|
||||
return this.state.playBomb
|
||||
? Sound.status.PLAYING
|
||||
: Sound.status.STOPPED;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
soundManager.setup({debugMode: false});
|
||||
}
|
||||
|
||||
renderGridFields() {
|
||||
@@ -171,6 +355,7 @@ class GridControl extends React.Component {
|
||||
col={k}
|
||||
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])}
|
||||
/>
|
||||
);
|
||||
@@ -183,12 +368,18 @@ class GridControl extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="game-wrapper">
|
||||
<div className="users">
|
||||
<UserControl ref="userControl" blue="Olcsó János" red="Eszet Lenke"/>
|
||||
</div>
|
||||
<UserControl ref="userControl"
|
||||
blue="Olcsó János"
|
||||
red="Eszet Lenke"
|
||||
bombClear={this.bombClear.bind(this)}/>
|
||||
<div className="grid">
|
||||
{this.renderGridFields()}
|
||||
</div>
|
||||
<Sound url="sound/bomb.mp3" ref="bombSound" playStatus={this.playingBomb()}/>
|
||||
{/*<Sound url="sound/click.mp3" playStatus={this.playStatus()}/>*/}
|
||||
{/*<Sound url="sound/mine.mp3" playStatus={this.playStatus()}/>*/}
|
||||
{/*<Sound url="sound/warning.mp3" playStatus={this.playStatus()}/>*/}
|
||||
{/*<Sound url="sound/won.mp3" playStatus={this.playStatus()}/>*/}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user