function MainComponent({ board, currentPlayer, score, makeMove }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-gray-100 min-h-screen py-8", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8 text-gray-800", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "オセロ"), /*#__PURE__*/ React.createElement("div", { className: "bg-green-700 p-4 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 gap-1", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, board.map((row, rowIndex)=>row.map((cell, colIndex)=>/*#__PURE__*/ React.createElement("button", { key: `${rowIndex}-${colIndex}`, className: `w-12 h-12 rounded-full ${cell === 'black' ? 'bg-gray-800' : cell === 'white' ? 'bg-gray-200' : 'bg-green-600 hover:bg-green-500'} focus:outline-none focus:ring-2 focus:ring-blue-400 transition-all duration-300 ease-in-out`, onClick: ()=>makeMove(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'} transition-all duration-300 ease-in-out`, style: { transform: 'scale(1)', opacity: 1 }, __source: { fileName: "", lineNumber: 19, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex justify-center space-x-8", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-black rounded-full mx-auto mb-2", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, score.black)), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-white rounded-full border-2 border-gray-300 mx-auto mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, score.white))), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-xl font-semibold text-gray-700", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "現在のプレイヤー: ", currentPlayer === 'black' ? '黒' : '白')); } function StoryComponent() { const BOARD_SIZE = 8; const INITIAL_BOARD = Array(BOARD_SIZE).fill().map(()=>Array(BOARD_SIZE).fill(null)); INITIAL_BOARD[3][3] = INITIAL_BOARD[4][4] = 'white'; INITIAL_BOARD[3][4] = INITIAL_BOARD[4][3] = 'black'; const isValidMove = (row, col, board, currentPlayer)=>{ if (board[row][col]) return false; const directions = [ [ -1, -1 ], [ -1, 0 ], [ -1, 1 ], [ 0, -1 ], [ 0, 1 ], [ 1, -1 ], [ 1, 0 ], [ 1, 1 ] ]; return directions.some(([dx, dy])=>{ let x = row + dx, y = col + dy; if (x < 0 || x >= BOARD_SIZE || y < 0 || y >= BOARD_SIZE || board[x][y] !== (currentPlayer === 'black' ? 'white' : 'black')) return false; while(x >= 0 && x < BOARD_SIZE && y >= 0 && y < BOARD_SIZE){ if (!board[x][y]) return false; if (board[x][y] === currentPlayer) return true; x += dx; y += dy; } return false; }); }; const makeMove = (row, col, board, currentPlayer, setBoard, setCurrentPlayer)=>{ if (!isValidMove(row, col, board, currentPlayer)) return; const newBoard = board.map((row)=>[ ...row ]); newBoard[row][col] = currentPlayer; const directions = [ [ -1, -1 ], [ -1, 0 ], [ -1, 1 ], [ 0, -1 ], [ 0, 1 ], [ 1, -1 ], [ 1, 0 ], [ 1, 1 ] ]; directions.forEach(([dx, dy])=>{ let x = row + dx, y = col + dy; const toFlip = []; while(x >= 0 && x < BOARD_SIZE && y >= 0 && y < BOARD_SIZE){ if (!newBoard[x][y]) break; if (newBoard[x][y] === currentPlayer) { toFlip.forEach(([fx, fy])=>newBoard[fx][fy] = currentPlayer); break; } toFlip.push([ x, y ]); x += dx; y += dy; } }); setBoard(newBoard); setCurrentPlayer(currentPlayer === 'black' ? 'white' : 'black'); }; const [board1, setBoard1] = React.useState(INITIAL_BOARD); const [score1, setScore1] = React.useState({ black: 2, white: 2 }); const [currentPlayer1, setCurrentPlayer1] = React.useState('black'); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 98, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { board: board1, currentPlayer: currentPlayer1, score: score1, makeMove: (row, col)=>makeMove(row, col, board1, currentPlayer1, setBoard1, setCurrentPlayer1), __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this })); }