86 lines
4.3 KiB
JavaScript
86 lines
4.3 KiB
JavaScript
|
/* eslint-disable @next/next/no-img-element -- External card image URLs; next/image migration is out of scope. */
|
|||
|
|
import { ManaCost } from './ManaSymbols';
|
|||
|
|
|
|||
|
|
export default function DeckBuilderDeckList({
|
|||
|
|
deckCards,
|
|||
|
|
sidebarOpen,
|
|||
|
|
onOpenSidebar,
|
|||
|
|
manaSymbolSettings,
|
|||
|
|
onAddCard,
|
|||
|
|
onRemoveCard,
|
|||
|
|
}) {
|
|||
|
|
return (
|
|||
|
|
<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={onOpenSidebar}
|
|||
|
|
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={() => onRemoveCard(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={() => onAddCard(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>
|
|||
|
|
);
|
|||
|
|
}
|