rszk

public/js/quickmenu/carddeck.js

@@ -7,6 +7,24 @@ let deckCards       = [];   // [{card_id, level, amount}]
 let userCardsCache  = [];   // aktuelle Seite: [{card_id, level, amount, name, image, 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",
+};
+
+function rarityImg(rarity, size = 16) {
+  const file = RARITY_CRYSTALS[String(rarity)];
+  if (!file) return "";
+  return `<img src="/images/items/${file}" alt="Stufe ${rarity}" style="width:${size}px;height:${size}px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.8));">`;
+}
+
 /* ══════════════════════════════════════════════
    INIT
 ══════════════════════════════════════════════ */
@@ -397,6 +415,16 @@ function renderShell() {
       }
       .kd-deck-count-indeck { font-family: "Cinzel", serif; font-size: 13px; color: #88cc44; font-weight: bold; }
 
+      /* ── Rarity Kristall ────────────────────── */
+      .kd-rarity {
+        position: absolute;
+        top: 3px;
+        right: 4px;
+        z-index: 5;
+        pointer-events: none;
+        line-height: 0;
+      }
+
       /* ── Empty / Loading States ──────────────── */
       .kd-empty {
         grid-column: 1 / -1; text-align: center;
@@ -691,6 +719,7 @@ function renderCollectionGrid(grid, cards) {
            data-card-id="${c.card_id}" data-level="${c.level}"
            title="${c.name} (Level ${c.level})">
         <div class="kd-card-name">${c.name}</div>
+        ${c.rarity ? `<span class="kd-rarity">${rarityImg(c.rarity, 15)}</span>` : ""}
         <img src="/images/cards/${c.image}" alt="${c.name}"
              onerror="this.src='/images/avatar_placeholder.svg'">
         ${c.attack  != null ? `<span class="kd-stat-atk">${c.attack}</span>`  : ""}
@@ -726,6 +755,7 @@ function renderDeckGrid(grid, cards) {
     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}">
+      ${c.rarity ? `<span class="kd-rarity">${rarityImg(c.rarity, 18)}</span>` : ""}
       <img src="/images/cards/${c.image}" alt="${c.name}"
            onerror="this.src='/images/avatar_placeholder.svg'">
       <div class="kd-deck-card-footer">

routes/carddeck.js

@@ -77,6 +77,7 @@ router.get("/user-cards", async (req, res) => {
          uc.amount,
          c.name,
          c.image,
+         c.rarity,
          cg.name  AS group_name,
          cg.color AS group_color,
          cl.attack,
@@ -189,6 +190,7 @@ router.get("/decks/:id/cards", async (req, res) => {
          dc.amount,
          c.name,
          c.image,
+         c.rarity,
          cl.attack,
          cl.defense
        FROM deck_cards dc