Mercurial
diff react_games/public/games/main-MX6K4HMI.js @ 37:fb9bcd3145cb
[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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/react_games/public/games/main-MX6K4HMI.js Mon Dec 01 20:22:47 2025 -0800 @@ -0,0 +1,109 @@ +import { + __toESM, + require_jsx_runtime, + require_react +} from "./chunk-AX5M7HF6.js"; + +// src/CardMatchiing/main.tsx +var import_react = __toESM(require_react()); +var import_jsx_runtime = __toESM(require_jsx_runtime()); +var shuffle = (arr) => [...arr].sort(() => Math.random() - 0.5); +var makeBoard = () => { + const values = shuffle( + Array.from({ length: 10 }, (_, i) => i + 1).flatMap((v) => [v, v]) + ); + return Array.from( + { length: 4 }, + (_, r) => Array.from({ length: 5 }, (_2, c) => ({ + value: values[r * 5 + c], + isFacing: false, + isSolved: false + })) + ); +}; +var BoardContext = (0, import_react.createContext)(null); +var useBoardDispatch = () => { + const ctx = (0, import_react.useContext)(BoardContext); + if (!ctx) throw new Error("BoardContext missing"); + return ctx; +}; +var initial = () => ({ board: makeBoard(), open: [], busy: false }); +function reducer(state, action) { + switch (action.type) { + case "reset": + return initial(); + case "flipBack": { + const [a, b] = state.open; + const nextBoard = state.board.map( + (row, r) => row.map( + (card, c) => r === a.row && c === a.col || r === b.row && c === b.col ? { ...card, isFacing: false } : card + ) + ); + return { board: nextBoard, open: [], busy: false }; + } + case "move": { + if (state.busy) return state; + const { row, col } = action; + const target = state.board[row][col]; + if (target.isFacing || target.isSolved) return state; + const nextBoard = state.board.map( + (r, ri) => r.map( + (c, ci) => ri === row && ci === col ? { ...c, isFacing: true } : c + ) + ); + const open = [...state.open, { row, col }]; + if (open.length < 2) return { ...state, board: nextBoard, open }; + const [a, b] = open; + const first = nextBoard[a.row][a.col]; + const second = nextBoard[b.row][b.col]; + if (first.value === second.value) { + const solvedBoard = nextBoard.map( + (r, ri) => r.map( + (c, ci) => ri === a.row && ci === a.col || ri === b.row && ci === b.col ? { ...c, isSolved: true } : c + ) + ); + return { board: solvedBoard, open: [], busy: false }; + } + return { board: nextBoard, open, busy: true }; + } + default: + return state; + } +} +var Card = ({ row, col, card }) => { + const dispatch = useBoardDispatch(); + const style = { + width: 60, + height: 80, + margin: 4, + fontSize: 24, + display: "flex", + alignItems: "center", + justifyContent: "center", + background: card.isSolved ? "#8bc34a" : card.isFacing ? "#fff" : "#90caf9", + cursor: card.isSolved ? "default" : "pointer", + borderRadius: 6, + userSelect: "none" + }; + return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style, onClick: () => dispatch({ type: "move", row, col }), children: card.isFacing || card.isSolved ? card.value : "\u{1F0A0}" }); +}; +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)) }); +var MemoryGame = () => { + const [state, dispatch] = (0, import_react.useReducer)(reducer, void 0, initial); + (0, import_react.useEffect)(() => { + if (state.busy) { + const t = setTimeout(() => dispatch({ type: "flipBack" }), 1e3); + return () => clearTimeout(t); + } + }, [state.busy]); + const solved = state.board.every((r) => r.every((c) => c.isSolved)); + return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ + /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { style: { textAlign: "center" }, children: solved ? "\u{1F389} You won!" : "Memory Game" }), + /* @__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)) }), + /* @__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" }) }) + ] }); +}; +export { + MemoryGame +}; +//# sourceMappingURL=main-MX6K4HMI.js.map