diff --git a/public/js/buildings/arena.js b/public/js/buildings/arena.js
index f02472c..2926a16 100644
--- a/public/js/buildings/arena.js
+++ b/public/js/buildings/arena.js
@@ -32,23 +32,158 @@ export async function loadArena() {
`;
+ 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 = `
+
+
+ `;
+
+ 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") {
- const margin = 50;
- const width = window.screen.width - margin * 2;
- const height = window.screen.height - margin * 2;
- const tab = window.open(
- "/arena/1v1",
- "_blank",
- `width=${width},height=${height},left=${margin},top=${margin}`,
- );
- tab?.focus();
+ openArenaPopup("/arena/1v1");
} else {
console.log("Arena Modus gewählt:", mode);
}