55f1643fbb
Split the main deck panel list and right-hand card browser sidebar into DeckBuilderDeckList and DeckBuilderCardBrowser; page is ~408 lines. Co-authored-by: Cursor <cursoragent@cursor.com>
85 lines
4.3 KiB
JavaScript
85 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>
|
||
);
|
||
}
|