Mercurial
annotate react_games/src/Minesweeper/main.tsx @ 71:75de5903355c
Giagantic changes that update Dowa library to be more align with stb style array and hashmap. Updated Seobeo to be caching on server side instead of file level caching. Deleted bunch of things I don't really use.
| author | June Park <parkjune1995@gmail.com> |
|---|---|
| date | Sun, 28 Dec 2025 20:34:22 -0800 |
| parents | fb9bcd3145cb |
| children |
| rev | line source |
|---|---|
|
37
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1 import { CSSProperties, memo, useCallback, useReducer } from 'react'; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
2 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
3 /** |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
4 * |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
5 * Build a simplified Minesweeper game in React where the user can click cells to reveal them. |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
6 * Some cells contain mines, others show the number of adjacent mines. |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
7 * If a cell with zero adjacent mines is revealed, all connected zero-cells should be revealed |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
8 * automatically. |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
9 * The game ends if a mine is revealed, and the player wins if all non-mine cells are revealed. |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
10 * |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
11 * The board should be 10×10. |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
12 * |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
13 * Clicking a cell reveals it: |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
14 * |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
15 * If it’s a mine, the game ends with a “Game Over” message. |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
16 * |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
17 * If it’s not a mine, show the number of adjacent mines (0–8). |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
18 * |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
19 * If the number is 0, automatically reveal all connected empty cells and their numbered border. |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
20 * |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
21 * The player wins when all non-mine cells are revealed. |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
22 * |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
23 * Include a Reset button to restart the game with a new random layout. |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
24 * |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
25 * Optional: Allow right-clicking a cell to toggle a flag icon (to mark suspected mines). |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
26 */ |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
27 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
28 enum CellValue { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
29 EMPTY, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
30 BOMB, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
31 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
32 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
33 interface Cell { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
34 value: CellValue; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
35 numberOfAdjacentBomb: number; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
36 isShown: boolean; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
37 isFlag: boolean, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
38 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
39 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
40 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
41 type Board = Cell[][]; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
42 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
43 enum GameStatus { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
44 PLAYABLE="Reveal all the map while not clicking on mine", |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
45 WON="YOU WON", |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
46 LOST="YOU LOST" |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
47 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
48 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
49 interface GameState { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
50 board: Board; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
51 status: GameStatus; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
52 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
53 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
54 const MAX_SIZE_LEN = 10; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
55 const N_BOMBS = 10; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
56 const DIRECTION = [ |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
57 [0,1], |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
58 [1,1], |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
59 [1,0], |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
60 [1,-1], |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
61 [0,-1], |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
62 [-1,-1], |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
63 [-1,0], |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
64 [-1,1], |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
65 ] |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
66 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
67 const constructGameState = (): GameState => { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
68 let board: Board = Array.from( |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
69 { length: MAX_SIZE_LEN }, () => Array.from( |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
70 { length: MAX_SIZE_LEN }, (): Cell => ( |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
71 { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
72 value: CellValue.EMPTY, numberOfAdjacentBomb: 0, isShown: false , |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
73 isFlag: false, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
74 }) |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
75 ) |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
76 ); |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
77 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
78 // Place the bombs |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
79 let placedBomb = 0; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
80 const bombPlacments: number[][] = []; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
81 while (placedBomb < N_BOMBS) { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
82 const bombRowIdx = Math.floor(Math.random() * MAX_SIZE_LEN); |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
83 const bombColIdx = Math.floor(Math.random() * MAX_SIZE_LEN); |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
84 if (board[bombRowIdx][bombColIdx].value === CellValue.EMPTY) { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
85 board[bombRowIdx][bombColIdx] = { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
86 ...board[bombRowIdx][bombColIdx], |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
87 value: CellValue.BOMB, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
88 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
89 placedBomb++; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
90 bombPlacments.push([bombRowIdx, bombColIdx]); |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
91 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
92 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
93 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
94 // Find all adjacent cells and add values |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
95 for (const [bombR, bombC] of bombPlacments) { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
96 for (const [dr, dc] of DIRECTION) { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
97 if (board[bombR+dr]?.[bombC+dc]?.value === CellValue.EMPTY) { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
98 board[bombR+dr][bombC+dc] = { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
99 ...board[bombR+dr][bombC+dc], |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
100 numberOfAdjacentBomb: board[bombR+dr][bombC+dc].numberOfAdjacentBomb + 1 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
101 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
102 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
103 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
104 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
105 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
106 return { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
107 board, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
108 status: GameStatus.PLAYABLE, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
109 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
110 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
111 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
112 enum GameActionEnum { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
113 CHECK, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
114 RESET, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
115 FLAG, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
116 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
117 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
118 interface Position { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
119 row: number; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
120 col: number; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
121 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
122 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
123 type GameAction = |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
124 | { type: GameActionEnum.CHECK, position: Position } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
125 | { type: GameActionEnum.FLAG, position: Position } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
126 | { type: GameActionEnum.RESET } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
127 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
128 const gameStateReducer = (state: GameState, action: GameAction): GameState => { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
129 switch(action.type) { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
130 case GameActionEnum.CHECK: |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
131 const {position} = action; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
132 const board = state.board.map(row=>row.map(col=>({...col}))); |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
133 const start = board[position.row][position.col]; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
134 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
135 if (start.value === CellValue.BOMB) { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
136 for (const row of board) for (const cell of row) cell.isShown = true; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
137 return { board, status: GameStatus.LOST }; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
138 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
139 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
140 if (!start.isShown) start.isShown = true; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
141 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
142 if (start.numberOfAdjacentBomb === 0) { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
143 const q: Position[] = [position]; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
144 while (q.length) { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
145 const { row, col } = q.shift()!; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
146 for (const [dr, dc] of DIRECTION) { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
147 const r = row + dr, c = col + dc; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
148 const n = board[r]?.[c]; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
149 if (!n || n.isShown || n.value === CellValue.BOMB) continue; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
150 n.isShown = true; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
151 if (n.numberOfAdjacentBomb === 0) q.push({ row: r, col: c }); |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
152 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
153 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
154 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
155 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
156 const hidden = board.flat().filter(c => !c.isShown).length; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
157 const status = hidden === N_BOMBS ? GameStatus.WON : GameStatus.PLAYABLE; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
158 return { board, status }; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
159 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
160 case GameActionEnum.FLAG: |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
161 const newBoard = state.board.map( |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
162 (row, rowIdx) => rowIdx === action.position.row ? |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
163 row.map( |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
164 (col, colIdx): Cell => |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
165 colIdx === action.position.col ? |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
166 ({...col, isFlag: true }) : col |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
167 ) : row |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
168 ); |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
169 console.log(newBoard); |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
170 return { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
171 ...state, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
172 board: newBoard, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
173 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
174 case GameActionEnum.RESET: |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
175 return constructGameState(); |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
176 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
177 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
178 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
179 interface StylesProp { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
180 board: CSSProperties; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
181 cell: CSSProperties; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
182 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
183 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
184 const styles: StylesProp = { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
185 board: { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
186 display: "grid", |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
187 gridTemplateColumns: `repeat(${MAX_SIZE_LEN}, 1fr)`, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
188 width: 400, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
189 }, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
190 cell: { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
191 display: "flex", |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
192 justifyContent: "center", |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
193 alignItems: "center", |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
194 width: "100%", |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
195 aspectRatio: "1 / 1", |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
196 border: "1px solid black", |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
197 backgroundColor: "#e6e6e6" |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
198 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
199 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
200 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
201 interface CellComponentProp { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
202 cellValue: Cell; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
203 row: number; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
204 col: number; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
205 placeDispatch: (row: number, col: number) => void; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
206 flagDispatch: (row: number, col: number) => void; |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
207 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
208 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
209 const CellComponent = memo(({ |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
210 cellValue, row, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
211 col, placeDispatch, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
212 flagDispatch |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
213 }: CellComponentProp) => { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
214 console.log("re-render"); |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
215 const handleOnClikck = useCallback(() => { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
216 placeDispatch(row, col); |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
217 }, [row, col, placeDispatch]) |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
218 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
219 const handleOnRightClikck = useCallback((event: React.MouseEvent<HTMLDivElement>) => { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
220 event.preventDefault(); |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
221 flagDispatch(row, col); |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
222 }, [row, col, placeDispatch]) |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
223 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
224 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
225 return ( |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
226 <div |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
227 style={{ |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
228 ...styles.cell, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
229 cursor: "pointer", |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
230 backgroundColor: cellValue.isShown ? "#fafafa" : "#e6e6e6", |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
231 }} |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
232 onClick={handleOnClikck} |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
233 onContextMenu={handleOnRightClikck} |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
234 > |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
235 {cellValue.isShown |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
236 ? cellValue.value === CellValue.BOMB |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
237 ? "💣" |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
238 : cellValue.numberOfAdjacentBomb || "" |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
239 : cellValue.isFlag |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
240 ? "🚩" |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
241 : ""} |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
242 </div> |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
243 ) |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
244 }, (prev, next) => |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
245 prev.cellValue.isShown === next.cellValue.isShown && |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
246 prev.cellValue.isFlag === next.cellValue.isFlag) |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
247 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
248 const Minesweeper = () => { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
249 const [state, dispatch] = useReducer(gameStateReducer, null, constructGameState); |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
250 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
251 const placeDispatch = useCallback( |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
252 (row: number, col: number) => { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
253 dispatch({type: GameActionEnum.CHECK, position: { row, col }}) |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
254 }, [dispatch]) |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
255 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
256 const flagDispatch = useCallback( |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
257 (row: number, col: number) => { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
258 dispatch({type: GameActionEnum.FLAG, position: { row, col }}) |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
259 }, [dispatch]) |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
260 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
261 return ( |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
262 <> |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
263 <h1> {state.status} </h1> |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
264 <div style={styles.board}> |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
265 {state.board.map( |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
266 (row, rowIdx) => row.map( |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
267 (cell, colIdx) => ( |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
268 <CellComponent |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
269 key={`${rowIdx}-${colIdx}`} |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
270 cellValue={cell} |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
271 row={rowIdx} |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
272 col={colIdx} |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
273 placeDispatch={placeDispatch} |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
274 flagDispatch={flagDispatch} />) |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
275 ) |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
276 )} |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
277 </div> |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
278 <button onClick={()=>{dispatch({type: GameActionEnum.RESET})}}> reset </button> |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
279 </> |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
280 ) |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
281 } |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
282 |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
283 export { |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
284 Minesweeper, |
|
fb9bcd3145cb
[ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
285 } |