From e7081afe93394e8b825a20e86733ee565f284a36 Mon Sep 17 00:00:00 2001 From: cay Date: Sat, 4 Apr 2026 11:16:40 +0100 Subject: [PATCH] sderh --- public/js/quickmenu/carddeck.js | 127 +++++++++++++------------------- 1 file changed, 52 insertions(+), 75 deletions(-) diff --git a/public/js/quickmenu/carddeck.js b/public/js/quickmenu/carddeck.js index 8f4c783..97f7b9b 100644 --- a/public/js/quickmenu/carddeck.js +++ b/public/js/quickmenu/carddeck.js @@ -1,21 +1,22 @@ const CARDS_PER_PAGE = 18; -let currentGroupId = null; -let currentPage = 1; -let currentDeckId = null; -let deckCards = []; // [{card_id, amount}] -let userCardsCache = []; // aktuelle Seite: [{card_id, amount, name, image, rarity, attack, defense}] -let decks = []; // [{id, name}] +let currentGroupId = null; +let currentPage = 1; +let currentDeckId = null; +let deckCards = []; // [{card_id, amount}] +let userCardsCache = []; // aktuelle Seite: [{card_id, amount, name, image, rarity, attack, defense}] +let decks = []; // [{id, name}] + /* ── Kristall-Mapping ───────────────────────── */ const RARITY_CRYSTALS = { - 1: "roter-cristal.png", - 2: "blauer-cristal.png", - 3: "gelber-cristal.png", - 4: "gruener-cristal.png", - 5: "oranger-cristal.png", - 6: "violet-cristal.png", - 7: "pinker-cristal.png", + "1": "roter-cristal.png", + "2": "blauer-cristal.png", + "3": "gelber-cristal.png", + "4": "gruener-cristal.png", + "5": "oranger-cristal.png", + "6": "violet-cristal.png", + "7": "pinker-cristal.png", }; function rarityImgs(rarity, size = 14) { @@ -250,7 +251,7 @@ function renderShell() { .kd-stat-atk { position: absolute; right: 12px; - top: 36%; + top: 35%; transform: translateY(-50%); background: rgba(180,40,20,0.88); border: 1px solid #ff6040; @@ -261,7 +262,7 @@ function renderShell() { .kd-stat-def { position: absolute; left: 12px; - top: 36%; + top: 35%; transform: translateY(-50%); background: rgba(20,80,180,0.88); border: 1px solid #4090ff; @@ -515,18 +516,16 @@ function renderTabs(groups) { const container = document.getElementById("kd-tabs"); if (!container) return; - container.innerHTML = groups - .map((g, i) => { - const color = g.color || "#6b4b2a"; - return ` + container.innerHTML = groups.map((g, i) => { + const color = g.color || "#6b4b2a"; + return ` `; - }) - .join(""); + }).join(""); container.querySelectorAll(".kd-tab").forEach((btn) => { btn.addEventListener("click", async () => { @@ -551,7 +550,7 @@ function renderTabs(groups) { totalPages, total } ══════════════════════════════════════════════ */ async function loadUserCards() { - const grid = document.getElementById("kd-grid"); + const grid = document.getElementById("kd-grid"); const pagination = document.getElementById("kd-pagination"); if (!grid) return; @@ -559,9 +558,7 @@ async function loadUserCards() { pagination.innerHTML = ""; try { - const res = await fetch( - `/api/user-cards?group_id=${currentGroupId}&page=${currentPage}&limit=${CARDS_PER_PAGE}`, - ); + const res = await fetch(`/api/user-cards?group_id=${currentGroupId}&page=${currentPage}&limit=${CARDS_PER_PAGE}`); if (!res.ok) throw new Error("API Fehler"); const data = await res.json(); userCardsCache = data.cards || []; @@ -591,14 +588,8 @@ async function loadDecks() { function renderDeckSelect() { const sel = document.getElementById("kd-deck-select"); if (!sel) return; - sel.innerHTML = - `` + - decks - .map( - (d) => - ``, - ) - .join(""); + sel.innerHTML = `` + + decks.map(d => ``).join(""); } /* ══════════════════════════════════════════════ @@ -652,7 +643,7 @@ async function addCardToDeck(card) { // Rarity > 5: max. 1 Exemplar im Deck if (parseInt(card.rarity) > 5) { - const already = deckCards.find((c) => c.card_id === card.card_id); + const already = deckCards.find(c => c.card_id === card.card_id); if (already) { showToast("Karten ab Rarity 6 dürfen nur 1x im Deck sein."); return; @@ -749,18 +740,17 @@ function renderCollectionGrid(grid, cards) { const totalInDeck = deckCards.reduce((s, c) => s + c.amount, 0); - grid.innerHTML = cards - .map((c) => { - const inDeck = getDeckCount(c.card_id); - const maxed = isMaxedOut(c, inDeck, totalInDeck); - return ` + grid.innerHTML = cards.map(c => { + const inDeck = getDeckCount(c.card_id); + const maxed = isMaxedOut(c, inDeck, totalInDeck); + return `
${c.name} - ${c.attack != null ? `${c.attack}` : ""} - ${c.defends != null ? `${c.defends}` : ""} + ${c.attack != null ? `${c.attack}` : ""} + ${c.defends != null ? `${c.defends}` : ""} ${c.cooldown != null ? `${c.cooldown}` : ""}
${c.amount}× @@ -768,12 +758,11 @@ function renderCollectionGrid(grid, cards) {
${c.rarity ? `
${rarityImgs(c.rarity, 13)}
` : ""}
`; - }) - .join(""); + }).join(""); - grid.querySelectorAll(".kd-card:not(.kd-card-maxed)").forEach((el) => { + grid.querySelectorAll(".kd-card:not(.kd-card-maxed)").forEach(el => { el.addEventListener("click", async () => { - const card = cards.find((c) => c.card_id === parseInt(el.dataset.cardId)); + const card = cards.find(c => c.card_id === parseInt(el.dataset.cardId)); if (card) await addCardToDeck(card); }); }); @@ -788,25 +777,26 @@ function renderDeckGrid(grid, cards) { return; } // Owned-Anzahl aus userCardsCache auslesen - grid.innerHTML = cards - .map((c) => { - const ownedEntry = userCardsCache.find((u) => u.card_id === c.card_id); - const ownedAmt = ownedEntry ? ownedEntry.amount : "?"; - return ` + grid.innerHTML = cards.map(c => { + const ownedEntry = userCardsCache.find(u => u.card_id === c.card_id); + const ownedAmt = ownedEntry ? ownedEntry.amount : "?"; + return `
${c.name} + ${c.attack != null ? `${c.attack}` : ""} + ${c.defends != null ? `${c.defends}` : ""} + ${c.cooldown != null ? `${c.cooldown}` : ""}
🃏 ${c.amount}
${c.rarity ? `
${rarityImgs(c.rarity, 14)}
` : ""}
`; - }) - .join(""); + }).join(""); - grid.querySelectorAll(".kd-deck-card").forEach((el) => { + grid.querySelectorAll(".kd-deck-card").forEach(el => { el.addEventListener("click", async () => { - const card = cards.find((c) => c.card_id === parseInt(el.dataset.cardId)); + const card = cards.find(c => c.card_id === parseInt(el.dataset.cardId)); if (card) await removeCardFromDeck(card); }); }); @@ -819,29 +809,19 @@ function renderPagination(pagination, totalPages, total) { if (!totalPages || totalPages <= 1) return; pagination.innerHTML = ` - ${Array.from({ length: totalPages }, (_, i) => i + 1) - .map( - (p) => ` + ${Array.from({ length: totalPages }, (_, i) => i + 1).map(p => ` - `, - ) - .join("")} + `).join("")} ${total} Karten`; pagination.querySelector("#kd-prev")?.addEventListener("click", async () => { - if (currentPage > 1) { - currentPage--; - await loadUserCards(); - } + if (currentPage > 1) { currentPage--; await loadUserCards(); } }); pagination.querySelector("#kd-next")?.addEventListener("click", async () => { - if (currentPage < totalPages) { - currentPage++; - await loadUserCards(); - } + if (currentPage < totalPages) { currentPage++; await loadUserCards(); } }); - pagination.querySelectorAll("[data-page]").forEach((btn) => { + pagination.querySelectorAll("[data-page]").forEach(btn => { btn.addEventListener("click", async () => { currentPage = parseInt(btn.dataset.page); await loadUserCards(); @@ -905,10 +885,7 @@ function showNewDeckModal() { modal.querySelector("#kd-modal-cancel").onclick = () => modal.remove(); modal.querySelector("#kd-modal-confirm").onclick = async () => { const name = input.value.trim(); - if (!name) { - input.focus(); - return; - } + if (!name) { input.focus(); return; } modal.remove(); await createDeck(name); }; @@ -927,14 +904,14 @@ function showNewDeckModal() { HELPERS ══════════════════════════════════════════════ */ function getDeckCount(cardId) { - const entry = deckCards.find((c) => c.card_id === cardId); + const entry = deckCards.find(c => c.card_id === cardId); return entry ? entry.amount : 0; } function isMaxedOut(card, inDeck, totalInDeck) { if (!currentDeckId) return false; if (totalInDeck >= 30) return true; - if (inDeck >= card.amount) return true; // mehr als besessen + if (inDeck >= card.amount) return true; // mehr als besessen if (parseInt(card.rarity) > 5 && inDeck >= 1) return true; // Rarity > 5: nur 1x return false; }