function MainComponent() { const initialBoard = Array.from({ length: 8 }).fill().map(()=>Array.from({ length: 8 }).fill(null)); initialBoard[3][3] = "white"; initialBoard[3][4] = "black"; initialBoard[4][3] = "black"; initialBoard[4][4] = "white"; const [board, setBoard] = React.useState(initialBoard); const [currentPlayer, setCurrentPlayer] = React.useState("black"); const [gameOver, setGameOver] = React.useState(false); const [winner, setWinner] = React.useState(null); const createXYZ = (action, params)=>{}; const handleMove = (row, col)=>{ if (gameOver) return; const newBoard = JSON.parse(JSON.stringify(board)); if (newBoard[row][col] === null && isMoveLegal(row, col, currentPlayer, newBoard)) { newBoard[row][col] = currentPlayer; flipDiscs(row, col, currentPlayer, newBoard); setBoard(newBoard); const nextPlayer = currentPlayer === "black" ? "white" : "black"; if (hasValidMove(nextPlayer, newBoard)) { setCurrentPlayer(nextPlayer); } else if (!hasValidMove(currentPlayer, newBoard)) { setGameOver(true); determineWinner(newBoard); } } }; const isMoveLegal = (row, col, player, board)=>{ return checkDirection(row, col, player, board, -1, 0) || checkDirection(row, col, player, board, 1, 0) || checkDirection(row, col, player, board, 0, -1) || checkDirection(row, col, player, board, 0, 1) || checkDirection(row, col, player, board, -1, -1) || checkDirection(row, col, player, board, -1, 1) || checkDirection(row, col, player, board, 1, -1) || checkDirection(row, col, player, board, 1, 1); }; const checkDirection = (row, col, player, board, dRow, dCol)=>{ let i = row + dRow; let j = col + dCol; let hasOpponentDisc = false; while(i >= 0 && i < 8 && j >= 0 && j < 8){ if (board[i][j] === null) return false; if (board[i][j] === player) return hasOpponentDisc; hasOpponentDisc = true; i += dRow; j += dCol; } return false; }; const flipDiscs = (row, col, player, board)=>{ const affectedPositions = []; const directions = [ [ -1, 0 ], [ 1, 0 ], [ 0, -1 ], [ 0, 1 ], [ -1, -1 ], [ -1, 1 ], [ 1, -1 ], [ 1, 1 ] ]; directions.forEach(([dRow, dCol])=>{ flipDirection(row, col, player, board, dRow, dCol, affectedPositions); }); createXYZ('flipDiscs', { positions: affectedPositions }); }; const flipDirection = (row, col, player, board, dRow, dCol, affectedPositions)=>{ let i = row + dRow; let j = col + dCol; const discsToFlip = []; while(i >= 0 && i < 8 && j >= 0 && j < 8){ if (board[i][j] === null) return; if (board[i][j] === player) { discsToFlip.forEach(([x, y])=>{ board[x][y] = player; affectedPositions.push([ x, y ]); }); return; } discsToFlip.push([ i, j ]); i += dRow; j += dCol; } }; const hasValidMove = (player, board)=>{ for(let i = 0; i < 8; i++){ for(let j = 0; j < 8; j++){ if (board[i][j] === null && isMoveLegal(i, j, player, board)) { return true; } } } return false; }; const determineWinner = (board)=>{ let blackCount = 0; let whiteCount = 0; board.forEach((row)=>row.forEach((cell)=>{ if (cell === "black") blackCount++; if (cell === "white") whiteCount++; })); setWinner(blackCount > whiteCount ? "Black" : whiteCount > blackCount ? "White" : "Draw"); }; const undoMove = ()=>{}; const playAgainstAI = ()=>{}; const renderCell = (row, col)=>{ let cellClass = "w-[50px] h-[50px] border border-gray-500 flex items-center justify-center"; if (board[row][col] === "black") cellClass += " bg-black"; if (board[row][col] === "white") cellClass += " bg-white"; return /*#__PURE__*/ React.createElement("div", { className: cellClass, key: `${row}-${col}`, name: `cell-${row}-${col}`, "data-row": row, "data-col": col, onClick: ()=>createXYZ('onBoardClick', { callback: ()=>handleMove(row, col) }), __source: { fileName: "", lineNumber: 136, columnNumber: 7 }, __self: this }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 font-roboto", __source: { fileName: "", lineNumber: 148, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 149, columnNumber: 7 }, __self: this }, "Othello (Reversi)"), createXYZ('createBoard', { size: 8 }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8", __source: { fileName: "", lineNumber: 151, columnNumber: 7 }, __self: this }, board.map((row, rowIndex)=>row.map((_, colIndex)=>renderCell(rowIndex, colIndex)))), gameOver && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-xl font-bold", __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, "Game Over! ", winner, " wins!"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-4", __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gray-700 text-white px-4 py-2 rounded mr-2", name: "undo", onClick: undoMove, __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, "Undo Move"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-4 py-2 rounded", name: "single-player", onClick: playAgainstAI, __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this }, "Play vs AI")), createXYZ('updateUI', { board })); }