function MainComponent() { const [board, setBoard] = React.useState(Array.from({ length: 8 }).fill(null).map(()=>Array.from({ length: 8 }).fill(null))); const [isBlackTurn, setIsBlackTurn] = React.useState(true); React.useEffect(()=>{ const initialBoard = board.map((row)=>row.slice()); initialBoard[3][3] = 'white'; initialBoard[3][4] = 'black'; initialBoard[4][3] = 'black'; initialBoard[4][4] = 'white'; setBoard(initialBoard); }, []); const flipDisks = (newBoard, row, col, color)=>{ const directions = [ [ -1, 0 ], [ 1, 0 ], [ 0, -1 ], [ 0, 1 ], [ -1, -1 ], [ -1, 1 ], [ 1, -1 ], [ 1, 1 ] ]; for (const [dx, dy] of directions){ let x = row + dx; let y = col + dy; const cellsToFlip = []; while(x >= 0 && x < 8 && y >= 0 && y < 8 && newBoard[x][y] && newBoard[x][y] !== color){ cellsToFlip.push([ x, y ]); x += dx; y += dy; } if (x >= 0 && x < 8 && y >= 0 && y < 8 && newBoard[x][y] === color) { cellsToFlip.forEach(([fx, fy])=>{ newBoard[fx][fy] = color; }); } } }; const handleCellClick = (row, col)=>{ if (board[row][col] !== null) return; const newBoard = board.map((row)=>row.slice()); const color = isBlackTurn ? 'black' : 'white'; newBoard[row][col] = color; flipDisks(newBoard, row, col, color); setBoard(newBoard); setIsBlackTurn(!isBlackTurn); }; const handleReset = ()=>{ const newBoard = Array.from({ length: 8 }).fill(null).map(()=>Array.from({ length: 8 }).fill(null)); newBoard[3][3] = 'white'; newBoard[3][4] = 'black'; newBoard[4][3] = 'black'; newBoard[4][4] = 'white'; setBoard(newBoard); setIsBlackTurn(true); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#008000] min-h-screen flex flex-col items-center", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-row w-full justify-start p-4 text-white", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, isBlackTurn ? "Black's Turn" : "White's Turn")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 gap-1", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, board.map((row, rowIndex)=>row.map((cell, colIndex)=>/*#__PURE__*/ React.createElement("div", { key: `${rowIndex}-${colIndex}`, className: "w-[40px] h-[40px] bg-[#008000] border border-black flex items-center justify-center", onClick: ()=>handleCellClick(rowIndex, colIndex), __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, cell && /*#__PURE__*/ React.createElement("div", { className: `w-[30px] h-[30px] rounded-full ${cell === 'black' ? 'bg-black' : 'bg-white'}`, __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 p-2 bg-white text-black rounded", onClick: handleReset, __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, "Reset")); }