8bacbaca39
Resolve react-hooks, no-unescaped-entities, and no-img-element findings under pages/ with lint-only changes so npx eslint pages/ exits clean. Co-authored-by: Cursor <cursoragent@cursor.com>
829 lines
No EOL
36 KiB
JavaScript
829 lines
No EOL
36 KiB
JavaScript
/* eslint-disable @next/next/no-img-element -- External or generated image URLs; next/image migration is out of scope. */
|
||
import { useState, useEffect, useRef } from 'react';
|
||
import { useRouter } from 'next/router';
|
||
import Link from 'next/link';
|
||
import Layout from '../components/Layout';
|
||
import { ManaCost, ColorIdentity, ColorFilterSymbol } from '../components/ManaSymbols';
|
||
import ManaSymbolSettings from '../components/ManaSymbolSettings';
|
||
import { useAuth } from '../lib/use-auth';
|
||
import { getColorIdentity, getColorSymbol } from '../lib/mana-symbols';
|
||
|
||
export default function DeckBuilder() {
|
||
const { user } = useAuth();
|
||
const router = useRouter();
|
||
const { deck: deckId } = router.query;
|
||
|
||
const [deck, setDeck] = useState(null);
|
||
const [deckCards, setDeckCards] = useState([]);
|
||
const [searchResults, setSearchResults] = useState([]);
|
||
const [searchQuery, setSearchQuery] = useState('');
|
||
const [loading, setLoading] = useState(true);
|
||
const [searchLoading, setSearchLoading] = useState(false);
|
||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||
const [selectedCard, setSelectedCard] = useState(null);
|
||
const [showFilters, setShowFilters] = useState(false);
|
||
const [showSettings, setShowSettings] = useState(false);
|
||
const [viewMode, setViewMode] = useState('list'); // 'list' or 'thumbnail'
|
||
const [manaSymbolSettings, setManaSymbolSettings] = useState({ useSVG: false });
|
||
const [filters, setFilters] = useState({
|
||
colors: [],
|
||
types: [],
|
||
cmc: '',
|
||
rarity: ''
|
||
});
|
||
|
||
const searchTimeoutRef = useRef(null);
|
||
|
||
const fetchDeck = async () => {
|
||
try {
|
||
const token = localStorage.getItem('auth_token');
|
||
const response = await fetch(`/api/decks/${deckId}`, {
|
||
headers: {
|
||
'Authorization': `Bearer ${token}`
|
||
}
|
||
});
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
setDeck(data);
|
||
setDeckCards(data.cards || []);
|
||
} else {
|
||
console.error('Failed to fetch deck');
|
||
router.push('/decks');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching deck:', error);
|
||
router.push('/decks');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const searchCards = async () => {
|
||
setSearchLoading(true);
|
||
try {
|
||
const token = localStorage.getItem('auth_token');
|
||
const params = new URLSearchParams({
|
||
game: 'MTG',
|
||
limit: '50'
|
||
});
|
||
|
||
// Only add search if there's a query
|
||
if (searchQuery.trim()) {
|
||
params.append('search', searchQuery);
|
||
}
|
||
|
||
if (filters.colors.length > 0) {
|
||
params.append('colors', filters.colors.join(','));
|
||
}
|
||
if (filters.types.length > 0) {
|
||
params.append('types', filters.types.join(','));
|
||
}
|
||
if (filters.cmc) {
|
||
params.append('cmc', filters.cmc);
|
||
}
|
||
if (filters.rarity) {
|
||
params.append('rarity', filters.rarity);
|
||
}
|
||
|
||
const response = await fetch(`/api/cards/search?${params}`, {
|
||
headers: {
|
||
'Authorization': `Bearer ${token}`
|
||
}
|
||
});
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
setSearchResults(data.cards || []);
|
||
}
|
||
} catch (error) {
|
||
console.error('Error searching cards:', error);
|
||
} finally {
|
||
setSearchLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (user && deckId) {
|
||
// eslint-disable-next-line react-hooks/set-state-in-effect -- load deck when route id or user changes
|
||
fetchDeck();
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps -- load deck when route id or user changes
|
||
}, [user, deckId]);
|
||
|
||
// Load initial cards when component mounts
|
||
useEffect(() => {
|
||
if (user) {
|
||
// eslint-disable-next-line react-hooks/set-state-in-effect -- initial catalog load once user is known
|
||
searchCards();
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps -- initial catalog load once user is known
|
||
}, [user]);
|
||
|
||
useEffect(() => {
|
||
if (searchTimeoutRef.current) {
|
||
clearTimeout(searchTimeoutRef.current);
|
||
}
|
||
searchTimeoutRef.current = setTimeout(() => {
|
||
searchCards();
|
||
}, 300);
|
||
|
||
return () => {
|
||
if (searchTimeoutRef.current) {
|
||
clearTimeout(searchTimeoutRef.current);
|
||
}
|
||
};
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps -- debounced search; searchCards reads latest filter state
|
||
}, [searchQuery, filters]);
|
||
|
||
const addCardToDeck = async (card, quantity = 1) => {
|
||
// Commander format validation
|
||
if (deck.format === 'Commander') {
|
||
const existingCard = deckCards.find(dc => dc.card_id === card.id);
|
||
const currentQuantity = existingCard ? existingCard.quantity : 0;
|
||
|
||
// Check singleton rule (except basic lands)
|
||
if (!isBasicLand(card) && currentQuantity + quantity > 1) {
|
||
alert('Commander format allows only 1 copy of each non-basic land card.');
|
||
return;
|
||
}
|
||
|
||
// Check total deck size
|
||
const totalCards = deckCards.reduce((sum, dc) => sum + dc.quantity, 0);
|
||
if (totalCards + quantity > 100) {
|
||
alert('Commander decks can have a maximum of 100 cards.');
|
||
return;
|
||
}
|
||
}
|
||
|
||
try {
|
||
const token = localStorage.getItem('auth_token');
|
||
const response = await fetch(`/api/decks/${deckId}/cards`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer ${token}`
|
||
},
|
||
body: JSON.stringify({
|
||
cardId: card.id,
|
||
quantity
|
||
})
|
||
});
|
||
|
||
if (response.ok) {
|
||
// Refresh deck cards
|
||
fetchDeck();
|
||
} else {
|
||
console.error('Failed to add card to deck');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error adding card to deck:', error);
|
||
}
|
||
};
|
||
|
||
const removeCardFromDeck = async (cardId, quantity = 1) => {
|
||
try {
|
||
const token = localStorage.getItem('auth_token');
|
||
const response = await fetch(`/api/decks/${deckId}/cards`, {
|
||
method: 'DELETE',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer ${token}`
|
||
},
|
||
body: JSON.stringify({
|
||
cardId,
|
||
quantity
|
||
})
|
||
});
|
||
|
||
if (response.ok) {
|
||
// Refresh deck cards
|
||
fetchDeck();
|
||
} else {
|
||
console.error('Failed to remove card from deck');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error removing card from deck:', error);
|
||
}
|
||
};
|
||
|
||
const isBasicLand = (card) => {
|
||
const basicLands = ['Plains', 'Island', 'Swamp', 'Mountain', 'Forest'];
|
||
return basicLands.includes(card.name);
|
||
};
|
||
|
||
const getDeckStats = () => {
|
||
const totalCards = deckCards.reduce((sum, card) => sum + card.quantity, 0);
|
||
const avgCmc = deckCards.length > 0
|
||
? (deckCards.reduce((sum, card) => sum + (card.cmc || 0) * card.quantity, 0) / totalCards).toFixed(1)
|
||
: 0;
|
||
|
||
const colorCounts = deckCards.reduce((counts, card) => {
|
||
if (card.colors) {
|
||
try {
|
||
const colors = JSON.parse(card.colors);
|
||
colors.forEach(color => {
|
||
counts[color] = (counts[color] || 0) + card.quantity;
|
||
});
|
||
} catch (e) {
|
||
// Handle non-JSON color format
|
||
}
|
||
}
|
||
return counts;
|
||
}, {});
|
||
|
||
const typeCounts = deckCards.reduce((counts, card) => {
|
||
if (card.card_type) {
|
||
const types = card.card_type.split(' — ')[0].split(' ');
|
||
types.forEach(type => {
|
||
counts[type] = (counts[type] || 0) + card.quantity;
|
||
});
|
||
}
|
||
return counts;
|
||
}, {});
|
||
|
||
return { totalCards, avgCmc, colorCounts, typeCounts };
|
||
};
|
||
|
||
const toggleColorFilter = (color) => {
|
||
setFilters(prev => ({
|
||
...prev,
|
||
colors: prev.colors.includes(color)
|
||
? prev.colors.filter(c => c !== color)
|
||
: [...prev.colors, color]
|
||
}));
|
||
};
|
||
|
||
const clearFilters = () => {
|
||
setFilters({
|
||
colors: [],
|
||
types: [],
|
||
cmc: '',
|
||
rarity: ''
|
||
});
|
||
};
|
||
|
||
if (!user) {
|
||
return (
|
||
<Layout user={user}>
|
||
<div className="flex items-center justify-center min-h-screen">
|
||
<div className="text-center">
|
||
<h1 className="text-2xl font-bold mb-4">Please log in to use the deck builder</h1>
|
||
<Link href="/login" className="text-accent-ember hover:underline">
|
||
Go to Login
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<Layout user={user}>
|
||
<div className="flex items-center justify-center min-h-screen">
|
||
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-accent-ember"></div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|
||
|
||
if (!deck) {
|
||
return (
|
||
<Layout user={user}>
|
||
<div className="flex items-center justify-center min-h-screen">
|
||
<div className="text-center">
|
||
<h1 className="text-2xl font-bold mb-4">Deck not found</h1>
|
||
<Link href="/decks" className="text-accent-ember hover:underline">
|
||
Back to My Decks
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|
||
|
||
const stats = getDeckStats();
|
||
|
||
return (
|
||
<Layout user={user}>
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||
{/* Header */}
|
||
<div className="flex justify-between items-center mb-6">
|
||
<div>
|
||
<div className="flex items-center space-x-3">
|
||
<Link href="/decks" className="text-accent-ember hover:underline">
|
||
← Back to Decks
|
||
</Link>
|
||
</div>
|
||
<h1 className="text-3xl font-bold text-text-primary mt-2">{deck.name}</h1>
|
||
<p className="text-text-secondary">
|
||
{deck.format} • {stats.totalCards}/100 cards
|
||
</p>
|
||
</div>
|
||
<div className="flex space-x-3">
|
||
<button className="bg-bg-secondary text-text-primary px-4 py-2 rounded-lg hover:bg-bg-tertiary transition-colors">
|
||
Save Deck
|
||
</button>
|
||
<Link
|
||
href={`/deck/${deck.id}`}
|
||
className="bg-accent-ember text-white px-4 py-2 rounded-lg hover:bg-accent-ember-dark transition-colors"
|
||
>
|
||
View Deck
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-6 h-[calc(100vh-12rem)]">
|
||
{/* Main Deck View - Left Side */}
|
||
<div className={`flex-1 transition-all duration-300`}>
|
||
<div className="bg-bg-secondary rounded-lg p-6 h-full flex flex-col">
|
||
<div className="flex justify-between items-center mb-6">
|
||
<h2 className="text-xl font-semibold text-text-primary">
|
||
Deck Cards ({stats.totalCards})
|
||
</h2>
|
||
<button
|
||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||
className="bg-accent-ember text-white px-4 py-2 rounded-lg hover:bg-accent-ember-dark transition-colors flex items-center space-x-2"
|
||
>
|
||
<span>{sidebarOpen ? 'Hide' : 'Show'} Browser</span>
|
||
<span>{sidebarOpen ? '→' : '←'}</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Deck Stats Bar */}
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6 p-4 bg-bg-primary rounded-lg">
|
||
<div className="text-center">
|
||
<div className="text-lg font-bold text-text-primary">{stats.totalCards}/100</div>
|
||
<div className="text-text-secondary text-sm">Cards</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-lg font-bold text-text-primary">{stats.avgCmc}</div>
|
||
<div className="text-text-secondary text-sm">Avg CMC</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-lg font-bold text-text-primary">
|
||
{Object.keys(stats.colorCounts).length}
|
||
</div>
|
||
<div className="text-text-secondary text-sm">Colors</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-lg font-bold text-text-primary">
|
||
{Object.keys(stats.typeCounts).length}
|
||
</div>
|
||
<div className="text-text-secondary text-sm">Types</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Deck Cards List */}
|
||
<div className="flex-1 overflow-y-auto space-y-2">
|
||
{deckCards.length === 0 ? (
|
||
<div className="text-center py-12">
|
||
<div className="text-6xl mb-4">🃏</div>
|
||
<h3 className="text-xl font-semibold text-text-primary mb-2">Empty Deck</h3>
|
||
<p className="text-text-secondary mb-4">Start building your deck by searching for cards</p>
|
||
{!sidebarOpen && (
|
||
<button
|
||
onClick={() => setSidebarOpen(true)}
|
||
className="bg-accent-ember text-white px-4 py-2 rounded-lg hover:bg-accent-ember-dark transition-colors"
|
||
>
|
||
Open Card Browser
|
||
</button>
|
||
)}
|
||
</div>
|
||
) : (
|
||
deckCards
|
||
.sort((a, b) => a.name.localeCompare(b.name))
|
||
.map((card) => (
|
||
<div key={`${card.card_id}-${card.id}`} className="flex items-center justify-between p-4 bg-bg-primary rounded-lg hover:bg-bg-tertiary transition-colors">
|
||
<div className="flex items-center space-x-4">
|
||
{card.image_url && (
|
||
<img
|
||
src={card.image_url}
|
||
alt={card.name}
|
||
className="w-14 h-20 object-cover rounded shadow-md"
|
||
/>
|
||
)}
|
||
<div>
|
||
<h4 className="font-semibold text-text-primary text-lg">{card.name}</h4>
|
||
<p className="text-text-secondary text-sm">{card.set_name}</p>
|
||
<div className="flex items-center space-x-3 mt-1">
|
||
{card.mana_cost && (
|
||
<div className="bg-bg-secondary px-2 py-1 rounded">
|
||
<ManaCost cost={card.mana_cost} size="sm" useSVG={manaSymbolSettings.useSVG} />
|
||
</div>
|
||
)}
|
||
{card.rarity && (
|
||
<span className={`text-xs px-2 py-1 rounded capitalize ${
|
||
card.rarity === 'mythic' ? 'bg-orange-100 text-orange-800' :
|
||
card.rarity === 'rare' ? 'bg-yellow-100 text-yellow-800' :
|
||
card.rarity === 'uncommon' ? 'bg-gray-100 text-gray-800' :
|
||
'bg-green-100 text-green-800'
|
||
}`}>
|
||
{card.rarity}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center space-x-3">
|
||
<span className="text-text-primary font-bold text-lg">{card.quantity}x</span>
|
||
<div className="flex items-center space-x-1">
|
||
<button
|
||
onClick={() => removeCardFromDeck(card.card_id, 1)}
|
||
className="w-8 h-8 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors flex items-center justify-center font-bold"
|
||
>
|
||
−
|
||
</button>
|
||
<button
|
||
onClick={() => addCardToDeck(card, 1)}
|
||
className="w-8 h-8 bg-accent-ember text-white rounded-full hover:bg-accent-ember-dark transition-colors flex items-center justify-center font-bold"
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Full Height Right Sidebar - Card Browser */}
|
||
<div className={`transition-all duration-300 ${sidebarOpen ? 'w-96' : 'w-0 overflow-hidden'}`}>
|
||
<div className="bg-bg-tertiary rounded-lg h-full flex flex-col relative border border-border">
|
||
{!selectedCard ? (
|
||
<>
|
||
{/* Header */}
|
||
<div className="flex justify-between items-center p-4 border-b border-border bg-bg-secondary rounded-t-lg">
|
||
<h3 className="text-lg font-semibold text-text-primary">Card Browser</h3>
|
||
<div className="flex items-center space-x-2">
|
||
{/* View Mode Toggle */}
|
||
<div className="flex bg-bg-primary rounded-lg p-1">
|
||
<button
|
||
onClick={() => setViewMode('list')}
|
||
className={`px-2 py-1 rounded text-xs transition-colors ${
|
||
viewMode === 'list'
|
||
? 'bg-accent-ember text-white'
|
||
: 'text-text-secondary hover:text-text-primary'
|
||
}`}
|
||
title="List View"
|
||
>
|
||
☰
|
||
</button>
|
||
<button
|
||
onClick={() => setViewMode('thumbnail')}
|
||
className={`px-2 py-1 rounded text-xs transition-colors ${
|
||
viewMode === 'thumbnail'
|
||
? 'bg-accent-ember text-white'
|
||
: 'text-text-secondary hover:text-text-primary'
|
||
}`}
|
||
title="Thumbnail View"
|
||
>
|
||
⊞
|
||
</button>
|
||
</div>
|
||
<button
|
||
onClick={() => setShowSettings(!showSettings)}
|
||
className={`text-text-secondary hover:text-text-primary transition-colors p-1 ${
|
||
showSettings ? 'text-accent-ember' : ''
|
||
}`}
|
||
title="Settings"
|
||
>
|
||
⚙️
|
||
</button>
|
||
<button
|
||
onClick={() => setSidebarOpen(false)}
|
||
className="text-text-secondary hover:text-text-primary transition-colors p-1"
|
||
title="Collapse"
|
||
>
|
||
→
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Search */}
|
||
<div className="p-4 border-b border-border">
|
||
<div className="flex space-x-2">
|
||
<input
|
||
type="text"
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
placeholder="Search for cards..."
|
||
className="flex-1 px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-ember bg-bg-primary text-text-primary text-sm"
|
||
/>
|
||
<button
|
||
onClick={() => setShowFilters(!showFilters)}
|
||
className={`p-2 rounded-lg transition-colors ${
|
||
showFilters || filters.colors.length > 0 || filters.cmc || filters.rarity
|
||
? 'bg-accent-ember text-white'
|
||
: 'bg-bg-primary text-text-secondary hover:bg-bg-tertiary'
|
||
}`}
|
||
title="Filters"
|
||
>
|
||
🔍
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Settings Panel */}
|
||
{showSettings && (
|
||
<div className="p-4 border-b border-border bg-bg-primary">
|
||
<ManaSymbolSettings onSettingsChange={setManaSymbolSettings} />
|
||
</div>
|
||
)}
|
||
|
||
{/* Quick Filters */}
|
||
{showFilters && (
|
||
<div className="p-4 border-b border-border bg-bg-primary space-y-3">
|
||
{/* Color Filters */}
|
||
<div>
|
||
<div className="flex items-center justify-between mb-2">
|
||
<label className="text-text-secondary text-xs font-medium">Colors</label>
|
||
{(filters.colors.length > 0 || filters.cmc || filters.rarity) && (
|
||
<button
|
||
onClick={clearFilters}
|
||
className="text-xs text-accent-ember hover:underline"
|
||
>
|
||
Clear All
|
||
</button>
|
||
)}
|
||
</div>
|
||
<div className="flex space-x-1">
|
||
{['W', 'U', 'B', 'R', 'G'].map(color => (
|
||
<ColorFilterSymbol
|
||
key={color}
|
||
color={color}
|
||
isActive={filters.colors.includes(color)}
|
||
onClick={toggleColorFilter}
|
||
size="sm"
|
||
useSVG={manaSymbolSettings.useSVG}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* CMC and Rarity */}
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div>
|
||
<label className="block text-text-secondary text-xs font-medium mb-1">CMC</label>
|
||
<select
|
||
value={filters.cmc}
|
||
onChange={(e) => setFilters({...filters, cmc: e.target.value})}
|
||
className="w-full px-2 py-1 border border-border rounded text-xs focus:outline-none focus:ring-1 focus:ring-accent-ember bg-bg-secondary text-text-primary"
|
||
>
|
||
<option value="">Any</option>
|
||
<option value="0">0</option>
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
<option value="3">3</option>
|
||
<option value="4">4</option>
|
||
<option value="5">5</option>
|
||
<option value="6+">6+</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="block text-text-secondary text-xs font-medium mb-1">Rarity</label>
|
||
<select
|
||
value={filters.rarity}
|
||
onChange={(e) => setFilters({...filters, rarity: e.target.value})}
|
||
className="w-full px-2 py-1 border border-border rounded text-xs focus:outline-none focus:ring-1 focus:ring-accent-ember bg-bg-secondary text-text-primary"
|
||
>
|
||
<option value="">Any</option>
|
||
<option value="common">Common</option>
|
||
<option value="uncommon">Uncommon</option>
|
||
<option value="rare">Rare</option>
|
||
<option value="mythic">Mythic</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Card List */}
|
||
<div className="flex-1 overflow-y-auto p-4">
|
||
{viewMode === 'list' ? (
|
||
/* List View */
|
||
<div className="space-y-1">
|
||
{searchLoading ? (
|
||
<div className="text-center py-8">
|
||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-accent-ember mx-auto"></div>
|
||
<p className="text-text-secondary mt-2 text-xs">Searching...</p>
|
||
</div>
|
||
) : searchResults.length === 0 ? (
|
||
<div className="text-center py-8">
|
||
<div className="text-2xl mb-2">🔍</div>
|
||
<p className="text-text-secondary text-xs">
|
||
{searchQuery ? 'No cards found' : 'No cards available'}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
searchResults.map((card) => (
|
||
<div
|
||
key={card.id}
|
||
className="flex items-center p-2 bg-bg-secondary rounded hover:bg-bg-primary transition-colors cursor-pointer"
|
||
onClick={() => setSelectedCard(card)}
|
||
>
|
||
<div className="flex items-center space-x-2 flex-1 min-w-0">
|
||
{card.image_url && (
|
||
<img
|
||
src={card.image_url}
|
||
alt={card.name}
|
||
className="w-8 h-11 object-cover rounded flex-shrink-0"
|
||
/>
|
||
)}
|
||
<div className="min-w-0 flex-1">
|
||
<h4 className="font-medium text-text-primary text-xs truncate">{card.name}</h4>
|
||
<p className="text-text-secondary text-xs truncate">{card.set_name}</p>
|
||
<div className="flex items-center space-x-1">
|
||
{card.mana_cost && (
|
||
<ManaCost cost={card.mana_cost} size="xs" useSVG={manaSymbolSettings.useSVG} />
|
||
)}
|
||
{card.rarity && (
|
||
<span className={`text-xs px-1 rounded capitalize ${
|
||
card.rarity === 'mythic' ? 'bg-orange-100 text-orange-800' :
|
||
card.rarity === 'rare' ? 'bg-yellow-100 text-yellow-800' :
|
||
card.rarity === 'uncommon' ? 'bg-gray-100 text-gray-800' :
|
||
'bg-green-100 text-green-800'
|
||
}`}>
|
||
{card.rarity[0].toUpperCase()}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
) : (
|
||
/* Thumbnail View */
|
||
<div>
|
||
{searchLoading ? (
|
||
<div className="text-center py-8">
|
||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-accent-ember mx-auto"></div>
|
||
<p className="text-text-secondary mt-2 text-xs">Searching...</p>
|
||
</div>
|
||
) : searchResults.length === 0 ? (
|
||
<div className="text-center py-8">
|
||
<div className="text-2xl mb-2">🔍</div>
|
||
<p className="text-text-secondary text-xs">
|
||
{searchQuery ? 'No cards found' : 'No cards available'}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="grid grid-cols-3 gap-2">
|
||
{searchResults.map((card) => (
|
||
<div
|
||
key={card.id}
|
||
className="relative group cursor-pointer"
|
||
onClick={() => setSelectedCard(card)}
|
||
>
|
||
{card.image_url ? (
|
||
<div className="relative">
|
||
<img
|
||
src={card.image_url}
|
||
alt={card.name}
|
||
className="w-full aspect-[2.5/3.5] object-cover rounded-lg shadow-sm group-hover:shadow-md transition-shadow"
|
||
/>
|
||
{/* Hover overlay with card name */}
|
||
<div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-200 rounded-lg flex items-end">
|
||
<div className="p-2 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||
<p className="text-xs font-medium truncate">{card.name}</p>
|
||
<p className="text-xs opacity-75 truncate">{card.set_name}</p>
|
||
</div>
|
||
</div>
|
||
{/* Rarity indicator */}
|
||
{card.rarity && (
|
||
<div className={`absolute top-1 right-1 w-2 h-2 rounded-full ${
|
||
card.rarity === 'mythic' ? 'bg-orange-500' :
|
||
card.rarity === 'rare' ? 'bg-yellow-500' :
|
||
card.rarity === 'uncommon' ? 'bg-gray-400' :
|
||
'bg-green-500'
|
||
}`}></div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div className="w-full aspect-[2.5/3.5] bg-bg-secondary rounded-lg flex items-center justify-center group-hover:bg-bg-primary transition-colors">
|
||
<div className="text-center p-2">
|
||
<p className="text-xs font-medium text-text-primary truncate">{card.name}</p>
|
||
<p className="text-xs text-text-secondary truncate">{card.set_name}</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</>
|
||
) : (
|
||
/* Card Detail View */
|
||
<>
|
||
{/* Detail Header */}
|
||
<div className="flex items-center p-4 border-b border-border bg-bg-secondary rounded-t-lg">
|
||
<button
|
||
onClick={() => setSelectedCard(null)}
|
||
className="text-text-secondary hover:text-text-primary transition-colors mr-3"
|
||
>
|
||
← Back
|
||
</button>
|
||
<h3 className="text-lg font-semibold text-text-primary truncate">{selectedCard.name}</h3>
|
||
</div>
|
||
|
||
{/* Card Detail Content */}
|
||
<div className="flex-1 overflow-y-auto p-4">
|
||
<div className="space-y-4">
|
||
{/* Card Image */}
|
||
{selectedCard.image_url && (
|
||
<div className="text-center">
|
||
<img
|
||
src={selectedCard.image_url}
|
||
alt={selectedCard.name}
|
||
className="w-full max-w-64 mx-auto rounded-lg shadow-lg"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Card Info */}
|
||
<div className="space-y-3">
|
||
<div>
|
||
<h4 className="font-semibold text-text-primary text-lg">{selectedCard.name}</h4>
|
||
<p className="text-text-secondary text-sm">{selectedCard.set_name}</p>
|
||
</div>
|
||
|
||
{selectedCard.mana_cost && (
|
||
<div>
|
||
<label className="block text-text-secondary text-xs font-medium mb-1">Mana Cost</label>
|
||
<div className="bg-bg-primary px-3 py-2 rounded">
|
||
<ManaCost cost={selectedCard.mana_cost} size="md" useSVG={manaSymbolSettings.useSVG} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{selectedCard.card_type && (
|
||
<div>
|
||
<label className="block text-text-secondary text-xs font-medium mb-1">Type</label>
|
||
<div className="bg-bg-primary px-3 py-2 rounded text-sm">{selectedCard.card_type}</div>
|
||
</div>
|
||
)}
|
||
|
||
{selectedCard.oracle_text && (
|
||
<div>
|
||
<label className="block text-text-secondary text-xs font-medium mb-1">Oracle Text</label>
|
||
<div className="bg-bg-primary px-3 py-2 rounded text-sm whitespace-pre-wrap">{selectedCard.oracle_text}</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
{selectedCard.rarity && (
|
||
<div>
|
||
<label className="block text-text-secondary text-xs font-medium mb-1">Rarity</label>
|
||
<div className={`px-3 py-2 rounded text-sm capitalize ${
|
||
selectedCard.rarity === 'mythic' ? 'bg-orange-100 text-orange-800' :
|
||
selectedCard.rarity === 'rare' ? 'bg-yellow-100 text-yellow-800' :
|
||
selectedCard.rarity === 'uncommon' ? 'bg-gray-100 text-gray-800' :
|
||
'bg-green-100 text-green-800'
|
||
}`}>
|
||
{selectedCard.rarity}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{selectedCard.cmc !== undefined && (
|
||
<div>
|
||
<label className="block text-text-secondary text-xs font-medium mb-1">CMC</label>
|
||
<div className="bg-bg-primary px-3 py-2 rounded text-sm">{selectedCard.cmc}</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* Floating Action Button */}
|
||
{selectedCard && (
|
||
<div className="absolute bottom-4 left-4 right-4">
|
||
<button
|
||
onClick={() => {
|
||
addCardToDeck(selectedCard);
|
||
setSelectedCard(null);
|
||
}}
|
||
className="w-full bg-accent-ember text-white py-3 rounded-lg hover:bg-accent-ember-dark transition-colors font-semibold shadow-lg"
|
||
>
|
||
Add to Deck
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|