#45Reflex Click Game

Overview

Build a simple reflex game where a colored circle switches between red and green. The player must click the circle only when it is green to score points, while clicking it when red ends the game. The game also includes a countdown timer and a score counter, and the player wins if they reach the target score before time runs out.

Requirements

1. Start Game Button

   • Displayed initially and after game over.
   • When clicked, it resets score, timer, and color, and starts the game.

2. Timer

   • Starts at 10 seconds.
   • Counts down every second while the game is in progress.
   • When it reaches 0, the game ends.

3. Colored Circle

   • Starts red when the game begins.
   • Switches between red and green at random intervals between 1 and 2 seconds.
   • Clicking the circle when green increases the score.
   • Clicking the circle when red ends the game immediately.
   • While playing, the circle is a button and its color is set via style (backgroundColor).
   • When not playing, the circle is a non-interactive div with a neutral color.

4. Score

   • Starts at 0.
   • Increments by 1 for each correct click (green circle).
   • The game ends when the score reaches 15 (win condition).

5. Game Status

   • Display appropriate messages for game over or victory.

6. UI Updates

   • Timer, score, and circle color update in real-time.
   • Start button is hidden while playing and shown when before game starts or game over.

Notes

• Better to manage the timer and color changes separately.
• Maybe instead of two boolean states for game over and game playing just one with status "idle" | "playing" | "gameover";
• Some tests may already pass in the initial state of the challenge.
• Memorize how to generate random intervals; it will be very useful in the future.

Tests

1. renders the app title
2. renders initially start button, score 0 and 'bg-slate-300' circle
3. click on start shows the circle and hides the start button
4. clicking the circle while red causes game over
5. after game over the start button appears again
6. clicking the circle when green increases score to 1
7. when time runs out shows game over
8. reaching win score shows You Win!