function MainComponent() { const [board, setBoard] = React.useState(Array.from({ length: 64 }).fill(null)); const [currentPlayer, setCurrentPlayer] = React.useState('white'); const [scores, setScores] = React.useState({ white: 2, black: 2 }); React.useEffect(()=>{ const initialBoard = Array.from({ length: 64 }).fill(null); initialBoard[27] = 'white'; initialBoard[28] = 'black'; initialBoard[35] = 'black'; initialBoard[36] = 'white'; setBoard(initialBoard); }, []); const handleCellClick = (index)=>{ if (board[index] !== null) return; const newBoard = [ ...board ]; newBoard[index] = currentPlayer; setBoard(newBoard); const newScores = { ...scores }; newScores[currentPlayer]++; setScores(newScores); setCurrentPlayer(currentPlayer === 'white' ? 'black' : 'white'); }; const resetGame = ()=>{ const initialBoard = Array.from({ length: 64 }).fill(null); initialBoard[27] = 'white'; initialBoard[28] = 'black'; initialBoard[35] = 'black'; initialBoard[36] = 'white'; setBoard(initialBoard); setCurrentPlayer('white'); setScores({ white: 2, black: 2 }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white mb-8 animate-bounce", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, "オセロゲーム"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 gap-1 bg-green-800 p-4 rounded-lg shadow-2xl", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, board.map((cell, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-12 h-12 bg-green-600 rounded-full flex items-center justify-center cursor-pointer transition-all duration-300 hover:bg-green-500", onClick: ()=>handleCellClick(index), __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full transition-all duration-500 transform hover:scale-110", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, cell === 'white' && /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-white rounded-full animate-flip", __source: { fileName: "", lineNumber: 51, columnNumber: 36 }, __self: this }), cell === 'black' && /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-black rounded-full animate-flip", __source: { fileName: "", lineNumber: 52, columnNumber: 36 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex space-x-4", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-white text-2xl ${currentPlayer === 'white' ? 'animate-pulse' : ''}`, __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }), "プレイヤー 1: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 59, columnNumber: 56 }, __self: this }, scores.white)), /*#__PURE__*/ React.createElement("div", { className: `text-white text-2xl ${currentPlayer === 'black' ? 'animate-pulse' : ''}`, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot mr-2", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }), "プレイヤー 2: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 62, columnNumber: 57 }, __self: this }, scores.black))), /*#__PURE__*/ React.createElement("button", { className: "mt-8 px-6 py-3 bg-yellow-400 text-black font-bold rounded-full text-xl hover:bg-yellow-300 transition-colors duration-300 animate-pulse", onClick: resetGame, __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, "新しいゲーム"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, ` @keyframes flip { 0% { transform: perspective(400px) rotateY(0); } 100% { transform: perspective(400px) rotateY(180deg); } } .animate-flip { animation: flip 0.6s ease-in-out; } @keyframes fadeInOut { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse { animation: fadeInOut 1.5s ease-in-out infinite; } `)); }