icy-whot

byMuyiwa Zen

Build a fully playable classic Nigerian Whot card game as a React (HTML/CSS/JS) single-file app. **Game overview** Whot is a West African shedding card game similar to Crazy Eights. Players race to empty their hand by matching the top discard card by either shape or number. The first player to play all their cards wins the round. **Deck composition** The deck contains 54 cards across 5 suits: Circle, Triangle, Cross, Square, and Star. Each suit has cards numbered 1, 2, 3, 5, 7, 8, 10, 11, 12, 13, 14. There is also one special WHOT 20 card (can appear multiple times in a full deck). Deal 5 cards to each player; remaining cards form the draw pile with 1 card flipped face-up to start the discard pile. **Core rules** - On their turn a player must play a card that matches the top discard by suit OR by number. - If a player cannot play, they draw 1 card from the draw pile and their turn ends. - If the draw pile is empty, reshuffle the discard pile (keeping the top card) to form a new draw pile. - A player must announce "Last card!" when they have exactly 1 card remaining. - The first player to play all their cards wins the round. **Players:** 2 players (1 human vs 1 AI opponent) **AI difficulty:** The AI opponent plays randomly (easy mode). **Special cards** • WHOT 20: caller names any suit for the next play • Pick 2: next player draws 2 cards (stackable) • Pick 3: next player draws 3 cards • General Market: all other players draw 1 card • Hold On: skips the next player's turn **UI & features** Include animated card draw and play transitions, a scoreboard tracking wins across rounds, sound effects (shuffle, draw, play, win), **Code requirements** - Implement all game logic from scratch (no external game libraries). - Clearly separate game state, rendering, and AI logic into distinct functions or modules. - Include inline comments explaining non-obvious logic (special card handling, AI decisions). - Handle edge cases: empty draw pile, back-to-back specials, stacking Pick 2. - Show whose turn it is clearly; grey out or hide unplayable cards. - On win, display a result screen with the winner's name and a "Play again" button. Produce complete, runnable code with no placeholders.