Whack-a-Mole
Build Whack-a-Mole: nine holes, a Start button, a 20-second round. While a round runs, a mole appears in a random hole every 700 ms (never the same hole twice in a row). Clicking the hole with the mole scores a point and the mole hides until the next hop.
Requirements
- The countdown and score are visible; the round ends at zero and shows a round-over message.
- Start is disabled during a round; pressing it afterwards resets the score and clock.
- The timers stop when the round ends and when the component unmounts.
- Clicking an empty hole does nothing.
- Holes are buttons whose labels say when they hold the mole.
Hints
Hint 1
One effect depending on running starts both intervals (mole hop, clock tick) and clears both in its cleanup.
Hint 2
Use the functional form of setMole to pick a hole different from the current one; the interval callback must not read stale state.
Hint 3
A second effect turns secondsLeft === 0 into "stop the round", so the end condition lives in one place.