diff react_games/public/games/main-HVML6WQS.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-HVML6WQS.js	Mon Dec 01 20:22:47 2025 -0800
@@ -0,0 +1,94 @@
+import {
+  __toESM,
+  require_jsx_runtime,
+  require_react
+} from "./chunk-AX5M7HF6.js";
+
+// src/Connectfour/main.tsx
+var import_react = __toESM(require_react());
+var import_jsx_runtime = __toESM(require_jsx_runtime());
+var ROWS = 6;
+var COLS = 7;
+var emptyBoard = () => Array.from({ length: ROWS }, () => Array(COLS).fill("" /* _ */));
+var init = { board: emptyBoard(), turn: "\u{1F534}" /* R */, status: "PLAYING" };
+function firstEmptyRow(board, col) {
+  for (let r = ROWS - 1; r >= 0; r--) if (board[r][col] === "" /* _ */) return r;
+  return null;
+}
+function scanWinner(b) {
+  const lines = [
+    [1, 0],
+    [0, 1],
+    // vertical, horizontal
+    [1, 1],
+    [1, -1]
+    // two diagonals
+  ];
+  for (let r = 0; r < ROWS; r++)
+    for (let c = 0; c < COLS; c++)
+      if (b[r][c] !== "" /* _ */) {
+        for (const [dr, dc] of lines)
+          if (b[r + dr]?.[c + dc] === b[r][c] && b[r + 2 * dr]?.[c + 2 * dc] === b[r][c] && b[r + 3 * dr]?.[c + 3 * dc] === b[r][c])
+            return b[r][c] === "\u{1F534}" /* R */ ? "R_WON" : "Y_WON";
+      }
+  return b.flat().every((p) => p !== "" /* _ */) ? "TIE" : "PLAYING";
+}
+function reducer(s, a) {
+  if (a.type === "RESET") return init;
+  if (s.status !== "PLAYING") return s;
+  const row = firstEmptyRow(s.board, a.col);
+  if (row == null) return s;
+  const newRow = [...s.board[row]];
+  newRow[a.col] = s.turn;
+  const newBoard = s.board.map((r, i) => i === row ? newRow : r);
+  const nextTurn = s.turn === "\u{1F534}" /* R */ ? "\u{1F7E1}" /* Y */ : "\u{1F534}" /* R */;
+  const status = scanWinner(newBoard);
+  return { board: newBoard, turn: nextTurn, status };
+}
+var DispatchCtx = (0, import_react.createContext)(null);
+var useGameDispatch = () => {
+  const d = (0, import_react.useContext)(DispatchCtx);
+  if (!d) throw new Error("outside provider");
+  return d;
+};
+var Cell = (0, import_react.memo)(({ v }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+  width: 52,
+  height: 52,
+  margin: 2,
+  borderRadius: "50%",
+  background: "#0e2a5a",
+  display: "grid",
+  placeItems: "center",
+  fontSize: 30
+}, children: v }));
+var ColBtn = ({ col }) => {
+  const dispatch = useGameDispatch();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      style: { flex: 1, height: 20, cursor: "pointer" },
+      onClick: () => dispatch({ type: "DROP", col })
+    }
+  );
+};
+var BoardView = (0, import_react.memo)(({ board }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex" }, children: Array.from({ length: COLS }, (_, c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColBtn, { col: c }, c)) }),
+  board.map((row, r) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex" }, children: row.map((v, c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Cell, { v }, c)) }, r))
+] }));
+function ConnectFour() {
+  const [state, dispatch] = (0, import_react.useReducer)(reducer, init);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DispatchCtx.Provider, { value: dispatch, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", { style: { textAlign: "center" }, children: [
+      state.status === "PLAYING" && `Turn: ${state.turn}`,
+      state.status === "TIE" && "Tie game",
+      state.status === "R_WON" && "Red wins!",
+      state.status === "Y_WON" && "Yellow wins!"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoardView, { board: state.board }),
+    state.status !== "PLAYING" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: { marginTop: 16 }, onClick: () => dispatch({ type: "RESET" }), children: "Play again" })
+  ] });
+}
+export {
+  ConnectFour
+};
+//# sourceMappingURL=main-HVML6WQS.js.map