function MainComponent() { const [board, setBoard] = React.useState(Array.from({ length: 8 }).fill(null).map(()=>Array.from({ length: 8 }).fill(null))); const [currentTurn, setCurrentTurn] = React.useState('black'); const [scores, setScores] = React.useState({ black: 2, white: 2 }); const [soundOn, setSoundOn] = React.useState(true); const [difficulty, setDifficulty] = React.useState('normal'); const restartGame = ()=>{ setBoard(Array.from({ length: 8 }).fill(null).map(()=>Array.from({ length: 8 }).fill(null))); setCurrentTurn('black'); setScores({ black: 2, white: 2 }); }; const toggleSound = ()=>setSoundOn(!soundOn); const handleDifficultyChange = (e)=>setDifficulty(e.target.value); const handleCellClick = (rowIndex, colIndex)=>{ // Game logic to place stone and flip others }; const renderCell = (rowIndex, colIndex)=>{ const cellValue = board[rowIndex][colIndex]; const cellClass = `w-[50px] h-[50px] border border-black flex justify-center items-center ${cellValue === 'black' ? 'bg-black' : cellValue === 'white' ? 'bg-white' : ''}`; return /*#__PURE__*/ React.createElement("div", { key: `${rowIndex}-${colIndex}`, className: cellClass, onClick: ()=>handleCellClick(rowIndex, colIndex), __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }); }; const renderBoard = ()=>{ return board.map((row, rowIndex)=>/*#__PURE__*/ React.createElement("div", { key: rowIndex, className: "flex", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, row.map((cell, colIndex)=>renderCell(rowIndex, colIndex)))); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center bg-[#f0e68c] p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-arial text-3xl mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "オセロゲーム"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full px-4 mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-arial", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "黒: ", scores.black), /*#__PURE__*/ React.createElement("div", { className: "font-arial", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "白: ", scores.white), /*#__PURE__*/ React.createElement("div", { className: "font-arial", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, currentTurn === 'black' ? '黒のターン' : '白のターン')), /*#__PURE__*/ React.createElement("div", { className: "relative w-full flex-grow max-w-[400px] bg-[#006400]", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, renderBoard()), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex space-x-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: restartGame, className: "font-arial bg-blue-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "新しいゲームを始める"), /*#__PURE__*/ React.createElement("button", { className: "font-arial bg-red-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "ゲームを終了する")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex space-x-4", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleSound, className: "font-arial bg-gray-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, soundOn ? '音をオフ' : '音をオン'), /*#__PURE__*/ React.createElement("select", { onChange: handleDifficultyChange, value: difficulty, className: "font-arial bg-gray-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "easy", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "簡単"), /*#__PURE__*/ React.createElement("option", { value: "normal", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "普通"), /*#__PURE__*/ React.createElement("option", { value: "hard", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "難しい"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, ` .flip { transform: rotateY(360deg); transition: transform 0.5s; } .fade-in { opacity: 1; transition: opacity 0.5s; } .hidden { opacity: 0; } .cell { transition: background-color 0.5s; } `)); }