# Reflex Click Game

> 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.

- Difficulty: beginner
- Tags: useState, useEffect, game
- Estimated time: 45 minutes
- Tests: 8
- Requires subscription: yes

## 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

01. renders the app title
02. renders initially start button, score 0 and 'bg-slate-300' circle
03. click on start shows the circle and hides the start button
04. clicking the circle while red causes game over
05. after game over the start button appears again
06. clicking the circle when green increases score to 1
07. when time runs out shows game over
08. reaching win score shows You Win!