Mercurial

comparison react_games/public/games/main-HVML6WQS.js @ 37:fb9bcd3145cb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[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
comparison
equal deleted inserted replaced
36:84672efec192 37:fb9bcd3145cb
1 import {
2 __toESM,
3 require_jsx_runtime,
4 require_react
5 } from "./chunk-AX5M7HF6.js";
6
7 // src/Connectfour/main.tsx
8 var import_react = __toESM(require_react());
9 var import_jsx_runtime = __toESM(require_jsx_runtime());
10 var ROWS = 6;
11 var COLS = 7;
12 var emptyBoard = () => Array.from({ length: ROWS }, () => Array(COLS).fill("" /* _ */));
13 var init = { board: emptyBoard(), turn: "\u{1F534}" /* R */, status: "PLAYING" };
14 function firstEmptyRow(board, col) {
15 for (let r = ROWS - 1; r >= 0; r--) if (board[r][col] === "" /* _ */) return r;
16 return null;
17 }
18 function scanWinner(b) {
19 const lines = [
20 [1, 0],
21 [0, 1],
22 // vertical, horizontal
23 [1, 1],
24 [1, -1]
25 // two diagonals
26 ];
27 for (let r = 0; r < ROWS; r++)
28 for (let c = 0; c < COLS; c++)
29 if (b[r][c] !== "" /* _ */) {
30 for (const [dr, dc] of lines)
31 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])
32 return b[r][c] === "\u{1F534}" /* R */ ? "R_WON" : "Y_WON";
33 }
34 return b.flat().every((p) => p !== "" /* _ */) ? "TIE" : "PLAYING";
35 }
36 function reducer(s, a) {
37 if (a.type === "RESET") return init;
38 if (s.status !== "PLAYING") return s;
39 const row = firstEmptyRow(s.board, a.col);
40 if (row == null) return s;
41 const newRow = [...s.board[row]];
42 newRow[a.col] = s.turn;
43 const newBoard = s.board.map((r, i) => i === row ? newRow : r);
44 const nextTurn = s.turn === "\u{1F534}" /* R */ ? "\u{1F7E1}" /* Y */ : "\u{1F534}" /* R */;
45 const status = scanWinner(newBoard);
46 return { board: newBoard, turn: nextTurn, status };
47 }
48 var DispatchCtx = (0, import_react.createContext)(null);
49 var useGameDispatch = () => {
50 const d = (0, import_react.useContext)(DispatchCtx);
51 if (!d) throw new Error("outside provider");
52 return d;
53 };
54 var Cell = (0, import_react.memo)(({ v }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
55 width: 52,
56 height: 52,
57 margin: 2,
58 borderRadius: "50%",
59 background: "#0e2a5a",
60 display: "grid",
61 placeItems: "center",
62 fontSize: 30
63 }, children: v }));
64 var ColBtn = ({ col }) => {
65 const dispatch = useGameDispatch();
66 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
67 "button",
68 {
69 style: { flex: 1, height: 20, cursor: "pointer" },
70 onClick: () => dispatch({ type: "DROP", col })
71 }
72 );
73 };
74 var BoardView = (0, import_react.memo)(({ board }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
75 /* @__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)) }),
76 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))
77 ] }));
78 function ConnectFour() {
79 const [state, dispatch] = (0, import_react.useReducer)(reducer, init);
80 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DispatchCtx.Provider, { value: dispatch, children: [
81 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", { style: { textAlign: "center" }, children: [
82 state.status === "PLAYING" && `Turn: ${state.turn}`,
83 state.status === "TIE" && "Tie game",
84 state.status === "R_WON" && "Red wins!",
85 state.status === "Y_WON" && "Yellow wins!"
86 ] }),
87 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoardView, { board: state.board }),
88 state.status !== "PLAYING" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: { marginTop: 16 }, onClick: () => dispatch({ type: "RESET" }), children: "Play again" })
89 ] });
90 }
91 export {
92 ConnectFour
93 };
94 //# sourceMappingURL=main-HVML6WQS.js.map