# Color Game

> Build a simple React color-guessing game where you identify the slightly different square to level up before making a mistake.

- Difficulty: intermediate
- Tags: useState, game
- Estimated time: 45 minutes
- Tests: 9
- Requires subscription: yes

## Overview

Build a simple React color-guessing game where you identify the slightly different square to level up before making a mistake.


## Requirements

- Each square should have a **base color** generated with `getRandomColor()`.
- One square per level should have a **slightly different color** calculated with `getSimilarColor(baseColor, deviation)`.
- Track the **current level** starting at 1 and display it.
- Clicking the **correct square**:
  - Increases the level by 1.
  - Generates a **new random base color**.
  - Generates a **new deviation color** for the correct square.
  - Randomly chooses a new **correct square**.
- Clicking an **incorrect square**:
  - Ends the game, shows **Game Over**
  - Highlights the correct square with the `border-2` class.
- Implement a **Reset Game** button that:
  - Resets the level to 1.
  - Generates a new base color and deviation color.
  - Chooses a new correct square.
  - Hides the Game Over message.
- Ensure **game state is blocked** after Game Over until reset.
- Use the provided functions:
  - `getRandomColor()` – generates a random color.
  - `getRandomNumber()` – generates a random number from 0 to 63.
  - `getSimilarColor(color, deviation)` – generates a color slightly different from the given one.


## Notes

- Remember to **update both colors and the correct square** whenever the player clicks the correct square.
- When resetting the game, ensure you **generate a new color and correct square**; do not reuse the old values.
- Keep the **data-testid** attributes, as the tests depend on them.
- Remember that **state updates are asynchronous**, so handle them carefully.
- The functions `getRandomColor`, `getRandomNumber`, and `getSimilarColor` are **already provided**, so focus only on wiring the game logic.


## Tests

01. Color Game
02. renders exactly 64 squares
03. increments level when clicking the correct square
04. shows Game Over when clicking an incorrect square
05. resets the game and returns level to 1
06. reset button keeps level at 1 if game has not progressed
07. changes the correct square color after leveling up
08. does not allow further clicks after Game Over
09. adds border-2 class to the correct square on Game Over