function MainComponent() { const [board, setBoard] = React.useState(initializeBoard()); const [currentPlayer, setCurrentPlayer] = React.useState('black'); const [scores, setScores] = React.useState({ black: 2, white: 2 }); const [gameOver, setGameOver] = React.useState(false); const [showRules, setShowRules] = React.useState(false); const [showSettings, setShowSettings] = React.useState(false); const [aiDifficulty, setAIDifficulty] = React.useState('medium'); const [showWinner, setShowWinner] = React.useState(false); const [winner, setWinner] = React.useState(''); function initializeBoard() { const initialBoard = Array.from({ length: 8 }).fill(null).map(()=>Array.from({ length: 8 }).fill(null)); initialBoard[3][3] = 'white'; initialBoard[4][4] = 'white'; initialBoard[3][4] = 'black'; initialBoard[4][3] = 'black'; return initialBoard; } const toggleShowRules = ()=>setShowRules(!showRules); const toggleShowSettings = ()=>setShowSettings(!showSettings); const restartGame = ()=>{ setBoard(initializeBoard()); setCurrentPlayer('black'); setScores({ black: 2, white: 2 }); setGameOver(false); setShowWinner(false); setWinner(''); }; const handleCellClick = (row, col)=>{ // Placeholder for cell click logic }; function renderCell(value, row, col) { return /*#__PURE__*/ React.createElement("div", { className: `w-[50px] h-[50px] border-[1px] border-[#556B2F] ${value ? '' : 'cursor-pointer'} flex items-center justify-center bg-[#006400]`, onClick: ()=>handleCellClick(row, col), key: `${row}-${col}`, name: `${row}-${col}`, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, value && /*#__PURE__*/ React.createElement("div", { className: `w-[40px] h-[40px] rounded-full ${value === 'black' ? 'bg-[#000000]' : 'bg-[#FFFFFF]'}`, __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this })); } const renderBoard = ()=>{ return board.map((row, rowIndex)=>/*#__PURE__*/ React.createElement("div", { className: "flex", key: `row-${rowIndex}`, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, row.map((cell, colIndex)=>renderCell(cell, rowIndex, colIndex)))); }; const handleAIDifficultyChange = (e)=>{ setAIDifficulty(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#f8f8f8] dark:bg-[#222222] min-h-screen", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[800px] mx-auto", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-[#808080] text-2xl mb-4 font-inter dark:text-white", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "クラシックなオセロゲーム"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#808080] font-inter", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "現在のプレイヤー: ", /*#__PURE__*/ React.createElement("span", { className: `${currentPlayer === 'black' ? 'text-[#000000]' : 'text-[#FFFFFF]'} font-bold`, __source: { fileName: "", lineNumber: 68, columnNumber: 23 }, __self: this }, currentPlayer === 'black' ? '黒' : '白')), /*#__PURE__*/ React.createElement("div", { className: "text-[#808080] font-inter", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-4", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "黒: ", scores.black), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "白: ", scores.white)), /*#__PURE__*/ React.createElement("button", { className: "bg-[#808080] text-white py-2 px-4 rounded-md font-inter", onClick: restartGame, __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "新しいゲームを始める")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 gap-[1px] bg-[#556B2F]", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, renderBoard()), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-between", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#808080] text-white py-2 px-4 rounded-md font-inter", onClick: toggleShowRules, __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "ゲームのルール"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#808080] text-white py-2 px-4 rounded-md font-inter", onClick: toggleShowSettings, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "設定"))), showRules && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-md", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "ゲームのルール"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "ここにルールが表示されます..."), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#808080] text-white py-2 px-4 rounded-md", onClick: toggleShowRules, __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "閉じる"))), showSettings && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-md", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "設定"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-black", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, "AI難易度:"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 mt-2 border border-gray-300 rounded-md", value: aiDifficulty, onChange: handleAIDifficultyChange, __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "easy", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, "簡単"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, "普通"), /*#__PURE__*/ React.createElement("option", { value: "hard", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, "難しい"))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#808080] text-white py-2 px-4 rounded-md", onClick: toggleShowSettings, __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "閉じる"))), showWinner && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-md", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, "ゲーム終了"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, winner, "の勝ち!"), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#808080] text-white py-2 px-4 rounded-md", onClick: ()=>setShowWinner(false), __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, "閉じる")))); }