8. Whack-a-Mole

Build a Whack-a-Mole game in React.

A grid of holes is shown. A "mole" appears in one hole at a time. The user clicks the mole to score points before it disappears.

Requirements

1. Game UI

• Render a grid (default 3x3) of clickable holes
• Only one mole can be visible at a time
• Mole appearance should be visually distinct (e.g., emoji / circle)

2. Game Flow

• A Start button begins the game
• Game runs for 30 seconds (countdown timer)
• While running, a mole appears in a random hole every 800ms
• Clicking the visible mole increments the score and immediately moves the mole to a new random hole
• When time reaches 0, stop the game and freeze the final score

3. Controls

• Start (disabled while running)
• Reset (stops game + resets score/time)

4. Rules

• Clicking an empty hole does nothing
• The next mole position should be random, but avoid repeating the same hole twice in a row (if possible)

5. Optional (Nice to Have)

• Difficulty selector: Easy (1000ms), Medium (800ms), Hard (500ms)
• Show "High Score" for the session
• Keyboard accessibility: allow Enter/Space to whack when focused

Data / Props

interface WhackAMoleProps {
  rows?: number;       // default 3
  cols?: number;       // default 3
  durationMs?: number; // default 30000
  intervalMs?: number; // default 800
}

> Note: Avoid memory leaks. Clean up timers/intervals on unmount and when stopping/resetting.