matthieu/deckerr
1
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add card art crop functionality and update Card interface for better image handling

Browse Source
This commit is contained in:
Matthieu
2025-11-24 17:44:43 +01:00
parent a7681357b5
commit 304676a06b
2 changed files with 31 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/CardSearch.tsx
View File

@@ -94,6 +94,14 @@ const CardSearch = () => {
return card.image_uris?.normal || card.image_uris?.small || card.card_faces?.[0]?.image_uris?.normal;
};
// Get card art crop for current face
const getCardArtCrop = (card: Card, faceIndex: number = 0) => {
if (isDoubleFaced(card) && card.card_faces) {
return card.card_faces[faceIndex]?.image_uris?.art_crop || card.card_faces[faceIndex]?.image_uris?.normal;
}
return card.image_uris?.art_crop || card.image_uris?.normal || card.card_faces?.[0]?.image_uris?.art_crop;
};
// Add card to collection
const handleAddCardToCollection = async (cardId: string) => {
if (!user) {
@@ -632,12 +640,12 @@ const CardSearch = () => {
return (
<div key={card.id} className="flex bg-gray-800 rounded-lg overflow-hidden">
{/* Card image */}
<div className="relative w-16 flex-shrink-0">
{/* Card art crop */}
<div className="relative w-16 h-16 flex-shrink-0">
<img
src={getCardImageUri(card, currentFaceIndex)}
src={getCardArtCrop(card, currentFaceIndex)}
alt={displayName}
className="w-full h-full object-cover"
className="w-full h-full object-cover rounded-l-lg"
/>
{isMultiFaced && (
<button

23
src/types/index.ts
View File

@@ -5,13 +5,28 @@ export interface User {
themeColor: 'red' | 'green' | 'blue' | 'yellow' | 'grey' | 'purple';
}
export interface CardImageUris {
small?: string;
normal?: string;
large?: string;
art_crop?: string;
border_crop?: string;
png?: string;
}
export interface CardFace {
name?: string;
mana_cost?: string;
type_line?: string;
oracle_text?: string;
image_uris?: CardImageUris;
}
export interface Card {
id: string;
name: string;
image_uris?: {
normal: string;
art_crop: string;
};
image_uris?: CardImageUris;
card_faces?: CardFace[];
mana_cost?: string;
type_line?: string;
oracle_text?: string;