function MainComponent() { const [board, setBoard] = React.useState(createInitialBoard()); const [currentColor, setCurrentColor] = React.useState('black'); function createInitialBoard() { const rows = 8; const cols = 8; let board = []; for(let i = 0; i < rows; i++){ let row = new Array(cols).fill(null); board.push(row); } board[3][3] = 'white'; board[4][4] = 'white'; board[3][4] = 'black'; board[4][3] = 'black'; return board; } const handleClick = (row, col)=>{ if (board[row][col] === null) { let newBoard = JSON.parse(JSON.stringify(board)); newBoard[row][col] = currentColor; flipPieces(newBoard, row, col, currentColor); setBoard(newBoard); setCurrentColor(currentColor === 'black' ? 'white' : 'black'); } }; const flipPieces = (board, row, col, color)=>{ const directions = [ [ 0, 1 ], [ 1, 0 ], [ 0, -1 ], [ -1, 0 ], [ 1, 1 ], [ 1, -1 ], [ -1, 1 ], [ -1, -1 ] ]; directions.forEach(([dx, dy])=>{ let r = row + dx; let c = col + dy; const piecesToFlip = []; while(r >= 0 && r < 8 && c >= 0 && c < 8 && board[r][c] && board[r][c] !== color){ piecesToFlip.push([ r, c ]); r += dx; c += dy; } if (r >= 0 && r < 8 && c >= 0 && c < 8 && board[r][c] === color) { piecesToFlip.forEach(([r, c])=>{ board[r][c] = color; }); } }); }; const renderPiece = (piece)=>{ if (piece === 'white') { return /*#__PURE__*/ React.createElement("div", { className: "w-[40px] h-[40px] bg-white rounded-full", __source: { fileName: "", lineNumber: 57, columnNumber: 14 }, __self: this }); } else if (piece === 'black') { return /*#__PURE__*/ React.createElement("div", { className: "w-[40px] h-[40px] bg-black rounded-full", __source: { fileName: "", lineNumber: 59, columnNumber: 14 }, __self: this }); } return null; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#008000] p-6", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 bg-white shadow-md", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text text-gray-900", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "オセロのアプリ")), /*#__PURE__*/ React.createElement("main", { className: "mt-6 flex justify-center items-center", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-rows-8 gap-1", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, board.map((row, rowIndex)=>/*#__PURE__*/ React.createElement("div", { key: rowIndex, className: "flex", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, row.map((piece, colIndex)=>/*#__PURE__*/ React.createElement("div", { key: `${rowIndex}-${colIndex}`, className: "w-[50px] h-[50px] border border-gray-500 flex justify-center items-center cursor-pointer", onClick: ()=>handleClick(rowIndex, colIndex), __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, renderPiece(piece))))))), /*#__PURE__*/ React.createElement("footer", { className: "mt-6 p-4 bg-white shadow-md", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-700", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, "© 2023 オセロのアプリ. All rights reserved."))); }