function MainComponent() { const [board, setBoard] = React.useState(Array.from({ length: 8 }).fill().map(()=>Array.from({ length: 8 }).fill(null))); const [currentPlayer, setCurrentPlayer] = React.useState('black'); React.useEffect(()=>{ const newBoard = [ ...board ]; newBoard[3][3] = 'white'; newBoard[3][4] = 'black'; newBoard[4][3] = 'black'; newBoard[4][4] = 'white'; setBoard(newBoard); }, []); const isValidMove = (row, col)=>{ if (board[row][col] !== null) return false; const directions = [ [ -1, -1 ], [ -1, 0 ], [ -1, 1 ], [ 0, -1 ], [ 0, 1 ], [ 1, -1 ], [ 1, 0 ], [ 1, 1 ] ]; for (let [dx, dy] of directions){ let x = row + dx, y = col + dy; let flipped = false; while(x >= 0 && x < 8 && y >= 0 && y < 8 && board[x][y] !== null){ if (board[x][y] !== currentPlayer) { x += dx; y += dy; } else { flipped = true; break; } } if (flipped) return true; } return false; }; const makeMove = (row, col)=>{ if (!isValidMove(row, col)) return; const newBoard = [ ...board ]; newBoard[row][col] = currentPlayer; const directions = [ [ -1, -1 ], [ -1, 0 ], [ -1, 1 ], [ 0, -1 ], [ 0, 1 ], [ 1, -1 ], [ 1, 0 ], [ 1, 1 ] ]; for (let [dx, dy] of directions){ let x = row + dx, y = col + dy; let toFlip = []; while(x >= 0 && x < 8 && y >= 0 && y < 8 && board[x][y] !== null){ if (board[x][y] !== currentPlayer) { toFlip.push([ x, y ]); x += dx; y += dy; } else { toFlip.forEach(([fx, fy])=>newBoard[fx][fy] = currentPlayer); break; } } } setBoard(newBoard); setCurrentPlayer(currentPlayer === 'black' ? 'white' : 'black'); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-green-100 font-sans", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, "オセロゲーム"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "現在のプレイヤー:"), /*#__PURE__*/ React.createElement("span", { className: `inline-block w-6 h-6 rounded-full ${currentPlayer === 'black' ? 'bg-black' : 'bg-white border border-black'}`, __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-green-700 p-2", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, board.map((row, rowIndex)=>/*#__PURE__*/ React.createElement("div", { key: rowIndex, className: "flex", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, row.map((cell, colIndex)=>/*#__PURE__*/ React.createElement("button", { key: colIndex, className: "w-12 h-12 border border-green-900 flex items-center justify-center", onClick: ()=>makeMove(rowIndex, colIndex), __source: { fileName: "", lineNumber: 71, 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: 77, columnNumber: 19 }, __self: this }))))))); }