--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/react_games/public/games/main-XZMLBHCF.js	Mon Dec 01 20:22:47 2025 -0800
@@ -0,0 +1,138 @@
+import {
+  __toESM,
+  require_jsx_runtime,
+  require_react
+} from "./chunk-AX5M7HF6.js";
+
+// src/Tictactoe/main.tsx
+var import_react = __toESM(require_react());
+var import_jsx_runtime = __toESM(require_jsx_runtime());
+var MAX_ROW = 3;
+var MAX_COL = 3;
+var getInitialGameState = () => {
+  return {
+    board: Array.from(
+      { length: MAX_ROW },
+      () => Array(MAX_COL).fill(
+        {
+          value: "",
+          isWonSquare: false
+        }
+      )
+    ),
+    status: 0 /* PLAYABLE */,
+    player: "X" /* X */
+  };
+};
+var cellCssStyle = (isWinningSquare) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100%",
+  aspectRatio: "1 / 1",
+  background: isWinningSquare ? "blue" : "lightblue",
+  border: "1px solid black"
+});
+var CellComponent = (0, import_react.memo)(({ cell, row, col, moveDispatch }) => {
+  const handleOnClick = (0, import_react.useCallback)(() => {
+    moveDispatch(row, col);
+  }, [row, col]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: cellCssStyle(cell.isWonSquare), onClick: handleOnClick, children: cell.value });
+});
+var boardCssStyle = {
+  display: "grid",
+  gridTemplateColumns: `repeat(${MAX_COL}, 1fr)`,
+  width: 500
+};
+var getGameStatus = (board) => {
+  const direction = [
+    [0, 1],
+    [1, 0],
+    [1, 1],
+    [1, -1]
+  ];
+  let numberOfFilledValue = 0;
+  for (let row = 0; row < MAX_ROW; row++) {
+    for (let col = 0; col < MAX_COL; col++) {
+      if (board[row][col].value === "") continue;
+      numberOfFilledValue++;
+      for (const [dr, dc] of direction) {
+        if (board[row][col].value === board[row + dr]?.[col + dc]?.value && board[row][col].value === board[row + dr * 2]?.[col + dc * 2]?.value) {
+          return {
+            newStatus: 1 /* WON */,
+            winningPositions: [
+              [row, col],
+              [row + dr, col + dc],
+              [row + dr + dr, col + dc + dc]
+            ]
+          };
+        }
+      }
+    }
+  }
+  return numberOfFilledValue === MAX_ROW * MAX_COL ? { newStatus: 2 /* TIE */ } : { newStatus: 0 /* PLAYABLE */ };
+};
+var gameStateReducer = (state, action) => {
+  if (state.status === 1 /* WON */) return state;
+  switch (action.type) {
+    case 0 /* PLACE */:
+      if (state.board[action.row][action.col].value) return state;
+      let newBoard = state.board.map(
+        (row, rowIdx) => rowIdx === action.row ? row.map(
+          (col, c) => c === action.col ? { ...col, value: state.player } : col
+        ) : row
+      );
+      const res = getGameStatus(newBoard);
+      let winner = null;
+      if (res.newStatus === 1 /* WON */) {
+        winner = state.player;
+        newBoard = newBoard.map(
+          (row, rowIdx) => row.map(
+            (col, colIdx) => res.winningPositions.some(([wr, wc]) => wr === rowIdx && wc === colIdx) ? { ...col, isWonSquare: true } : col
+          )
+        );
+      }
+      return {
+        ...state,
+        board: newBoard,
+        status: res.newStatus,
+        player: "X" /* X */ === state.player ? "O" /* O */ : "X" /* X */,
+        winner
+      };
+    case 1 /* RESET */:
+      return getInitialGameState();
+  }
+};
+var TicTacToe = () => {
+  const [state, dispatch] = (0, import_react.useReducer)(gameStateReducer, null, getInitialGameState);
+  const moveDispatch = (0, import_react.useCallback)(
+    (rowIdx, colIdx) => dispatch({ type: 0 /* PLACE */, row: rowIdx, col: colIdx }),
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: " TicTacToe " }),
+    /* @__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!` }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: boardCssStyle, children: state.board.map((row, rowIdx) => {
+      return row.map((cell, colIdx) => {
+        const cellComponentProp = {
+          cell,
+          row: rowIdx,
+          col: colIdx,
+          moveDispatch
+        };
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CellComponent,
+          {
+            ...cellComponentProp
+          },
+          `${rowIdx}-${colIdx}`
+        );
+      });
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => dispatch({ type: 1 /* RESET */ }), children: "Reset" })
+  ] });
+};
+export {
+  TicTacToe
+};
+//# sourceMappingURL=main-XZMLBHCF.js.map