121 lines
5.8 KiB
TypeScript
121 lines
5.8 KiB
TypeScript
import { useState } from "react";
|
|
import { motion } from "motion/react"
|
|
import { Save, Trash2 } from "lucide-react";
|
|
|
|
export default function DeckBuilder({
|
|
deckName,
|
|
setDeckName,
|
|
deckFormat,
|
|
setDeckFormat,
|
|
selectedCards,
|
|
updateCardQuantity,
|
|
removeCardFromDeck,
|
|
saveDeck,
|
|
validation,
|
|
initialDeck,
|
|
}) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="relative">
|
|
{/* Bouton d'ouverture du menu */}
|
|
<button
|
|
onClick={() => setIsOpen(true)}
|
|
className="fixed bottom-4 right-4 bg-blue-600 text-white p-3 rounded-lg md:hidden"
|
|
>
|
|
Open Deck Builder
|
|
</button>
|
|
|
|
{/* Menu latéral */}
|
|
<motion.div
|
|
initial={{ x: "100%" }}
|
|
animate={{ x: isOpen ? "0%" : "100%" }}
|
|
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
|
className="fixed top-0 right-0 w-4/5 h-full bg-gray-800 p-6 shadow-lg md:static md:w-full md:h-auto md:p-6 md:shadow-none z-50"
|
|
>
|
|
{/* Bouton de fermeture */}
|
|
<button
|
|
onClick={() => setIsOpen(false)}
|
|
className="absolute top-4 right-4 text-white"
|
|
>
|
|
✖
|
|
</button>
|
|
|
|
<div className="space-y-4">
|
|
<input
|
|
type="text"
|
|
value={deckName}
|
|
onChange={(e) => setDeckName(e.target.value)}
|
|
className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
|
|
placeholder="Deck Name"
|
|
/>
|
|
|
|
<select
|
|
value={deckFormat}
|
|
onChange={(e) => setDeckFormat(e.target.value)}
|
|
className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
|
|
>
|
|
<option value="standard">Standard</option>
|
|
<option value="modern">Modern</option>
|
|
<option value="commander">Commander</option>
|
|
<option value="legacy">Legacy</option>
|
|
<option value="vintage">Vintage</option>
|
|
<option value="pauper">Pauper</option>
|
|
</select>
|
|
|
|
{!validation.isValid && (
|
|
<div className="bg-red-500/10 border border-red-500 rounded-lg p-3">
|
|
<ul className="list-disc list-inside text-red-400 text-sm">
|
|
{validation.errors.map((error, index) => (
|
|
<li key={index}>{error}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-2">
|
|
<h3 className="font-bold text-xl mb-4">
|
|
Cards ({selectedCards.reduce((acc, curr) => acc + curr.quantity, 0)})
|
|
</h3>
|
|
{selectedCards.map(({ card, quantity }) => (
|
|
<div key={card.id} className="flex items-center gap-4 bg-gray-700 p-2 rounded-lg">
|
|
<img
|
|
src={card.image_uris?.art_crop}
|
|
alt={card.name}
|
|
className="w-12 h-12 rounded"
|
|
/>
|
|
<div className="flex-1">
|
|
<h4 className="font-medium">{card.name}</h4>
|
|
</div>
|
|
<input
|
|
type="number"
|
|
value={quantity}
|
|
onChange={(e) => updateCardQuantity(card.id, parseInt(e.target.value))}
|
|
min="1"
|
|
max="4"
|
|
className="w-16 px-2 py-1 bg-gray-600 border border-gray-500 rounded text-center"
|
|
/>
|
|
<button
|
|
onClick={() => removeCardFromDeck(card.id)}
|
|
className="text-red-500 hover:text-red-400"
|
|
>
|
|
<Trash2 size={20} />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
onClick={saveDeck}
|
|
disabled={!deckName.trim() || selectedCards.length === 0 || !validation.isValid}
|
|
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"
|
|
>
|
|
<Save size={20} />
|
|
{initialDeck ? "Update Deck" : "Save Deck"}
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|