From fea1b776e5a15d2e7773a865e6bd97d68278c9da Mon Sep 17 00:00:00 2001
From: cay <cay@joksch.ch>
Date: Fri, 10 Apr 2026 08:54:45 +0100
Subject: [PATCH] tgkdtz

---
 views/1v1-battlefield.ejs | 617 +++++++++++++-------------------------
 1 file changed, 213 insertions(+), 404 deletions(-)

diff --git a/views/1v1-battlefield.ejs b/views/1v1-battlefield.ejs
index bf4fab9..22d2bd5 100644
--- a/views/1v1-battlefield.ejs
+++ b/views/1v1-battlefield.ejs
@@ -4,17 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><%= title || "Spielfeld" %></title>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap"
-      rel="stylesheet"
-    />
+    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="/css/1v1.css" />
     <style>
       #match-result-overlay {
         display: none;
         position: fixed;
         inset: 0;
-        background: rgba(0, 0, 0, 0.88);
+        background: rgba(0,0,0,0.88);
         z-index: 9999;
         flex-direction: column;
         align-items: center;
@@ -22,149 +19,74 @@
         font-family: "Cinzel", serif;
         animation: fadeIn 0.4s ease;
       }
-      #match-result-overlay.show {
-        display: flex;
-      }
-      @keyframes fadeIn {
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
-      }
-      @keyframes pulse {
-        0%,
-        100% {
-          opacity: 1;
-        }
-        50% {
-          opacity: 0.5;
-        }
-      }
+      #match-result-overlay.show { display: flex; }
+      @keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
+      @keyframes pulse  { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
 
-      .result-title {
-        font-size: 48px;
-        letter-spacing: 6px;
-        margin-bottom: 12px;
-        text-shadow: 0 0 30px currentColor;
-      }
-      .result-title.win {
-        color: #f0d060;
-      }
-      .result-title.lose {
-        color: #c84040;
-      }
-      .result-points {
-        font-size: 22px;
-        color: #c8a860;
-        margin-bottom: 6px;
-        letter-spacing: 2px;
-      }
-      .result-levelup {
-        font-size: 18px;
-        color: #60e060;
-        margin-bottom: 20px;
-        letter-spacing: 2px;
-        animation: pulse 1s ease-in-out infinite;
-      }
-      .result-progress-wrap {
-        width: 320px;
-        margin-bottom: 24px;
-      }
-      .result-progress-label {
-        display: flex;
-        justify-content: space-between;
-        font-size: 12px;
-        color: #a08060;
-        margin-bottom: 6px;
-      }
-      .result-progress-track {
-        height: 10px;
-        background: rgba(255, 255, 255, 0.08);
-        border-radius: 5px;
-        overflow: hidden;
-      }
-      .result-progress-fill {
-        height: 100%;
-        background: linear-gradient(90deg, #c8960c, #f0d060);
-        border-radius: 5px;
-        transition: width 1s ease;
-      }
+      .result-title      { font-size:48px; letter-spacing:6px; margin-bottom:12px; text-shadow:0 0 30px currentColor; }
+      .result-title.win  { color:#f0d060; }
+      .result-title.lose { color:#c84040; }
+      .result-points     { font-size:22px; color:#c8a860; margin-bottom:6px; letter-spacing:2px; }
+      .result-levelup    { font-size:18px; color:#60e060; margin-bottom:20px; letter-spacing:2px; animation:pulse 1s ease-in-out infinite; }
+      .result-progress-wrap  { width:320px; margin-bottom:24px; }
+      .result-progress-label { display:flex; justify-content:space-between; font-size:12px; color:#a08060; margin-bottom:6px; }
+      .result-progress-track { height:10px; background:rgba(255,255,255,0.08); border-radius:5px; overflow:hidden; }
+      .result-progress-fill  { height:100%; background:linear-gradient(90deg,#c8960c,#f0d060); border-radius:5px; transition:width 1s ease; }
       .result-close-btn {
-        background: linear-gradient(#4a3010, #2a1a08);
-        border: 2px solid #c8960c;
-        color: #f0d9a6;
-        font-family: "Cinzel", serif;
-        font-size: 14px;
-        padding: 10px 30px;
-        border-radius: 8px;
-        cursor: pointer;
-        letter-spacing: 2px;
-        margin-top: 10px;
-        transition: 0.2s;
-      }
-      .result-close-btn:hover {
-        border-color: #f0d060;
-        filter: brightness(1.2);
+        background:linear-gradient(#4a3010,#2a1a08); border:2px solid #c8960c;
+        color:#f0d9a6; font-family:"Cinzel",serif; font-size:14px;
+        padding:10px 30px; border-radius:8px; cursor:pointer;
+        letter-spacing:2px; margin-top:10px; transition:0.2s;
       }
+      .result-close-btn:hover { border-color:#f0d060; filter:brightness(1.2); }
     </style>
     <style>
-      /* ── Deck-Stapel ────────────────────────── */
-      .hand-slot-deck {
-        position: relative;
-        cursor: pointer;
-      }
-      .deck-stack-wrap {
-        position: relative;
-        width: 100%;
-        height: calc(100% - 18px);
-      }
-      .deck-card-back,
-      .deck-card-top {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        border-radius: 7px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
-      }
-      .deck-shadow-3 {
-        transform: translate(-4px, -4px);
-      }
-      .deck-shadow-2 {
-        transform: translate(-2px, -2px);
-      }
-      .deck-shadow-1 {
-        transform: translate(-1px, -1px);
-      }
-      .deck-card-top {
-        transform: translate(0, 0);
-        border: 1px solid rgba(200, 150, 42, 0.5);
-      }
-      .deck-count {
-        position: absolute;
-        bottom: 2px;
-        left: 0;
-        right: 0;
-        text-align: center;
-        font-family: "Cinzel", serif;
-        font-size: 10px;
-        color: #f0d060;
-        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
-      }
-      .hand-slot-card {
-        border: 1px solid rgba(200, 150, 42, 0.4) !important;
-      }
-      .hand-slot-card > img {
-        border-radius: calc(var(--s) * 7);
-        overflow: hidden;
-      }
-      .hand-slot-card:hover {
-        border-color: rgba(200, 150, 42, 0.9) !important;
-        transform: translateY(-4px);
-        transition: transform 0.15s;
-      }
+
+    /* ── Deck-Stapel ────────────────────────── */
+    .hand-slot-deck {
+      position: relative;
+      cursor: pointer;
+    }
+    .deck-stack-wrap {
+      position: relative;
+      width: 100%;
+      height: calc(100% - 18px);
+    }
+    .deck-card-back,
+    .deck-card-top {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 7px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.7);
+    }
+    .deck-shadow-3 { transform: translate(-4px, -4px); }
+    .deck-shadow-2 { transform: translate(-2px, -2px); }
+    .deck-shadow-1 { transform: translate(-1px, -1px); }
+    .deck-card-top  { transform: translate(0,0); border: 1px solid rgba(200,150,42,0.5); }
+    .deck-count {
+      position: absolute;
+      bottom: 2px;
+      left: 0; right: 0;
+      text-align: center;
+      font-family: "Cinzel", serif;
+      font-size: 10px;
+      color: #f0d060;
+      text-shadow: 0 1px 3px rgba(0,0,0,0.8);
+    }
+.hand-slot-card {
+  border: 1px solid rgba(200,150,42,0.4) !important;
+}
+.hand-slot-card > img {
+  border-radius: calc(var(--s) * 7);
+  overflow: hidden;
+}
+.hand-slot-card:hover {
+      border-color: rgba(200,150,42,0.9) !important;
+      transform: translateY(-4px);
+      transition: transform 0.15s;
+    }
     </style>
   </head>
 
@@ -180,41 +102,31 @@
         <div class="game-title"><%= title || "Spielfeld" %></div>
 
         <!-- Zug-Timer mittig -->
-        <div id="turn-timer-wrap" style="display: none">
+        <div id="turn-timer-wrap" style="display:none;">
           <svg id="turn-timer-svg" viewBox="0 0 44 44" width="44" height="44">
-            <circle cx="22" cy="22" r="18" class="tt-track" />
-            <circle cx="22" cy="22" r="18" class="tt-fill" id="tt-circle" />
+            <circle cx="22" cy="22" r="18" class="tt-track"/>
+            <circle cx="22" cy="22" r="18" class="tt-fill" id="tt-circle"/>
           </svg>
           <div id="turn-timer-num">20</div>
         </div>
 
         <div class="top-icons">
-          <div class="top-icon">⚙</div>
-          <div class="top-icon">🗺</div>
-          <div class="top-icon">📖</div>
-          <div class="top-icon">🏆</div>
+          <div class="top-icon">⚙</div><div class="top-icon">🗺</div>
+          <div class="top-icon">📖</div><div class="top-icon">🏆</div>
         </div>
         <div class="top-bar-actions">
-          <button class="end-turn-btn" id="end-turn-btn" disabled>
-            Zug beenden
-          </button>
+          <button class="end-turn-btn" id="end-turn-btn" disabled>Zug beenden</button>
           <button class="aufgeben-btn" id="aufgeben-btn">🏳 Aufgeben</button>
         </div>
       </div>
 
-      <div id="board-lock-overlay" style="display: none">
+      <div id="board-lock-overlay" style="display:none;">
         <div id="ready-timer-box">
           <div id="ready-timer-label">Bereit machen</div>
           <div id="ready-timer-ring">
             <svg viewBox="0 0 80 80" width="80" height="80">
-              <circle cx="40" cy="40" r="34" class="timer-track" />
-              <circle
-                cx="40"
-                cy="40"
-                r="34"
-                class="timer-fill"
-                id="timer-circle"
-              />
+              <circle cx="40" cy="40" r="34" class="timer-track"/>
+              <circle cx="40" cy="40" r="34" class="timer-fill" id="timer-circle"/>
             </svg>
             <div id="ready-timer-number">30</div>
           </div>
@@ -230,19 +142,11 @@
       <div class="avatar avatar-left" id="avLeft">
         <input type="file" accept="image/*" id="fileInputLeft" />
         <img id="avImgL" class="av-img" />
-        <div class="av-placeholder" id="avPhL">
-          <div class="av-icon">⚔</div>
-        </div>
+        <div class="av-placeholder" id="avPhL"><div class="av-icon">⚔</div></div>
         <div class="av-name" id="nameLeft"><%= player1 || "Spieler 1" %></div>
         <div class="av-stats">
-          <div class="stat hp">
-            <span class="s-icon">❤</span
-            ><span class="s-val" id="hpLeft"><%= player1hp || 20 %></span>
-          </div>
-          <div class="stat mana">
-            <span class="s-icon">💧</span
-            ><span class="s-val" id="manaLeft"><%= player1mana || 3 %></span>
-          </div>
+          <div class="stat hp"><span class="s-icon">❤</span><span class="s-val" id="hpLeft"><%= player1hp || 20 %></span></div>
+          <div class="stat mana"><span class="s-icon">💧</span><span class="s-val" id="manaLeft"><%= player1mana || 3 %></span></div>
         </div>
         <div class="hp-orb" id="orbLeft"><%= player1hp || 15 %></div>
       </div>
@@ -250,27 +154,19 @@
       <div class="avatar avatar-right" id="avRight">
         <input type="file" accept="image/*" id="fileInputRight" />
         <img id="avImgR" class="av-img" />
-        <div class="av-placeholder" id="avPhR">
-          <div class="av-icon">🛡</div>
-        </div>
+        <div class="av-placeholder" id="avPhR"><div class="av-icon">🛡</div></div>
         <div class="av-name" id="nameRight"><%= player2 || "Gegner" %></div>
         <div class="av-stats">
-          <div class="stat hp">
-            <span class="s-icon">❤</span
-            ><span class="s-val" id="hpRight"><%= player2hp || 20 %></span>
-          </div>
-          <div class="stat mana">
-            <span class="s-icon">💧</span
-            ><span class="s-val" id="manaRight"><%= player2mana || 3 %></span>
-          </div>
+          <div class="stat hp"><span class="s-icon">❤</span><span class="s-val" id="hpRight"><%= player2hp || 20 %></span></div>
+          <div class="stat mana"><span class="s-icon">💧</span><span class="s-val" id="manaRight"><%= player2mana || 3 %></span></div>
         </div>
         <div class="hp-orb" id="orbRight"><%= player2hp || 15 %></div>
       </div>
 
       <div class="card-area">
-        <div class="row-label"></div>
+        <div class="row-label">Reihe 1</div>
         <div class="card-row" id="row1"></div>
-        <div class="row-label"></div>
+        <div class="row-label">Reihe 2</div>
         <div class="card-row" id="row2"></div>
       </div>
 
@@ -295,26 +191,14 @@
     <div id="match-result-overlay">
       <div class="result-title" id="result-title"></div>
       <div class="result-points" id="result-points"></div>
-      <div
-        class="result-levelup"
-        id="result-levelup"
-        style="display: none"
-      ></div>
-      <div
-        class="result-progress-wrap"
-        id="result-progress-wrap"
-        style="display: none"
-      >
+      <div class="result-levelup" id="result-levelup" style="display:none;"></div>
+      <div class="result-progress-wrap" id="result-progress-wrap" style="display:none;">
         <div class="result-progress-label">
           <span id="result-level-label">Level</span>
           <span id="result-pts-label"></span>
         </div>
         <div class="result-progress-track">
-          <div
-            class="result-progress-fill"
-            id="result-progress-fill"
-            style="width: 0%"
-          ></div>
+          <div class="result-progress-fill" id="result-progress-fill" style="width:0%"></div>
         </div>
       </div>
       <button class="result-close-btn" id="result-close-btn">Schließen</button>
@@ -323,15 +207,12 @@
     <script src="/socket.io/socket.io.js"></script>
     <script>
       /* ── Spielfeld aufbauen ─────────────────────────────── */
-      ["row1", "row2"].forEach((id) => {
+      ["row1","row2"].forEach(id => {
         const row = document.getElementById(id);
         for (let i = 1; i <= 11; i++) {
           const s = document.createElement("div");
           s.className = "card-slot";
-          s.innerHTML =
-            '<span class="slot-icon">✦</span><span class="slot-num">' +
-            i +
-            "</span>";
+          s.innerHTML = '<span class="slot-icon">✦</span><span class="slot-num">' + i + "</span>";
           row.appendChild(s);
         }
       });
@@ -355,7 +236,7 @@
 
       // ── Slots 2–4: aufgedeckte Handkarten (leer bis API lädt) ───
       const handCardIds = ["hand-card-1", "hand-card-2", "hand-card-3"];
-      handCardIds.forEach((id) => {
+      handCardIds.forEach(id => {
         const s = document.createElement("div");
         s.className = "hand-slot hand-slot-card";
         s.id = id;
@@ -379,13 +260,11 @@
 
       // State pro Slot: { card, currentCd } oder null = leer
       const handSlotState = {};
-      handCardIds.forEach((id) => {
-        handSlotState[id] = null;
-      });
+      handCardIds.forEach(id => { handSlotState[id] = null; });
 
       /* ── Slot rendern ──────────────────────────────────── */
       function renderHandSlot(id) {
-        const slot = document.getElementById(id);
+        const slot  = document.getElementById(id);
         const state = handSlotState[id];
         if (!slot) return;
 
@@ -398,18 +277,16 @@
         const { card, currentCd } = state;
         const isReady = currentCd <= 0;
 
-        const atkVal = card.attack ?? null;
+        const atkVal = card.attack  ?? null;
         const defVal = card.defends ?? null;
 
         const statsHtml = `
           <div class="card-stat-overlay">
             ${atkVal != null ? `<span class="cs-atk">${atkVal}</span>` : ""}
             ${defVal != null ? `<span class="cs-def">${defVal}</span>` : ""}
-            ${
-              card.cooldown != null
-                ? `<span class="cs-cd ${isReady ? "cs-cd-ready" : ""}">${isReady ? "✓" : currentCd}</span>`
-                : ""
-            }
+            ${card.cooldown != null
+              ? `<span class="cs-cd ${isReady ? "cs-cd-ready" : ""}">${isReady ? "✓" : currentCd}</span>`
+              : ""}
           </div>`;
 
         const readyBadge = isReady
@@ -440,7 +317,7 @@
       /* ── Karte vom Deck ziehen ─────────────────────────── */
       function drawNextCard() {
         if (deckQueue.length === 0) return;
-        const freeSlot = handCardIds.find((id) => handSlotState[id] === null);
+        const freeSlot = handCardIds.find(id => handSlotState[id] === null);
         if (!freeSlot) return; // alle Slots belegt → Karte bleibt im Deck
         const card = deckQueue.shift();
         setHandSlot(freeSlot, card);
@@ -450,7 +327,7 @@
 
       /* ── Cooldowns beim Zug-Ende reduzieren ────────────── */
       function tickHandCooldowns() {
-        handCardIds.forEach((id) => {
+        handCardIds.forEach(id => {
           const state = handSlotState[id];
           if (!state) return;
           if (state.currentCd > 0) state.currentCd--;
@@ -461,9 +338,8 @@
       /* ── Deck laden ────────────────────────────────────── */
       (async () => {
         try {
-          const urlP = new URLSearchParams(window.location.search);
-          const deckId =
-            urlP.get("deck") || sessionStorage.getItem("selectedDeckId");
+          const urlP   = new URLSearchParams(window.location.search);
+          const deckId = urlP.get("deck") || sessionStorage.getItem("selectedDeckId");
           if (!deckId) return;
 
           const cardsRes = await fetch("/api/decks/" + deckId + "/cards");
@@ -472,7 +348,7 @@
 
           // Karten nach amount auffalten
           const expanded = [];
-          cards.forEach((card) => {
+          cards.forEach(card => {
             for (let i = 0; i < (card.amount ?? 1); i++) expanded.push(card);
           });
 
@@ -491,7 +367,8 @@
           deckQueue = expanded.slice(3);
           const countEl = document.getElementById("deck-count");
           if (countEl) countEl.textContent = deckQueue.length;
-        } catch (e) {
+
+        } catch(e) {
           console.error("[Battlefield] Deck laden:", e);
         }
       })();
@@ -499,10 +376,10 @@
       /* ══════════════════════════════════════════════════════
          ZUG-TIMER (20 Sekunden)
       ══════════════════════════════════════════════════════ */
-      const TURN_SECONDS = 20;
-      const TT_CIRCUM = 2 * Math.PI * 18; // r=18
-      let turnTimerInt = null;
-      let turnSecsLeft = TURN_SECONDS;
+      const TURN_SECONDS  = 20;
+      const TT_CIRCUM     = 2 * Math.PI * 18; // r=18
+      let   turnTimerInt  = null;
+      let   turnSecsLeft  = TURN_SECONDS;
 
       function startTurnTimer() {
         clearInterval(turnTimerInt);
@@ -517,12 +394,19 @@
           updateTimerUI(turnSecsLeft);
           if (turnSecsLeft <= 0) {
             clearInterval(turnTimerInt);
-            // Zeit abgelaufen → Zug automatisch beenden
             if (isMyTurn) {
               tickHandCooldowns();
               drawNextCard();
               setTurnState(false);
               socket.emit("end_turn", { matchId, slot: mySlot });
+
+              // Watchdog: falls turn_change nach 5s nicht ankommt → selbst freischalten
+              setTimeout(() => {
+                if (!isMyTurn) {
+                  console.warn("[1v1] Kein turn_change nach 5s – Zug lokal übergeben");
+                  setTurnState(true);
+                }
+              }, 5000);
             }
           }
         }, 1000);
@@ -535,13 +419,12 @@
       }
 
       function updateTimerUI(secs) {
-        const num = document.getElementById("turn-timer-num");
+        const num    = document.getElementById("turn-timer-num");
         const circle = document.getElementById("tt-circle");
-        if (num) num.textContent = secs;
+        if (num)    num.textContent = secs;
         if (circle) {
           circle.style.strokeDashoffset = TT_CIRCUM * (1 - secs / TURN_SECONDS);
-          circle.style.stroke =
-            secs > 10 ? "#27ae60" : secs > 5 ? "#f39c12" : "#e74c3c";
+          circle.style.stroke = secs > 10 ? "#27ae60" : secs > 5 ? "#f39c12" : "#e74c3c";
           if (secs <= 5) {
             num.style.color = "#e74c3c";
             num.style.animation = "tt-pulse 0.5s ease-in-out infinite";
@@ -558,7 +441,7 @@
 
       // Bin ich der linke Spieler? Wird nach Seitenzuweisung gesetzt.
       let amILeftPlayer = null;
-      let isMyTurn = false;
+      let isMyTurn      = false;
 
       function setTurnState(myTurn) {
         isMyTurn = myTurn;
@@ -571,11 +454,21 @@
           btn.style.opacity = "1";
           document.getElementById("turn-indicator")?.remove();
           startTurnTimer();
+          // Watchdog für wartenden Spieler abbrechen falls vorhanden
+          if (window._waitWatchdog) { clearTimeout(window._waitWatchdog); window._waitWatchdog = null; }
         } else {
           btn.disabled = true;
           btn.style.opacity = "0.4";
           stopTurnTimer();
           showTurnIndicator();
+          // Watchdog: falls nach 26s kein turn_change → eigenen Zug erzwingen
+          if (window._waitWatchdog) clearTimeout(window._waitWatchdog);
+          window._waitWatchdog = setTimeout(() => {
+            if (!isMyTurn) {
+              console.warn("[1v1] Kein turn_change nach 26s – Zug lokal übernommen");
+              setTurnState(true);
+            }
+          }, 26000);
         }
       }
 
@@ -612,26 +505,22 @@
         setTurnState(false);
         socket.emit("end_turn", { matchId, slot: mySlot });
       });
-
       /* ── Hilfsfunktion: Karte mit Stats in einen Slot rendern ── */
       function renderCardInSlot(slot, card) {
         if (!slot || !card) return;
-        const atkVal = card.attack ?? null;
-        const defVal = card.defends ?? null;
-        const cdVal = card.cooldown ?? null;
+        const atkVal = card.attack   ?? null;
+        const defVal = card.defends  ?? null;
+        const cdVal  = card.cooldown ?? null;
 
         const hasAtk = atkVal != null;
         const hasDef = defVal != null;
-        const hasCd = cdVal != null;
-        const statsHtml =
-          hasAtk || hasDef || hasCd
-            ? `
+        const hasCd  = cdVal  != null;
+        const statsHtml = (hasAtk || hasDef || hasCd) ? `
           <div class="card-stat-overlay">
             ${hasAtk ? `<span class="cs-atk">${atkVal}</span>` : ""}
             ${hasDef ? `<span class="cs-def">${defVal}</span>` : ""}
-            ${hasCd ? `<span class="cs-cd">${cdVal}</span>` : ""}
-          </div>`
-            : "";
+            ${hasCd  ? `<span class="cs-cd">${cdVal}</span>`   : ""}
+          </div>` : "";
 
         slot.classList.add("slot-occupied");
         slot.innerHTML = card.image
@@ -649,9 +538,9 @@
       }
 
       /* ── Match-Daten ────────────────────────────────────── */
-      const urlParams = new URLSearchParams(window.location.search);
-      const matchId = urlParams.get("match") || "<%= matchId || '' %>";
-      const mySlot = urlParams.get("slot") || "<%= mySlot  || 'player1' %>";
+      const urlParams  = new URLSearchParams(window.location.search);
+      const matchId    = urlParams.get("match") || "<%= matchId || '' %>";
+      const mySlot     = urlParams.get("slot")  || "<%= mySlot  || 'player1' %>";
       const amIPlayer1 = mySlot === "player1";
 
       /* ── Socket ─────────────────────────────────────────── */
@@ -661,31 +550,23 @@
       let myIngameName = null;
 
       function emitArenaJoin(me) {
-        myIngameName =
-          (me && (me.ingame_name || me.username || me.name || String(me.id))) ||
-          "Spieler";
-        const myNameEl = document.getElementById(
-          amIPlayer1 ? "nameLeft" : "nameRight",
-        );
+        myIngameName = (me && (me.ingame_name || me.username || me.name || String(me.id))) || "Spieler";
+        const myNameEl = document.getElementById(amIPlayer1 ? "nameLeft" : "nameRight");
         if (myNameEl) myNameEl.textContent = myIngameName;
-        console.log("[1v1] emitArenaJoin →", {
-          matchId,
-          slot: mySlot,
-          name: myIngameName,
-        });
+        console.log("[1v1] emitArenaJoin →", { matchId, slot: mySlot, name: myIngameName });
         socket.emit("arena_join", {
           matchId,
-          slot: mySlot,
-          accountId: me?.id ?? null,
+          slot:       mySlot,
+          accountId:  me?.id  ?? null,
           playerName: myIngameName,
         });
       }
 
       function fetchAndJoin() {
         fetch("/arena/me")
-          .then((r) => r.json())
-          .then((me) => emitArenaJoin(me))
-          .catch(() => {
+          .then(r => r.json())
+          .then(me => emitArenaJoin(me))
+          .catch(()  => {
             console.warn("[1v1] /arena/me fehlgeschlagen – join ohne Account");
             emitArenaJoin(null);
           });
@@ -713,60 +594,40 @@
       }, 10000);
 
       /* ── Gegner verbunden ───────────────────────────────── */
-      socket.on("arena_opponent_joined", (data) => {
+      socket.on("arena_opponent_joined", data => {
         console.log("[Arena] arena_opponent_joined:", data);
         clearTimeout(readyFallbackTimer);
         const name = data.name || "Gegner";
-        document.getElementById(
-          amIPlayer1 ? "nameRight" : "nameLeft",
-        ).textContent = name;
+        document.getElementById(amIPlayer1 ? "nameRight" : "nameLeft").textContent = name;
         document.getElementById("connecting-overlay")?.remove();
         const lockOverlay = document.getElementById("board-lock-overlay");
         if (lockOverlay) lockOverlay.style.display = "flex";
       });
 
-      socket.on("arena_ready", (data) => {
+      socket.on("arena_ready", data => {
         console.log("[Arena] arena_ready:", data);
         clearTimeout(readyFallbackTimer);
         document.getElementById("connecting-overlay")?.remove();
-        // Eigenen Namen nicht überschreiben – nur Gegner-Slot aktualisieren
-        const oppNameFromServer = amIPlayer1
-          ? data.player2 || "Gegner"
-          : data.player1 || "Gegner";
-        const oppEl = document.getElementById(
-          amIPlayer1 ? "nameRight" : "nameLeft",
-        );
-        if (
-          oppEl &&
-          oppNameFromServer !== "Spieler" &&
-          oppNameFromServer !== "Spieler 2" &&
-          oppNameFromServer !== "Spieler 1"
-        ) {
-          oppEl.textContent = oppNameFromServer;
-        }
+        // Gegner-Name aus server-Daten setzen (immer, außer leer)
+        const oppName = amIPlayer1 ? data.player2 : data.player1;
+        const oppEl   = document.getElementById(amIPlayer1 ? "nameRight" : "nameLeft");
+        if (oppEl && oppName) oppEl.textContent = oppName;
+        // Eigenen Namen sichern falls noch nicht gesetzt
+        const myEl = document.getElementById(amIPlayer1 ? "nameLeft" : "nameRight");
+        if (myEl && myIngameName) myEl.textContent = myIngameName;
         const lockOverlay = document.getElementById("board-lock-overlay");
         if (lockOverlay) lockOverlay.style.display = "flex";
       });
 
       /* ── Server: Zugwechsel ──────────────────────────────── */
-      socket.on("turn_change", (data) => {
-        // data.activeSlot ist immer "player1" oder "player2" (Server-Slot)
-        // mySlot ist ebenfalls "player1" oder "player2" → direkt vergleichen
+      socket.on("turn_change", data => {
         const nowMyTurn = data.activeSlot === mySlot;
-        console.log(
-          "[1v1] turn_change:",
-          data.activeSlot,
-          "| ich bin:",
-          mySlot,
-          "| meinZug:",
-          nowMyTurn,
-        );
+        console.log("[1v1] turn_change:", data.activeSlot, "| ich bin:", mySlot, "| meinZug:", nowMyTurn);
         setTurnState(nowMyTurn);
       });
 
-      socket.on("turn_started", (data) => {
-        const nowMyTurn = data.slot === mySlot;
-        setTurnState(nowMyTurn);
+      socket.on("turn_started", data => {
+        setTurnState(data.slot === mySlot);
       });
 
       /* ── Bereit-System ──────────────────────────────────── */
@@ -785,67 +646,49 @@
       const timerCircle = document.getElementById("timer-circle");
       if (timerCircle) timerCircle.style.strokeDasharray = CIRCUMFERENCE;
 
-      socket.on("ready_timer", (data) => {
+      socket.on("ready_timer", data => {
         const num = document.getElementById("ready-timer-number");
         if (num) num.textContent = data.remaining;
         if (timerCircle) {
-          timerCircle.style.strokeDashoffset =
-            CIRCUMFERENCE * (1 - data.remaining / 30);
-          timerCircle.style.stroke =
-            data.remaining > 15
-              ? "#27ae60"
-              : data.remaining > 7
-                ? "#f39c12"
-                : "#e74c3c";
+          timerCircle.style.strokeDashoffset = CIRCUMFERENCE * (1 - data.remaining / 30);
+          timerCircle.style.stroke = data.remaining > 15 ? "#27ae60" : data.remaining > 7 ? "#f39c12" : "#e74c3c";
         }
       });
 
-      socket.on("ready_status", (data) => {
+      socket.on("ready_status", data => {
         const pip1 = document.getElementById("pip-player1");
         const pip2 = document.getElementById("pip-player2");
         if (data.readySlots) {
-          if (data.readySlots.includes("player1") && pip1)
-            pip1.textContent =
-              "✅ " +
-              (document.getElementById("nameLeft")?.textContent || "Spieler 1");
-          if (data.readySlots.includes("player2") && pip2)
-            pip2.textContent =
-              "✅ " +
-              (document.getElementById("nameRight")?.textContent ||
-                "Spieler 2");
+          if (data.readySlots.includes("player1") && pip1) pip1.textContent = "✅ " + (document.getElementById("nameLeft")?.textContent  || "Spieler 1");
+          if (data.readySlots.includes("player2") && pip2) pip2.textContent = "✅ " + (document.getElementById("nameRight")?.textContent || "Spieler 2");
         }
         if (data.readyCount === 2) {
           // ── Zufällige Seitenzuweisung ──────────────────────
-          const seed = matchId
-            .split("")
-            .reduce((a, c) => a + c.charCodeAt(0), 0);
+          const seed = matchId.split("").reduce((a, c) => a + c.charCodeAt(0), 0);
           const flip = seed % 2 === 1;
 
           // Eigenen Namen immer aus myIngameName, Gegner aus DOM
-          const myName = myIngameName || "Spieler";
-          const oppEl = document.getElementById(
-            amIPlayer1 ? "nameRight" : "nameLeft",
-          );
+          const myName  = myIngameName || "Spieler";
+          const oppEl   = document.getElementById(amIPlayer1 ? "nameRight" : "nameLeft");
           const oppName = oppEl?.textContent || "Gegner";
 
           // player1-Name und player2-Name bestimmen
-          const p1Name = amIPlayer1 ? myName : oppName;
+          const p1Name = amIPlayer1 ? myName  : oppName;
           const p2Name = amIPlayer1 ? oppName : myName;
 
-          const leftName = flip ? p2Name : p1Name;
+          const leftName  = flip ? p2Name : p1Name;
           const rightName = flip ? p1Name : p2Name;
 
           // Namen in Avatar-Slots schreiben
-          document.getElementById("nameLeft").textContent = leftName;
+          document.getElementById("nameLeft").textContent  = leftName;
           document.getElementById("nameRight").textContent = rightName;
 
           // Platzhalter: Ingame-Namen anzeigen
-          ["avLeft", "avRight"].forEach((avId) => {
-            const av = document.getElementById(avId);
-            const ph = av?.querySelector(".av-placeholder");
+          ["avLeft", "avRight"].forEach(avId => {
+            const av   = document.getElementById(avId);
+            const ph   = av?.querySelector(".av-placeholder");
             const name = avId === "avLeft" ? leftName : rightName;
-            if (ph)
-              ph.innerHTML = `
+            if (ph) ph.innerHTML = `
               <div style="
                 font-family:'Cinzel',serif;
                 font-size:calc(var(--s)*13);
@@ -863,14 +706,11 @@
 
           // Festlegen ob ich der linke Spieler bin
           // flip=false: player1=links, flip=true: player1=rechts
-          amILeftPlayer = flip ? mySlot === "player2" : mySlot === "player1";
+          amILeftPlayer = flip ? (mySlot === "player2") : (mySlot === "player1");
 
           // Linker Spieler beginnt
           setTurnState(amILeftPlayer);
-          socket.emit("end_turn_init", {
-            matchId,
-            starterSlot: flip ? "player2" : "player1",
-          });
+          socket.emit("end_turn_init", { matchId, starterSlot: flip ? "player2" : "player1" });
         }
       });
 
@@ -879,8 +719,7 @@
         // Eigenes Modal statt browser confirm()
         const modal = document.createElement("div");
         modal.id = "surrender-modal";
-        modal.style.cssText =
-          "position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;";
+        modal.style.cssText = "position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;";
         modal.innerHTML = `
           <div style="background:linear-gradient(#2a1a08,#1a0f04);border:2px solid #c8960c;
                border-radius:14px;padding:32px 40px;text-align:center;max-width:360px;
@@ -902,24 +741,19 @@
           </div>`;
         document.body.appendChild(modal);
 
-        document
-          .getElementById("surrender-no")
-          .addEventListener("click", () => modal.remove());
-        document
-          .getElementById("surrender-yes")
-          .addEventListener("click", () => {
-            modal.remove();
-            socket.emit("player_surrender", { matchId, slot: mySlot });
-            // Eigene Weiterleitung nach kurzer Verzögerung
-            showSurrenderMessage(false);
-          });
+        document.getElementById("surrender-no").addEventListener("click", () => modal.remove());
+        document.getElementById("surrender-yes").addEventListener("click", () => {
+          modal.remove();
+          socket.emit("player_surrender", { matchId, slot: mySlot });
+          // Eigene Weiterleitung nach kurzer Verzögerung
+          showSurrenderMessage(false);
+        });
       }
 
       /* ── Nachricht anzeigen + weiterleiten ──────────────── */
       function showSurrenderMessage(iWon) {
         const overlay = document.createElement("div");
-        overlay.style.cssText =
-          "position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.9);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Cinzel',serif;";
+        overlay.style.cssText = "position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.9);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Cinzel',serif;";
         overlay.innerHTML = iWon
           ? `<div style="font-size:48px;margin-bottom:16px;">🏆</div>
              <div style="font-size:28px;color:#f0d060;letter-spacing:4px;">SIEG!</div>
@@ -942,7 +776,7 @@
       }
 
       /* ── Spielende Events ───────────────────────────────── */
-      socket.on("player_surrendered", (data) => {
+      socket.on("player_surrendered", data => {
         const iLost = data.slot === mySlot;
         if (!iLost) {
           // Ich habe gewonnen (Gegner hat aufgegeben)
@@ -952,7 +786,7 @@
       });
 
       /* Punkte-Ergebnis vom Server (kommt kurz nach player_surrendered) */
-      socket.on("match_result", (data) => {
+      socket.on("match_result", data => {
         updateResultWithPoints(data);
       });
 
@@ -962,12 +796,12 @@
 
       /* ── Ergebnis-Overlay ───────────────────────────────── */
       function showResultOverlay(won, data) {
-        const overlay = document.getElementById("match-result-overlay");
-        const titleEl = document.getElementById("result-title");
+        const overlay  = document.getElementById("match-result-overlay");
+        const titleEl  = document.getElementById("result-title");
         const pointsEl = document.getElementById("result-points");
 
         titleEl.textContent = won ? "⚔️ SIEG!" : "💀 NIEDERLAGE";
-        titleEl.className = "result-title " + (won ? "win" : "lose");
+        titleEl.className   = "result-title " + (won ? "win" : "lose");
         pointsEl.textContent = "Punkte werden berechnet…";
 
         overlay.classList.add("show");
@@ -976,45 +810,37 @@
       }
 
       function updateResultWithPoints(data) {
-        const pointsEl = document.getElementById("result-points");
-        const levelupEl = document.getElementById("result-levelup");
+        const pointsEl   = document.getElementById("result-points");
+        const levelupEl  = document.getElementById("result-levelup");
         const progressEl = document.getElementById("result-progress-wrap");
-        const fillEl = document.getElementById("result-progress-fill");
-        const lvlLbl = document.getElementById("result-level-label");
-        const ptsLbl = document.getElementById("result-pts-label");
+        const fillEl     = document.getElementById("result-progress-fill");
+        const lvlLbl     = document.getElementById("result-level-label");
+        const ptsLbl     = document.getElementById("result-pts-label");
 
         /* Overlay anzeigen falls noch nicht sichtbar */
         const overlay = document.getElementById("match-result-overlay");
         if (!overlay.classList.contains("show")) {
-          document.getElementById("result-title").textContent = data.won
-            ? "⚔️ SIEG!"
-            : "💀 NIEDERLAGE";
-          document.getElementById("result-title").className =
-            "result-title " + (data.won ? "win" : "lose");
+          document.getElementById("result-title").textContent = data.won ? "⚔️ SIEG!" : "💀 NIEDERLAGE";
+          document.getElementById("result-title").className   = "result-title " + (data.won ? "win" : "lose");
           overlay.classList.add("show");
         }
 
-        pointsEl.textContent =
-          data.awarded > 0
-            ? "+" + data.awarded + " Arena-Punkte"
-            : "Keine Punkte (Aufgabe zu früh oder Tageslimit erreicht)";
+        pointsEl.textContent = data.awarded > 0
+          ? "+" + data.awarded + " Arena-Punkte"
+          : "Keine Punkte (Aufgabe zu früh oder Tageslimit erreicht)";
 
         if (data.level_up) {
           levelupEl.style.display = "block";
-          levelupEl.textContent = "⬆ LEVEL UP! → Level " + data.new_level;
+          levelupEl.textContent   = "⬆ LEVEL UP! → Level " + data.new_level;
         }
 
         /* Fortschrittsbalken vom Server laden */
         fetch("/api/points/me")
-          .then((r) => r.json())
-          .then((me) => {
+          .then(r => r.json())
+          .then(me => {
             progressEl.style.display = "block";
-            lvlLbl.textContent =
-              "Level " +
-              me.current_level +
-              (me.next_level ? " → " + me.next_level : " (MAX)");
-            ptsLbl.textContent =
-              me.points_this_level + " / " + me.points_for_next + " Pts";
+            lvlLbl.textContent = "Level " + me.current_level + (me.next_level ? " → " + me.next_level : " (MAX)");
+            ptsLbl.textContent = me.points_this_level + " / " + me.points_for_next + " Pts";
             requestAnimationFrame(() => {
               fillEl.style.width = me.progress_percent + "%";
             });
@@ -1031,44 +857,27 @@
         window.top.location.href = "/launcher";
       }
 
-      document
-        .getElementById("result-close-btn")
-        .addEventListener("click", closePopup);
+      document.getElementById("result-close-btn").addEventListener("click", closePopup);
 
       /* ── Avatar ─────────────────────────────────────────── */
       function loadAvatar(input, imgId, parentId) {
         const file = input.files[0];
         if (!file) return;
         const r = new FileReader();
-        r.onload = (e) => {
+        r.onload = e => {
           const img = document.getElementById(imgId);
           img.src = e.target.result;
           img.style.display = "block";
-          document
-            .getElementById(parentId)
-            ?.querySelector(".av-placeholder")
-            ?.style.setProperty("display", "none");
+          document.getElementById(parentId)?.querySelector(".av-placeholder")?.style.setProperty("display","none");
         };
         r.readAsDataURL(file);
       }
 
       /* ── Event-Listener ─────────────────────────────────── */
-      document
-        .getElementById("bereit-btn")
-        ?.addEventListener("click", handleBereit);
-      document
-        .getElementById("aufgeben-btn")
-        ?.addEventListener("click", handleAufgeben);
-      document
-        .getElementById("fileInputLeft")
-        ?.addEventListener("change", function () {
-          loadAvatar(this, "avImgL", "avLeft");
-        });
-      document
-        .getElementById("fileInputRight")
-        ?.addEventListener("change", function () {
-          loadAvatar(this, "avImgR", "avRight");
-        });
+      document.getElementById("bereit-btn")    ?.addEventListener("click", handleBereit);
+      document.getElementById("aufgeben-btn")  ?.addEventListener("click", handleAufgeben);
+      document.getElementById("fileInputLeft") ?.addEventListener("change", function() { loadAvatar(this,"avImgL","avLeft"); });
+      document.getElementById("fileInputRight")?.addEventListener("change", function() { loadAvatar(this,"avImgR","avRight"); });
     </script>
   </body>
 </html>