Add user collection management and card face toggling in CardSearch and Collection components
This commit is contained in:
Matthieu
@@ -1,9 +1,12 @@
|
||||
import React, { useState } from 'react';
|
||||
import { searchCards } from '../services/api';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { RefreshCw, PackagePlus, Loader2, CheckCircle, XCircle, Trash2 } from 'lucide-react';
|
||||
import { searchCards, getUserCollection, addCardToCollection } from '../services/api';
|
||||
import { Card } from '../types';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import MagicCard from './MagicCard';
|
||||
|
||||
const CardSearch = () => {
|
||||
const { user } = useAuth();
|
||||
const [cardName, setCardName] = useState('');
|
||||
const [text, setText] = useState('');
|
||||
const [rulesText, setRulesText] = useState('');
|
||||
@@ -40,6 +43,85 @@ const CardSearch = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Collection state
|
||||
const [userCollection, setUserCollection] = useState<Map<string, number>>(new Map());
|
||||
const [addingCardId, setAddingCardId] = useState<string | null>(null);
|
||||
const [cardFaceIndex, setCardFaceIndex] = useState<Map<string, number>>(new Map());
|
||||
const [snackbar, setSnackbar] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
|
||||
|
||||
// Load user collection
|
||||
useEffect(() => {
|
||||
const loadUserCollection = async () => {
|
||||
if (!user) return;
|
||||
try {
|
||||
const collection = await getUserCollection(user.id);
|
||||
setUserCollection(collection);
|
||||
} catch (error) {
|
||||
console.error('Error loading user collection:', error);
|
||||
}
|
||||
};
|
||||
loadUserCollection();
|
||||
}, [user]);
|
||||
|
||||
// Helper function to check if a card has an actual back face
|
||||
const isDoubleFaced = (card: Card) => {
|
||||
const backFaceLayouts = ['transform', 'modal_dfc', 'double_faced_token', 'reversible_card'];
|
||||
return card.card_faces && card.card_faces.length > 1 && backFaceLayouts.includes(card.layout);
|
||||
};
|
||||
|
||||
// Get current face index for a card
|
||||
const getCurrentFaceIndex = (cardId: string) => {
|
||||
return cardFaceIndex.get(cardId) || 0;
|
||||
};
|
||||
|
||||
// Toggle card face
|
||||
const toggleCardFace = (cardId: string, totalFaces: number) => {
|
||||
setCardFaceIndex(prev => {
|
||||
const newMap = new Map(prev);
|
||||
const currentIndex = prev.get(cardId) || 0;
|
||||
const nextIndex = (currentIndex + 1) % totalFaces;
|
||||
newMap.set(cardId, nextIndex);
|
||||
return newMap;
|
||||
});
|
||||
};
|
||||
|
||||
// Get card image for current face
|
||||
const getCardImageUri = (card: Card, faceIndex: number = 0) => {
|
||||
if (isDoubleFaced(card) && card.card_faces) {
|
||||
return card.card_faces[faceIndex]?.image_uris?.normal || card.card_faces[faceIndex]?.image_uris?.small;
|
||||
}
|
||||
return card.image_uris?.normal || card.image_uris?.small || card.card_faces?.[0]?.image_uris?.normal;
|
||||
};
|
||||
|
||||
// Add card to collection
|
||||
const handleAddCardToCollection = async (cardId: string) => {
|
||||
if (!user) {
|
||||
setSnackbar({ message: 'Please log in to add cards to your collection', type: 'error' });
|
||||
setTimeout(() => setSnackbar(null), 3000);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setAddingCardId(cardId);
|
||||
await addCardToCollection(user.id, cardId, 1);
|
||||
|
||||
setUserCollection(prev => {
|
||||
const newMap = new Map(prev);
|
||||
const currentQty = newMap.get(cardId) || 0;
|
||||
newMap.set(cardId, currentQty + 1);
|
||||
return newMap;
|
||||
});
|
||||
|
||||
setSnackbar({ message: 'Card added to collection!', type: 'success' });
|
||||
} catch (error) {
|
||||
console.error('Error adding card to collection:', error);
|
||||
setSnackbar({ message: 'Failed to add card to collection', type: 'error' });
|
||||
} finally {
|
||||
setAddingCardId(null);
|
||||
setTimeout(() => setSnackbar(null), 3000);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
@@ -524,20 +606,109 @@ const CardSearch = () => {
|
||||
|
||||
{searchResults && searchResults.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
{searchResults.map((card) => (
|
||||
<div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden">
|
||||
<MagicCard card={card} />
|
||||
<div className="p-4">
|
||||
<h3 className="font-bold mb-2">{card.name}</h3>
|
||||
<p className="text-gray-400 text-sm">{card.type_line}</p>
|
||||
{searchResults.map((card) => {
|
||||
const currentFaceIndex = getCurrentFaceIndex(card.id);
|
||||
const isMultiFaced = isDoubleFaced(card);
|
||||
const inCollection = userCollection.get(card.id) || 0;
|
||||
const isAddingThisCard = addingCardId === card.id;
|
||||
|
||||
const displayName = isMultiFaced && card.card_faces
|
||||
? card.card_faces[currentFaceIndex]?.name || card.name
|
||||
: card.name;
|
||||
|
||||
return (
|
||||
<div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all">
|
||||
<div className="relative">
|
||||
{getCardImageUri(card, currentFaceIndex) ? (
|
||||
<img
|
||||
src={getCardImageUri(card, currentFaceIndex)}
|
||||
alt={displayName}
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
) : (
|
||||
<MagicCard card={card} />
|
||||
)}
|
||||
{isMultiFaced && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleCardFace(card.id, card.card_faces!.length);
|
||||
}}
|
||||
className="absolute bottom-2 right-2 bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-full shadow-lg transition-all"
|
||||
title="Flip card"
|
||||
>
|
||||
<RefreshCw size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="font-bold">{displayName}</h3>
|
||||
{inCollection > 0 && (
|
||||
<span className="text-xs bg-green-600 px-2 py-0.5 rounded-full flex items-center gap-1">
|
||||
<CheckCircle size={12} />
|
||||
x{inCollection}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm mb-3">
|
||||
{isMultiFaced && card.card_faces
|
||||
? card.card_faces[currentFaceIndex]?.type_line || card.type_line
|
||||
: card.type_line}
|
||||
</p>
|
||||
{card.prices?.usd && (
|
||||
<div className="text-sm text-gray-400 mb-2">${card.prices.usd}</div>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleAddCardToCollection(card.id)}
|
||||
disabled={isAddingThisCard}
|
||||
className="w-full px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2"
|
||||
title="Add to collection"
|
||||
>
|
||||
{isAddingThisCard ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin" size={20} />
|
||||
Adding...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PackagePlus size={20} />
|
||||
Add to Collection
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Snackbar */}
|
||||
{snackbar && (
|
||||
<div
|
||||
className={`fixed bottom-4 right-4 p-4 rounded-lg shadow-lg transition-all duration-300 ${
|
||||
snackbar.type === 'success' ? 'bg-green-500' : 'bg-red-500'
|
||||
} text-white z-50`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
{snackbar.type === 'success' ? (
|
||||
<CheckCircle className="mr-2" size={20} />
|
||||
) : (
|
||||
<XCircle className="mr-2" size={20} />
|
||||
)}
|
||||
<span>{snackbar.message}</span>
|
||||
</div>
|
||||
<button onClick={() => setSnackbar(null)} className="ml-4 text-gray-200 hover:text-white focus:outline-none">
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardSearch;
|
||||
export default CardSearch;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Search, Loader2, Trash2, CheckCircle, XCircle } from 'lucide-react';
|
||||
import { Search, Loader2, Trash2, CheckCircle, XCircle, RefreshCw } from 'lucide-react';
|
||||
import { Card } from '../types';
|
||||
import { getUserCollection, getCardsByIds } from '../services/api';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
@@ -11,8 +11,48 @@ export default function Collection() {
|
||||
const [filteredCollection, setFilteredCollection] = useState<{ card: Card; quantity: number }[]>([]);
|
||||
const [isLoadingCollection, setIsLoadingCollection] = useState(true);
|
||||
const [hoveredCard, setHoveredCard] = useState<Card | null>(null);
|
||||
const [cardFaceIndex, setCardFaceIndex] = useState<Map<string, number>>(new Map());
|
||||
const [snackbar, setSnackbar] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
|
||||
|
||||
// Helper function to check if a card has an actual back face (not adventure/split/etc)
|
||||
const isDoubleFaced = (card: Card) => {
|
||||
// Only show flip for cards with physical back sides
|
||||
const backFaceLayouts = ['transform', 'modal_dfc', 'double_faced_token', 'reversible_card'];
|
||||
return card.card_faces && card.card_faces.length > 1 && backFaceLayouts.includes(card.layout);
|
||||
};
|
||||
|
||||
// Helper function to get the current face index for a card
|
||||
const getCurrentFaceIndex = (cardId: string) => {
|
||||
return cardFaceIndex.get(cardId) || 0;
|
||||
};
|
||||
|
||||
// Helper function to get the image URI for a card (handling both single and double-faced)
|
||||
const getCardImageUri = (card: Card, faceIndex: number = 0) => {
|
||||
if (isDoubleFaced(card) && card.card_faces) {
|
||||
return card.card_faces[faceIndex]?.image_uris?.normal || card.card_faces[faceIndex]?.image_uris?.small;
|
||||
}
|
||||
return card.image_uris?.normal || card.image_uris?.small;
|
||||
};
|
||||
|
||||
// Helper function to get the large image URI for hover preview
|
||||
const getCardLargeImageUri = (card: Card, faceIndex: number = 0) => {
|
||||
if (isDoubleFaced(card) && card.card_faces) {
|
||||
return card.card_faces[faceIndex]?.image_uris?.large || card.card_faces[faceIndex]?.image_uris?.normal;
|
||||
}
|
||||
return card.image_uris?.large || card.image_uris?.normal;
|
||||
};
|
||||
|
||||
// Toggle card face
|
||||
const toggleCardFace = (cardId: string, totalFaces: number) => {
|
||||
setCardFaceIndex(prev => {
|
||||
const newMap = new Map(prev);
|
||||
const currentIndex = prev.get(cardId) || 0;
|
||||
const nextIndex = (currentIndex + 1) % totalFaces;
|
||||
newMap.set(cardId, nextIndex);
|
||||
return newMap;
|
||||
});
|
||||
};
|
||||
|
||||
// Load user's collection from Supabase on mount
|
||||
useEffect(() => {
|
||||
const loadCollection = async () => {
|
||||
@@ -115,63 +155,103 @@ export default function Collection() {
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-3">
|
||||
{filteredCollection.map(({ card, quantity }) => (
|
||||
<div
|
||||
key={card.id}
|
||||
className="relative group cursor-pointer"
|
||||
onMouseEnter={() => setHoveredCard(card)}
|
||||
onMouseLeave={() => setHoveredCard(null)}
|
||||
>
|
||||
{/* Small card thumbnail */}
|
||||
<div className="relative rounded-lg overflow-hidden shadow-lg transition-all group-hover:ring-2 group-hover:ring-blue-500">
|
||||
<img
|
||||
src={card.image_uris?.normal || card.image_uris?.small}
|
||||
alt={card.name}
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
{/* Quantity badge */}
|
||||
<div className="absolute top-1 right-1 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
|
||||
x{quantity}
|
||||
{filteredCollection.map(({ card, quantity }) => {
|
||||
const currentFaceIndex = getCurrentFaceIndex(card.id);
|
||||
const isMultiFaced = isDoubleFaced(card);
|
||||
const displayName = isMultiFaced && card.card_faces
|
||||
? card.card_faces[currentFaceIndex]?.name || card.name
|
||||
: card.name;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={card.id}
|
||||
className="relative group cursor-pointer"
|
||||
onMouseEnter={() => setHoveredCard(card)}
|
||||
onMouseLeave={() => setHoveredCard(null)}
|
||||
>
|
||||
{/* Small card thumbnail */}
|
||||
<div className="relative rounded-lg overflow-hidden shadow-lg transition-all group-hover:ring-2 group-hover:ring-blue-500">
|
||||
<img
|
||||
src={getCardImageUri(card, currentFaceIndex)}
|
||||
alt={displayName}
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
{/* Quantity badge */}
|
||||
<div className="absolute top-1 right-1 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
|
||||
x{quantity}
|
||||
</div>
|
||||
{/* Flip button for double-faced cards */}
|
||||
{isMultiFaced && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleCardFace(card.id, card.card_faces!.length);
|
||||
}}
|
||||
className="absolute bottom-1 right-1 bg-purple-600 hover:bg-purple-700 text-white p-1 rounded-full shadow-lg transition-all"
|
||||
title="Flip card"
|
||||
>
|
||||
<RefreshCw size={12} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Card name below thumbnail */}
|
||||
<div className="mt-1 text-xs text-center truncate px-1">
|
||||
{displayName}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card name below thumbnail */}
|
||||
<div className="mt-1 text-xs text-center truncate px-1">
|
||||
{card.name}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hover Card Preview */}
|
||||
{hoveredCard && (
|
||||
<div className="fixed top-1/2 right-8 transform -translate-y-1/2 z-50 pointer-events-none">
|
||||
<div className="bg-gray-800 rounded-lg shadow-2xl p-4 max-w-md">
|
||||
<img
|
||||
src={hoveredCard.image_uris?.large || hoveredCard.image_uris?.normal}
|
||||
alt={hoveredCard.name}
|
||||
className="w-full h-auto rounded-lg shadow-lg"
|
||||
/>
|
||||
<div className="mt-3 space-y-2">
|
||||
<h3 className="text-xl font-bold">{hoveredCard.name}</h3>
|
||||
<p className="text-sm text-gray-400">{hoveredCard.type_line}</p>
|
||||
{hoveredCard.oracle_text && (
|
||||
<p className="text-sm text-gray-300 border-t border-gray-700 pt-2">
|
||||
{hoveredCard.oracle_text}
|
||||
</p>
|
||||
)}
|
||||
{hoveredCard.prices?.usd && (
|
||||
<div className="text-sm text-green-400 font-semibold border-t border-gray-700 pt-2">
|
||||
${hoveredCard.prices.usd}
|
||||
</div>
|
||||
)}
|
||||
{hoveredCard && (() => {
|
||||
const currentFaceIndex = getCurrentFaceIndex(hoveredCard.id);
|
||||
const isMultiFaced = isDoubleFaced(hoveredCard);
|
||||
const currentFace = isMultiFaced && hoveredCard.card_faces
|
||||
? hoveredCard.card_faces[currentFaceIndex]
|
||||
: null;
|
||||
|
||||
const displayName = currentFace?.name || hoveredCard.name;
|
||||
const displayTypeLine = currentFace?.type_line || hoveredCard.type_line;
|
||||
const displayOracleText = currentFace?.oracle_text || hoveredCard.oracle_text;
|
||||
|
||||
return (
|
||||
<div className="fixed top-1/2 right-8 transform -translate-y-1/2 z-50 pointer-events-none">
|
||||
<div className="bg-gray-800 rounded-lg shadow-2xl p-4 max-w-md">
|
||||
<div className="relative">
|
||||
<img
|
||||
src={getCardLargeImageUri(hoveredCard, currentFaceIndex)}
|
||||
alt={displayName}
|
||||
className="w-full h-auto rounded-lg shadow-lg"
|
||||
/>
|
||||
{isMultiFaced && (
|
||||
<div className="absolute top-2 right-2 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
|
||||
Face {currentFaceIndex + 1}/{hoveredCard.card_faces!.length}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-3 space-y-2">
|
||||
<h3 className="text-xl font-bold">{displayName}</h3>
|
||||
<p className="text-sm text-gray-400">{displayTypeLine}</p>
|
||||
{displayOracleText && (
|
||||
<p className="text-sm text-gray-300 border-t border-gray-700 pt-2">
|
||||
{displayOracleText}
|
||||
</p>
|
||||
)}
|
||||
{hoveredCard.prices?.usd && (
|
||||
<div className="text-sm text-green-400 font-semibold border-t border-gray-700 pt-2">
|
||||
${hoveredCard.prices.usd}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* Snackbar */}
|
||||
{snackbar && (
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Plus, Search, Save, Trash2, Loader2, CheckCircle, XCircle, AlertCircle, PackagePlus } from 'lucide-react';
|
||||
import { Plus, Search, Save, Trash2, Loader2, CheckCircle, XCircle, AlertCircle, PackagePlus, RefreshCw } from 'lucide-react';
|
||||
import { Card, Deck } from '../types';
|
||||
import { searchCards, getUserCollection, addCardToCollection, addMultipleCardsToCollection } from '../services/api';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
@@ -120,6 +120,7 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
|
||||
const [isLoadingCollection, setIsLoadingCollection] = useState(true);
|
||||
const [addingCardId, setAddingCardId] = useState<string | null>(null);
|
||||
const [isAddingAll, setIsAddingAll] = useState(false);
|
||||
const [cardFaceIndex, setCardFaceIndex] = useState<Map<string, number>>(new Map());
|
||||
|
||||
// Load user collection on component mount
|
||||
useEffect(() => {
|
||||
@@ -141,6 +142,33 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
|
||||
loadUserCollection();
|
||||
}, [user]);
|
||||
|
||||
// Helper functions for double-faced cards
|
||||
const isDoubleFaced = (card: Card) => {
|
||||
const backFaceLayouts = ['transform', 'modal_dfc', 'double_faced_token', 'reversible_card'];
|
||||
return card.card_faces && card.card_faces.length > 1 && backFaceLayouts.includes(card.layout);
|
||||
};
|
||||
|
||||
const getCurrentFaceIndex = (cardId: string) => {
|
||||
return cardFaceIndex.get(cardId) || 0;
|
||||
};
|
||||
|
||||
const toggleCardFace = (cardId: string, totalFaces: number) => {
|
||||
setCardFaceIndex(prev => {
|
||||
const newMap = new Map(prev);
|
||||
const currentIndex = prev.get(cardId) || 0;
|
||||
const nextIndex = (currentIndex + 1) % totalFaces;
|
||||
newMap.set(cardId, nextIndex);
|
||||
return newMap;
|
||||
});
|
||||
};
|
||||
|
||||
const getCardImageUri = (card: Card, faceIndex: number = 0) => {
|
||||
if (isDoubleFaced(card) && card.card_faces) {
|
||||
return card.card_faces[faceIndex]?.image_uris?.normal || card.card_faces[faceIndex]?.image_uris?.small;
|
||||
}
|
||||
return card.image_uris?.normal || card.image_uris?.small || card.card_faces?.[0]?.image_uris?.normal;
|
||||
};
|
||||
|
||||
// Helper function to check if a card is in the collection
|
||||
const isCardInCollection = (cardId: string, requiredQuantity: number = 1): boolean => {
|
||||
const ownedQuantity = userCollection.get(cardId) || 0;
|
||||
@@ -491,24 +519,82 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
|
||||
</form>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||
{searchResults.map(card => (
|
||||
<div
|
||||
key={card.id}
|
||||
className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all"
|
||||
>
|
||||
<MagicCard card={card} />
|
||||
<div className="p-4">
|
||||
<h3 className="font-bold mb-2">{card.name}</h3>
|
||||
<button
|
||||
onClick={() => addCardToDeck(card)}
|
||||
className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2"
|
||||
>
|
||||
<Plus size={20} />
|
||||
Add to Deck
|
||||
</button>
|
||||
{searchResults.map(card => {
|
||||
const currentFaceIndex = getCurrentFaceIndex(card.id);
|
||||
const isMultiFaced = isDoubleFaced(card);
|
||||
const inCollection = userCollection.get(card.id) || 0;
|
||||
const isAddingThisCard = addingCardId === card.id;
|
||||
|
||||
const displayName = isMultiFaced && card.card_faces
|
||||
? card.card_faces[currentFaceIndex]?.name || card.name
|
||||
: card.name;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={card.id}
|
||||
className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all"
|
||||
>
|
||||
<div className="relative">
|
||||
{getCardImageUri(card, currentFaceIndex) ? (
|
||||
<img
|
||||
src={getCardImageUri(card, currentFaceIndex)}
|
||||
alt={displayName}
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
) : (
|
||||
<MagicCard card={card} />
|
||||
)}
|
||||
{isMultiFaced && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleCardFace(card.id, card.card_faces!.length);
|
||||
}}
|
||||
className="absolute bottom-2 right-2 bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-full shadow-lg transition-all"
|
||||
title="Flip card"
|
||||
>
|
||||
<RefreshCw size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="font-bold">{displayName}</h3>
|
||||
{inCollection > 0 && (
|
||||
<span className="text-xs bg-green-600 px-2 py-0.5 rounded-full flex items-center gap-1">
|
||||
<CheckCircle size={12} />
|
||||
x{inCollection}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{card.prices?.usd && (
|
||||
<div className="text-sm text-gray-400 mb-2">${card.prices.usd}</div>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => addCardToDeck(card)}
|
||||
className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2"
|
||||
>
|
||||
<Plus size={20} />
|
||||
Add to Deck
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleAddCardToCollection(card.id, 1)}
|
||||
disabled={isAddingThisCard}
|
||||
className="px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2"
|
||||
title="Add to collection"
|
||||
>
|
||||
{isAddingThisCard ? (
|
||||
<Loader2 className="animate-spin" size={20} />
|
||||
) : (
|
||||
<PackagePlus size={20} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -6,11 +6,14 @@ interface MagicCardProps {
|
||||
}
|
||||
|
||||
const MagicCard = ({ card }: MagicCardProps) => {
|
||||
// Handle both regular cards and double-faced cards (transform, modal_dfc, etc)
|
||||
const imageUri = card.image_uris?.normal || card.card_faces?.[0]?.image_uris?.normal;
|
||||
|
||||
return (
|
||||
<div className="relative card-hover animate-fade-in">
|
||||
{card.image_uris?.normal ? (
|
||||
{imageUri ? (
|
||||
<img
|
||||
src={card.image_uris.normal}
|
||||
src={imageUri}
|
||||
alt={card.name}
|
||||
className="w-full h-auto rounded-lg transition-smooth"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user