Mercurial
view react_games/public/games/main-HVML6WQS.js @ 63:fff1b048dda6
[Postdog] Fixed a problem where string did not wrap.
| author | June Park <parkjune1995@gmail.com> |
|---|---|
| date | Tue, 23 Dec 2025 14:00:37 -0800 |
| parents | fb9bcd3145cb |
| children |
line wrap: on
line source
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