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

improve game && start sound creating

Browse Source
This commit is contained in:
Root
2016-10-16 18:26:55 +02:00
parent ed41aaead0
commit 70218471cd
33 changed files with 952 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>
);
}

53
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-field.js
View File

@@ -10,6 +10,7 @@ class GridField extends React.Component {
active: false,
lastClickedRed: false,
lastClickedBlue: false,
bombTargetArea: null,
icons: {
root: 'bundles/mineseeker/images/',
water: {
@@ -76,13 +77,59 @@ class GridField extends React.Component {
: '';
}
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
? '/bundles/mineseeker/images/bg-bomb-empty-outbg.png'
: '/bundles/mineseeker/images/bg-bomb-' + hor + '-' + vert + '-outbg.png';
return <img className="field-bomb-target"
src={src}
alt="bomb target"/>
}
}
render() {
return (
<div className="field-wrapper">
<div className="field-wrapper"
onClick={this.props.onClick}
onMouseEnter={this.props.handleHoverOn}>
<img className="field-target"
src="/bundles/mineseeker/images/bg-target-outbg.png"
alt="target"
onClick={this.props.onClick}/>
alt="target"/>
{this.createBombTarget()}
{this.currentLastClicked()}
<div className={this.classNameWhenActive()}>
<div className="field-corner">