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

refact && remove sound and logging && bugfix BIGBUG - handleGridField and showAppropriateFields sort order...

Browse Source
This commit is contained in:
Root
2016-10-28 16:16:27 +02:00
parent 5b4fdd088c
commit 0a22968e56
6 changed files with 113 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@@ -11,8 +11,7 @@
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-sound": "^0.5.2"
"react-dom": "^15.3.2"
},
"devDependencies": {},
"scripts": {

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

@@ -1,7 +1,6 @@
import React from 'react';
import Grid from './grid/grid';
import GridControl from './grid/grid-control';
import Logging from './system/logging';
class MineSeeker extends React.Component {
constructor(props) {
@@ -9,19 +8,14 @@ class MineSeeker extends React.Component {
var gameAssoc = props.gameId !== '' ? props.gameId : this.makeGameAssoc(50);
var channel = "acme/channel/" + gameAssoc;
var log = new Logging();
log.state.logging = props.env === 'dev';
var grid = new Grid();
this.state = {
gameInherited: props.gameId !== '',
gameAssoc: gameAssoc,
log: log,
websocket: null,
channel: channel,
session: null,
createGrid: false,
grid: grid.state.grid
stepCache: null
}
}
@@ -34,101 +28,100 @@ class MineSeeker extends React.Component {
return text;
}
topicProcess(payload, grid) {
var log = this.state.log;
/** It is a PUBLISH */
if (typeof payload.data !== 'undefined') {
log.i([payload.user + " has been stepped to coords: " + payload.data.coords[0] + ', ' + payload.data.coords[0], payload]);
/** because the activePlayer has been changed before the data come */
if (this.refs.gridControl.state.webPlayer !== payload.data.player) {
this.refs.gridControl.stepEvent(payload.data.coords, true);
}
} else {
/** It is a SUBSCRIBE */
log.i(["Something happened on the channel!", payload]);
if (this.refs.gridControl.state.webPlayer === null) {
if (payload.userCnt === 1) {
this.refs.gridControl.state.webPlayer = 'red';
}
if (payload.userCnt === 2) {
this.refs.gridControl.state.webPlayer = 'blue';
this.refs.gridControl.state.grid = JSON.parse(grid);
}
}
}
}
/** after rendering */
componentDidMount() {
this.state.websocket = WS.connect("ws://mine.dev:6450");
var log = this.state.log;
/** Create Websocket w/ Bahnhof.js */
var websocket = WS.connect("ws://mine.dev:6450");
/**
* Connect
* Session is an Autobahn JS WAMP session.
*/
this.state.websocket.on("socket/connect", (session) => {
log.i("Successfully connected to the Server!");
websocket.on("socket/connect", (session) => {
console.info("Successfully connected to the Server!");
if (!this.state.gameInherited) {
var gridClient = new Grid().state.grid;
}
/**
* Connect
* Connect - RPC
* Send grid information to the server
*/
session
.call(
this.state.gameInherited ? "sample/connectGame" : "sample/startGame",
[this.state.grid, this.state.gameAssoc]
this.state.gameInherited ? this.state.gameAssoc : [gridClient, this.state.gameAssoc]
)
.then(
(grid) => {
log.l(["Grid has been created! Return w/ gameAssoc."]);
(gridServer) => {
console.info("Grid has been created! Return w/ gameAssoc.");
/** Connect */
session.subscribe(
this.state.session = session;
this.refs.gridControl.setState({
grid: this.state.gameInherited ? JSON.parse(gridServer) : gridClient,
session: this.state.session,
channel: this.state.channel
});
if (this.refs.gridControl.state.webPlayer === null) {
if (this.state.gameInherited) {
this.refs.gridControl.state.webPlayer = 'blue';
// this.refs.gridControl.refs.userControl.setState({activePlayer: this.refs.gridControl.refs.userControl.state.activePlayer ? 0 : 1});
// this.refs.gridControl.refs.userControl.refs.red.setState({active: false});
// this.refs.gridControl.refs.userControl.refs.blue.setState({active: true});
} else {
this.refs.gridControl.state.webPlayer = 'red';
}
}
/** Connect - subscribe */
this.state.session.subscribe(
this.state.channel,
(uri, payload, log) => {
/** Create GridControl class */
if (this.state.createGrid) {
this.topicProcess(payload, grid);
} else {
this.setState({createGrid: true}, () => {
/** Start GridControl tag */
this.refs.gridControl.setState({grid: this.state.grid}, () => {
this.refs.gridControl.state.session = session;
this.refs.gridControl.state.channel = this.state.channel;
if (typeof payload.data !== 'undefined') {
console.warn(payload.user + " has been stepped to coords: " + payload.data.coords[0] + ', ' + payload.data.coords[1]);
this.topicProcess(payload, grid);
});
});
/** Auto-Step if this player is not the current user */
if (this.refs.gridControl.state.webPlayer !== payload.data.player) {
console.warn('Opponent stepped: Auto-Step process');
this.refs.gridControl.stepEvent(payload.data.coords);
} else {
// this.refs.gridControl.stepEvent(payload.data.coords);
}
} else {
console.info("User has been subscribed to the channel!");
}
}
);
},
(error, desc) => log.e(["RPC Error", error, desc])
(error, desc) => console.log(["RPC Error", error, desc])
);
});
/**
* Connect
* DisConnect
* Error provides us with some insight into the disconnection: error.reason and error.code
*/
this.state.websocket.on("socket/disconnect", function (error) {
log.w("Disconnected for " + error.reason + " with code " + error.code);
});
websocket.on("socket/disconnect", (error) => console.log("Disconnected for " + error.reason + " with code " + error.code));
}
createGrid() {
return this.state.createGrid
? <GridControl ref="gridControl"
env={this.props.env === 'dev'}
log={this.state.log}/>
: '';
onClick(coords) {
var activePlayer = this.refs.gridControl.refs.userControl.state.activePlayer ? 'blue' : 'red';
/** Player can step if it turns */
if (activePlayer === this.refs.gridControl.state.webPlayer) {
this.refs.gridControl.stepEvent(coords);
this.state.session
.publish(this.state.channel, {
'coords': coords,
'player': activePlayer
});
}
}
/** FOR DEVELOPMENT */
@@ -144,14 +137,12 @@ class MineSeeker extends React.Component {
<div>
{this.createLink()}
</div>
{this.createGrid()}
{/*<GridControl ref="gridControl"*/}
{/*env={this.props.env === 'dev'}*/}
{/*log={this.state.log}/>*/}
<GridControl ref="gridControl"
env={this.props.env === 'dev'}
onClick={this.onClick.bind(this)}/>
</div>
);
}
}
export default MineSeeker;

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

@@ -1,5 +1,4 @@
import React from 'react';
import Sound from 'react-sound';
import GridField from './grid-field';
import UserControl from '../user/user-control';
@@ -9,16 +8,12 @@ class GridControl extends React.Component {
this.state = {
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
@@ -30,8 +25,8 @@ class GridControl extends React.Component {
return 'gridField_' + row + '_' + col;
}
checkMine(field, i, j) {
return typeof field[i] !== 'undefined' && typeof field[i][j] !== 'undefined' && field[i][j] !== 'm';
checkMine(row, col) {
return typeof this.state.grid[row] !== 'undefined' && typeof this.state.grid[row][col] !== 'undefined' && this.state.grid[row][col] !== 'm';
}
getBombRadius(row, col) {
@@ -66,7 +61,7 @@ class GridControl extends React.Component {
}
checkNeighbourItem(row, col) {
if (this.checkMine(this.state.grid, row, col)) {
if (this.checkMine(row, col)) {
var currentField = this.refs[this.refString(row, col)];
currentField.setState({
@@ -175,7 +170,9 @@ class GridControl extends React.Component {
activePlayer = userControl.state.activePlayer ? 'blue' : 'red',
inactivePlayer = userControl.state.activePlayer ? 'red' : 'blue';
/** update last cliked grid field */
/** if the clicked field is NEVER CLICKED */
if (!gridFieldControl.state.active) {
/** 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({
@@ -185,8 +182,6 @@ class GridControl extends React.Component {
}
}
/** if the clicked field is NEVER CLICKED */
if (!gridFieldControl.state.active) {
this.state.lastClicked[activePlayer] = [x, y];
/** if you found mine */
@@ -194,8 +189,6 @@ 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];
}
@@ -206,8 +199,6 @@ class GridControl extends React.Component {
});
} else {
if (!justOnFirstIteration) {
this.playingSound('click');
/** set __ACTIVE__ player in the UserControl !!!! */
userControl.setState({
activePlayer: userControl.state.activePlayer ? 0 : 1
@@ -252,74 +243,68 @@ class GridControl extends React.Component {
}
}
stepEvent(coords, isOpponentStepped) {
stepEvent(coords) {
var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
this.state.foundUserMineCache = 0;
this.state.playBomb = true;
/** Step automatically when not this user stepped */
if (!isOpponentStepped) {
this.state.session
.publish(this.state.channel, {
'coords': coords,
'player': activePlayer
});
}
/** Field selected w/ BOMB */
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.showAppropriateFields(
this.refs[this.refString(radius[i][0], radius[i][1])],
radius[i][0],
radius[i][1]
);
}
/** remove BOMB from activePlayer */
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
);
this.showAppropriateFields(
this.refs[this.refString(coords[0], coords[1])],
coords[0],
coords[1]
);
}
/** Reset mine caches */
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
});
setTimeout(function () {
this.refs.userControl.setState({foundMines: false})
}.bind(this), 500);
}, () => {
this.refs.userControl.setState({foundMines: false});
/** 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});
@@ -329,19 +314,6 @@ 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
@@ -356,33 +328,10 @@ class GridControl extends React.Component {
}
}
/**
* 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() {
/** disable console of soundmanager */
soundManager.setup({
debugMode: this.state.env,
useConsole: this.state.env
});
}
renderGridFields() {
/** If the app.js filled the this.state.grid var, START the grid render */
if (this.state.grid) {
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++) {
grid.push(
@@ -391,18 +340,12 @@ class GridControl extends React.Component {
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])}/>
onClick={this.props.onClick.bind(null, [i, k])}/>
);
}
}
return grid;
}
return "";
}
render() {
return (
<div className="game-wrapper">
<UserControl ref="userControl"
@@ -410,9 +353,10 @@ class GridControl extends React.Component {
red="Eszet Lenke"
bombClear={this.bombClear.bind(this)}/>
<div className="grid">
{this.renderGridFields()}
{/*{this.renderGridFields()}*/}
{grid}
</div>
{this.playingSound(this.state.sound)}
{/*{this.playingSound()}*/}
</div>
);
}

41
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/system/logging.js
View File

@@ -1,41 +0,0 @@
class Logging {
constructor() {
this.state = {
logging: null
};
}
output(data, method) {
if (this.state.logging) {
if (typeof data === 'object') {
console.log('-------');
data.forEach((item) => console[method](item));
console.log('\n');
} else {
console[method](data);
}
}
}
i(data) {
this.output(data, 'info');
}
w(data) {
this.output(data, 'warn');
}
t(data) {
this.output(data, 'table');
}
e(data) {
this.output(data, 'error');
}
l(data) {
this.output(data, 'log');
}
}
export default Logging;

6
src/Mine/SeekerBundle/Rpc/AcmeRpc.php
View File

@@ -54,11 +54,11 @@ class AcmeRpc implements RpcInterface
* @param ConnectionInterface $connection
* @param WampRequest $request
* @param array $params
* @return string Json string for frontend.
* @return string Json string for frontend w/ numbering consideration. (=> a number is not string)
*/
public function connectGame(ConnectionInterface $connection, WampRequest $request, array $params)
{
return json_encode($this->getGrid($params[1]), JSON_NUMERIC_CHECK);
return json_encode($this->getGrid($params), JSON_NUMERIC_CHECK);
}
/**
@@ -127,6 +127,6 @@ class AcmeRpc implements RpcInterface
$this->entityManager->flush();
return $data[1];
return true;
}
}

18
src/Mine/SeekerBundle/Topic/AcmeTopic.php
View File

@@ -17,10 +17,6 @@ class AcmeTopic implements TopicInterface
/** @var EntityManager */
protected $entityManager;
protected $red;
protected $blue;
/**
* AcmeTopic constructor.
*
@@ -47,21 +43,10 @@ class AcmeTopic implements TopicInterface
$user = $this->clientManipulator->getClient($connection);
$userName = is_string($user) ? $user : $user->getUsername();
if ($topic->count() === 1) {
$this->red = $userName;
}
if ($topic->count() === 2) {
$this->blue = $userName;
}
$topic->broadcast([
'userTopicId' => $connection->resourceId,
'channel' => $topic->getId(),
'user' => $userName,
'color' => $userName === $this->red ? 'red' : 'blue',
'red' => $this->red,
'blue' => $this->blue,
'userCnt' => $topic->count()
]);
}
@@ -102,9 +87,6 @@ class AcmeTopic implements TopicInterface
'userTopicId' => $connection->resourceId,
'channel' => $topic->getId(),
'user' => $userName,
'color' => $userName === $this->red ? 'red' : 'blue',
'red' => $this->red,
'blue' => $this->blue,
'userCnt' => $topic->count(),
'data' => $event
]);