dtzjtz

views/1v1-battlefield.ejs

@@ -387,7 +387,16 @@
         <span class="deck-count" id="deck-count">—</span>`;
       hand.appendChild(deckSlot);
 
-      // ── Slots 1–7: Handkarten-Slots ─────────────
+      // ── Slots 2–4: aufgedeckte Handkarten (leer bis API lädt) ───
+      const handCardIds = [
+        "hand-card-1",
+        "hand-card-2",
+        "hand-card-3",
+        "hand-card-4",
+        "hand-card-5",
+        "hand-card-6",
+        "hand-card-7",
+      ];
       handCardIds.forEach((id) => {
         const s = document.createElement("div");
         s.className = "hand-slot hand-slot-card";
@@ -418,8 +427,16 @@
         const state = handSlotState[id];
         if (!slot) return;
 
+        /* KOMPLETT RESET */
+        slot.innerHTML = "";
+        slot.style.backgroundImage = "none";
+        slot.style.opacity = "1";
+        slot.style.filter = "none";
+        slot.style.backgroundColor = "#0a0805";
+        slot.classList.remove("hand-slot-ready", "hand-slot--filled");
+
         if (!state) {
-          slot.style.backgroundImage = '';
+          slot.style.backgroundImage = "";
           slot.innerHTML = '<span class="hs-icon">🃏</span>';
           slot.classList.remove("hand-slot-ready", "hand-slot--filled");
           slot.draggable = false;
@@ -457,9 +474,9 @@
         // Kein <img>-Element → keine Flex-Höhen-Probleme, kein z-index-Konflikt.
         // background-color (#0a0805) deckt transparente PNG-Bereiche solid ab.
         if (card.image) {
-          slot.style.backgroundImage = 'none';
+          slot.style.backgroundImage = "none";
         } else {
-          slot.style.backgroundImage = 'none';
+          slot.style.backgroundImage = "none";
         }
 
         slot.innerHTML = card.image