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

chg: usr: created the first working solution since 7 yrs #4

Browse Source
This commit is contained in:
László Lang
2026-04-09 15:08:00 +02:00
parent 4cdca43ecc
commit 23547f4237
6 changed files with 1206 additions and 1179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
assets/js/mine-seeker/app.js
View File

@@ -6,26 +6,26 @@ class MineSeeker extends React.Component {
constructor(props) {
super(props);
let gameAssoc = props.gameId !== '' ? props.gameId : this.makeGameAssoc(50);
let channel = "mineseeker/channel/" + gameAssoc;
let gameAssoc = '' !== props.gameId ? props.gameId : this.makeGameAssoc(50);
let channel = 'mineseeker/channel/' + gameAssoc;
this.state = {
env: props.env,
ssl: props.ssl,
gameInherited: props.gameId !== '',
gameInherited: '' !== props.gameId,
gameAssoc: gameAssoc,
channel: channel,
session: null,
createGrid: false,
stepCache: [],
connectionLost: false,
end: false
}
end: false,
};
}
makeGameAssoc(len) {
let text = "";
let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let text = '';
let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < len; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
@@ -54,18 +54,18 @@ class MineSeeker extends React.Component {
let users = this.refs.gridControl.refs.userControl,
activePlayer = users.state.activePlayer ? 'blue' : 'red',
inactivePlayer = users.state.activePlayer ? 'red' : 'blue',
redPoints = activePlayer === 'red'
redPoints = 'red' === activePlayer
? users.refs[activePlayer].state.mines
: users.refs[inactivePlayer].state.mines,
bluePoints = activePlayer === 'blue'
bluePoints = 'blue' === activePlayer
? users.refs[activePlayer].state.mines
: users.refs[inactivePlayer].state.mines;
this.refs.gridControl.stepEvent(coords);
let mineCache = this.refs.gridControl.state.foundUserMineCache;
redPoints += activePlayer === 'red' ? mineCache : 0;
bluePoints += activePlayer === 'blue' ? mineCache : 0;
redPoints += 'red' === activePlayer ? mineCache : 0;
bluePoints += 'blue' === activePlayer ? mineCache : 0;
return { red: redPoints, blue: bluePoints };
}
@@ -81,12 +81,12 @@ class MineSeeker extends React.Component {
/** Set up player names w/ server data */
this.refs.gridControl.refs.userControl.refs.red.setState({
name: payload.users.red !== '' ? payload.users.red : payload.users.redAnon,
name: '' !== payload.users.red ? payload.users.red : payload.users.redAnon,
});
this.refs.gridControl.refs.userControl.refs.blue.setState({
name: payload.users.blue !== '' ? payload.users.blue : payload.users.blueAnon,
desc: this.refs.gridControl.state.webPlayer === 'blue'
name: '' !== payload.users.blue ? payload.users.blue : payload.users.blueAnon,
desc: 'blue' === this.refs.gridControl.state.webPlayer
? this.refs.gridControl.state.desc.you
: this.refs.gridControl.state.desc.buddy,
active: true,
@@ -103,8 +103,8 @@ class MineSeeker extends React.Component {
* @param resign
*/
makeGameEndIfItEnds(bluePoints, redPoints, resign = false) {
let redWins = redPoints > 25,
blueWins = bluePoints > 25;
let redWins = 25 < redPoints,
blueWins = 25 < bluePoints;
if (redWins || blueWins || resign) {
this.refs.gridControl.state.sound.won.play();
@@ -112,16 +112,16 @@ class MineSeeker extends React.Component {
if (false === resign) {
this.refs.gridControl.setState({
overlay: true,
overlayTitle: (redWins ? 'Red' : 'Blue') + " wins the game!",
overlaySubTitle: "Play again!"
overlayTitle: (redWins ? 'Red' : 'Blue') + ' wins the game!',
overlaySubTitle: 'Play again!',
});
}
this.refs.gridControl.showLeftMines();
this.refs.gridControl.refs.userControl.setState({ activePlayer: false });
this.refs.gridControl.refs.userControl.refs.red.setState({desc: ""});
this.refs.gridControl.refs.userControl.refs.blue.setState({desc: ""});
this.refs.gridControl.refs.userControl.refs.red.setState({ desc: '' });
this.refs.gridControl.refs.userControl.refs.blue.setState({ desc: '' });
}
}
@@ -129,11 +129,11 @@ class MineSeeker extends React.Component {
this.refs.gridControl.setState({
overlay: true,
overlayTitle: color === this.refs.gridControl.state.webPlayer
? "You have been give up"
: "Your opponent has been resigned",
? 'You have been give up'
: 'Your opponent has been resigned',
overlaySubTitle: color === this.refs.gridControl.state.webPlayer
? "You LOSE!"
: "You WIN!"
? 'You LOSE!'
: 'You WIN!',
});
this.setState({ end: true });
@@ -144,14 +144,14 @@ class MineSeeker extends React.Component {
clickResign() {
/** PUBLISH */
this.state.session.publish(this.state.channel, {
'resign': this.refs.gridControl.refs.userControl.state.activePlayer ? 'blue' : 'red'
'resign': this.refs.gridControl.refs.userControl.state.activePlayer ? 'blue' : 'red',
});
this.resignProcess(this.refs.gridControl.state.webPlayer);
}
clickResignCancel() {
this.refs.gridControl.setState({
overlay: false
overlay: false,
});
}
@@ -163,11 +163,13 @@ class MineSeeker extends React.Component {
if (this.refs.gridControl.state.webPlayer === activePlayer) {
this.refs.gridControl.setState({
overlay: true,
overlayTitle: "Are u sure u want to resign?!",
overlaySubTitle: <div className="resign">
overlayTitle: 'Are u sure u want to resign?!',
overlaySubTitle: (
<div className="resign">
<a onClick={this.clickResign.bind(this)}>Yes</a>
<a onClick={this.clickResignCancel.bind(this)}>No!</a>
</div>
),
});
}
}
@@ -181,7 +183,7 @@ class MineSeeker extends React.Component {
let display = 'popup';
FB.getLoginStatus(function(response) {
display = response.status === 'connected'
display = 'connected' === response.status
? 'dialog'
: 'popup';
});
@@ -202,52 +204,58 @@ class MineSeeker extends React.Component {
grid: this.state.gameInherited ? gridServer : gridClient,
channel: this.state.channel,
desc: {
buddy: <div>
buddy: (
<div>
Your buddy is <br />
making a <br />
move.
</div>,
you: <div>
</div>
),
you: (
<div>
It is your turn! <br />
Make a move.
</div>
),
},
overlay: true,
overlayTitle: "We are waiting for your opponent...",
overlayTitle: 'We are waiting for your opponent...',
overlaySubTitle: this.state.gameAssoc
?
? (
<div>
<h3>Share this unique link w/ your opponent</h3>
<div className="clippy">
<input id="foo"
defaultValue={window.location.href + '/' + this.state.gameAssoc}/>
<input
id="foo"
defaultValue={window.location.href + '/' + this.state.gameAssoc}
/>
</div>
{this.state.env !== 'dev' &&
<a onClick={this.clickFBShare.bind(this)}>Share in Facebook message</a>
{'dev' !== this.state.env
&& <a onClick={this.clickFBShare.bind(this)}>Share in Facebook message</a>
}
{this.state.env === 'dev' &&
<a href={"/play/" + this.state.gameAssoc} target="_blank">Play w/ me!</a>
{'dev' === this.state.env
&& <a href={'/play/' + this.state.gameAssoc} target="_blank">Play w/ me!</a>
}
</div>
: '',
renderGridFields: this.state.gameAssoc
) : '',
renderGridFields: this.state.gameAssoc,
});
}
wSubscribe(payload, rpcUsers = null) {
this.state.env === 'dev' && console.info(
(typeof payload.user !== 'undefined' ? payload.user : 'user') + " has been subscribed to the channel!"
'dev' === this.state.env && console.info(
('undefined' !== typeof payload.user ? payload.user : 'user') + ' has been subscribed to the channel!',
);
let firstUser = !rpcUsers;
this.refs.gridControl.state.webPlayer === null && this.refs.gridControl.setState({
webPlayer: payload.user === payload.users.blue ||
(
firstUser && payload.users.blueAnon !== '' ||
!firstUser && (rpcUsers.blueAnon === '' && rpcUsers.blue === '')
null === this.refs.gridControl.state.webPlayer && this.refs.gridControl.setState({
webPlayer: payload.user === payload.users.blue
|| (
firstUser && '' !== payload.users.blueAnon
|| !firstUser && ('' === rpcUsers.blueAnon && '' === rpcUsers.blue)
)
? 'blue' : 'red'
? 'blue' : 'red',
});
/** rwd */
@@ -255,10 +263,10 @@ class MineSeeker extends React.Component {
/** every user has been came */
if (
payload.userCnt === 2 &&
(
!this.state.connectionLost ||
this.state.connectionLost && false === this.refs.gridControl.refs.userControl.state.activePlayer && !this.state.end
2 === payload.userCnt
&& (
!this.state.connectionLost
|| this.state.connectionLost && false === this.refs.gridControl.refs.userControl.state.activePlayer && !this.state.end
)
) {
this.makeGameStart(payload);
@@ -266,12 +274,12 @@ class MineSeeker extends React.Component {
}
wUnsubscribe(payload) {
this.state.env === 'dev' && console.info(payload.msg);
'dev' === this.state.env && console.info(payload.msg);
this.refs.gridControl.setState({
overlay: true,
overlayTitle: "The connection has been lost w/ your friend...",
overlaySubTitle: "Please, restart the game!"
overlayTitle: 'The connection has been lost w/ your friend...',
overlaySubTitle: 'Please, restart the game!',
});
}
@@ -279,8 +287,8 @@ class MineSeeker extends React.Component {
/** Auto-Step if this player is not the current user */
if (this.refs.gridControl.state.webPlayer !== payload.data.player) {
if (null === payload.data.resign) {
this.state.env === 'dev' && console.warn(payload.user + " has been stepped to coords: " + payload.data.coords[0] + ', ' + payload.data.coords[1]);
this.state.env === 'dev' && console.warn('Opponent stepped: Auto-Step process');
'dev' === this.state.env && console.warn(payload.user + ' has been stepped to coords: ' + payload.data.coords[0] + ', ' + payload.data.coords[1]);
'dev' === this.state.env && console.warn('Opponent stepped: Auto-Step process');
this.refs.gridControl.refs.userControl.setState({ bombSelected: payload.data.bomb });
@@ -301,9 +309,9 @@ class MineSeeker extends React.Component {
subscribe(rpcUsers = null) {
this.state.session.subscribe(
this.state.channel,
(uri, payload, log) => {
let isTopicEvent = typeof payload.data !== 'undefined',
isNotUnsubscribe = typeof payload.msg === 'undefined';
(uri, payload) => {
let isTopicEvent = 'undefined' !== typeof payload.data,
isNotUnsubscribe = 'undefined' === typeof payload.msg;
/** CONNECTION */
if (isTopicEvent) {
@@ -317,12 +325,12 @@ class MineSeeker extends React.Component {
}
/** RECONNECTION */
if (payload.userCnt === 2 && this.state.connectionLost) {
this.state.env === 'dev' && console.info('Reconnection process');
if (2 === payload.userCnt && this.state.connectionLost) {
'dev' === this.state.env && console.info('Reconnection process');
/** PUBLISH */
let cache = this.state.stepCache;
cache.forEach((item) => this.state.session.publish(this.state.channel, item));
cache.forEach(item => this.state.session.publish(this.state.channel, item));
this.setState({ connectionLost: false, stepCache: [] });
}
});
@@ -331,15 +339,15 @@ class MineSeeker extends React.Component {
connectWithWebsocket() {
/** Create Websocket w/ Bahnhof.js */
let websocket = WS.connect(
(this.state.ssl === 'true' ? "wss" : "ws") + "://" + window.location.hostname + "/ws/"
('true' === this.state.ssl ? 'wss' : 'ws') + '://' + window.location.hostname + '/ws/',
);
/**
* Connect
* Session is an Autobahn JS WAMP session.
*/
websocket.on("socket/connect", (session) => {
this.state.env === 'dev' && console.info("Successfully connected to the Server!");
websocket.on('socket/connect', session => {
'dev' === this.state.env && console.info('Successfully connected to the Server!');
if (!this.state.connectionLost) {
let gridClient = this.state.gameInherited || new Grid().state.grid;
@@ -350,32 +358,32 @@ class MineSeeker extends React.Component {
*/
session
.call(
this.state.gameInherited ? "mineseeker-rpc/connectGame" : "mineseeker-rpc/startGame",
this.state.gameInherited ? this.state.gameAssoc : [window.btoa(JSON.stringify(gridClient)), this.state.gameAssoc]
this.state.gameInherited ? 'mineseeker-rpc/connectGame' : 'mineseeker-rpc/startGame',
this.state.gameInherited ? this.state.gameAssoc : [window.btoa(JSON.stringify(gridClient)), this.state.gameAssoc],
)
.then(
(data) => {
this.state.env === 'dev' && console.info('RPC has been called');
data => {
'dev' === this.state.env && console.info('RPC has been called');
let serverData = data[0] !== true
let serverData = true !== data[0]
? JSON.parse(window.atob(data))
: data;
/** Check the grid if the user is inherited @see #30 */
if ((this.state.gameInherited && typeof serverData.grid !== 'undefined') || !this.state.gameInherited) {
if ((this.state.gameInherited && 'undefined' !== typeof serverData.grid) || !this.state.gameInherited) {
this.wInit(session, serverData.grid, gridClient);
this.subscribe(this.state.gameInherited && serverData.users);
} else {
this.refs.gridControl.setState({
overlay: true,
overlayTitle: "This channel does not exists!",
overlaySubTitle: <a href={"/play"} target="_self">Restart game!</a>
overlayTitle: 'This channel does not exists!',
overlaySubTitle: <a href="/play" target="_self">Restart game!</a>,
});
console.error("This channel does not exists!");
console.error('This channel does not exists!');
}
},
(error, desc) => this.state.env === 'dev' && console.error(["RPC Error", error, desc])
(error, desc) => 'dev' === this.state.env && console.error(['RPC Error', error, desc]),
);
} else {
this.setState({ session: session });
@@ -387,11 +395,11 @@ class MineSeeker extends React.Component {
* DisConnect
* Error provides us with some insight into the disconnection: error.reason and error.code
*/
websocket.on("socket/disconnect", (error) => {
this.state.env === 'dev' && console.error("Disconnected for " + error.reason + " with code " + error.code);
websocket.on('socket/disconnect', error => {
'dev' === this.state.env && console.error('Disconnected for ' + error.reason + ' with code ' + error.code);
error.code === 6 && this.setState({connectionLost: true});
error.code === 3 && setTimeout(this.componentDidMount.bind(this), 500);
6 === error.code && this.setState({ connectionLost: true });
3 === error.code && setTimeout(this.componentDidMount.bind(this), 500);
});
}
@@ -431,8 +439,8 @@ class MineSeeker extends React.Component {
'redPoints': points.red,
'bluePoints': points.blue,
'resign': null,
'redExplodedBomb': activePlayer === 'red' && this.refs.gridControl.refs.userControl.state.bombSelected,
'blueExplodedBomb': activePlayer === 'blue' && this.refs.gridControl.refs.userControl.state.bombSelected
'redExplodedBomb': 'red' === activePlayer && this.refs.gridControl.refs.userControl.state.bombSelected,
'blueExplodedBomb': 'blue' === activePlayer && this.refs.gridControl.refs.userControl.state.bombSelected,
};
/** PUBLISH */
@@ -445,10 +453,12 @@ class MineSeeker extends React.Component {
render() {
return (
<GridControl ref="gridControl"
env={this.props.env === 'dev'}
<GridControl
ref="gridControl"
env={'dev' === this.props.env}
resign={this.resign.bind(this)}
onClick={this.onClick.bind(this)}/>
onClick={this.onClick.bind(this)}
/>
);
}
}

100
assets/js/mine-seeker/grid/grid-control.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
import GridField from './grid-field';
import UserControl from '../user/user-control';
import {Howl, Howler} from 'howler';
import { Howl } from 'howler';
class GridControl extends React.Component {
constructor(props) {
@@ -25,19 +25,19 @@ class GridControl extends React.Component {
foundUserMineCache: 0,
playBomb: false,
overlay: false,
overlayTitle: "",
overlaySubTitle: "",
overlayTitle: '',
overlaySubTitle: '',
sound: {
click: click,
bomb: bomb,
mine: mine,
warning: warning,
won: won
won: won,
},
lastClicked: {
red: null,
blue: null
}
blue: null,
},
};
}
@@ -46,20 +46,20 @@ class GridControl extends React.Component {
}
checkMine(row, col) {
return typeof this.state.grid[row] !== 'undefined' && typeof this.state.grid[row][col] !== 'undefined' && this.state.grid[row][col] !== 'm';
return 'undefined' !== typeof this.state.grid[row] && 'undefined' !== typeof this.state.grid[row][col] && 'm' !== this.state.grid[row][col];
}
checkFieldHasBeenNeverClicked(row, col) {
return this.state.updatedFieldCache.indexOf(this.refString(row, col)) < 0 && !this.refs[this.refString(row, col)].state.active;
return 0 > this.state.updatedFieldCache.indexOf(this.refString(row, col)) && !this.refs[this.refString(row, col)].state.active;
}
getBombRadius(row, col) {
let isBombTargetCenter = row > 1 && row < this.state.grid.length - 2 && col > 1 && col < this.state.grid[row].length - 2;
let isBombTargetCenter = 1 < row && row < this.state.grid.length - 2 && 1 < col && col < this.state.grid[row].length - 2;
/** if the (5x5) target not fits the grid */
if (!isBombTargetCenter) {
col = col < 2 ? 2 : col;
row = row < 2 ? 2 : row;
col = 2 > col ? 2 : col;
row = 2 > row ? 2 : row;
row = row > this.state.grid.length - 3 ? this.state.grid.length - 3 : row;
col = col > this.state.grid[0].length - 3 ? this.state.grid[0].length - 3 : col;
}
@@ -69,7 +69,7 @@ class GridControl extends React.Component {
[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]
[row + 1, col + 1], [row + 1, col + 2], [row + 2, col - 1], [row + 2, col + 1],
];
}
@@ -78,14 +78,14 @@ class GridControl extends React.Component {
[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]
[null, null], [null, null],
];
}
getNeighbourRadius(row, col) {
return [
[row - 1, col], [row - 1, col - 1], [row - 1, col + 1], [row, col - 1], [row, col + 1], [row + 1, col],
[row + 1, col + 1], [row + 1, col - 1]
[row + 1, col + 1], [row + 1, col - 1],
];
}
@@ -103,13 +103,13 @@ class GridControl extends React.Component {
currentField.setState({
currentImage: this.state.grid[row][col],
currentObj: this.state.grid[row][col],
active: true
active: true,
});
if (this.state.grid[row][col] === 0) {
if (0 === this.state.grid[row][col]) {
return {
row: row,
col: col
col: col,
};
}
}
@@ -157,9 +157,9 @@ class GridControl extends React.Component {
for (let k = 0, l = this.state.grid[i].length; k < l; k++) {
let currentField = this.refs[this.refString(i, k)];
if (this.state.grid[i][k] === 'm' && this.checkFieldHasBeenNeverClicked(i, k)) {
if ('m' === this.state.grid[i][k] && this.checkFieldHasBeenNeverClicked(i, k)) {
currentField.setState({
currentImage: currentField.state.icons.root + currentField.state.icons.left
currentImage: currentField.state.icons.root + currentField.state.icons.left,
});
}
}
@@ -173,24 +173,24 @@ class GridControl extends React.Component {
inactivePlayer = userControl.state.activePlayer ? 'red' : 'blue';
if (
userControl.state.bombSelected && idx === (max - 1) ||
!idx && !userControl.state.bombSelected && currentObject !== 'm'
userControl.state.bombSelected && idx === (max - 1)
|| !idx && !userControl.state.bombSelected && 'm' !== currentObject
) {
userControl.setState({
activePlayer: userControl.state.activePlayer ? 0 : 1
activePlayer: userControl.state.activePlayer ? 0 : 1,
});
/** the desc is inversely because the user.active is not changed yet !!! */
userControl.refs[activePlayer].setState({
active: false,
desc: ""
desc: '',
});
userControl.refs[inactivePlayer].setState({
active: true,
desc: activePlayer === this.state.webPlayer
? this.state.desc.buddy
: this.state.desc.you
: this.state.desc.you,
});
}
}
@@ -205,22 +205,20 @@ class GridControl extends React.Component {
showAppropriateFields(currentField, row, col) {
currentField.setState({
currentObj: this.state.grid[row][col],
active: true
active: true,
});
if (this.checkFieldHasBeenNeverClicked(row, col)) {
this.state.updatedFieldCache.push(this.refString(row, col));
}
if (this.state.grid[row][col] === 0) {
var neighbours = this.checkNeighbours(row, col);
if (0 === this.state.grid[row][col]) {
let neighbours = this.checkNeighbours(row, col);
neighbours
.filter((i) => {
return i !== false;
})
.forEach((element, index, array) => {
var currentField = this.refs[this.refString(element.row, element.col)];
.filter(i => false !== i)
.forEach(element => {
let currentField = this.refs[this.refString(element.row, element.col)];
this.showAppropriateFields(currentField, element.row, element.col);
});
}
@@ -244,10 +242,10 @@ class GridControl extends React.Component {
if (this.checkFieldHasBeenNeverClicked(row, col)) {
/** update LAST CLICKED grid field */
if (!justOnFirstIteration) {
if (this.state.lastClicked[activePlayer] !== null) {
if (null !== this.state.lastClicked[activePlayer]) {
this.refs[this.refString(this.state.lastClicked[activePlayer][0], this.state.lastClicked[activePlayer][1])].setState({
lastClickedRed: false,
lastClickedBlue: false
lastClickedBlue: false,
});
}
}
@@ -255,7 +253,7 @@ class GridControl extends React.Component {
this.state.lastClicked[activePlayer] = [row, col];
/** if you found mine */
if (currentObject === 'm') {
if ('m' === currentObject) {
this.state.foundUserMineCache++;
if (!justOnFirstIteration) {
@@ -263,7 +261,7 @@ class GridControl extends React.Component {
this.state.lastClicked[activePlayer] = [row, col];
this.state.sound[
(userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache) > 20
20 < (userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache)
? 'warning'
: 'mine'
].play();
@@ -271,7 +269,7 @@ class GridControl extends React.Component {
/** set current image in field */
gridFieldControl.setState({
currentImage: gridFieldControl.state.icons.root + gridFieldControl.state.icons.flag[activePlayer]
currentImage: gridFieldControl.state.icons.root + gridFieldControl.state.icons.flag[activePlayer],
});
} else {
this.state.sound.click.play();
@@ -279,7 +277,7 @@ class GridControl extends React.Component {
/** set current image in field - WHEN it is a number */
if (!isNaN(currentObject)) {
gridFieldControl.setState({
currentImage: currentObject
currentImage: currentObject,
});
}
}
@@ -289,18 +287,18 @@ class GridControl extends React.Component {
* 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
enabledBomb: userControl.refs[activePlayer].state.mines + ('m' === currentObject ? 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
enabledBomb: userControl.refs[activePlayer].state.mines + ('m' === currentObject ? 1 : 0) >= userControl.refs[inactivePlayer].state.mines,
});
/** set-up last clicked */
if (!justOnFirstIteration) {
gridFieldControl.setState({
lastClickedRed: activePlayer === 'red',
lastClickedBlue: activePlayer === 'blue'
lastClickedRed: 'red' === activePlayer,
lastClickedBlue: 'blue' === activePlayer,
});
}
}
@@ -344,7 +342,7 @@ class GridControl extends React.Component {
/** remove BOMB from activePlayer */
this.refs.userControl.refs[activePlayer].setState({
haveBomb: false
haveBomb: false,
});
} else {
this.show(coords[0], coords[1]);
@@ -354,14 +352,14 @@ class GridControl extends React.Component {
if (this.state.foundUserMineCache) {
this.refs.userControl.setState({
mines: this.refs.userControl.state.mines - this.state.foundUserMineCache,
foundMines: true
foundMines: true,
}, () => {
/** because of CSS animation in .found-mine */
setTimeout(() => this.refs.userControl.setState({ foundMines: false }), 500);
/** 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
mines: this.refs.userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache,
});
});
}
@@ -402,12 +400,14 @@ class GridControl extends React.Component {
for (let i = 0, j = this.state.grid.length; i < j; i++) {
for (let k = 0, l = this.state.grid[i].length; k < l; k++) {
this.state.gridFields.push(
<GridField row={i}
<GridField
row={i}
col={k}
ref={this.refString(i, k)}
key={this.refString(i, k)}
handleHoverOn={this.onHoverGridField.bind(this, [i, k])}
onClick={this.props.onClick.bind(null, [i, k])}/>
onClick={this.props.onClick.bind(null, [i, k])}
/>,
);
}
}
@@ -426,10 +426,12 @@ class GridControl extends React.Component {
<h2>{this.state.overlaySubTitle}</h2>
</div>
</div>
<UserControl ref="userControl"
<UserControl
ref="userControl"
resign={this.props.resign}
webPlayer={this.state.webPlayer}
bombClear={this.bombClear.bind(this)}/>
bombClear={this.bombClear.bind(this)}
/>
<div className="grid-container">
<div className="grid">
<>

63
assets/js/mine-seeker/grid/grid-field.js
View File

@@ -16,20 +16,20 @@ class GridField extends React.Component {
water: {
1: 'bg-wave-1-outbg.png',
2: 'bg-wave-1-outbg.png',
3: 'bg-wave-2-outbg.png'
3: 'bg-wave-2-outbg.png',
},
flag: {
red: 'bg-flag-red-outbg.png',
blue: 'bg-flag-blue-outbg.png'
blue: 'bg-flag-blue-outbg.png',
},
target: {
lastBlue: 'bg-last-blue-outbg.png',
lastRed: 'bg-last-red-outbg.png',
crosshair: 'bg-target-outbg.png',
crosshairBomb: 'bg-target-bomb-outbg.png'
crosshairBomb: 'bg-target-bomb-outbg.png',
},
left: 'bg-left-mine-outbg.png',
},
left: 'bg-left-mine-outbg.png'
}
};
}
@@ -37,25 +37,25 @@ class GridField extends React.Component {
var wave = Math.floor(Math.random() * 3) + 1;
this.setState({
currentImage: this.state.icons.root + this.state.icons.water[wave]
currentImage: this.state.icons.root + this.state.icons.water[wave],
});
}
classNameWhenActive() {
return 'field'
+ (this.state.active === true ? ' active' : '')
+ (this.state.active === true && this.state.currentObj === 'm' ? ' mine' : '')
+ (true === this.state.active ? ' active' : '')
+ (true === this.state.active && 'm' === this.state.currentObj ? ' mine' : '')
+ ' color-' + this.state.currentObj;
}
currentImage() {
return isNaN(this.state.currentImage)
?
? (
<div className="flag-mine">
<img src={this.state.currentImage}/>
<div className="flag-mine-base"></div>
<img src={this.state.currentImage} alt="current image" />
<div className="flag-mine-base" />
</div>
: this.state.currentImage ? <div className="flag-number">{this.state.currentImage}</div> : '';
) : this.state.currentImage ? <div className="flag-number">{this.state.currentImage}</div> : '';
}
lastClickedClass() {
@@ -66,21 +66,24 @@ class GridField extends React.Component {
lastClickedSrc() {
return this.state.lastClickedRed
? "/images/bg-last-red-outbg.png"
: "/images/bg-last-blue-outbg.png";
? '/images/bg-last-red-outbg.png'
: '/images/bg-last-blue-outbg.png';
}
currentLastClicked() {
return this.state.lastClickedRed || this.state.lastClickedBlue
? <img className={this.lastClickedClass()}
? (
<img
className={this.lastClickedClass()}
src={this.lastClickedSrc()}
alt="blue last"/>
: '';
alt="blue last"
/>
) : '';
}
createBombTarget() {
if (this.state.bombTargetArea !== null) {
var vert = '', hor = '';
if (null !== this.state.bombTargetArea) {
let vert, hor = '';
switch (this.state.bombTargetArea[0]) {
case 0:
@@ -112,24 +115,32 @@ class GridField extends React.Component {
break;
}
var src = vert === null
var src = null === vert
? '/images/bg-bomb-empty-outbg.png'
: '/images/bg-bomb-' + hor + '-' + vert + '-outbg.png';
return <img className="field-bomb-target"
return (
<img
className="field-bomb-target"
src={src}
alt="bomb target"/>
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"
onMouseEnter={this.props.handleHoverOn}
>
<img
className="field-target"
src="/images/bg-target-outbg.png"
alt="target"/>
alt="target"
/>
{this.createBombTarget()}
{this.currentLastClicked()}
<div className={this.classNameWhenActive()}>

34
assets/js/mine-seeker/grid/grid.js
View File

@@ -8,26 +8,26 @@ class Grid extends React.Component {
row: 16,
col: 16,
mines: 51,
set: []
set: [],
};
this.state.grid = this.numberingGrid(
this.createGrid(
this.shuffleSet(
this.createSet(
this.state.set
)
)
)
this.state.set,
),
),
),
);
}
createSet(obj) {
for (var i = 0, j = this.state.row * this.state.col; i < j; i++) {
for (let i = 0, j = this.state.row * this.state.col; i < j; i++) {
obj.push(
this.state.mines > 0
? "m"
: "w"
0 < this.state.mines
? 'm'
: 'w',
);
this.state.mines--;
}
@@ -42,14 +42,14 @@ class Grid extends React.Component {
}
createGrid(obj) {
var grid = [[]],
let grid = [[]],
row = 0,
col = 0;
for (var i = 0, j = obj.length; i < j; i++) {
for (let i = 0, j = obj.length; i < j; i++) {
grid[row][col] = obj[i];
if (col === 15 && row !== 15) {
if (15 === col && 15 !== row) {
row++;
col = 0;
grid.push([]);
@@ -62,7 +62,7 @@ class Grid extends React.Component {
}
checkMine(field, i, j) {
return typeof field[i] !== 'undefined' && typeof field[i][j] !== 'undefined' && field[i][j] === 'm';
return 'undefined' !== typeof field[i] && 'undefined' !== typeof field[i][j] && 'm' === field[i][j];
}
isThereMine(obj, row, col) {
@@ -73,11 +73,11 @@ class Grid extends React.Component {
}
numberingGrid(obj) {
var nbr = 0;
let nbr = 0;
for (var i = 0; i < this.state.row; i++) {
for (var j = 0; j < this.state.col; j++) {
if (obj[i][j] === 'w') {
for (let i = 0; i < this.state.row; i++) {
for (let j = 0; j < this.state.col; j++) {
if ('w' === obj[i][j]) {
nbr = 0;
nbr += this.isThereMine(obj, i - 1, j);

40
assets/js/mine-seeker/user/user-control.js
View File

@@ -13,14 +13,14 @@ class UserControl extends React.Component {
activePlayer: false,
mines: 51,
bombSelected: false,
foundMines: false
foundMines: false,
};
}
youCanSelectBomb(activePlayer, clickedPlayer) {
return this.refs[activePlayer].state.haveBomb &&
this.refs[activePlayer].state.enabledBomb &&
this.state.activePlayer === clickedPlayer;
return this.refs[activePlayer].state.haveBomb
&& this.refs[activePlayer].state.enabledBomb
&& this.state.activePlayer === clickedPlayer;
}
onClickBombSelector(clickedPlayer) {
@@ -36,38 +36,42 @@ class UserControl extends React.Component {
}
getResignClass(webPlayer) {
let activePlayer = this.state.activePlayer === 1 ? 'blue' : 'red';
return "resign" + (webPlayer !== activePlayer ? ' disabled' : '');
let activePlayer = 1 === this.state.activePlayer ? 'blue' : 'red';
return 'resign' + (webPlayer !== activePlayer ? ' disabled' : '');
}
activeMines() {
return "active-mines" + (this.state.foundMines ? ' found-mine' : '');
return 'active-mines' + (this.state.foundMines ? ' found-mine' : '');
}
render() {
return (
<div className="users">
<User ref="blue"
<User
ref="blue"
color="blue"
webPlayer={this.props.webPlayer}
active={this.state.activePlayer === 1}
onClickBombSelector={this.onClickBombSelector.bind(this, 1)}/>
active={1 === this.state.activePlayer}
onClickBombSelector={this.onClickBombSelector.bind(this, 1)}
/>
<div className="active-mines-container">
<i className="fa fa-star"></i>
<i className="fa fa-star" />
<div className={this.activeMines()}>
<div className="active-mines-nbr">{this.state.mines}</div>
<div className="active-mines-shine"></div>
<div className="active-mines-shine" />
</div>
<i className="fa fa-star"></i>
<i className="fa fa-star" />
</div>
<div className="clear"></div>
<User ref="red"
<div className="clear" />
<User
ref="red"
color="red"
webPlayer={this.props.webPlayer}
active={this.state.activePlayer === 0}
onClickBombSelector={this.onClickBombSelector.bind(this, 0)}/>
active={0 === this.state.activePlayer}
onClickBombSelector={this.onClickBombSelector.bind(this, 0)}
/>
<button className={this.getResignClass(this.props.webPlayer)} onClick={this.props.resign}>
<div className="resign-shine"></div>
<div className="resign-shine" />
Resign
</button>
</div>

18
assets/js/mine-seeker/user/user.js
View File

@@ -5,14 +5,14 @@ class User extends React.Component {
super(props);
this.state = {
name: "...",
desc: "",
name: '...',
desc: '',
active: props.active,
color: props.color === 'blue' ? 1 : 0,
color: 'blue' === props.color ? 1 : 0,
mines: 0,
srcRoot: '/images/',
haveBomb: true,
enabledBomb: true
enabledBomb: true,
};
}
@@ -25,10 +25,10 @@ class User extends React.Component {
}
getBombBuzzClass(webPlayer) {
let activePlayer = this.state.color === 1 ? 'blue' : 'red';
let activePlayer = 1 === this.state.color ? 'blue' : 'red';
return "bomb-container" +
(
return 'bomb-container'
+ (
this.state.active && (activePlayer === webPlayer) && this.state.haveBomb && this.state.enabledBomb
? ' buzz'
: ''
@@ -68,7 +68,7 @@ class User extends React.Component {
<img src={this.getFigure(this.props.color)} alt="figure" />
</div>
<div className="user-name"> {this.state.name} </div>
<div className="user-caret"><i className="fa fa-caret-down"></i></div>
<div className="user-caret"><i className="fa fa-caret-down" /></div>
<div className="user-desc"> {this.state.desc} </div>
<div className="user-control">
<img src={this.getSrc(this.props.color)} alt="flag" />
@@ -80,7 +80,7 @@ class User extends React.Component {
<img src={this.getBomb()} alt="bomb" />
</div>
</div>
<div className="clear"></div>
<div className="clear" />
</div>
</div>
);