function MainComponent() { const [board, setBoard] = React.useState(Array.from({ length: 8 }).fill(null).map(()=>Array.from({ length: 8 }).fill(null))); const [currentPlayer, setCurrentPlayer] = React.useState('black'); const [blackScore, setBlackScore] = React.useState(2); const [whiteScore, setWhiteScore] = React.useState(2); const [showRules, setShowRules] = React.useState(false); const [showSettings, setShowSettings] = React.useState(false); const handleCellClick = (row, col)=>{ // Implement game logic here }; const startNewGame = ()=>{ setBoard(Array.from({ length: 8 }).fill(null).map(()=>Array.from({ length: 8 }).fill(null))); setCurrentPlayer('black'); setBlackScore(2); setWhiteScore(2); }; const toggleShowRules = ()=>setShowRules(!showRules); const toggleShowSettings = ()=>setShowSettings(!showSettings); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#f0f0f0] dark:bg-[#303030] p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-inter text-2xl text-black dark:text-white mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "クラシックオセロゲーム"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-inter text-black dark:text-white mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "現在のターン: ", currentPlayer === 'black' ? '黒' : '白'), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 gap-1 bg-[#556B2F] p-2", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, board.map((row, rowIndex)=>row.map((cell, colIndex)=>/*#__PURE__*/ React.createElement("div", { key: `${rowIndex}-${colIndex}`, className: "w-[50px] h-[50px] bg-[#6B8E23] flex items-center justify-center cursor-pointer", onClick: ()=>handleCellClick(rowIndex, colIndex), __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, cell === 'black' && /*#__PURE__*/ React.createElement("div", { className: "w-[40px] h-[40px] bg-black rounded-full", __source: { fileName: "", lineNumber: 38, columnNumber: 38 }, __self: this }), cell === 'white' && /*#__PURE__*/ React.createElement("div", { className: "w-[40px] h-[40px] bg-white rounded-full", __source: { fileName: "", lineNumber: 39, columnNumber: 38 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "text-lg font-inter text-black dark:text-white mt-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "スコア - 黒: ", blackScore, " 白: ", whiteScore)), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#808080] text-white font-inter rounded-full", onClick: startNewGame, __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "新しいゲームを始める"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#808080] text-white font-inter rounded-full", onClick: toggleShowRules, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "ゲームのルール"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#808080] text-white font-inter rounded-full", onClick: toggleShowSettings, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "設定")), showRules && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 min-h-screen min-w-full flex items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-[500px]", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-inter text-xl mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "ゲームのルール"), /*#__PURE__*/ React.createElement("p", { className: "font-inter text-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "オセロのルール説明がここに入ります。"), /*#__PURE__*/ React.createElement("button", { className: "mt-4 px-4 py-2 bg-[#808080] text-white font-inter rounded-full", onClick: toggleShowRules, __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "閉じる"))), showSettings && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 min-h-screen min-w-full flex items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-[500px]", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-inter text-xl mb-4", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "設定"), /*#__PURE__*/ React.createElement("div", { className: "font-inter text-lg mb-4 flex items-center", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "sound", className: "mr-2", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }), "音声")), /*#__PURE__*/ React.createElement("div", { className: "font-inter text-lg flex items-center", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "AIの難易度", /*#__PURE__*/ React.createElement("select", { name: "aiDifficulty", className: "ml-2", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, "簡単"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 97, columnNumber: 19 }, __self: this }, "中級"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 98, columnNumber: 19 }, __self: this }, "難しい")))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 px-4 py-2 bg-[#808080] text-white font-inter rounded-full", onClick: toggleShowSettings, __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "閉じる")))); }