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

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;