Mercurial
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