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.
49 lines
2.3 KiB
Markdown
49 lines
2.3 KiB
Markdown
## 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
|