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

---
 views/1v1-battlefield.ejs | 589 +++++++++++++++++++++++++-------------
 1 file changed, 396 insertions(+), 193 deletions(-)

diff --git a/views/1v1-battlefield.ejs b/views/1v1-battlefield.ejs
index 168bf9a..bf4fab9 100644
--- a/views/1v1-battlefield.ejs
+++ b/views/1v1-battlefield.ejs
@@ -4,14 +4,17 @@
     <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;
@@ -19,74 +22,149 @@
         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;} }
-
-      .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;
+      #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-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);
       }
-      .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>
 
@@ -102,31 +180,41 @@
         <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>
@@ -142,11 +230,19 @@
       <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>
@@ -154,19 +250,27 @@
       <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">Reihe 1</div>
+        <div class="row-label"></div>
         <div class="card-row" id="row1"></div>
-        <div class="row-label">Reihe 2</div>
+        <div class="row-label"></div>
         <div class="card-row" id="row2"></div>
       </div>
 
@@ -191,14 +295,26 @@
     <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>
@@ -207,12 +323,15 @@
     <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);
         }
       });
@@ -236,7 +355,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;
@@ -260,11 +379,13 @@
 
       // 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;
 
@@ -277,16 +398,18 @@
         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
@@ -317,7 +440,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);
@@ -327,7 +450,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--;
@@ -338,8 +461,9 @@
       /* ── 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");
@@ -348,7 +472,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);
           });
 
@@ -367,8 +491,7 @@
           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);
         }
       })();
@@ -376,10 +499,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);
@@ -412,12 +535,13 @@
       }
 
       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";
@@ -434,7 +558,7 @@
 
       // Bin ich der linke Spieler? Wird nach Seitenzuweisung gesetzt.
       let amILeftPlayer = null;
-      let isMyTurn      = false;
+      let isMyTurn = false;
 
       function setTurnState(myTurn) {
         isMyTurn = myTurn;
@@ -492,19 +616,22 @@
       /* ── 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
@@ -522,9 +649,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 ─────────────────────────────────────────── */
@@ -534,23 +661,31 @@
       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);
           });
@@ -578,26 +713,35 @@
       }, 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") {
+          ? 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;
         }
         const lockOverlay = document.getElementById("board-lock-overlay");
@@ -605,15 +749,22 @@
       });
 
       /* ── Server: Zugwechsel ──────────────────────────────── */
-      socket.on("turn_change", data => {
+      socket.on("turn_change", (data) => {
         // data.activeSlot ist immer "player1" oder "player2" (Server-Slot)
         // mySlot ist ebenfalls "player1" oder "player2" → direkt vergleichen
         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 => {
+      socket.on("turn_started", (data) => {
         const nowMyTurn = data.slot === mySlot;
         setTurnState(nowMyTurn);
       });
@@ -634,49 +785,67 @@
       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);
@@ -694,11 +863,14 @@
 
           // 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",
+          });
         }
       });
 
@@ -707,7 +879,8 @@
         // 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;
@@ -729,19 +902,24 @@
           </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>
@@ -764,7 +942,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)
@@ -774,7 +952,7 @@
       });
 
       /* Punkte-Ergebnis vom Server (kommt kurz nach player_surrendered) */
-      socket.on("match_result", data => {
+      socket.on("match_result", (data) => {
         updateResultWithPoints(data);
       });
 
@@ -784,12 +962,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");
@@ -798,37 +976,45 @@
       }
 
       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 + "%";
             });
@@ -845,27 +1031,44 @@
         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>