function MainComponent() { const [gameState, setGameState] = React.useState('idle'); const [score, setScore] = React.useState(0); const [timeLeft, setTimeLeft] = React.useState(30); const [molePosition, setMolePosition] = React.useState(null); const [moleIcon, setMoleIcon] = React.useState(''); const [backgroundImage, setBackgroundImage] = React.useState(''); React.useEffect(()=>{ fetch('/integrations/stable-diffusion-v-3/?prompt=cute cartoon mole icon for whack-a-mole game').then((response)=>response.json()).then((data)=>setMoleIcon(data.data[0])); fetch('/integrations/stable-diffusion-v-3/?prompt=whack-a-mole game background, cartoon style, green grass').then((response)=>response.json()).then((data)=>setBackgroundImage(data.data[0])); }, []); React.useEffect(()=>{ let timer; let moleTimer; if (gameState === 'playing') { timer = setInterval(()=>{ setTimeLeft((prevTime)=>{ if (prevTime <= 1) { clearInterval(timer); clearInterval(moleTimer); setGameState('ended'); return 0; } return prevTime - 1; }); }, 1000); moleTimer = setInterval(()=>{ setMolePosition(Math.floor(Math.random() * 9)); }, 1000); } return ()=>{ clearInterval(timer); clearInterval(moleTimer); }; }, [ gameState ]); const startGame = ()=>{ setGameState('playing'); setScore(0); setTimeLeft(30); setMolePosition(Math.floor(Math.random() * 9)); }; const hitMole = (index)=>{ if (index === molePosition && gameState === 'playing') { setScore((prevScore)=>prevScore + 1); setMolePosition(Math.floor(Math.random() * 9)); } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col items-center justify-center font-sans", style: { backgroundImage: `url(${backgroundImage})`, backgroundSize: 'cover' }, __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4 text-white", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, "もぐらたたきゲーム"), gameState === 'idle' && /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "bg-green-500 text-white px-4 py-2 rounded-lg text-xl mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "スタート"), gameState !== 'idle' && /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-xl text-white", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "時間: ", timeLeft, "秒 | スコア: ", score), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-2 bg-[#8B4513] p-4 rounded-lg", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, [ ...Array.from({ length: 9 }) ].map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>hitMole(index), className: "w-[100px] h-[100px] bg-[#90EE90] rounded-full flex items-center justify-center cursor-pointer border-4 border-[#006400]", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, index === molePosition && gameState === 'playing' && /*#__PURE__*/ React.createElement("img", { src: moleIcon, alt: "Mole", className: "w-3/4 h-3/4 object-contain", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this })))), gameState === 'ended' && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg text-center", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "終了"), /*#__PURE__*/ React.createElement("p", { className: "text-5xl font-bold mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "スコア: ", score), /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "bg-green-500 text-white px-4 py-2 rounded-lg text-xl", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "もう一度プレイ")))); }