Skip to content

Commit fd0fb48

Browse files
author
Roman Babaev
committed
Flagging mode
1 parent 999ef79 commit fd0fb48

File tree

6 files changed

+42
-18
lines changed

6 files changed

+42
-18
lines changed

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
work correctly both with client-side routing and a non-root public URL.
2323
Learn how to configure a non-root public URL by running `npm run build`.
2424
-->
25-
<title>React App</title>
25+
<title>Minesweeper</title>
2626
</head>
2727

2828
<body>

‎src/App/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,19 @@ export default class App extends React.Component {
2121
newGame = (arena = [10, 10], mines = 25) => this.game.configure(arena, mines);
2222

2323
render() {
24-
const { gameState, minesCountTotal, arena, flagged, timerValue } = this.game.getStats();
24+
const { flaggingMode, gameState, minesCountTotal, arena, flagged, timerValue } = this.game.getStats();
2525
const { showOptions } = this.state;
2626

2727
return (
2828
<div className="App">
2929
<Hat
30+
flaggingMode={flaggingMode}
3031
gameState={gameState}
3132
timerValue={timerValue}
3233
minesLeftCount={minesCountTotal - flagged}
3334
onResetClick={this.game.reset}
3435
onOptionsClick={this.toggleOptions}
36+
onFlaggingSwitch={this.game.toggleFlaggingMode}
3537
/>
3638
<Arena
3739
gameState={gameState}

‎src/ArenaCell/index.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,16 @@ export const ArenaCell = ({
1414
}) => {
1515
const opened = cell.opened || (gameState === "lost" && ((cell.mined && !cell.flagged) || (!cell.mined && cell.flagged)));
1616

17+
const content = opened
18+
? cell.mined
19+
? '🦠'
20+
: cell.flagged && gameState === "lost"
21+
? "❌"
22+
: cell.neighborMines
23+
: cell.flagged || gameState === "won"
24+
? "🚩"
25+
: null;
26+
1727
return (
1828
<div
1929
className={b({ opened: opened, closed: !opened })}
@@ -26,13 +36,7 @@ export const ArenaCell = ({
2636
onCellFlag(i);
2737
}}
2838
>
29-
{opened
30-
? cell.mined
31-
? '🦠'
32-
: cell.flagged && gameState === "lost" ? "❌" : cell.neighborMines
33-
: cell.flagged || gameState === "won"
34-
? "🚩"
35-
: null}
39+
{content}
3640
</div>
3741
);
3842
};

‎src/Hat/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,11 @@ import './styles.css';
1111
const b = b_.lock('Hat');
1212

1313
export const Hat = ({
14+
flaggingMode,
1415
gameState,
1516
minesLeftCount,
1617
timerValue,
17-
onFlagClick,
18+
onFlaggingSwitch,
1819
onOptionsClick,
1920
onResetClick
2021
}) => (
@@ -27,7 +28,7 @@ export const Hat = ({
2728
{gameState === "playing" ? "🙂" : gameState === "won" ? "😎" : "😵"}
2829
New game
2930
</Button>,
30-
<Switcher onClick={onFlagClick} title="Flag">Flag</Switcher>,
31+
<Switcher onChange={onFlaggingSwitch} title="Flag" checked={flaggingMode}>Flag</Switcher>,
3132
<Button onClick={onOptionsClick} title="Options">Options</Button>
3233
]}
3334
/>

‎src/Options/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ export const Options = ({ arena, mines, onApply, onClose }) => {
8484
<LabeledInput className={b('labeledInput')} onBlur={recalcValues} label='Width' value={w} onChange={set('w')} />
8585
<LabeledInput className={b('labeledInput')} onBlur={recalcValues} label='Height' value={h} onChange={set('h')} />
8686
<LabeledInput className={b('labeledInput')} onBlur={recalcValues} label='Mines' value={m} onChange={setMines} />
87+
{/* TODO: Show mined cells percent from total cells */}
8788
</div>
8889
</div>
8990
</Modal>

‎src/core/index.js‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { arraysCompare, genCells, getNeighborCells } from "./helpers";
1+
import { arraysCompare, genCells, getNeighborCells } from './helpers';
22

33
export class Minesweeper {
44
constructor(arena, minesCount, redrawFn) {
@@ -25,19 +25,32 @@ export class Minesweeper {
2525
};
2626

2727
handleCellClick = i => {
28-
if (this.gameState !== "playing") return;
28+
if (this.gameState !== 'playing') return;
2929

3030
const cell = this.cells[i];
3131

32+
if (this.flaggingMode && !cell.opened) {
33+
this.flagCell(i);
34+
return;
35+
}
36+
3237
if (cell.flagged) return;
3338

3439
if (cell.opened) this._openNeighborCells(i);
3540
else this._openCell(i);
3641
this._render();
3742
};
3843

44+
toggleFlaggingMode = () => {
45+
if (this.gameState === 'playing') {
46+
this.flaggingMode = !this.flaggingMode;
47+
this._render();
48+
}
49+
}
50+
3951
_explode = i => {
40-
this.gameState = "lost";
52+
this.gameState = 'lost';
53+
this.flaggingMode = false;
4154
this.endTime = Date.now();
4255
};
4356

@@ -73,7 +86,8 @@ export class Minesweeper {
7386
const openedCells = this.cells.filter(({ opened }) => !opened);
7487

7588
if (arraysCompare(this.minedCells, openedCells)) {
76-
this.gameState = "won";
89+
this.gameState = 'won';
90+
this.flaggingMode = false;
7791
this.stopTimer();
7892
}
7993
}
@@ -97,7 +111,7 @@ export class Minesweeper {
97111
};
98112

99113
flagCell = i => {
100-
if (this.gameState !== "playing") return;
114+
if (this.gameState !== 'playing') return;
101115

102116
const cell = this.cells[i];
103117
if (!cell.opened) {
@@ -127,19 +141,21 @@ export class Minesweeper {
127141
opened: this.openedCells,
128142
flagged: this.flaggedCells,
129143
timerValue: this.startTime ? (this.endTime || Date.now()) - this.startTime : null,
130-
endTime: this.endTime
144+
endTime: this.endTime,
145+
flaggingMode: this.flaggingMode
131146
};
132147
}
133148

134149
reset = () => {
135150
this.stopTimer();
136151
this.openedCells = 0;
137152
this.flaggedCells = 0;
138-
this.gameState = "playing";
153+
this.gameState = 'playing';
139154
this.cells = genCells(this.arena, 0, 0);
140155
this.minedCells = [];
141156
this.startTime = null;
142157
this.endTime = null;
158+
this.flaggingMode = false;
143159
this._render();
144160
};
145161

0 commit comments

Comments
 (0)