dghj,k

public/js/quickmenu/carddeck.js

@@ -386,17 +386,16 @@ function renderShell() {
       }
       .kd-deck-card-footer-counts {
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
         align-items: center;
-        padding: 2px 6px;
+        padding: 3px 6px;
         background: rgba(0,0,0,0.85);
         border-top: 1px solid #2a3a10;
         border-radius: 0 0 6px 6px;
-        height: 20px;
+        height: 22px;
         flex-shrink: 0;
       }
-      .kd-deck-count-owned { font-family: "Cinzel", serif; font-size: 10px; color: #c8a86a; font-weight: bold; }
+      .kd-deck-count-indeck { font-family: "Cinzel", serif; font-size: 13px; color: #88cc44; font-weight: bold; }
-      .kd-deck-count-indeck { font-family: "Cinzel", serif; font-size: 10px; color: #88cc44; font-weight: bold; }
 
       /* ── Empty / Loading States ──────────────── */
       .kd-empty {
@@ -460,8 +459,7 @@ function renderTabs(groups) {
   const container = document.getElementById("kd-tabs");
   if (!container) return;
 
-  container.innerHTML = groups
+  container.innerHTML = groups.map((g, i) => {
-    .map((g, i) => {
     const color = g.color || "#6b4b2a";
     return `
       <button class="kd-tab ${i === 0 ? "kd-tab-active" : ""}"
@@ -470,8 +468,7 @@ function renderTabs(groups) {
         <span class="kd-tab-dot" style="background:${color};"></span>
         <span>${g.name}</span>
       </button>`;
-    })
+  }).join("");
-    .join("");
 
   container.querySelectorAll(".kd-tab").forEach((btn) => {
     btn.addEventListener("click", async () => {
@@ -504,9 +501,7 @@ async function loadUserCards() {
   pagination.innerHTML = "";
 
   try {
-    const res = await fetch(
+    const res = await fetch(`/api/user-cards?group_id=${currentGroupId}&page=${currentPage}&limit=${CARDS_PER_PAGE}`);
-      `/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 || [];
@@ -536,14 +531,8 @@ async function loadDecks() {
 function renderDeckSelect() {
   const sel = document.getElementById("kd-deck-select");
   if (!sel) return;
-  sel.innerHTML =
+  sel.innerHTML = `<option value="">— Deck wählen —</option>` +
-    `<option value="">— Deck wählen —</option>` +
+    decks.map(d => `<option value="${d.id}" ${d.id === currentDeckId ? "selected" : ""}>${d.name}</option>`).join("");
-    decks
-      .map(
-        (d) =>
-          `<option value="${d.id}" ${d.id === currentDeckId ? "selected" : ""}>${d.name}</option>`,
-      )
-      .join("");
 }
 
 /* ══════════════════════════════════════════════
@@ -597,9 +586,7 @@ async function addCardToDeck(card) {
 
   // Level > 5: max. 1 Exemplar im Deck
   if (card.level > 5) {
-    const already = deckCards.find(
+    const already = deckCards.find(c => c.card_id === card.card_id && c.level === card.level);
-      (c) => c.card_id === card.card_id && c.level === card.level,
-    );
     if (already) {
       showToast("Karten ab Level 6 dürfen nur 1x im Deck sein.");
       return;
@@ -696,8 +683,7 @@ function renderCollectionGrid(grid, cards) {
 
   const totalInDeck = deckCards.reduce((s, c) => s + c.amount, 0);
 
-  grid.innerHTML = cards
+  grid.innerHTML = cards.map(c => {
-    .map((c) => {
     const inDeck  = getDeckCount(c.card_id, c.level);
     const maxed   = isMaxedOut(c, inDeck, totalInDeck);
     return `
@@ -714,15 +700,12 @@ function renderCollectionGrid(grid, cards) {
           <span class="kd-count-deck"  title="Im Deck">🃏 ${inDeck}</span>
         </div>
       </div>`;
-    })
+  }).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 => c.card_id === parseInt(el.dataset.cardId) && c.level === parseInt(el.dataset.level)
-          c.card_id === parseInt(el.dataset.cardId) &&
-          c.level === parseInt(el.dataset.level),
       );
       if (card) await addCardToDeck(card);
     });
@@ -738,11 +721,8 @@ function renderDeckGrid(grid, cards) {
     return;
   }
   // Owned-Anzahl aus userCardsCache auslesen
-  grid.innerHTML = cards
+  grid.innerHTML = cards.map(c => {
-    .map((c) => {
+    const ownedEntry = userCardsCache.find(u => u.card_id === c.card_id && u.level === c.level);
-      const ownedEntry = userCardsCache.find(
-        (u) => u.card_id === c.card_id && u.level === c.level,
-      );
     const ownedAmt = ownedEntry ? ownedEntry.amount : "?";
     return `
     <div class="kd-deck-card" data-card-id="${c.card_id}" data-level="${c.level}" title="Klicken zum Entfernen: ${c.name}">
@@ -755,15 +735,12 @@ function renderDeckGrid(grid, cards) {
         <span class="kd-deck-count-indeck" title="Im Deck">🃏 ${c.amount}</span>
       </div>
     </div>`;
-    })
+  }).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 => c.card_id === parseInt(el.dataset.cardId) && c.level === parseInt(el.dataset.level)
-          c.card_id === parseInt(el.dataset.cardId) &&
-          c.level === parseInt(el.dataset.level),
       );
       if (card) await removeCardFromDeck(card);
     });
@@ -777,29 +754,19 @@ function renderPagination(pagination, totalPages, total) {
   if (!totalPages || totalPages <= 1) return;
   pagination.innerHTML = `
     <button class="kd-page-btn" id="kd-prev" ${currentPage === 1 ? "disabled" : ""}>◀</button>
-    ${Array.from({ length: totalPages }, (_, i) => i + 1)
+    ${Array.from({ length: totalPages }, (_, i) => i + 1).map(p => `
-      .map(
-        (p) => `
       <button class="kd-page-btn ${p === currentPage ? "kd-page-active" : ""}" data-page="${p}">${p}</button>
-    `,
+    `).join("")}
-      )
-      .join("")}
     <button class="kd-page-btn" id="kd-next" ${currentPage === totalPages ? "disabled" : ""}>▶</button>
     <span class="kd-page-info">${total} Karten</span>`;
 
   pagination.querySelector("#kd-prev")?.addEventListener("click", async () => {
-    if (currentPage > 1) {
+    if (currentPage > 1) { currentPage--; await loadUserCards(); }
-      currentPage--;
-      await loadUserCards();
-    }
   });
   pagination.querySelector("#kd-next")?.addEventListener("click", async () => {
-    if (currentPage < totalPages) {
+    if (currentPage < totalPages) { currentPage++; await loadUserCards(); }
-      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();
@@ -863,10 +830,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) {
+    if (!name) { input.focus(); return; }
-      input.focus();
-      return;
-    }
     modal.remove();
     await createDeck(name);
   };
@@ -885,9 +849,7 @@ function showNewDeckModal() {
    HELPERS
 ══════════════════════════════════════════════ */
 function getDeckCount(cardId, level) {
-  const entry = deckCards.find(
+  const entry = deckCards.find(c => c.card_id === cardId && c.level === level);
-    (c) => c.card_id === cardId && c.level === level,
-  );
   return entry ? entry.amount : 0;
 }