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