function MainComponent({ moles, onMoleClick, score, timer, gameOver }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, gameOver ? /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "Game Over! Final Score: ", score) : /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Time Left: ", timer, "s")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, moles.map((mole, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>onMoleClick(index), className: `w-24 h-24 rounded-full ${mole.type === 'mole' ? 'bg-[#7851A9]' : mole.type === 'bomb' ? 'bg-red-600' : mole.type === 'clock' ? 'bg-green-500' : 'bg-transparent'} relative`, "aria-label": `Hole ${index} ${mole.type}`, disabled: gameOver || mole.type === 'empty', __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, mole.type === 'mole' && /*#__PURE__*/ React.createElement("img", { src: "mole.png", alt: "A cartoon mole popping out from a hole", className: "w-full h-full object-cover absolute inset-0", __source: { fileName: "", lineNumber: 20, columnNumber: 38 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "Score: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 25, columnNumber: 16 }, __self: this }, score))); } function StoryComponent() { const [moles, setMoles] = React.useState(Array.from({ length: 9 }, ()=>({ type: 'empty' }))); const [score, setScore] = React.useState(0); const [timer, setTimer] = React.useState(60); const [gameOver, setGameOver] = React.useState(false); React.useEffect(()=>{ let moleVisibilityTimeout; if (!gameOver) { moleVisibilityTimeout = setTimeout(changeMoleVisibility, 2000); } const timerInterval = setInterval(()=>{ setTimer((prev)=>{ if (prev <= 1) { setGameOver(true); clearInterval(timerInterval); return 0; } else { return prev - 1; } }); }, 1000); return ()=>{ clearInterval(timerInterval); clearTimeout(moleVisibilityTimeout); }; }, [ gameOver ]); const changeMoleVisibility = ()=>{ setMoles(moles.map(()=>{ const random = Math.random(); if (random > 0.90) { return { type: 'clock' }; } else if (random > 0.80) { return { type: 'bomb' }; } else if (random > 0.5) { return { type: 'mole' }; } else { return { type: 'empty' }; } })); setTimeout(()=>{ setMoles(moles.map((mole)=>({ ...mole, type: mole.type === 'mole' ? 'empty' : mole.type }))); }, 2000); }; const handleMoleClick = (index)=>{ if (moles[index].type === 'bomb') { setGameOver(true); } else if (moles[index].type === 'mole') { setScore(score + 1); setMoles(moles.map((mole, moleIndex)=>moleIndex === index ? { ...mole, type: 'empty' } : mole)); } else if (moles[index].type === 'clock') { setTimer(timer + 5); setMoles(moles.map((mole, moleIndex)=>moleIndex === index ? { ...mole, type: 'empty' } : mole)); } }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 93, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { moles: moles, onMoleClick: handleMoleClick, score: score, timer: timer, gameOver: gameOver, __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this })); }