dtjdtz

2026-04-07 15:20:16 +01:00 · 2026-04-07 15:20:16 +01:00 · 38c3e8bfd8
commit 38c3e8bfd8
parent a389f75f25
2 changed files with 151 additions and 41 deletions
--- a/public/js/quickmenu.js
+++ b/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;
 }

--- a/public/js/quickmenu/events.js
+++ b/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 =
-        "Einzelkampf – Beweis deine Stärke im Duell";
+      card.querySelector(".arena-mode-desc-daily").textContent = "Einzelkampf – Beweis deine Stärke im Duell";
    }
    if (status) status.style.display = "none";

    const backBtn = body.querySelector("#arena-back-btn");
-    if (backBtn) {
-      backBtn.style.opacity = "1";
-      backBtn.style.cursor = "pointer";
-    }
+    if (backBtn) { 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 =
-      "Warte auf passenden Gegner…";
+    card1v1.querySelector(".arena-mode-desc-daily").textContent = "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(
-      `⏳ Suche Gegner (Level ${Math.max(1, me.level - 5)}–${me.level + 5})…`,
-    );
+    showArenaStatus(`⏳ 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
-          .querySelector("#arena-cancel-link")
-          ?.addEventListener("click", () => {
-            cancelArenaSearch();
-          });
+        body.querySelector("#arena-cancel-link")?.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.innerHTML = html;
-    if (isError)
-      setTimeout(() => {
-        box.style.display = "none";
-      }, 3000);
+    box.style.color   = isError ? "#e74c3c" : "#dceb15";
+    box.innerHTML     = html;
+    if (isError) 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 =
-      "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.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;";
    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(() => {
-      const b = document.getElementById("mfBar");
-      if (b) b.style.width = "100%";
-    });
-    setTimeout(() => {
-      overlay.remove();
-      onDone();
-    }, 1600);
+    requestAnimationFrame(() => { const b = document.getElementById("mfBar"); 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 =
-      "position:fixed;inset:0;background:rgba(0,0,0,0.82);backdrop-filter:blur(5px);z-index:9998;";
+    backdrop.style.cssText = "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 =
-      "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.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);";
    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;