Add complete Texas Hold'em poker gameplay including: - Pure function game engine (deck, dealing, betting, showdown) - Hand evaluator supporting all 10 poker hand ranks - Animated card components with 3D flip transitions - CSS Grid oval poker table layout for up to 9 seats - Player seat components with chip tracking and turn indicators - Bet controls with conditional button visibility - Basic AI opponents with random valid action selection - Turn advancement, all-in auto-advance, and dealer rotation Sync delta specs to main specs: poker-table, card-components, game-engine, player-state.
2.3 KiB
2.3 KiB
ADDED Requirements
Requirement: Card face rendering
The card component SHALL display the card's rank and suit symbol with correct color (red for hearts/diamonds, black for spades/clubs).
Scenario: Red suit cards displayed correctly
- WHEN a card has a heart or diamond suit
- THEN the rank and suit symbol render in red color
Scenario: Black suit cards displayed correctly
- WHEN a card has a spade or club suit
- THEN the rank and suit symbol render in black color
Requirement: Card flip animation
The card component SHALL support a flipped state that hides the card face using a 3D CSS rotation animation.
Scenario: Card starts face-down
- WHEN a card is dealt to a player before reveal
- THEN the card shows its back pattern and the face is hidden via CSS
rotateY(180deg)transform
Scenario: Card flips to reveal face
- WHEN the flip state changes from false to true
- THEN the card animates with a smooth rotation transition to show the face
Scenario: Card flips back to hidden
- WHEN the flip state changes from true to false
- THEN the card animates with a smooth rotation transition to hide the face
Requirement: Deal animation
Cards dealt during the dealing phase SHALL animate from the dealer position to their final position using Svelte's flip() spring animation.
Scenario: Hole cards animate on deal
- WHEN hole cards are dealt at the start of a hand
- THEN each card animates from a central dealer position to its target seat using a spring-based flip transition
Requirement: Card hover effect
The card component SHALL provide a visual hover effect (e.g., slight scale increase or shadow) when the user hovers over an active card.
Scenario: Hover effect on valid cards
- WHEN the user hovers over their own visible hole card during their turn
- THEN the card displays a subtle elevation effect via CSS transition
Requirement: Card dimensions and styling
All card instances SHALL use consistent dimensions (width, height, border-radius) defined by CSS custom properties.
Scenario: Consistent card sizing
- WHEN multiple cards are rendered in different areas of the table
- THEN all cards share the same width, height, and border-radius values from shared CSS custom properties