Use React, TypeScript, and Tailwind.
Feel free to use any additional libraries, except for out-of-the-box deck/card dealing.
Please write tests.
The task is to build a simple card game. The designs are in Figma, you can see desktop and mobile pages. The fonts should be available in Google Fonts, but we also included them in assets if they ever take them down (has happened before). It doesn't have to be pixel perfect, but it should look nice.
Requirements
- Assuming a standard deck (52 cards of 4 suits: ♣ Clubs, ♦ Diamonds, ♥ Hearts, ♠ Spades).
- Press a "Deal" button to deal 5 random cards.
- Pressing the button again should deal 5 unique, random cards. Within the same game, you should never get the same cards again that you got in the past (just like a physical deck).
- Add a card counter which shows how many cards are left.
- Add an ace counter which shows how many aces are left. (this is not present in the designs at the time of this writing, you can do it the way it makes most sense to you, consistent with the designs)
- Add a button to reset the game.
- When all the aces have been dealt, "Game Over" should be displayed.
- If there is an ace in the last draw and there are no more cards left to deal, display "Winner", otherwise display "You Lose. Better luck next time!" Last draw means the last draw that is allowed, as there could be additional cards left to deal, but no aces.
Bonus!
- Animations. Wow us!
- Sounds
- Deploy to the web for us to play