export async function loadArena() { const ui = document.querySelector(".building-ui"); ui.innerHTML = `
βš”οΈ Kampfarena

WΓ€hle deinen Kampfmodus

πŸ—‘οΈ
1v1
Einzelkampf – Beweis deine StΓ€rke im Duell
βš”οΈ
2v2
VerbΓΌnde dich mit einem Kameraden im Kampf
πŸ›‘οΈ
4v4
Schlachtruf – FΓΌhre deine Truppe zum Sieg
`; injectArenaPopupStyles(); initArenaModes(); } /* ── Styles einmalig ins injizieren ─────────────────────────────── */ function injectArenaPopupStyles() { if (document.getElementById("arena-popup-styles")) return; const style = document.createElement("style"); style.id = "arena-popup-styles"; style.textContent = ` @keyframes arenaFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes arenaScaleIn { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } } #arena-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(5px); z-index: 9998; animation: arenaFadeIn 0.25s ease; } #arena-popup { 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), 0 0 60px rgba(255, 215, 80, 0.08); animation: arenaScaleIn 0.28s cubic-bezier(0.22, 1, 0.36, 1); } /* ── Titelleiste ── */ #arena-popup-titlebar { 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; user-select: none; } #arena-popup-titlebar .ap-left { display: flex; align-items: center; gap: 10px; } /* macOS-style traffic lights */ #arena-popup-titlebar .ap-dots { display: flex; gap: 7px; } #arena-popup-titlebar .ap-dot { width: 13px; height: 13px; border-radius: 50%; cursor: pointer; transition: filter 0.15s; } #arena-popup-titlebar .ap-dot:hover { filter: brightness(1.3); } #arena-popup-titlebar .ap-dot.close { background: #e74c3c; border: 1px solid rgba(0,0,0,0.25); } #arena-popup-titlebar .ap-dot.min { background: #f1c40f; border: 1px solid rgba(0,0,0,0.25); } #arena-popup-titlebar .ap-dot.expand { background: #2ecc71; border: 1px solid rgba(0,0,0,0.25); } #arena-popup-titlebar .ap-title { font-family: "Cinzel", serif; font-size: 13px; letter-spacing: 4px; color: rgba(255, 215, 80, 0.85); text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,0.8); } #arena-popup-titlebar .ap-url { font-size: 11px; color: rgba(255,255,255,0.22); letter-spacing: 1px; } /* ── iframe ── */ #arena-popup iframe { flex: 1; border: none; width: 100%; display: block; } `; document.head.appendChild(style); } /* ── Popup ΓΆffnen ──────────────────────────────────────────────────────── */ function openArenaPopup(src) { // Backdrop const backdrop = document.createElement("div"); backdrop.id = "arena-backdrop"; // Popup-Rahmen const popup = document.createElement("div"); popup.id = "arena-popup"; // Titelleiste popup.innerHTML = `
βš”οΈ Arena  Β·  1v1
${src}
`; document.body.appendChild(backdrop); document.body.appendChild(popup); /* Schließen: roter Dot oder Backdrop-Klick */ const close = () => { backdrop.remove(); popup.remove(); }; document.getElementById("arena-close-btn").addEventListener("click", close); backdrop.addEventListener("click", close); /* GrΓΌner Dot β†’ Vollbild */ document.getElementById("arena-fullscreen-btn").addEventListener("click", () => { popup.requestFullscreen?.(); }); } /* ── Click-Handler auf den Modus-Karten ───────────────────────────────── */ function initArenaModes() { document.querySelectorAll(".arena-mode-card").forEach((card) => { card.addEventListener("click", () => { const mode = card.dataset.mode; if (mode === "1v1") { openArenaPopup("/arena/1v1"); } else { console.log("Arena Modus gewΓ€hlt:", mode); } }); }); }