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

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

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

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

@@ -1,17 +1,17 @@
import React from 'react'; import React from 'react';
import GridField from './grid-field'; import GridField from './grid-field';
import UserControl from '../user/user-control'; import UserControl from '../user/user-control';
import {Howl, Howler} from 'howler'; import { Howl } from 'howler';
class GridControl extends React.Component { class GridControl extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
let click = new Howl({src: ['/sound/click.mp3']}), let click = new Howl({ src: ['/sound/click.mp3'] }),
bomb = new Howl({src: ['/sound/bomb.mp3']}), bomb = new Howl({ src: ['/sound/bomb.mp3'] }),
mine = new Howl({src: ['/sound/mine.mp3']}), mine = new Howl({ src: ['/sound/mine.mp3'] }),
warning = new Howl({src: ['/sound/warning.mp3']}), warning = new Howl({ src: ['/sound/warning.mp3'] }),
won = new Howl({src: ['/sound/won.mp3']}); won = new Howl({ src: ['/sound/won.mp3'] });
this.state = { this.state = {
env: props.env, env: props.env,
@@ -25,19 +25,19 @@ class GridControl extends React.Component {
foundUserMineCache: 0, foundUserMineCache: 0,
playBomb: false, playBomb: false,
overlay: false, overlay: false,
overlayTitle: "", overlayTitle: '',
overlaySubTitle: "", overlaySubTitle: '',
sound: { sound: {
click: click, click: click,
bomb: bomb, bomb: bomb,
mine: mine, mine: mine,
warning: warning, warning: warning,
won: won won: won,
}, },
lastClicked: { lastClicked: {
red: null, red: null,
blue: null blue: null,
} },
}; };
} }
@@ -46,20 +46,20 @@ class GridControl extends React.Component {
} }
checkMine(row, col) { 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) { 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) { 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 the (5x5) target not fits the grid */
if (!isBombTargetCenter) { if (!isBombTargetCenter) {
col = col < 2 ? 2 : col; col = 2 > col ? 2 : col;
row = row < 2 ? 2 : row; row = 2 > row ? 2 : row;
row = row > this.state.grid.length - 3 ? this.state.grid.length - 3 : 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; 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 + 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 - 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, 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], [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], [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) { getNeighbourRadius(row, col) {
return [ return [
[row - 1, col], [row - 1, col - 1], [row - 1, col + 1], [row, col - 1], [row, col + 1], [row + 1, col], [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({ currentField.setState({
currentImage: this.state.grid[row][col], currentImage: this.state.grid[row][col],
currentObj: 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 { return {
row: row, row: row,
col: col col: col,
}; };
} }
} }
@@ -134,7 +134,7 @@ class GridControl extends React.Component {
for (var i = 0, j = this.state.bombFieldCache.length; i < j; i++) { for (var i = 0, j = this.state.bombFieldCache.length; i < j; i++) {
var cacheItem = this.state.bombFieldCache[i]; var cacheItem = this.state.bombFieldCache[i];
this.refs[this.refString(cacheItem[0], cacheItem[1])] this.refs[this.refString(cacheItem[0], cacheItem[1])]
.setState({bombTargetArea: null}); .setState({ bombTargetArea: null });
} }
this.state.bombFieldCache = []; this.state.bombFieldCache = [];
} }
@@ -148,7 +148,7 @@ class GridControl extends React.Component {
this.state.bombFieldCache.push(bombFields[i]); this.state.bombFieldCache.push(bombFields[i]);
this.refs[this.refString(bombFields[i][0], bombFields[i][1])] this.refs[this.refString(bombFields[i][0], bombFields[i][1])]
.setState({bombTargetArea: bombFieldSymbols[i]}); .setState({ bombTargetArea: bombFieldSymbols[i] });
} }
} }
@@ -157,9 +157,9 @@ class GridControl extends React.Component {
for (let k = 0, l = this.state.grid[i].length; k < l; k++) { for (let k = 0, l = this.state.grid[i].length; k < l; k++) {
let currentField = this.refs[this.refString(i, 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({ 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'; inactivePlayer = userControl.state.activePlayer ? 'red' : 'blue';
if ( if (
userControl.state.bombSelected && idx === (max - 1) || userControl.state.bombSelected && idx === (max - 1)
!idx && !userControl.state.bombSelected && currentObject !== 'm' || !idx && !userControl.state.bombSelected && 'm' !== currentObject
) { ) {
userControl.setState({ 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 !!! */ /** the desc is inversely because the user.active is not changed yet !!! */
userControl.refs[activePlayer].setState({ userControl.refs[activePlayer].setState({
active: false, active: false,
desc: "" desc: '',
}); });
userControl.refs[inactivePlayer].setState({ userControl.refs[inactivePlayer].setState({
active: true, active: true,
desc: activePlayer === this.state.webPlayer desc: activePlayer === this.state.webPlayer
? this.state.desc.buddy ? 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) { showAppropriateFields(currentField, row, col) {
currentField.setState({ currentField.setState({
currentObj: this.state.grid[row][col], currentObj: this.state.grid[row][col],
active: true active: true,
}); });
if (this.checkFieldHasBeenNeverClicked(row, col)) { if (this.checkFieldHasBeenNeverClicked(row, col)) {
this.state.updatedFieldCache.push(this.refString(row, col)); this.state.updatedFieldCache.push(this.refString(row, col));
} }
if (this.state.grid[row][col] === 0) { if (0 === this.state.grid[row][col]) {
var neighbours = this.checkNeighbours(row, col); let neighbours = this.checkNeighbours(row, col);
neighbours neighbours
.filter((i) => { .filter(i => false !== i)
return i !== false; .forEach(element => {
}) let currentField = this.refs[this.refString(element.row, element.col)];
.forEach((element, index, array) => {
var currentField = this.refs[this.refString(element.row, element.col)];
this.showAppropriateFields(currentField, 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)) { if (this.checkFieldHasBeenNeverClicked(row, col)) {
/** update LAST CLICKED grid field */ /** update LAST CLICKED grid field */
if (!justOnFirstIteration) { 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({ this.refs[this.refString(this.state.lastClicked[activePlayer][0], this.state.lastClicked[activePlayer][1])].setState({
lastClickedRed: false, lastClickedRed: false,
lastClickedBlue: false lastClickedBlue: false,
}); });
} }
} }
@@ -255,7 +253,7 @@ class GridControl extends React.Component {
this.state.lastClicked[activePlayer] = [row, col]; this.state.lastClicked[activePlayer] = [row, col];
/** if you found mine */ /** if you found mine */
if (currentObject === 'm') { if ('m' === currentObject) {
this.state.foundUserMineCache++; this.state.foundUserMineCache++;
if (!justOnFirstIteration) { if (!justOnFirstIteration) {
@@ -263,7 +261,7 @@ class GridControl extends React.Component {
this.state.lastClicked[activePlayer] = [row, col]; this.state.lastClicked[activePlayer] = [row, col];
this.state.sound[ this.state.sound[
(userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache) > 20 20 < (userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache)
? 'warning' ? 'warning'
: 'mine' : 'mine'
].play(); ].play();
@@ -271,7 +269,7 @@ class GridControl extends React.Component {
/** set current image in field */ /** set current image in field */
gridFieldControl.setState({ gridFieldControl.setState({
currentImage: gridFieldControl.state.icons.root + gridFieldControl.state.icons.flag[activePlayer] currentImage: gridFieldControl.state.icons.root + gridFieldControl.state.icons.flag[activePlayer],
}); });
} else { } else {
this.state.sound.click.play(); this.state.sound.click.play();
@@ -279,7 +277,7 @@ class GridControl extends React.Component {
/** set current image in field - WHEN it is a number */ /** set current image in field - WHEN it is a number */
if (!isNaN(currentObject)) { if (!isNaN(currentObject)) {
gridFieldControl.setState({ 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 * when it found NOW because the status is not refreshed unless the handleGridField() ends
*/ */
userControl.refs[activePlayer].setState({ 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({ 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 */ /** set-up last clicked */
if (!justOnFirstIteration) { if (!justOnFirstIteration) {
gridFieldControl.setState({ gridFieldControl.setState({
lastClickedRed: activePlayer === 'red', lastClickedRed: 'red' === activePlayer,
lastClickedBlue: activePlayer === 'blue' lastClickedBlue: 'blue' === activePlayer,
}); });
} }
} }
@@ -344,7 +342,7 @@ class GridControl extends React.Component {
/** remove BOMB from activePlayer */ /** remove BOMB from activePlayer */
this.refs.userControl.refs[activePlayer].setState({ this.refs.userControl.refs[activePlayer].setState({
haveBomb: false haveBomb: false,
}); });
} else { } else {
this.show(coords[0], coords[1]); this.show(coords[0], coords[1]);
@@ -354,14 +352,14 @@ class GridControl extends React.Component {
if (this.state.foundUserMineCache) { if (this.state.foundUserMineCache) {
this.refs.userControl.setState({ this.refs.userControl.setState({
mines: this.refs.userControl.state.mines - this.state.foundUserMineCache, mines: this.refs.userControl.state.mines - this.state.foundUserMineCache,
foundMines: true foundMines: true,
}, () => { }, () => {
/** because of CSS animation in .found-mine */ /** because of CSS animation in .found-mine */
setTimeout(() => this.refs.userControl.setState({foundMines: false}), 500); setTimeout(() => this.refs.userControl.setState({ foundMines: false }), 500);
/** add the found mines to the active Player */ /** add the found mines to the active Player */
this.refs.userControl.refs[activePlayer].setState({ 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,
}); });
}); });
} }
@@ -369,7 +367,7 @@ class GridControl extends React.Component {
/** Reset BOMB status */ /** Reset BOMB status */
if (this.refs.userControl.state.bombSelected) { if (this.refs.userControl.state.bombSelected) {
/** reset bomb selected status */ /** reset bomb selected status */
this.refs.userControl.setState({bombSelected: false}); this.refs.userControl.setState({ bombSelected: false });
/** clear cache, reset symbols */ /** clear cache, reset symbols */
this.bombClear(); this.bombClear();
@@ -393,7 +391,7 @@ class GridControl extends React.Component {
/** new cache && field activate */ /** new cache && field activate */
this.bombCreate(coords[0], coords[1]); this.bombCreate(coords[0], coords[1]);
} else { } else {
this.refs.userControl.setState({bombSelected: false}); this.refs.userControl.setState({ bombSelected: false });
} }
} }
} }
@@ -402,12 +400,14 @@ class GridControl extends React.Component {
for (let i = 0, j = this.state.grid.length; i < j; i++) { 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++) { for (let k = 0, l = this.state.grid[i].length; k < l; k++) {
this.state.gridFields.push( this.state.gridFields.push(
<GridField row={i} <GridField
row={i}
col={k} col={k}
ref={this.refString(i, k)} ref={this.refString(i, k)}
key={this.refString(i, k)} key={this.refString(i, k)}
handleHoverOn={this.onHoverGridField.bind(this, [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> <h2>{this.state.overlaySubTitle}</h2>
</div> </div>
</div> </div>
<UserControl ref="userControl" <UserControl
ref="userControl"
resign={this.props.resign} resign={this.props.resign}
webPlayer={this.state.webPlayer} webPlayer={this.state.webPlayer}
bombClear={this.bombClear.bind(this)}/> bombClear={this.bombClear.bind(this)}
/>
<div className="grid-container"> <div className="grid-container">
<div className="grid"> <div className="grid">
<> <>

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

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

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

@@ -8,26 +8,26 @@ class Grid extends React.Component {
row: 16, row: 16,
col: 16, col: 16,
mines: 51, mines: 51,
set: [] set: [],
}; };
this.state.grid = this.numberingGrid( this.state.grid = this.numberingGrid(
this.createGrid( this.createGrid(
this.shuffleSet( this.shuffleSet(
this.createSet( this.createSet(
this.state.set this.state.set,
) ),
) ),
) ),
); );
} }
createSet(obj) { 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( obj.push(
this.state.mines > 0 0 < this.state.mines
? "m" ? 'm'
: "w" : 'w',
); );
this.state.mines--; this.state.mines--;
} }
@@ -36,20 +36,20 @@ class Grid extends React.Component {
} }
shuffleSet(obj) { shuffleSet(obj) {
return obj.sort(function () { return obj.sort(function() {
return Math.round(Math.random()) - .5; return Math.round(Math.random()) - .5;
}); });
} }
createGrid(obj) { createGrid(obj) {
var grid = [[]], let grid = [[]],
row = 0, row = 0,
col = 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]; grid[row][col] = obj[i];
if (col === 15 && row !== 15) { if (15 === col && 15 !== row) {
row++; row++;
col = 0; col = 0;
grid.push([]); grid.push([]);
@@ -62,7 +62,7 @@ class Grid extends React.Component {
} }
checkMine(field, i, j) { 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) { isThereMine(obj, row, col) {
@@ -73,11 +73,11 @@ class Grid extends React.Component {
} }
numberingGrid(obj) { numberingGrid(obj) {
var nbr = 0; let nbr = 0;
for (var i = 0; i < this.state.row; i++) { for (let i = 0; i < this.state.row; i++) {
for (var j = 0; j < this.state.col; j++) { for (let j = 0; j < this.state.col; j++) {
if (obj[i][j] === 'w') { if ('w' === obj[i][j]) {
nbr = 0; nbr = 0;
nbr += this.isThereMine(obj, i - 1, j); 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, activePlayer: false,
mines: 51, mines: 51,
bombSelected: false, bombSelected: false,
foundMines: false foundMines: false,
}; };
} }
youCanSelectBomb(activePlayer, clickedPlayer) { youCanSelectBomb(activePlayer, clickedPlayer) {
return this.refs[activePlayer].state.haveBomb && return this.refs[activePlayer].state.haveBomb
this.refs[activePlayer].state.enabledBomb && && this.refs[activePlayer].state.enabledBomb
this.state.activePlayer === clickedPlayer; && this.state.activePlayer === clickedPlayer;
} }
onClickBombSelector(clickedPlayer) { onClickBombSelector(clickedPlayer) {
@@ -36,38 +36,42 @@ class UserControl extends React.Component {
} }
getResignClass(webPlayer) { getResignClass(webPlayer) {
let activePlayer = this.state.activePlayer === 1 ? 'blue' : 'red'; let activePlayer = 1 === this.state.activePlayer ? 'blue' : 'red';
return "resign" + (webPlayer !== activePlayer ? ' disabled' : ''); return 'resign' + (webPlayer !== activePlayer ? ' disabled' : '');
} }
activeMines() { activeMines() {
return "active-mines" + (this.state.foundMines ? ' found-mine' : ''); return 'active-mines' + (this.state.foundMines ? ' found-mine' : '');
} }
render() { render() {
return ( return (
<div className="users"> <div className="users">
<User ref="blue" <User
ref="blue"
color="blue" color="blue"
webPlayer={this.props.webPlayer} webPlayer={this.props.webPlayer}
active={this.state.activePlayer === 1} active={1 === this.state.activePlayer}
onClickBombSelector={this.onClickBombSelector.bind(this, 1)}/> onClickBombSelector={this.onClickBombSelector.bind(this, 1)}
/>
<div className="active-mines-container"> <div className="active-mines-container">
<i className="fa fa-star"></i> <i className="fa fa-star" />
<div className={this.activeMines()}> <div className={this.activeMines()}>
<div className="active-mines-nbr">{this.state.mines}</div> <div className="active-mines-nbr">{this.state.mines}</div>
<div className="active-mines-shine"></div> <div className="active-mines-shine" />
</div> </div>
<i className="fa fa-star"></i> <i className="fa fa-star" />
</div> </div>
<div className="clear"></div> <div className="clear" />
<User ref="red" <User
ref="red"
color="red" color="red"
webPlayer={this.props.webPlayer} webPlayer={this.props.webPlayer}
active={this.state.activePlayer === 0} active={0 === this.state.activePlayer}
onClickBombSelector={this.onClickBombSelector.bind(this, 0)}/> onClickBombSelector={this.onClickBombSelector.bind(this, 0)}
/>
<button className={this.getResignClass(this.props.webPlayer)} onClick={this.props.resign}> <button className={this.getResignClass(this.props.webPlayer)} onClick={this.props.resign}>
<div className="resign-shine"></div> <div className="resign-shine" />
Resign Resign
</button> </button>
</div> </div>

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

@@ -5,14 +5,14 @@ class User extends React.Component {
super(props); super(props);
this.state = { this.state = {
name: "...", name: '...',
desc: "", desc: '',
active: props.active, active: props.active,
color: props.color === 'blue' ? 1 : 0, color: 'blue' === props.color ? 1 : 0,
mines: 0, mines: 0,
srcRoot: '/images/', srcRoot: '/images/',
haveBomb: true, haveBomb: true,
enabledBomb: true enabledBomb: true,
}; };
} }
@@ -25,10 +25,10 @@ class User extends React.Component {
} }
getBombBuzzClass(webPlayer) { 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 this.state.active && (activePlayer === webPlayer) && this.state.haveBomb && this.state.enabledBomb
? ' buzz' ? ' buzz'
: '' : ''
@@ -55,7 +55,7 @@ class User extends React.Component {
getCursor(state, color) { getCursor(state, color) {
return state return state
? <img src={this.state.srcRoot + 'bg-cursor-' + color + '-outbg.png'} alt="cursor" className="user-cursor"/> ? <img src={this.state.srcRoot + 'bg-cursor-' + color + '-outbg.png'} alt="cursor" className="user-cursor" />
: ''; : '';
} }
@@ -65,22 +65,22 @@ class User extends React.Component {
<div className="user-header"> <div className="user-header">
<div className="user-color">{this.props.color}</div> <div className="user-color">{this.props.color}</div>
{this.getCursor(this.props.active, this.props.color)} {this.getCursor(this.props.active, this.props.color)}
<img src={this.getFigure(this.props.color)} alt="figure"/> <img src={this.getFigure(this.props.color)} alt="figure" />
</div> </div>
<div className="user-name"> {this.state.name} </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-desc"> {this.state.desc} </div>
<div className="user-control"> <div className="user-control">
<img src={this.getSrc(this.props.color)} alt="flag"/> <img src={this.getSrc(this.props.color)} alt="flag" />
<div className="user-control-mines"> <div className="user-control-mines">
{this.state.mines} {this.state.mines}
</div> </div>
<div className={this.getBombBuzzClass(this.props.webPlayer)} onClick={this.props.onClickBombSelector}> <div className={this.getBombBuzzClass(this.props.webPlayer)} onClick={this.props.onClickBombSelector}>
<div className="bomb"> <div className="bomb">
<img src={this.getBomb()} alt="bomb"/> <img src={this.getBomb()} alt="bomb" />
</div> </div>
</div> </div>
<div className="clear"></div> <div className="clear" />
</div> </div>
</div> </div>
); );