# Memory Card Game

> Create a memory card game where cards are hidden, can be flipped to reveal matches, and track user clicks.

- Difficulty: intermediate
- Tags: useState, game
- Estimated time: 60 minutes
- Tests: 6
- Requires subscription: yes

## Overview

Create a memory card game where cards are hidden, can be flipped to reveal matches, and track user clicks.


## Requirements

- Display a grid of hidden cards.
- Shuffle the cards at the start of each new game.
- Clicking a card reveals its content.
- If two revealed cards match, keep them visible as matched.
- If two revealed cards do not match, hide them again after 1 second.
- Prevent clicking a third card while two non-matching cards are visible.
- Include a reset button that hides all cards and resets the click counter.
- Display the total number of clicks in the UI.
- Add `aria-labels`s 'Card visible' and 'Card hidden'


## Notes

- Focus on managing the state of each card (hidden, revealed, matched).
- Think about how to track clicks and update the counter as the user interacts.
- Handle the timing of hiding non-matching cards carefully to avoid race conditions.
- Make sure the UI updates correctly when the game is reset.
- Tests check aria-labels, so make sure to add them.


## Tests

01. renders all cards hidden initially
02. clicking a card shows it
03. matching cards remain visible and matched
04. non-matching cards hide after 1 second
05. cannot click a third card while two non-matching cards are visible
06. reset button hides all cards and resets clicks