#39Color Game

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

1. Color Game
2. renders exactly 64 squares
3. increments level when clicking the correct square
4. shows Game Over when clicking an incorrect square
5. resets the game and returns level to 1
6. reset button keeps level at 1 if game has not progressed
7. changes the correct square color after leveling up
8. does not allow further clicks after Game Over
9. adds border-2 class to the correct square on Game Over