function MainComponent() { const boardSize = 8; const initialState = Array(boardSize * boardSize).fill(null); initialState[3 * boardSize + 3] = 'white'; initialState[3 * boardSize + 4] = 'black'; initialState[4 * boardSize + 3] = 'black'; initialState[4 * boardSize + 4] = 'white'; const [board, setBoard] = React.useState(initialState); const [isBlackTurn, setIsBlackTurn] = React.useState(true); const [blackCount, setBlackCount] = React.useState(2); const [whiteCount, setWhiteCount] = React.useState(2); const [showRules, setShowRules] = React.useState(false); const [showSettings, setShowSettings] = React.useState(false); const [showWinner, setShowWinner] = React.useState(false); const [theme, setTheme] = React.useState("light"); const [aiDifficulty, setAiDifficulty] = React.useState("easy"); const flipDiscs = (board, index, color)=>{ const directions = [ -1, 1, -boardSize, boardSize, -boardSize - 1, -boardSize + 1, boardSize - 1, boardSize + 1 ]; let toFlip = []; directions.forEach((direction)=>{ let temp = []; let i = index + direction; while(i >= 0 && i < board.length && board[i] && board[i] !== color){ temp.push(i); i += direction; } if (board[i] === color) { toFlip = toFlip.concat(temp); } }); return toFlip; }; const handleClick = (index)=>{ if (board[index]) return; const color = isBlackTurn ? 'black' : 'white'; const toFlip = flipDiscs(board, index, color); if (toFlip.length === 0) return; let newBoard = [ ...board ]; newBoard[index] = color; toFlip.forEach((i)=>newBoard[i] = color); setBoard(newBoard); setIsBlackTurn(!isBlackTurn); setBlackCount(newBoard.filter((cell)=>cell === 'black').length); setWhiteCount(newBoard.filter((cell)=>cell === 'white').length); if (newBoard.every((cell)=>cell)) { setShowWinner(true); } }; const handleNewGame = ()=>{ setBoard(initialState); setIsBlackTurn(true); setBlackCount(2); setWhiteCount(2); setShowWinner(false); }; const toggleRules = ()=>setShowRules(!showRules); const toggleSettings = ()=>setShowSettings(!showSettings); const renderBoard = ()=>{ return board.map((cell, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "w-full h-full flex items-center justify-center bg-[#556B2F] border border-[#556B2F]", onClick: ()=>handleClick(i), __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, cell && /*#__PURE__*/ React.createElement("div", { className: `w-[80%] h-[80%] rounded-full ${cell === 'black' ? 'bg-black' : 'bg-white'}`, __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }))); }; return /*#__PURE__*/ React.createElement("div", { className: `flex flex-col items-center justify-center min-h-screen ${theme === "light" ? "bg-[#dcdcdc] text-black" : "bg-[#121212] text-[#aaaaaa]"} font-inter`, __source: { fileName: "", lineNumber: 89, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "クラシックなオセロゲーム")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 grid-rows-8 w-[320px] h-[320px] gap-1", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, renderBoard()), /*#__PURE__*/ React.createElement("div", { className: "my-4 flex space-x-4", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#808080] rounded-lg px-4 py-2 text-white", onClick: handleNewGame, __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "新しいゲームを始める"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#808080] rounded-lg px-4 py-2 text-white", onClick: toggleRules, __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, "ゲームのルール"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#808080] rounded-lg px-4 py-2 text-white", onClick: toggleSettings, __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, "設定")), /*#__PURE__*/ React.createElement("div", { className: "my-4 flex space-x-4", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-4 h-4 bg-black rounded-full inline-block", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "黒: ", blackCount)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-4 h-4 bg-white rounded-full inline-block", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "白: ", whiteCount))), /*#__PURE__*/ React.createElement("div", { className: "text-lg my-4", __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, "現在のプレイヤーのターン: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 111, columnNumber: 51 }, __self: this }, isBlackTurn ? '黒' : '白')), showRules && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white text-black p-4 rounded-lg", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, "ゲームのルール"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, "オセロのルールについて..."), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-700 text-white mt-2 px-4 py-2 rounded-lg", onClick: toggleRules, __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "閉じる"))), showSettings && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white text-black p-4 rounded-lg", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, "設定"), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, "テーマ:", /*#__PURE__*/ React.createElement("select", { className: "ml-2", name: "theme", value: theme, onChange: (e)=>setTheme(e.target.value), __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "light", __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, "ライト"), /*#__PURE__*/ React.createElement("option", { value: "dark", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, "ダーク"))), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, "AIの難易度:", /*#__PURE__*/ React.createElement("select", { className: "ml-2", name: "aiDifficulty", value: aiDifficulty, onChange: (e)=>setAiDifficulty(e.target.value), __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "easy", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, "Easy"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, "Medium"), /*#__PURE__*/ React.createElement("option", { value: "hard", __source: { fileName: "", lineNumber: 135, columnNumber: 17 }, __self: this }, "Hard"))), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-700 text-white mt-2 px-4 py-2 rounded-lg", onClick: toggleSettings, __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, "閉じる"))), showWinner && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white text-black p-4 rounded-lg", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, "ゲーム終了"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, blackCount === whiteCount ? '引き分けです!' : blackCount > whiteCount ? '黒の勝ち!' : '白の勝ち!'), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-700 text-white mt-2 px-4 py-2 rounded-lg", onClick: ()=>setShowWinner(false), __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, "閉じる")))); }