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 @@
# Restore Hover Magnified Card for Stack View
## Task
Restore the hover magnified card functionality for the stacked view in the pack generation UI, while ensuring it remains disabled for the deck building UI.
## Changes
- Modified `src/client/src/components/StackView.tsx`:
- Imported `CardHoverWrapper`.
- Added `disableHoverPreview` prop (default `false`).
- Wrapped card elements with `CardHoverWrapper`, passing `preventPreview` based on the new prop and card width.
- Modified `src/client/src/modules/draft/DeckBuilderView.tsx`:
- Passed `disableHoverPreview={true}` to `StackView` to maintain existing behavior for the deck builder (which uses a dedicated sidebar preview).
## Outcome
- Pack Generation UI (Cube Manager) now shows floating previews for cards in Stack View.
- Deck Builder UI remains unchanged (no double previews).

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.

View File

@@ -0,0 +1,13 @@
# Fix Draft UI Issues
## Task
Fix bugs in the Draft Pick UI related to the "Your Pool" section.
## Changes
- Modified `src/client/src/modules/draft/DraftView.tsx`:
- **Resize Handle Fix**: Updated the resize event listeners (`mousemove`, `mouseup`) to be attached to `document` instead of `window`. This ensures the resize action continues smoothly even if the mouse leaves the browser window or moves rapidly over iframes/other elements that might swallow events.
- **Remove Hover Effect**: Removed the `hover:-translate-y-10` class from the drafted card items in the bottom pool view. The cards will now remain stationary on hover, as requested.
## Outcome
- The pool resizing experience is now consistent and does not lose focus when dragging quickly.
- Cards in the "Your Pool" strip no longer jump up when hovered, providing a stable viewing experience.