function NewComponent({ board, currentPlayer, gameOver, winner, handleCellClick, resetGame }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8 text-blue-600", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Othello on SUI Blockchain"), /*#__PURE__*/ React.createElement("div", { className: "bg-green-600 p-4 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, board.map((row, rowIndex)=>/*#__PURE__*/ React.createElement("div", { key: rowIndex, className: "flex", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, row.map((cell, colIndex)=>/*#__PURE__*/ React.createElement("div", { key: colIndex, className: "w-12 h-12 border border-gray-700 flex items-center justify-center cursor-pointer", onClick: ()=>handleCellClick(rowIndex, colIndex), __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }, cell && /*#__PURE__*/ React.createElement("div", { className: `w-10 h-10 rounded-full ${cell === 'black' ? 'bg-black' : 'bg-white'}`, __source: { fileName: "", lineNumber: 15, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-xl font-semibold", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, gameOver ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Game Over!", winner === 'draw' ? " It's a draw!" : ` ${winner.charAt(0).toUpperCase() + winner.slice(1)} wins!`) : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Current Player: ", currentPlayer.charAt(0).toUpperCase() + currentPlayer.slice(1))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors", onClick: resetGame, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, "New Game"), /*#__PURE__*/ React.createElement("p", { className: "mt-8 text-sm text-gray-600", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "Note: This is a frontend implementation. Integration with SUI blockchain is required for full functionality.")); } function NewComponentStory() { const [gameState, setGameState] = React.useState({ board: Array.from({ length: 8 }).fill().map(()=>Array.from({ length: 8 }).fill(null)), currentPlayer: 'black', gameOver: false, winner: null }); React.useEffect(()=>{ initializeBoard(); }, []); const initializeBoard = ()=>{ const newBoard = Array.from({ length: 8 }).fill().map(()=>Array.from({ length: 8 }).fill(null)); newBoard[3][3] = 'white'; newBoard[3][4] = 'black'; newBoard[4][3] = 'black'; newBoard[4][4] = 'white'; setGameState((prevState)=>({ ...prevState, board: newBoard })); }; const handleCellClick = (row, col)=>{ if (gameState.board[row][col] || gameState.gameOver) return; const newBoard = [ ...gameState.board ]; newBoard[row][col] = gameState.currentPlayer; const flippedCells = getFlippedCells(row, col, gameState.currentPlayer, newBoard); flippedCells.forEach(([r, c])=>{ newBoard[r][c] = gameState.currentPlayer; }); const nextPlayer = gameState.currentPlayer === 'black' ? 'white' : 'black'; const gameOver = isBoardFull(newBoard); const winner = gameOver ? determineWinner(newBoard) : null; setGameState((prevState)=>({ ...prevState, board: newBoard, currentPlayer: nextPlayer, gameOver, winner })); }; const getFlippedCells = (row, col, player, board)=>{ const directions = [ [ -1, -1 ], [ -1, 0 ], [ -1, 1 ], [ 0, -1 ], [ 0, 1 ], [ 1, -1 ], [ 1, 0 ], [ 1, 1 ] ]; const flippedCells = []; directions.forEach(([dr, dc])=>{ let r = row + dr; let c = col + dc; const cellsToFlip = []; while(r >= 0 && r < 8 && c >= 0 && c < 8 && board[r][c] && board[r][c] !== player){ cellsToFlip.push([ r, c ]); r += dr; c += dc; } if (r >= 0 && r < 8 && c >= 0 && c < 8 && board[r][c] === player) { flippedCells.push(...cellsToFlip); } }); return flippedCells; }; const isBoardFull = (board)=>{ return board.every((row)=>row.every((cell)=>cell !== null)); }; const determineWinner = (board)=>{ const counts = board.flat().reduce((acc, cell)=>{ if (cell) acc[cell]++; return acc; }, { black: 0, white: 0 }); if (counts.black > counts.white) return 'black'; if (counts.white > counts.black) return 'white'; return 'draw'; }; const resetGame = ()=>{ initializeBoard(); setGameState((prevState)=>({ ...prevState, currentPlayer: 'black', gameOver: false, winner: null })); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 139, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { board: gameState.board, currentPlayer: gameState.currentPlayer, gameOver: gameState.gameOver, winner: gameState.winner, handleCellClick: handleCellClick, resetGame: resetGame, __source: { fileName: "", lineNumber: 140, columnNumber: 7 }, __self: this })); } function MainComponent() { const [gameState, setGameState] = React.useState({ board: Array.from({ length: 8 }).fill().map(()=>Array.from({ length: 8 }).fill(null)), currentPlayer: 'black', gameOver: false, winner: null }); React.useEffect(()=>{ initializeBoard(); }, []); const initializeBoard = ()=>{ const newBoard = Array.from({ length: 8 }).fill().map(()=>Array.from({ length: 8 }).fill(null)); newBoard[3][3] = 'white'; newBoard[3][4] = 'black'; newBoard[4][3] = 'black'; newBoard[4][4] = 'white'; setGameState((prevState)=>({ ...prevState, board: newBoard })); }; const handleCellClick = (row, col)=>{ if (gameState.board[row][col] || gameState.gameOver) return; const newBoard = [ ...gameState.board ]; newBoard[row][col] = gameState.currentPlayer; const flippedCells = getFlippedCells(row, col, gameState.currentPlayer, newBoard); flippedCells.forEach(([r, c])=>{ newBoard[r][c] = gameState.currentPlayer; }); const nextPlayer = gameState.currentPlayer === 'black' ? 'white' : 'black'; const gameOver = isBoardFull(newBoard); const winner = gameOver ? determineWinner(newBoard) : null; setGameState((prevState)=>({ ...prevState, board: newBoard, currentPlayer: nextPlayer, gameOver, winner })); }; const getFlippedCells = (row, col, player, board)=>{ const directions = [ [ -1, -1 ], [ -1, 0 ], [ -1, 1 ], [ 0, -1 ], [ 0, 1 ], [ 1, -1 ], [ 1, 0 ], [ 1, 1 ] ]; const flippedCells = []; directions.forEach(([dr, dc])=>{ let r = row + dr; let c = col + dc; const cellsToFlip = []; while(r >= 0 && r < 8 && c >= 0 && c < 8 && board[r][c] && board[r][c] !== player){ cellsToFlip.push([ r, c ]); r += dr; c += dc; } if (r >= 0 && r < 8 && c >= 0 && c < 8 && board[r][c] === player) { flippedCells.push(...cellsToFlip); } }); return flippedCells; }; const isBoardFull = (board)=>{ return board.every((row)=>row.every((cell)=>cell !== null)); }; const determineWinner = (board)=>{ const counts = board.flat().reduce((acc, cell)=>{ if (cell) acc[cell]++; return acc; }, { black: 0, white: 0 }); if (counts.black > counts.white) return 'black'; if (counts.white > counts.black) return 'white'; return 'draw'; }; const resetGame = ()=>{ initializeBoard(); setGameState((prevState)=>({ ...prevState, currentPlayer: 'black', gameOver: false, winner: null })); }; return /*#__PURE__*/ React.createElement(NewComponent, { board: gameState.board, currentPlayer: gameState.currentPlayer, gameOver: gameState.gameOver, winner: gameState.winner, handleCellClick: handleCellClick, resetGame: resetGame, __source: { fileName: "", lineNumber: 95, columnNumber: 5 }, __self: this }); }