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

create first working communication

Browse Source
This commit is contained in:
Root
2016-10-25 11:19:50 +02:00
parent 23f034bc1c
commit 5b4fdd088c
27 changed files with 1037 additions and 2546 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,21 +1,24 @@
import React from 'react';
import Sound from 'react-sound';
import Grid from './grid';
import GridField from './grid-field';
import UserControl from '../user/user-control';
class GridControl extends React.Component {
constructor() {
super();
var grid = new Grid();
constructor(props) {
super(props);
this.state = {
grid: grid.state.grid,
env: props.env,
log: props.log,
session: null,
channel: null,
webPlayer: null,
grid: null,
updatedFieldCache: [],
bombFieldCache: [],
foundUserMineCache: 0,
playBomb: false,
sound: null,
lastClicked: {
red: null,
blue: null
@@ -191,6 +194,8 @@ class GridControl extends React.Component {
this.state.foundUserMineCache++;
if (!justOnFirstIteration) {
this.playingSound('mine');
/** set last clicked field w/ color */
this.state.lastClicked[activePlayer] = [x, y];
}
@@ -201,7 +206,9 @@ class GridControl extends React.Component {
});
} else {
if (!justOnFirstIteration) {
/** set ACTIVE player */
this.playingSound('click');
/** set __ACTIVE__ player in the UserControl !!!! */
userControl.setState({
activePlayer: userControl.state.activePlayer ? 0 : 1
});
@@ -245,19 +252,20 @@ class GridControl extends React.Component {
}
}
/**
* Most important event!!
* @param coords
*/
onClick(coords) {
stepEvent(coords, isOpponentStepped) {
var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
this.state.foundUserMineCache = 0;
this.state.foundUserMineCache = 0;
this.state.playBomb = true;
console.log(
this.state.playBomb
);
/** Step automatically when not this user stepped */
if (!isOpponentStepped) {
this.state.session
.publish(this.state.channel, {
'coords': coords,
'player': activePlayer
});
}
if (this.refs.userControl.state.bombSelected) {
var radius = this.getBombRadius(coords[0], coords[1]);
@@ -296,7 +304,7 @@ class GridControl extends React.Component {
}
if (this.state.foundUserMineCache) {
/** remove ONE mine from global */
/** remove the found mines from global */
this.refs.userControl.setState({
mines: this.refs.userControl.state.mines - this.state.foundUserMineCache,
foundMines: true
@@ -306,7 +314,7 @@ class GridControl extends React.Component {
this.refs.userControl.setState({foundMines: false})
}.bind(this), 500);
/** add ONE mine to active Player */
/** 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
});
@@ -321,6 +329,19 @@ class GridControl extends React.Component {
}
}
/**
* Most important event!!
* Click only when the active player is the current client.
* @param coords
*/
onClick(coords) {
var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
if (activePlayer === this.state.webPlayer) {
this.stepEvent(coords, false);
}
}
/**
* On Hover when you want to drop BOMB
* @param coords
@@ -335,34 +356,50 @@ class GridControl extends React.Component {
}
}
playingBomb() {
return this.state.playBomb
? Sound.status.PLAYING
: Sound.status.STOPPED;
/**
* Play sound effets
* @param type
* @returns {*}
*/
playingSound(type) {
this.state.log.i('Sound playing type: ' + type);
return type !== null
? <Sound url={"sound/" + type + ".mp3"} playStatus={Sound.status.PLAYING}/>
: '';
}
/** after rendering */
componentDidMount() {
soundManager.setup({debugMode: false});
/** disable console of soundmanager */
soundManager.setup({
debugMode: this.state.env,
useConsole: this.state.env
});
}
renderGridFields() {
var grid = [];
/** If the app.js filled the this.state.grid var, START the grid render */
if (this.state.grid) {
var 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++) {
grid.push(
<GridField row={i}
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])}
/>
);
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++) {
grid.push(
<GridField row={i}
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])}/>
);
}
}
return grid;
}
return grid;
return "";
}
render() {
@@ -375,11 +412,7 @@ class GridControl extends React.Component {
<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()}/>*/}
{this.playingSound(this.state.sound)}
</div>
);
}

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

@@ -12,7 +12,7 @@ class GridField extends React.Component {
lastClickedBlue: false,
bombTargetArea: null,
icons: {
root: 'bundles/mineseeker/images/',
root: '/bundles/mineseeker/images/',
water: {
1: 'bg-wave-1-outbg.png',
2: 'bg-wave-1-outbg.png',
@@ -35,6 +35,8 @@ class GridField extends React.Component {
componentWillMount() {
var wave = Math.floor(Math.random() * 3) + 1;
console.log('mounted');
this.setState({
currentImage: this.state.icons.root + this.state.icons.water[wave]
});