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