Mercurial

comparison react_games/public/games/main-XZMLBHCF.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/Tictactoe/main.tsx
8 var import_react = __toESM(require_react());
9 var import_jsx_runtime = __toESM(require_jsx_runtime());
10 var MAX_ROW = 3;
11 var MAX_COL = 3;
12 var getInitialGameState = () => {
13 return {
14 board: Array.from(
15 { length: MAX_ROW },
16 () => Array(MAX_COL).fill(
17 {
18 value: "",
19 isWonSquare: false
20 }
21 )
22 ),
23 status: 0 /* PLAYABLE */,
24 player: "X" /* X */
25 };
26 };
27 var cellCssStyle = (isWinningSquare) => ({
28 display: "flex",
29 justifyContent: "center",
30 alignItems: "center",
31 width: "100%",
32 aspectRatio: "1 / 1",
33 background: isWinningSquare ? "blue" : "lightblue",
34 border: "1px solid black"
35 });
36 var CellComponent = (0, import_react.memo)(({ cell, row, col, moveDispatch }) => {
37 const handleOnClick = (0, import_react.useCallback)(() => {
38 moveDispatch(row, col);
39 }, [row, col]);
40 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: cellCssStyle(cell.isWonSquare), onClick: handleOnClick, children: cell.value });
41 });
42 var boardCssStyle = {
43 display: "grid",
44 gridTemplateColumns: `repeat(${MAX_COL}, 1fr)`,
45 width: 500
46 };
47 var getGameStatus = (board) => {
48 const direction = [
49 [0, 1],
50 [1, 0],
51 [1, 1],
52 [1, -1]
53 ];
54 let numberOfFilledValue = 0;
55 for (let row = 0; row < MAX_ROW; row++) {
56 for (let col = 0; col < MAX_COL; col++) {
57 if (board[row][col].value === "") continue;
58 numberOfFilledValue++;
59 for (const [dr, dc] of direction) {
60 if (board[row][col].value === board[row + dr]?.[col + dc]?.value && board[row][col].value === board[row + dr * 2]?.[col + dc * 2]?.value) {
61 return {
62 newStatus: 1 /* WON */,
63 winningPositions: [
64 [row, col],
65 [row + dr, col + dc],
66 [row + dr + dr, col + dc + dc]
67 ]
68 };
69 }
70 }
71 }
72 }
73 return numberOfFilledValue === MAX_ROW * MAX_COL ? { newStatus: 2 /* TIE */ } : { newStatus: 0 /* PLAYABLE */ };
74 };
75 var gameStateReducer = (state, action) => {
76 if (state.status === 1 /* WON */) return state;
77 switch (action.type) {
78 case 0 /* PLACE */:
79 if (state.board[action.row][action.col].value) return state;
80 let newBoard = state.board.map(
81 (row, rowIdx) => rowIdx === action.row ? row.map(
82 (col, c) => c === action.col ? { ...col, value: state.player } : col
83 ) : row
84 );
85 const res = getGameStatus(newBoard);
86 let winner = null;
87 if (res.newStatus === 1 /* WON */) {
88 winner = state.player;
89 newBoard = newBoard.map(
90 (row, rowIdx) => row.map(
91 (col, colIdx) => res.winningPositions.some(([wr, wc]) => wr === rowIdx && wc === colIdx) ? { ...col, isWonSquare: true } : col
92 )
93 );
94 }
95 return {
96 ...state,
97 board: newBoard,
98 status: res.newStatus,
99 player: "X" /* X */ === state.player ? "O" /* O */ : "X" /* X */,
100 winner
101 };
102 case 1 /* RESET */:
103 return getInitialGameState();
104 }
105 };
106 var TicTacToe = () => {
107 const [state, dispatch] = (0, import_react.useReducer)(gameStateReducer, null, getInitialGameState);
108 const moveDispatch = (0, import_react.useCallback)(
109 (rowIdx, colIdx) => dispatch({ type: 0 /* PLACE */, row: rowIdx, col: colIdx }),
110 []
111 );
112 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
113 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: " TicTacToe " }),
114 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: state.status === 0 /* PLAYABLE */ ? `Player ${state.player} Turn!` : state.status === 2 /* TIE */ ? "Game is tied! Please reset" : `Player ${state.winner} has won!` }),
115 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: boardCssStyle, children: state.board.map((row, rowIdx) => {
116 return row.map((cell, colIdx) => {
117 const cellComponentProp = {
118 cell,
119 row: rowIdx,
120 col: colIdx,
121 moveDispatch
122 };
123 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
124 CellComponent,
125 {
126 ...cellComponentProp
127 },
128 `${rowIdx}-${colIdx}`
129 );
130 });
131 }) }),
132 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => dispatch({ type: 1 /* RESET */ }), children: "Reset" })
133 ] });
134 };
135 export {
136 TicTacToe
137 };
138 //# sourceMappingURL=main-XZMLBHCF.js.map