services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
db601048d94ddc2c62113ecbc243119fc2f338ef
mtg-online-drafter/docs/development/devlog/2025-12-17-183500_draft_ui_upgrade.md
dnviti 3936260861
Some checks failed
Build and Deploy / build (push) Failing after 52s
Details
feat: Implement 3D flip card preview with foil effects in Draft View and add hover preview control to StackView.
2025-12-17 18:35:57 +01:00

1.1 KiB
Raw Blame History

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.