Mercurial

comparison react_games/public/games/main-MX6K4HMI.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/CardMatchiing/main.tsx
8 var import_react = __toESM(require_react());
9 var import_jsx_runtime = __toESM(require_jsx_runtime());
10 var shuffle = (arr) => [...arr].sort(() => Math.random() - 0.5);
11 var makeBoard = () => {
12 const values = shuffle(
13 Array.from({ length: 10 }, (_, i) => i + 1).flatMap((v) => [v, v])
14 );
15 return Array.from(
16 { length: 4 },
17 (_, r) => Array.from({ length: 5 }, (_2, c) => ({
18 value: values[r * 5 + c],
19 isFacing: false,
20 isSolved: false
21 }))
22 );
23 };
24 var BoardContext = (0, import_react.createContext)(null);
25 var useBoardDispatch = () => {
26 const ctx = (0, import_react.useContext)(BoardContext);
27 if (!ctx) throw new Error("BoardContext missing");
28 return ctx;
29 };
30 var initial = () => ({ board: makeBoard(), open: [], busy: false });
31 function reducer(state, action) {
32 switch (action.type) {
33 case "reset":
34 return initial();
35 case "flipBack": {
36 const [a, b] = state.open;
37 const nextBoard = state.board.map(
38 (row, r) => row.map(
39 (card, c) => r === a.row && c === a.col || r === b.row && c === b.col ? { ...card, isFacing: false } : card
40 )
41 );
42 return { board: nextBoard, open: [], busy: false };
43 }
44 case "move": {
45 if (state.busy) return state;
46 const { row, col } = action;
47 const target = state.board[row][col];
48 if (target.isFacing || target.isSolved) return state;
49 const nextBoard = state.board.map(
50 (r, ri) => r.map(
51 (c, ci) => ri === row && ci === col ? { ...c, isFacing: true } : c
52 )
53 );
54 const open = [...state.open, { row, col }];
55 if (open.length < 2) return { ...state, board: nextBoard, open };
56 const [a, b] = open;
57 const first = nextBoard[a.row][a.col];
58 const second = nextBoard[b.row][b.col];
59 if (first.value === second.value) {
60 const solvedBoard = nextBoard.map(
61 (r, ri) => r.map(
62 (c, ci) => ri === a.row && ci === a.col || ri === b.row && ci === b.col ? { ...c, isSolved: true } : c
63 )
64 );
65 return { board: solvedBoard, open: [], busy: false };
66 }
67 return { board: nextBoard, open, busy: true };
68 }
69 default:
70 return state;
71 }
72 }
73 var Card = ({ row, col, card }) => {
74 const dispatch = useBoardDispatch();
75 const style = {
76 width: 60,
77 height: 80,
78 margin: 4,
79 fontSize: 24,
80 display: "flex",
81 alignItems: "center",
82 justifyContent: "center",
83 background: card.isSolved ? "#8bc34a" : card.isFacing ? "#fff" : "#90caf9",
84 cursor: card.isSolved ? "default" : "pointer",
85 borderRadius: 6,
86 userSelect: "none"
87 };
88 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style, onClick: () => dispatch({ type: "move", row, col }), children: card.isFacing || card.isSolved ? card.value : "\u{1F0A0}" });
89 };
90 var Row = ({ row, rowPos }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex" }, children: row.map((card, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { row: rowPos, col: idx, card }, idx)) });
91 var MemoryGame = () => {
92 const [state, dispatch] = (0, import_react.useReducer)(reducer, void 0, initial);
93 (0, import_react.useEffect)(() => {
94 if (state.busy) {
95 const t = setTimeout(() => dispatch({ type: "flipBack" }), 1e3);
96 return () => clearTimeout(t);
97 }
98 }, [state.busy]);
99 const solved = state.board.every((r) => r.every((c) => c.isSolved));
100 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
101 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { style: { textAlign: "center" }, children: solved ? "\u{1F389} You won!" : "Memory Game" }),
102 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoardContext.Provider, { value: dispatch, children: state.board.map((row, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, { rowPos: idx, row }, idx)) }),
103 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { textAlign: "center", marginTop: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => dispatch({ type: "reset" }), children: "Reset" }) })
104 ] });
105 };
106 export {
107 MemoryGame
108 };
109 //# sourceMappingURL=main-MX6K4HMI.js.map