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

@@ -84,4 +84,7 @@
- [Gameplay Magnified View & Timeout](./devlog/2025-12-17-161500_gameplay_magnified_view_and_timeout.md): Completed. Added magnified view with full card details (Oracle text, type, mana) to gameplay and disabled timeout.
- [Test Deck Feature](./devlog/2025-12-17-162500_test_deck_feature.md): Completed. Implemented "Test Solo" button in Cube Manager to instantly start a solo game with a randomized deck from generated packs.
- [Update Deck Auto-Fill](./devlog/2025-12-17-165500_update_deck_autofill.md): Completed. Updated deck builder "Auto-Fill" to add lands as individual cards to the deck list for easier management.
- [2025-12-17-183000_restore_stack_hover](./devlog/2025-12-17-183000_restore_stack_hover.md): Completed. Restored hover magnified card for Stack View in Pack Generation.
- [2025-12-17-183500_draft_ui_upgrade](./devlog/2025-12-17-183500_draft_ui_upgrade.md): Completed. Implemented 3D flip preview and consistent foil rendering in Draft View.
- [2025-12-17-184000_fix_draft_pool_ui](./devlog/2025-12-17-184000_fix_draft_pool_ui.md): Completed. Fixed "Your Pool" resizing bugs and removed unwanted hover animation.
- [Customizable Deck Builder Layout](./devlog/2025-12-17-170000_customizable_deck_builder.md): Completed. Implemented switchable Vertical (Side-by-Side) and Horizontal (Top-Bottom) layouts, with an integrated, improved Land Station.

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.