services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Conditionally render dragged card art crop and square aspect ratio for small sizes.

Browse Source
This commit is contained in:
Daniele Viti
2025-12-18 02:30:20 +01:00
parent b7e0d1479c
commit d27cc625e4
1 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/client/src/modules/draft/DeckBuilderView.tsx
View File

@@ -884,14 +884,21 @@ export const DeckBuilderView: React.FC<DeckBuilderViewProps> = ({ initialPool, a
</div>
<DragOverlay dropAnimation={null}>
{draggedCard ? (
{draggedCard ? (() => {
const useArtCrop = localCardWidth < 130 && !!draggedCard.imageArtCrop;
const displayImage = useArtCrop ? draggedCard.imageArtCrop : (draggedCard.image || draggedCard.image_uris?.normal);
// Default to square for crop, standard ratio otherwise
const aspectRatio = useArtCrop ? 'aspect-square' : 'aspect-[2.5/3.5]';
return (
<div
style={{ width: `${localCardWidth}px` }}
className={`rounded-xl shadow-2xl opacity-90 rotate-3 cursor-grabbing overflow-hidden ring-2 ring-emerald-500 bg-slate-900 aspect-[2.5/3.5]`}
className={`rounded-xl shadow-2xl opacity-90 rotate-3 cursor-grabbing overflow-hidden ring-2 ring-emerald-500 bg-slate-900 ${aspectRatio}`}
>
<img src={draggedCard.image || draggedCard.image_uris?.normal} alt={draggedCard.name} className="w-full h-full object-cover" draggable={false} />
<img src={displayImage} alt={draggedCard.name} className="w-full h-full object-cover" draggable={false} />
</div>
) : null}
);
})() : null}
</DragOverlay>
</DndContext>
</div>