Mercurial

comparison react_games/public/games/main-EQTPDHY4.js @ 37:fb9bcd3145cb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ReactGames] Few games I made using react just to practice few things.
author MrJuneJune <me@mrjunejune.com>
date Mon, 01 Dec 2025 20:22:47 -0800
parents
children
comparison
equal deleted inserted replaced
36:84672efec192 37:fb9bcd3145cb
1 import {
2 __toESM,
3 require_jsx_runtime,
4 require_react
5 } from "./chunk-AX5M7HF6.js";
6
7 // src/LightsOut/main.tsx
8 var import_react = __toESM(require_react());
9 var import_jsx_runtime = __toESM(require_jsx_runtime());
10 var MAX_COL = 5;
11 var MAX_ROW = 5;
12 var DIRECTION = [
13 [0, 0],
14 [0, 1],
15 [1, 0],
16 [0, -1],
17 [-1, 0]
18 ];
19 var constructGameState = () => {
20 const board = Array.from(
21 { length: MAX_ROW },
22 () => Array.from(
23 { length: MAX_COL },
24 () => ({ value: false })
25 )
26 );
27 for (let i = 0; i < 30; i++) {
28 const r = Math.floor(Math.random() * MAX_ROW);
29 const c = Math.floor(Math.random() * MAX_COL);
30 for (const [dr, dc] of DIRECTION) {
31 if (board[r + dr]?.[c + dc]) {
32 board[r + dr][c + dc].value = !board[r + dr]?.[c + dc].value;
33 }
34 }
35 }
36 return {
37 board,
38 status: 0 /* PLAYABLE */,
39 moves: 0
40 };
41 };
42 var styles = {
43 board: {
44 display: "grid",
45 gridTemplateColumns: `repeat(${MAX_COL}, 1fr)`,
46 width: MAX_COL * 30
47 },
48 cell: (isLightOn) => ({
49 width: "100%",
50 aspectRatio: "1 / 1",
51 border: `1px solid #222`,
52 backgroundColor: isLightOn ? "white" : "black",
53 transition: "background-color 120ms ease",
54 cursor: "pointer"
55 })
56 };
57 var CellComponent = (0, import_react.memo)(({ cellValue, rowPos, colPos, dispatch }) => {
58 const onClickHandler = (0, import_react.useCallback)(() => {
59 dispatch({ type: "place", newRowPos: rowPos, newColPos: colPos });
60 }, [rowPos, colPos, dispatch]);
61 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { onClick: onClickHandler, style: styles.cell(cellValue.value) });
62 });
63 var gameStateReducer = (state, action) => {
64 if (state.status === 1 /* WON */) return state;
65 switch (action.type) {
66 case "place":
67 const allDirection = [];
68 for (const [dr, dc] of DIRECTION) {
69 allDirection.push([action.newRowPos + dr, action.newColPos + dc]);
70 }
71 const newBoard = state.board.map(
72 (row, rowIdx) => row.map((col, colIdx) => allDirection.some(
73 ([nr, nc]) => rowIdx === nr && colIdx === nc
74 ) ? { ...col, value: !col.value } : col)
75 );
76 const newStatus = newBoard.flat().filter((cell) => cell.value).length === MAX_COL * MAX_ROW ? 1 /* WON */ : 0 /* PLAYABLE */;
77 return {
78 ...state,
79 status: newStatus,
80 board: newBoard,
81 moves: state.moves + 1
82 };
83 case "reset":
84 return constructGameState();
85 }
86 };
87 var LightsOut = () => {
88 const [gameState, dispatch] = (0, import_react.useReducer)(gameStateReducer, null, constructGameState);
89 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
90 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h1", { children: [
91 " Game Status ",
92 gameState.status
93 ] }),
94 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", { children: [
95 " Number of moves so far ",
96 gameState.moves
97 ] }),
98 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.board, children: gameState.board.map(
99 (row, rowIdx) => row.map(
100 (cellValue, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
101 CellComponent,
102 {
103 cellValue,
104 rowPos: rowIdx,
105 colPos: colIdx,
106 dispatch
107 },
108 `${rowIdx}-${colIdx}`
109 )
110 )
111 ) })
112 ] });
113 };
114 export {
115 LightsOut
116 };
117 //# sourceMappingURL=main-EQTPDHY4.js.map