feat: Implement 3D flip card preview with foil effects in Draft View and add hover preview control to StackView.
Some checks failed
Build and Deploy / build (push) Failing after 52s

This commit is contained in:
2025-12-17 18:35:57 +01:00
parent 2869c35885
commit 3936260861
7 changed files with 167 additions and 55 deletions

View File

@@ -0,0 +1,16 @@
# Draft Cards Picker UI Update
## Task
Update the `DraftView` to implement a 3D-flipping card preview sidebar (consistent with the Deck Builder) and ensure foil cards are rendered correctly in both the preview and the main selection grid.
## Changes
- Modified `src/client/src/modules/draft/DraftView.tsx`:
- Imported `FoilOverlay` component.
- Defined `normalizeCard` helper to standardise card object structure (handling images and finish).
- Added `displayCard` state to persist card details during the flip animation.
- Replaced the previous fade-in sidebar with the 3D perspective flip container from `DeckBuilderView`.
- Updated the card rendering loop in `activePack` to use `normalizeCard` and conditionally render `FoilOverlay` and foil-specific styles (purple glow, badges).
## Outcome
- **Sidebar**: Now features a persistent 3D flip animation. When hovering a card, it flips to show the front; when not hovering, it shows the card back (`/images/back.jpg`).
- **Foil Support**: Start using `FoilOverlay` for both the main draft grid and the sidebar preview, providing visual consistency for premium cards.