services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
845f83086fd754f98824ac09662083a43bbbf1eb
mtg-online-drafter/docs/development/devlog/2025-12-17-024500_dynamic_art_cropping.md

1.2 KiB
Raw Blame History

Dynamic Art Cropping

Objective

Automatically switch card visualizations to "Full Art" (Art Crop) mode when the thumbnail size is reduced below a readability threshold, maximizing the visual impact of the artwork when text is too small to read.

Changes

  • Backend (Client & Server):
    • Updated DraftCard interface to include imageArtCrop.
    • Modified parsing services (PackGeneratorService) to extract and populate imageArtCrop from Scryfall data.
  • Frontend (UI):
    • PackCard (Grid View): Implemented a conditional check: if cardWidth < 170px, the image source switches to imageArtCrop.
    • StackView (Deck/Collection): Applied the same logic.
  • Visuals:
    • The object-cover CSS property ensures the rectangular art crop fills the entire card frame, creating a "borderless/full-art" look.
    • The Foil Overlay and Rarity Stripe remain visible on top of the art crop, maintaining game state clarity.

Result

As you slide the size slider down, the cards seamlessly transform from standard cards (with borders and text) to vibrant, full-art thumbnails. This creates a stunning "mosaic" effect for the cube overview and deck stacks, solving the issue of illegible text at small scales.