From ca2efb5cd7e2dccb6381b238525272a643484ef6 Mon Sep 17 00:00:00 2001 From: dnviti Date: Wed, 17 Dec 2025 01:34:57 +0100 Subject: [PATCH] feat: Synchronize art crop display threshold to 200px and enforce square aspect ratio for art crop thumbnails in grid and stack views. --- docs/development/CENTRAL.md | 2 ++ .../2025-12-17-030000_synchronized_boundaries.md | 13 +++++++++++++ .../2025-12-17-030500_squared_art_crops.md | 16 ++++++++++++++++ src/client/src/components/PackCard.tsx | 4 ++-- src/client/src/components/StackView.tsx | 6 +++--- 5 files changed, 36 insertions(+), 5 deletions(-) create mode 100644 docs/development/devlog/2025-12-17-030000_synchronized_boundaries.md create mode 100644 docs/development/devlog/2025-12-17-030500_squared_art_crops.md diff --git a/docs/development/CENTRAL.md b/docs/development/CENTRAL.md index 8e92e78..4909317 100644 --- a/docs/development/CENTRAL.md +++ b/docs/development/CENTRAL.md @@ -61,3 +61,5 @@ - [Dynamic Art Cropping](./devlog/2025-12-17-024500_dynamic_art_cropping.md): Completed. Implemented automatic switching to full-art/art-crop images when card size is reduced below readability threshold. - [Refined Preview Suppression](./devlog/2025-12-17-025000_refined_preview_suppression.md): Completed. Adjusted suppression threshold to 200px to better support Stack View's pop-up behavior. - [Explicit Preview Suppression](./devlog/2025-12-17-025500_explicit_preview_suppression.md): Completed. Implemented strict `preventPreview` prop to enforce suppression logic reliably regardless of card overlap or DOM state. +- [Synchronized Display Boundaries](./devlog/2025-12-17-030000_synchronized_boundaries.md): Completed. Aligned "Art Crop" and "Preview Suppression" thresholds to 200px (50% slider value) for a unified UI behavior. +- [Squared Art Crops](./devlog/2025-12-17-030500_squared_art_crops.md): Completed. Enforced square aspect ratio for art-crop thumbnails to optimize visual density and stacking. diff --git a/docs/development/devlog/2025-12-17-030000_synchronized_boundaries.md b/docs/development/devlog/2025-12-17-030000_synchronized_boundaries.md new file mode 100644 index 0000000..5c9e7af --- /dev/null +++ b/docs/development/devlog/2025-12-17-030000_synchronized_boundaries.md @@ -0,0 +1,13 @@ +# Synchronized Display Boundaries + +## Objective +Harmonize the "Full Art" visualization mode with the specific behavior of the slider and preview suppression logic. + +## Changes +- **Threshold Update**: Shifted the trigger point for Art Crop visualization (full art thumbnails) from `170px` to **`200px`**. + - This corresponds to exactly **50% of the slider range** (100px-300px), creating a predictable user interface boundary. + - **< 200px**: Cards display as **Art Crops (Full Art)** because text would be illegible. **Hover Preview is Enabled** to show the card details. + - **>= 200px**: Cards display as **Standard Scryfall Images** (with borders/text) because text is legible. **Hover Preview is Disabled** to prevent redundancy, as the card itself acts as the reference. + +## Result +A unified "Pivot Point" at 200px. Sliding left gives you a dense, artistic mosaic with helpful popups. Sliding right gives you a readable, "tabletop" view with direct card interaction and no popup clutter. diff --git a/docs/development/devlog/2025-12-17-030500_squared_art_crops.md b/docs/development/devlog/2025-12-17-030500_squared_art_crops.md new file mode 100644 index 0000000..1123984 --- /dev/null +++ b/docs/development/devlog/2025-12-17-030500_squared_art_crops.md @@ -0,0 +1,16 @@ +# Squared Art Crops + +## Objective +Optimize the "Full Art" display mode by switching from a rectangular card ratio to a square ratio. This focuses the view on the artwork itself (which is typically landscape/square-ish in crops) and provides a more compact, tile-like aesthetic for small thumbnails. + +## Changes +- **Grid View (`PackCard`)**: + - Dynamically switches CSS classes: uses `aspect-square` when in Art Crop mode (<200px), and `aspect-[2.5/3.5]` (standard card ratio) otherwise. + - Creates a uniform grid of square tiles for the visual overview. +- **Stack View (`StackView`)**: + - Dynamically adjusts inline styles: + - `aspectRatio`: Switches between `'1/1'` and `'2.5/3.5'`. + - `marginBottom` (for stacking overlap): Adjusted from `-125%` (for tall rectangles) to `-85%` (for squares) to maintain a consistent visible "header strip" for cards underneath. + +## Result +When you slide the size down, the cards now morph into neat square tiles. This maximizes the art visibility within the small space and makes the "mosaic" feel even more deliberate and organized. diff --git a/src/client/src/components/PackCard.tsx b/src/client/src/components/PackCard.tsx index b640f25..9ebfb66 100644 --- a/src/client/src/components/PackCard.tsx +++ b/src/client/src/components/PackCard.tsx @@ -100,14 +100,14 @@ export const PackCard: React.FC = ({ pack, viewMode, cardWidth = {viewMode === 'grid' && (
{pack.cards.map((card) => { - const useArtCrop = cardWidth < 170 && !!card.imageArtCrop; + const useArtCrop = cardWidth < 200 && !!card.imageArtCrop; const displayImage = useArtCrop ? card.imageArtCrop : card.image; return ( = 200}>
{/* Visual Card */} -
+
{isFoil(card) && } {isFoil(card) &&
FOIL
} diff --git a/src/client/src/components/StackView.tsx b/src/client/src/components/StackView.tsx index 857d4e7..993b969 100644 --- a/src/client/src/components/StackView.tsx +++ b/src/client/src/components/StackView.tsx @@ -73,7 +73,7 @@ export const StackView: React.FC = ({ cards, cardWidth = 150 }) // Margin calculation: Negative margin to pull up next cards. // To show a "strip" of say 35px at the top of each card. const isLast = index === catCards.length - 1; - const useArtCrop = cardWidth < 170 && !!card.imageArtCrop; + const useArtCrop = cardWidth < 200 && !!card.imageArtCrop; const displayImage = useArtCrop ? card.imageArtCrop : card.image; return ( @@ -83,8 +83,8 @@ export const StackView: React.FC = ({ cards, cardWidth = 150 }) style={{ // Aspect ratio is maintained by image or div dimensions // With overlap, we just render them one after another with negative margin - marginBottom: isLast ? '0' : '-125%', // Negative margin to show header - aspectRatio: '2.5/3.5' + marginBottom: isLast ? '0' : (useArtCrop ? '-85%' : '-125%'), // Negative margin to show header. Square cards need less negative margin. + aspectRatio: useArtCrop ? '1/1' : '2.5/3.5' }} > {card.name}