document.addEventListener("DOMContentLoaded", function() {
const deckContainer = document.getElementById("deck-container");
const cardContainer = document.getElementById("card-container");
let deck = [];
function addCardToDeck(cardId) {
if (deck.length < 60) {
const card = cards.find(c => c.id == cardId);
if (card) {
deck.push(card);
updateDeck();
}
} else {
alert("Your deck can only contain 60 cards.");
}
}
function updateDeck() {
deckContainer.innerHTML = `Your Deck (${deck.length}/60)
`;
deck.forEach(card => {
let cardDiv = document.createElement("div");
cardDiv.innerHTML = `${card.name}
`;
deckContainer.appendChild(cardDiv);
});
}
document.querySelectorAll(".add-to-deck").forEach(button => {
button.addEventListener("click", function() {
addCardToDeck(this.getAttribute("data-id"));
});
});
});