dtjdtz

public/js/quickmenu.js

@@ -127,6 +127,12 @@ function isBoosterSpinning() {
     if (card) return true;
   }
 
+  const arena2Ui = document.getElementById("arena2-ui");
+  if (arena2Ui && arena2Ui.style.display !== "none") {
+    const card = arena2Ui.querySelector(".arena-mode-card-daily.searching");
+    if (card) return true;
+  }
+
   return false;
 }
 

public/js/quickmenu/events.js

@@ -61,7 +61,7 @@ export async function loadEvents() {
       type: "booster",
     },
     { id: 2, img: "/images/items/1v1.png", label: "1 v 1", type: "arena" },
-    { id: 3, img: "/images/items/2v2.png", label: "2 v 2" },
+    { id: 3, img: "/images/items/2v2.png", label: "2 v 2", type: "arena2" },
     {
       id: 4,
       img: "/images/items/holz.png",
@@ -202,6 +202,19 @@ export async function loadEvents() {
       </div>
     </div>
 
+    <!-- Arena Daily UI (nur 2v2) -->
+    <div id="arena2-ui" class="booster-ui" style="display:none;">
+      <button class="booster-back-btn" id="arena2-back-btn">← Zurück</button>
+      <div class="arena-daily-wrap">
+        <div class="arena-mode-card-daily" id="arena-2v2-card">
+          <div class="arena-mode-icon">⚔️</div>
+          <div class="arena-mode-label-daily">2v2</div>
+          <div class="arena-mode-desc-daily">Verbünde dich mit einem Kameraden im Kampf</div>
+        </div>
+        <div id="arena2-daily-status" style="display:none;"></div>
+      </div>
+    </div>
+
     <!-- Standard Detail-Popup -->
     <div id="event-detail-overlay">
       <div id="event-detail-popup">
@@ -221,6 +234,7 @@ export async function loadEvents() {
   const woodUi = body.querySelector("#wood-ui");
   const goldUi = body.querySelector("#gold-ui");
   const arenaUi = body.querySelector("#arena-ui");
+  const arena2Ui = body.querySelector("#arena2-ui");
   const eventsGrid = body.querySelector("#events-grid");
 
   /* ── Event-Karten ── */
@@ -241,6 +255,12 @@ export async function loadEvents() {
         resetArenaDaily();
         return;
       }
+      if (card.dataset.type === "arena2") {
+        eventsGrid.style.display = "none";
+        arena2Ui.style.display = "flex";
+        resetArena2Daily();
+        return;
+      }
       if (card.dataset.type === "gold") {
         eventsGrid.style.display = "none";
         goldUi.style.display = "flex";
@@ -339,7 +359,7 @@ export async function loadEvents() {
   });
 
   body.querySelector("#arena-back-btn").addEventListener("click", () => {
-    if (isArenaSearching) return; // Während Suche gesperrt
+    if (isArenaSearching) return;   // Während Suche gesperrt
     eventsGrid.style.display = "";
     arenaUi.style.display = "none";
     cancelArenaSearch();
@@ -357,16 +377,12 @@ export async function loadEvents() {
     if (card) {
       card.classList.remove("searching");
       card.querySelector(".arena-mode-label-daily").textContent = "1v1";
-      card.querySelector(".arena-mode-desc-daily").textContent =
+      card.querySelector(".arena-mode-desc-daily").textContent = "Einzelkampf – Beweis deine Stärke im Duell";
-        "Einzelkampf – Beweis deine Stärke im Duell";
     }
     if (status) status.style.display = "none";
 
     const backBtn = body.querySelector("#arena-back-btn");
-    if (backBtn) {
+    if (backBtn) { backBtn.style.opacity = "1"; backBtn.style.cursor = "pointer"; }
-      backBtn.style.opacity = "1";
-      backBtn.style.cursor = "pointer";
-    }
   }
 
   function cancelArenaSearch() {
@@ -403,17 +419,14 @@ export async function loadEvents() {
     const card1v1 = body.querySelector("#arena-1v1-card");
     card1v1.classList.add("searching");
     card1v1.querySelector(".arena-mode-label-daily").textContent = "⏳ Suche…";
-    card1v1.querySelector(".arena-mode-desc-daily").textContent =
+    card1v1.querySelector(".arena-mode-desc-daily").textContent = "Warte auf passenden Gegner…";
-      "Warte auf passenden Gegner…";
 
     // Zurück-Button sperren während Suche
     const backBtn = body.querySelector("#arena-back-btn");
     backBtn.style.opacity = "0.35";
-    backBtn.style.cursor = "not-allowed";
+    backBtn.style.cursor  = "not-allowed";
 
-    showArenaStatus(
+    showArenaStatus(`⏳ Suche Gegner (Level ${Math.max(1, me.level - 5)}–${me.level + 5})…`);
-      `⏳ Suche Gegner (Level ${Math.max(1, me.level - 5)}–${me.level + 5})…`,
-    );
 
     socket.off("match_found");
     socket.off("queue_status");
@@ -423,11 +436,9 @@ export async function loadEvents() {
         const pool = data.poolSize ? ` · ${data.poolSize} im Pool` : "";
         showArenaStatus(`⏳ Suche Gegner (Level ${Math.max(1, me.level - 5)}–${me.level + 5})${pool}
           <br><span class="arena-cancel-link" id="arena-cancel-link">Suche abbrechen</span>`);
-        body
+        body.querySelector("#arena-cancel-link")?.addEventListener("click", () => {
-          .querySelector("#arena-cancel-link")
+          cancelArenaSearch();
-          ?.addEventListener("click", () => {
+        });
-            cancelArenaSearch();
-          });
       }
     });
 
@@ -457,20 +468,16 @@ export async function loadEvents() {
     const box = body.querySelector("#arena-daily-status");
     if (!box) return;
     box.style.display = "block";
-    box.style.color = isError ? "#e74c3c" : "#000000";
+    box.style.color   = isError ? "#e74c3c" : "#dceb15";
-    box.innerHTML = html;
+    box.innerHTML     = html;
-    if (isError)
+    if (isError) setTimeout(() => { box.style.display = "none"; }, 3000);
-      setTimeout(() => {
-        box.style.display = "none";
-      }, 3000);
   }
 
   function showArenaMatchFound(myName, opponentName, onDone) {
     if (document.getElementById("match-found-overlay")) return;
     const overlay = document.createElement("div");
     overlay.id = "match-found-overlay";
-    overlay.style.cssText =
+    overlay.style.cssText = "position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.9);display:flex;flex-direction:column;align-items:center;justify-content:center;";
-      "position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.9);display:flex;flex-direction:column;align-items:center;justify-content:center;";
     overlay.innerHTML = `
       <div style="font-family:'Cinzel',serif;font-size:36px;color:#ffd750;letter-spacing:6px;margin-bottom:12px;">⚔️ Match gefunden!</div>
       <div style="font-family:'Cinzel',serif;font-size:18px;color:rgba(255,255,255,0.75);letter-spacing:3px;">${myName} &nbsp;vs&nbsp; ${opponentName}</div>
@@ -478,30 +485,22 @@ export async function loadEvents() {
         <div id="mfBar" style="height:100%;background:#ffd750;width:0%;border-radius:2px;transition:width 1.5s ease;"></div>
       </div>`;
     document.body.appendChild(overlay);
-    requestAnimationFrame(() => {
+    requestAnimationFrame(() => { const b = document.getElementById("mfBar"); if (b) b.style.width = "100%"; });
-      const b = document.getElementById("mfBar");
+    setTimeout(() => { overlay.remove(); onDone(); }, 1600);
-      if (b) b.style.width = "100%";
-    });
-    setTimeout(() => {
-      overlay.remove();
-      onDone();
-    }, 1600);
   }
 
-  function openArenaMatchPopup(src, opponentName, matchId) {
+  function openArenaMatchPopup(src, opponentName, matchId, mode = "1v1") {
     document.getElementById("arena-backdrop")?.remove();
     document.getElementById("arena-popup")?.remove();
     const backdrop = document.createElement("div");
     backdrop.id = "arena-backdrop";
-    backdrop.style.cssText =
+    backdrop.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.82);backdrop-filter:blur(5px);z-index:9998;";
-      "position:fixed;inset:0;background:rgba(0,0,0,0.82);backdrop-filter:blur(5px);z-index:9998;";
     const popup = document.createElement("div");
     popup.id = "arena-popup";
-    popup.style.cssText =
+    popup.style.cssText = "position:fixed;inset:50px;z-index:9999;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,215,80,0.35),0 30px 90px rgba(0,0,0,0.85);";
-      "position:fixed;inset:50px;z-index:9999;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,215,80,0.35),0 30px 90px rgba(0,0,0,0.85);";
     popup.innerHTML = `
       <div style="display:flex;align-items:center;justify-content:space-between;background:rgba(10,8,5,0.95);border-bottom:1px solid rgba(255,215,80,0.3);padding:0 16px;height:42px;flex-shrink:0;">
-        <span style="font-family:'Cinzel',serif;font-size:13px;letter-spacing:4px;color:rgba(255,215,80,0.85);">⚔️ 1v1 · vs ${opponentName}</span>
+        <span style="font-family:'Cinzel',serif;font-size:13px;letter-spacing:4px;color:rgba(255,215,80,0.85);">⚔️ ${mode} · vs ${opponentName}</span>
         <span style="font-size:11px;color:rgba(255,255,255,0.22);">${matchId}</span>
       </div>
       <iframe src="${src}" style="flex:1;border:none;width:100%;display:block;" allowfullscreen></iframe>`;
@@ -509,6 +508,111 @@ export async function loadEvents() {
     document.body.appendChild(popup);
   }
 
+  body.querySelector("#arena2-back-btn").addEventListener("click", () => {
+    if (isArena2Searching) return;
+    eventsGrid.style.display = "";
+    arena2Ui.style.display = "none";
+    cancelArena2Search();
+  });
+
+  /* ── Arena2 Daily Zustand (2v2) ── */
+  let isArena2Searching = false;
+
+  function resetArena2Daily() {
+    isArena2Searching = false;
+    const card = body.querySelector("#arena-2v2-card");
+    const status = body.querySelector("#arena2-daily-status");
+    if (card) {
+      card.classList.remove("searching");
+      card.querySelector(".arena-mode-label-daily").textContent = "2v2";
+      card.querySelector(".arena-mode-desc-daily").textContent = "Verbünde dich mit einem Kameraden im Kampf";
+    }
+    if (status) status.style.display = "none";
+    const backBtn = body.querySelector("#arena2-back-btn");
+    if (backBtn) { backBtn.style.opacity = "1"; backBtn.style.cursor = "pointer"; }
+  }
+
+  function cancelArena2Search() {
+    const socket = window._socket;
+    if (socket) {
+      socket.emit("leave_2v2");
+      socket.off("match_found_2v2");
+      socket.off("queue_status_2v2");
+    }
+    resetArena2Daily();
+  }
+
+  body.querySelector("#arena-2v2-card").addEventListener("click", async () => {
+    if (isArena2Searching) return;
+
+    const socket = window._socket;
+    if (!socket) {
+      showArena2Status("❌ Keine Verbindung zum Server.", true);
+      return;
+    }
+
+    let me;
+    try {
+      const res = await fetch("/arena/me");
+      if (!res.ok) throw new Error(res.status);
+      me = await res.json();
+    } catch {
+      showArena2Status("❌ Spielerdaten konnten nicht geladen werden.", true);
+      return;
+    }
+
+    isArena2Searching = true;
+    const card2v2 = body.querySelector("#arena-2v2-card");
+    card2v2.classList.add("searching");
+    card2v2.querySelector(".arena-mode-label-daily").textContent = "⏳ Suche…";
+    card2v2.querySelector(".arena-mode-desc-daily").textContent = "Warte auf Mitspieler & Gegner…";
+
+    const backBtn = body.querySelector("#arena2-back-btn");
+    backBtn.style.opacity = "0.35";
+    backBtn.style.cursor  = "not-allowed";
+
+    showArena2Status(`⏳ Suche Gegner (Level ${Math.max(1, me.level - 5)}–${me.level + 5})…`);
+
+    socket.off("match_found_2v2");
+    socket.off("queue_status_2v2");
+
+    socket.on("queue_status_2v2", (data) => {
+      if (data.status === "waiting") {
+        const pool = data.poolSize ? ` · ${data.poolSize} im Pool` : "";
+        showArena2Status(`⏳ Suche Gegner (Level ${Math.max(1, me.level - 5)}–${me.level + 5})${pool}
+          <br><span class="arena-cancel-link" id="arena2-cancel-link">Suche abbrechen</span>`);
+        body.querySelector("#arena2-cancel-link")?.addEventListener("click", () => cancelArena2Search());
+      }
+    });
+
+    socket.once("match_found_2v2", (data) => {
+      socket.off("queue_status_2v2");
+      isArena2Searching = false;
+      markDailyComplete(3);
+      showArenaMatchFound(me.name, data.opponent.name, () => {
+        eventsGrid.style.display = "";
+        arena2Ui.style.display = "none";
+        openArenaMatchPopup(
+          `/arena/2v2?match=${encodeURIComponent(data.matchId)}&slot=${encodeURIComponent(data.mySlot)}`,
+          data.opponent.name,
+          data.matchId,
+          "2v2",
+        );
+      });
+    });
+
+    socket.emit("join_2v2", { id: me.id, name: me.name, level: me.level });
+  });
+
+  function showArena2Status(html, isError = false) {
+    const box = body.querySelector("#arena2-daily-status");
+    if (!box) return;
+    box.style.display = "block";
+    box.style.color   = isError ? "#e74c3c" : "#dceb15";
+    box.innerHTML     = html;
+    if (isError) setTimeout(() => { box.style.display = "none"; }, 3000);
+  }
+
   /* ── Booster Zustand ── */
   let allCards = [];
   let isSpinning = false;