services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f7d22377faeda38e2952aa475f921e1e4f5d8893
mtg-online-drafter/docs/development/devlog/2025-12-16-201500_card_zoom.md

732 B
Raw Blame History

Card Zoom on Hover

Status

  • Add hoveredCard state to DraftView.
  • Implement onMouseEnter/onMouseLeave handlers for cards in both Pick and Pool areas.
  • rendering a fixed, high z-index preview of the hovered card.
  • Disable right-click context menu on Draft interface.

Implementation Details

  • File: src/client/src/modules/draft/DraftView.tsx
  • Zoom Component: A fixed div containing the large card image.
  • Position: Fixed to the left or right side of the screen (e.g., left-10 top-1/2 -translate-y-1/2) to avoid covering the grid being interacted with (which is usually centered).
  • Styling: Large size (e.g., w-80 or h-[500px]), shadow, border, rounded corners.