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

chg: dev: outsource the Grid generation and interactions to the backend #4

Browse Source
This commit is contained in:
László Lang
2026-04-10 12:23:21 +02:00
parent 76143fca3e
commit fe2de91e91
9 changed files with 586 additions and 554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,4 @@
import React from 'react';
import Grid from './grid/grid';
import GridControl from './grid/grid-control';
class MineSeeker extends React.Component {
@@ -41,54 +40,10 @@ class MineSeeker extends React.Component {
.css('line-height', ($field.width() - 2) + 'px');
}
/**
* STEP
*/
makePointsCalcAndStep(coords) {
let users = this.refs.gridControl.refs.userControl,
activePlayer = users.state.activePlayer ? 'blue' : 'red',
inactivePlayer = users.state.activePlayer ? 'red' : 'blue',
redPoints = 'red' === activePlayer
? users.refs[activePlayer].state.mines
: users.refs[inactivePlayer].state.mines,
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 += 'red' === activePlayer ? mineCache : 0;
bluePoints += 'blue' === activePlayer ? mineCache : 0;
return { red: redPoints, blue: bluePoints };
}
/**
* START
*/
makeGameStart(payload) {
this.refs.gridControl.refs.userControl.setState({ activePlayer: 1 });
this.refs.gridControl.refs.userControl.refs.red.setState({
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: 'blue' === this.refs.gridControl.state.webPlayer
? this.refs.gridControl.state.desc.you
: this.refs.gridControl.state.desc.buddy,
active: true,
});
this.refs.gridControl.setState({ overlay: false });
}
/**
* THE END
*/
makeGameEndIfItEnds(bluePoints, redPoints, resign = false) {
makeGameEndIfItEnds(bluePoints, redPoints, resign = false, leftMines = []) {
let redWins = 25 < redPoints,
blueWins = 25 < bluePoints;
@@ -103,7 +58,7 @@ class MineSeeker extends React.Component {
});
}
this.refs.gridControl.showLeftMines();
this.refs.gridControl.showLeftMines(leftMines);
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: '' });
@@ -196,16 +151,19 @@ class MineSeeker extends React.Component {
});
}
/**
* Opponent's step arrived via Mercure — apply the server-resolved revealed cells.
*/
wTopic(payload) {
if (this.refs.gridControl.state.webPlayer !== payload.data.player) {
if (null === payload.data.resign) {
'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');
'dev' === this.state.env && console.warn(
payload.user + ' stepped to ' + payload.data.coords[0] + ',' + payload.data.coords[1],
);
this.refs.gridControl.refs.userControl.setState({ bombSelected: payload.data.bomb });
let points = this.makePointsCalcAndStep(payload.data.coords);
this.makeGameEndIfItEnds(points.blue, points.red);
this.refs.gridControl.applyStep(payload.data);
this.makeGameEndIfItEnds(payload.data.bluePoints, payload.data.redPoints, false, payload.data.leftMines);
} else {
this.resignProcess(payload.data.resign);
}
@@ -216,13 +174,8 @@ class MineSeeker extends React.Component {
// Mercure / SSE connection
// ------------------------------------------------------------------ //
/**
* Dispatches every incoming SSE message.
* Distinguishes subscription events, game-step events, and disconnect events
* using the same payload shape as the former WAMP broadcast.
*/
handleMercureMessage(payload) {
let isTopicEvent = 'undefined' !== typeof payload.data;
handleMercureMessage(payload) {
let isTopicEvent = 'undefined' !== typeof payload.data;
let isNotUnsubscribe = 'undefined' === typeof payload.msg;
if (isTopicEvent) {
@@ -244,9 +197,9 @@ class MineSeeker extends React.Component {
}
openEventSource() {
const wrapper = document.getElementById('mine-wrapper');
const hubUrl = wrapper.dataset.mercureHubUrl;
const subscriberJwt = wrapper.dataset.mercureSubscriberJwt;
const wrapper = document.getElementById('mine-wrapper');
const hubUrl = wrapper.dataset.mercureHubUrl;
const subscriberJwt = wrapper.dataset.mercureSubscriberJwt;
const url = new URL(hubUrl, window.location.origin);
url.searchParams.append('topic', this.state.channel);
@@ -279,9 +232,16 @@ class MineSeeker extends React.Component {
};
}
wInit(gridServer, gridClient) {
/**
* Initialise the grid control with an empty 16×16 grid.
* For inherited games, previously revealed cells are applied after the grid renders.
*/
wInit(revealedCells = []) {
// 16×16 grid of null — cells are filled in lazily as they are revealed by the server
let emptyGrid = Array.from({ length: 16 }, () => Array(16).fill(null));
this.refs.gridControl.setState({
grid: this.state.gameInherited ? gridServer : gridClient,
grid: emptyGrid,
channel: this.state.channel,
desc: {
buddy: (
@@ -314,9 +274,30 @@ class MineSeeker extends React.Component {
</div>
) : '',
renderGridFields: this.state.gameAssoc,
}, () => {
// After the grid fields are rendered, apply any historically revealed cells
revealedCells.forEach(cell => this.refs.gridControl.applyRevealedCell(cell, cell.player));
});
}
makeGameStart(payload) {
this.refs.gridControl.refs.userControl.setState({ activePlayer: 1 });
this.refs.gridControl.refs.userControl.refs.red.setState({
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: 'blue' === this.refs.gridControl.state.webPlayer
? this.refs.gridControl.state.desc.you
: this.refs.gridControl.state.desc.buddy,
active: true,
});
this.refs.gridControl.setState({ overlay: false });
}
/** POST /api/game/join — register this player, broadcast subscription event via Mercure */
joinGame() {
return fetch('/api/game/join/' + this.state.gameAssoc, {
@@ -325,13 +306,13 @@ class MineSeeker extends React.Component {
}).catch(e => 'dev' === this.state.env && console.error('Join error', e));
}
/** POST /api/game/step — persist a move and fan it out via Mercure */
/** POST /api/game/step — persist a move, fan it out via Mercure, and return revealed cells */
publishStep(dataPack) {
return fetch('/api/game/step/' + this.state.gameAssoc, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(dataPack),
}).catch(e => 'dev' === this.state.env && console.error('Step error', e));
});
}
// ------------------------------------------------------------------ //
@@ -340,16 +321,14 @@ class MineSeeker extends React.Component {
async componentDidMount() {
if (!this.state.connectionLost) {
let gridClient = this.state.gameInherited ? null : new Grid().state.grid;
try {
if (this.state.gameInherited) {
/** Fetch existing grid and player info */
const resp = await fetch('/api/game/connect/' + this.state.gameAssoc);
const b64 = await resp.text();
/** Fetch existing player info and previously revealed cells */
const resp = await fetch('/api/game/connect/' + this.state.gameAssoc);
const b64 = await resp.text();
const serverData = JSON.parse(window.atob(b64));
if ('undefined' === typeof serverData.grid || null === serverData.grid) {
if ('undefined' === typeof serverData.users || null === serverData.users) {
this.refs.gridControl.setState({
overlay: true,
overlayTitle: 'This channel does not exists!',
@@ -361,21 +340,18 @@ class MineSeeker extends React.Component {
this.rpcUsers = serverData.users;
this.openEventSource();
this.wInit(serverData.grid, null);
this.wInit(serverData.revealedCells || []);
} else {
/** Create the game record with this client's grid */
/** Create the game record — the server generates the grid */
await fetch('/api/game/start', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
grid: window.btoa(JSON.stringify(gridClient)),
gameAssoc: this.state.gameAssoc,
}),
body: JSON.stringify({ gameAssoc: this.state.gameAssoc }),
});
this.openEventSource();
this.wInit(null, gridClient);
this.wInit();
}
'dev' === this.state.env && console.info('Connection initialised — joining channel');
@@ -403,29 +379,37 @@ class MineSeeker extends React.Component {
this.setState({ stepCache: cache });
}
onClick(coords) {
async onClick(coords) {
let activePlayer = this.refs.gridControl.refs.userControl.state.activePlayer ? 'blue' : 'red';
if (this.refs.gridControl.checkFieldHasBeenNeverClicked(coords[0], coords[1])) {
if (activePlayer === this.refs.gridControl.state.webPlayer) {
let points = this.makePointsCalcAndStep(coords);
this.makeGameEndIfItEnds(points.blue, points.red);
if (!this.refs.gridControl.checkFieldHasBeenNeverClicked(coords[0], coords[1])) {
return;
}
let dataPack = {
coords: coords,
player: activePlayer,
bomb: this.refs.gridControl.refs.userControl.state.bombSelected,
redPoints: points.red,
bluePoints: points.blue,
resign: null,
redExplodedBomb: 'red' === activePlayer && this.refs.gridControl.refs.userControl.state.bombSelected,
blueExplodedBomb: 'blue' === activePlayer && this.refs.gridControl.refs.userControl.state.bombSelected,
};
if (activePlayer !== this.refs.gridControl.state.webPlayer) {
return;
}
!this.state.connectionLost
? this.publishStep(dataPack)
: this.cachePublish(dataPack);
}
let dataPack = {
coords: coords,
player: activePlayer,
bomb: this.refs.gridControl.refs.userControl.state.bombSelected,
resign: null,
};
if (this.state.connectionLost) {
this.cachePublish(dataPack);
return;
}
try {
const resp = await this.publishStep(dataPack);
const result = await resp.json();
this.refs.gridControl.applyStep(result);
this.makeGameEndIfItEnds(result.bluePoints, result.redPoints, false, result.leftMines);
} catch (e) {
'dev' === this.state.env && console.error('Step error', e);
}
}

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

@@ -20,10 +20,7 @@ class GridControl extends React.Component {
desc: null,
renderGridFields: false,
gridFields: [],
updatedFieldCache: [],
bombFieldCache: [],
foundUserMineCache: 0,
playBomb: false,
overlay: false,
overlayTitle: '',
overlaySubTitle: '',
@@ -45,18 +42,13 @@ class GridControl extends React.Component {
return 'gridField_' + row + '_' + col;
}
checkMine(row, col) {
return 'undefined' !== typeof this.state.grid[row] && 'undefined' !== typeof this.state.grid[row][col] && 'm' !== this.state.grid[row][col];
}
checkFieldHasBeenNeverClicked(row, col) {
return 0 > this.state.updatedFieldCache.indexOf(this.refString(row, col)) && !this.refs[this.refString(row, col)].state.active;
return !this.refs[this.refString(row, col)].state.active;
}
getBombRadius(row, col) {
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 = 2 > col ? 2 : col;
row = 2 > row ? 2 : row;
@@ -82,53 +74,6 @@ class GridControl extends React.Component {
];
}
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],
];
}
checkNeighbourItem(row, col) {
if (this.checkMine(row, col)) {
var currentField = this.refs[this.refString(row, col)];
/**
* It must be cached because the GridField.state not updated until
* all showAppropriateFields() method runned out!!
*/
if (this.checkFieldHasBeenNeverClicked(row, col)) {
this.state.updatedFieldCache.push(this.refString(row, col));
currentField.setState({
currentImage: this.state.grid[row][col],
currentObj: this.state.grid[row][col],
active: true,
});
if (0 === this.state.grid[row][col]) {
return {
row: row,
col: col,
};
}
}
}
return false;
}
checkNeighbours(row, col) {
let anotherFields = [],
neighbours = this.getNeighbourRadius(row, col);
for (let i = 0, j = neighbours.length; i < j; i++) {
anotherFields.push(this.checkNeighbourItem(neighbours[i][0], neighbours[i][1]));
}
return anotherFields;
}
bombClear() {
if (this.state.bombFieldCache.length) {
for (var i = 0, j = this.state.bombFieldCache.length; i < j; i++) {
@@ -152,246 +97,152 @@ class GridControl extends React.Component {
}
}
showLeftMines() {
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++) {
let currentField = this.refs[this.refString(i, k)];
if ('m' === this.state.grid[i][k] && this.checkFieldHasBeenNeverClicked(i, k)) {
currentField.setState({
currentImage: currentField.state.icons.root + currentField.state.icons.left,
});
}
/**
* Show unrevealed mines at the end of the game.
* leftMines comes from the server and contains only cells not yet revealed.
*/
showLeftMines(leftMines = []) {
for (let mine of leftMines) {
let currentField = this.refs[this.refString(mine.row, mine.col)];
if (currentField && !currentField.state.active) {
currentField.setState({
currentImage: currentField.state.icons.root + currentField.state.icons.left,
});
}
}
}
/** set __ACTIVE__ player in the UserControl !!!! */
changePlayer(idx, max, currentObject) {
/** set __ACTIVE__ player in the UserControl */
changePlayer() {
var userControl = this.refs.userControl,
activePlayer = userControl.state.activePlayer ? 'blue' : 'red',
inactivePlayer = userControl.state.activePlayer ? 'red' : 'blue';
if (
userControl.state.bombSelected
&& idx === (max - 1)
|| !idx
&& !userControl.state.bombSelected
&& 'm' !== currentObject
) {
userControl.setState({
activePlayer: userControl.state.activePlayer ? 0 : 1,
});
userControl.setState({ 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: '',
});
userControl.refs[activePlayer].setState({ active: false, desc: '' });
userControl.refs[inactivePlayer].setState({
active: true,
desc: activePlayer === this.state.webPlayer
? this.state.desc.buddy
: this.state.desc.you,
});
}
userControl.refs[inactivePlayer].setState({
/**
* Apply a single revealed cell to the grid UI.
* Called both for live steps and when reconstructing the board for a joining player.
*
* @param {object} cell - { row, col, value } value is 'm' | 0-8
* @param {string} player - 'red' | 'blue'
* @param {boolean} isMainCell - true for the primary clicked cell (sets last-clicked highlight)
*/
applyRevealedCell(cell, player, isMainCell = false) {
let ref = this.refs[this.refString(cell.row, cell.col)];
if (!ref || ref.state.active) {
return;
}
if ('m' === cell.value) {
ref.setState({
currentImage: ref.state.icons.root + ref.state.icons.flag[player],
currentObj: 'm',
active: true,
desc: activePlayer === this.state.webPlayer
? this.state.desc.buddy
: this.state.desc.you,
});
} else {
ref.setState({
currentImage: cell.value,
currentObj: cell.value,
active: true,
});
}
if (isMainCell) {
this.state.lastClicked[player] = [cell.row, cell.col];
ref.setState({
lastClickedRed: 'red' === player,
lastClickedBlue: 'blue' === player,
});
}
}
/**
* Show all fields that needed after click
*
* @param currentField
* @param row
* @param col
* Apply a full step response from the server.
* stepData shape: { coords, player, bomb, revealedCells, minesFound, redPoints, bluePoints, resign, gameOver,
* leftMines }
*/
showAppropriateFields(currentField, row, col) {
currentField.setState({
currentObj: this.state.grid[row][col],
active: true,
applyStep(stepData) {
let player = stepData.player;
let isBomb = stepData.bomb;
let minesFound = stepData.minesFound || 0;
let revealedCells = stepData.revealedCells || [];
// Reset previous last-clicked highlight for this player
let lastClicked = this.state.lastClicked[player];
if (lastClicked) {
let lastRef = this.refs[this.refString(lastClicked[0], lastClicked[1])];
if (lastRef) {
lastRef.setState({ lastClickedRed: false, lastClickedBlue: false });
}
}
// Sound
if (isBomb) {
this.state.sound.bomb.play();
} else if (0 < minesFound) {
let currentMines = this.refs.userControl.refs[player].state.mines;
this.state.sound[20 < (currentMines + minesFound) ? 'warning' : 'mine'].play();
} else {
this.state.sound.click.play();
}
// Apply each revealed cell; first cell gets the last-clicked highlight
revealedCells.forEach((cell, idx) => {
this.applyRevealedCell(cell, player, 0 === idx);
});
if (this.checkFieldHasBeenNeverClicked(row, col)) {
this.state.updatedFieldCache.push(this.refString(row, col));
}
// Update scores
let userControl = this.refs.userControl;
let inactivePlayer = 'red' === player ? 'blue' : 'red';
if (0 === this.state.grid[row][col]) {
let neighbours = this.checkNeighbours(row, col);
neighbours
.filter(i => false !== i)
.forEach(element => {
let currentField = this.refs[this.refString(element.row, element.col)];
this.showAppropriateFields(currentField, element.row, element.col);
if (0 < minesFound) {
userControl.setState({
mines: 51 - stepData.redPoints - stepData.bluePoints,
foundMines: true,
}, () => {
setTimeout(() => userControl.setState({ foundMines: false }), 500);
userControl.refs[player].setState({
mines: 'red' === player ? stepData.redPoints : stepData.bluePoints,
});
}
}
/**
* Player control method
*
* @param currentObject {int|string} Current object from Grid class
* @param row {int}
* @param col {int}
* @param justOnFirstIteration {int} When bomb is being used check the whole explosion area
*/
handleGridField(currentObject, row, col, justOnFirstIteration = 0) {
var userControl = this.refs.userControl,
gridFieldControl = this.refs[this.refString(row, col)],
activePlayer = userControl.state.activePlayer ? 'blue' : 'red',
inactivePlayer = userControl.state.activePlayer ? 'red' : 'blue';
/** if the clicked field is NEVER CLICKED */
if (this.checkFieldHasBeenNeverClicked(row, col)) {
/** update LAST CLICKED grid field */
if (!justOnFirstIteration) {
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,
});
}
}
this.state.lastClicked[activePlayer] = [row, col];
/** if you found mine */
if ('m' === currentObject) {
this.state.foundUserMineCache++;
if (!justOnFirstIteration) {
/** set last clicked field w/ color */
this.state.lastClicked[activePlayer] = [row, col];
this.state.sound[
20 < (userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache)
? 'warning'
: 'mine'
].play();
}
/** set current image in field */
gridFieldControl.setState({
currentImage: gridFieldControl.state.icons.root + gridFieldControl.state.icons.flag[activePlayer],
});
} else {
this.state.sound.click.play();
/** set current image in field - WHEN it is a number */
if (!isNaN(currentObject)) {
gridFieldControl.setState({
currentImage: currentObject,
});
}
}
/**
* set bombs status - we must add one mine (currentObject === 'm' ? 1 : 0) to current mine
* when it found NOW because the status is not refreshed unless the handleGridField() ends
*/
userControl.refs[activePlayer].setState({
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 + ('m' === currentObject ? 1 : 0) >= userControl.refs[inactivePlayer].state.mines,
});
// Bomb-enabled status: a player may use their bomb when their score <= opponent's
userControl.refs.red.setState({ enabledBomb: stepData.redPoints <= stepData.bluePoints });
userControl.refs.blue.setState({ enabledBomb: stepData.bluePoints <= stepData.redPoints });
/** set-up last clicked */
if (!justOnFirstIteration) {
gridFieldControl.setState({
lastClickedRed: 'red' === activePlayer,
lastClickedBlue: 'blue' === activePlayer,
});
}
// Change active player: always after a bomb, or when no mine was found on a normal click
if (isBomb || 0 === minesFound) {
this.changePlayer();
}
// Clean up bomb state
if (isBomb) {
userControl.setState({ bombSelected: false });
userControl.refs[player].setState({ haveBomb: false });
this.bombClear();
}
}
/**
* Show elems w/ conditions
*
* @param row
* @param col
* @param idx
* @param max
*/
show(row, col, idx = 0, max = 0) {
this.handleGridField(this.state.grid[row][col], row, col, idx);
this.showAppropriateFields(this.refs[this.refString(row, col)], row, col);
this.changePlayer(idx, max, this.state.grid[row][col]);
}
/**
* STEP one
*
* @param coords
*/
stepEvent(coords) {
/** if the clicked field is NEVER CLICKED */
if (this.checkFieldHasBeenNeverClicked(coords[0], coords[1])) {
var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
this.state.foundUserMineCache = 0;
this.state.playBomb = true;
/** Show elements */
if (this.refs.userControl.state.bombSelected) {
this.state.sound.bomb.play();
var bombRadius = this.getBombRadius(coords[0], coords[1]);
for (var i = 0, j = bombRadius.length; i < j; i++) {
this.show(bombRadius[i][0], bombRadius[i][1], i, j);
}
/** remove BOMB from activePlayer */
this.refs.userControl.refs[activePlayer].setState({
haveBomb: false,
});
} else {
this.show(coords[0], coords[1]);
}
/** Mine score handling */
if (this.state.foundUserMineCache) {
this.refs.userControl.setState({
mines: this.refs.userControl.state.mines - this.state.foundUserMineCache,
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,
});
});
}
/** Reset BOMB status */
if (this.refs.userControl.state.bombSelected) {
/** reset bomb selected status */
this.refs.userControl.setState({ bombSelected: false });
/** clear cache, reset symbols */
this.bombClear();
}
}
}
/**
* On Hover when you want to drop BOMB
* Target grid field
* @param coords
* On Hover when you want to drop BOMB — show target area overlay
*/
onHoverGridField(coords) {
if (this.refs.userControl.state.bombSelected) {
var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
if (activePlayer === this.state.webPlayer) {
/** clear cache, reset symbols */
this.bombClear();
/** new cache && field activate */
this.bombCreate(coords[0], coords[1]);
} else {
this.refs.userControl.setState({ bombSelected: false });

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

@@ -1,90 +0,0 @@
import React from 'react';
class Grid extends React.Component {
constructor() {
super();
this.state = {
row: 16,
col: 16,
mines: 51,
set: [],
};
this.state.grid = this.numberingGrid(
this.createGrid(
this.shuffleSet(
this.createSet(
this.state.set,
),
),
),
);
}
createSet(obj) {
for (let i = 0, j = this.state.row * this.state.col; i < j; i++) {
obj.push(0 < this.state.mines ? 'm' : 'w');
this.state.mines--;
}
return obj;
}
shuffleSet(obj) {
return obj.sort(function() {
return Math.round(Math.random()) - .5;
});
}
createGrid(obj) {
let grid = [[]],
row = 0,
col = 0;
for (let i = 0, j = obj.length; i < j; i++) {
grid[row][col] = obj[i];
if (15 === col && 15 !== row) {
row++;
col = 0;
grid.push([]);
} else {
col++;
}
}
return grid;
}
isThereMine(obj, row, col) {
return 'm' === obj?.[row]?.[col] ? 1 : 0;
}
numberingGrid(obj) {
let nbr = 0;
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);
nbr += this.isThereMine(obj, i - 1, j - 1);
nbr += this.isThereMine(obj, i - 1, j + 1);
nbr += this.isThereMine(obj, i, j - 1);
nbr += this.isThereMine(obj, i, j + 1);
nbr += this.isThereMine(obj, i + 1, j);
nbr += this.isThereMine(obj, i + 1, j + 1);
nbr += this.isThereMine(obj, i + 1, j - 1);
obj[i][j] = nbr;
}
}
}
return obj;
}
}
export default Grid;