diff --git a/public/js/buildings/arena.js b/public/js/buildings/arena.js index b3dcb46..81950f7 100644 --- a/public/js/buildings/arena.js +++ b/public/js/buildings/arena.js @@ -1,9 +1,9 @@ export async function loadArena() { const ui = document.querySelector(".building-ui"); + if (!ui) return; ui.innerHTML = `
-
⚔️ Kampfarena
@@ -25,10 +25,21 @@ export async function loadArena() {
Schlachtruf – Führe deine Truppe zum Sieg
+ + +
+ +
+ - + - + - - -`; +`; injectArenaStyles(); initArenaModes(); } -/* ── Styles ─────────────────────────────────────────────────────────────────── */ +/* ── Styles ─────────────────────────────────────────────── */ function injectArenaStyles() { 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;} } - @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} } + @keyframes arenaFadeIn { from{opacity:0} to{opacity:1} } + @keyframes arenaScaleIn { from{transform:scale(0.94);opacity:0} to{transform:scale(1);opacity:1} } + @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} } + + #arena-ui { display:flex; flex-direction:column; height:100%; } + + #arena-mode-screen { display:flex; flex-direction:column; align-items:center; padding:16px; } + .arena-title { font-family:"Cinzel",serif; font-size:18px; color:#f0d060; letter-spacing:3px; text-align:center; margin-bottom:4px; } + .arena-subtitle { font-family:"Cinzel",serif; font-size:11px; color:#a08060; margin:0 0 14px; } + + .arena-modes { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; width:100%; } + .arena-mode-card { + flex:1; min-width:80px; max-width:120px; + background:linear-gradient(180deg,#2a1a08,#1a0f04); + border:2px solid #6b4b2a; border-radius:10px; + padding:14px 8px; cursor:pointer; text-align:center; + transition:border-color .2s,transform .1s; + } + .arena-mode-card:hover { border-color:#c8960c; transform:translateY(-2px); } + .arena-mode-card.searching { opacity:.6; pointer-events:none; border-color:rgba(255,215,80,.5)!important; } + .arena-mode-icon { font-size:24px; margin-bottom:6px; } + .arena-mode-label { font-family:"Cinzel",serif; font-size:13px; color:#f0d060; font-weight:bold; } + .arena-mode-desc { font-size:10px; color:#806040; margin-top:4px; line-height:1.4; } + + .arena-range-wrap { margin-top:12px; } + .arena-range-label { + display:flex; align-items:center; gap:8px; cursor:pointer; + font-family:"Cinzel",serif; font-size:11px; color:#a08060; + padding:7px 12px; border:1px solid rgba(200,150,42,.2); + border-radius:7px; transition:border-color .2s,background .2s; + } + .arena-range-label:hover { border-color:rgba(200,150,42,.5); background:rgba(200,150,42,.05); } + .arena-range-label input[type=checkbox] { display:none; } + .arena-range-checkmark { + width:15px; height:15px; border:2px solid #6a4820; border-radius:3px; + display:flex; align-items:center; justify-content:center; + font-size:10px; color:#f0d060; transition:background .2s,border-color .2s; flex-shrink:0; + } + .arena-range-label input:checked ~ .arena-range-checkmark { background:#4a3010; border-color:#c8960c; } + .arena-range-label input:checked ~ .arena-range-checkmark::after { content:"✓"; } + .arena-range-label strong { color:#f0c84a; } + .arena-range-hint { font-size:10px; color:#604830; } #arena-queue-status { - margin-top:18px; padding:12px 20px; border-radius:10px; - background:rgba(255,215,80,0.08); border:1px solid rgba(255,215,80,0.3); - color:#dceb15; font-family:"Cinzel",serif; font-size:13px; + margin-top:12px; padding:10px 18px; border-radius:10px; width:100%; box-sizing:border-box; + background:rgba(255,215,80,.08); border:1px solid rgba(255,215,80,.3); + color:#dceb15; font-family:"Cinzel",serif; font-size:12px; letter-spacing:1px; text-align:center; animation:pulse 2s ease-in-out infinite; } - #arena-queue-status .qs-cancel { - display:inline-block; margin-top:8px; font-size:11px; - color:rgba(255,100,100,0.8); cursor:pointer; text-decoration:underline; animation:none; - } - #arena-queue-status .qs-cancel:hover { color:#e74c3c; } + .qs-cancel { display:inline-block; margin-top:6px; font-size:11px; color:rgba(255,100,100,.8); cursor:pointer; text-decoration:underline; animation:none; } + .qs-cancel:hover { color:#e74c3c; } - #arena-2v2-error, #arena-4v4-error { - padding:10px 14px; border-radius:8px; margin-bottom:8px; - background:rgba(231,76,60,0.12); border:1px solid rgba(231,76,60,0.4); - color:#e74c3c; font-family:"Cinzel",serif; font-size:12px; text-align:center; + #arena-2v2-error,#arena-4v4-error { + padding:8px 12px; border-radius:7px; margin-bottom:8px; + background:rgba(231,76,60,.12); border:1px solid rgba(231,76,60,.4); + color:#e74c3c; font-family:"Cinzel",serif; font-size:11px; text-align:center; } - #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); - animation:arenaScaleIn 0.28s cubic-bezier(0.22,1,0.36,1); - } - #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; - } - #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; } - #arena-popup-titlebar .ap-url { font-size:11px; color:rgba(255,255,255,0.22); } - #arena-popup iframe { flex:1; border:none; width:100%; display:block; } - - #match-found-overlay { - 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; - animation:arenaFadeIn 0.3s ease; - } - #match-found-overlay .mfo-title { font-family:"Cinzel",serif; font-size:36px; color:#ffd750; text-shadow:0 0 30px rgba(255,215,80,0.6); letter-spacing:6px; margin-bottom:12px; } - #match-found-overlay .mfo-vs { font-family:"Cinzel",serif; font-size:18px; color:rgba(255,255,255,0.75); letter-spacing:3px; } - #match-found-overlay .mfo-bar { width:300px; height:4px; background:rgba(255,215,80,0.2); border-radius:2px; margin-top:24px; overflow:hidden; } - #match-found-overlay .mfo-bar-fill { height:100%; background:#ffd750; width:0%; border-radius:2px; transition:width 1.5s ease; } - - .arena-mode-card.searching { opacity:0.6; pointer-events:none; border-color:rgba(255,215,80,0.5)!important; } - - #arena-2v2-screen, #arena-4v4-screen { flex-direction:column; gap:14px; padding:16px; height:100%; overflow-y:auto; } - .arena-lobby-header { display:flex; align-items:center; gap:16px; } - .arena-back-btn { background:none; border:1px solid rgba(255,200,80,0.3); color:#c8960c; font-family:"Cinzel",serif; font-size:12px; padding:4px 12px; border-radius:4px; cursor:pointer; } - .arena-back-btn:hover { background:rgba(200,150,12,0.15); } - .arena-lobby-actions { display:flex; gap:10px; margin-bottom:4px; } - .arena-btn-create { background:linear-gradient(#4a3018,#2a1a08); border:2px solid #8b6a3c; border-radius:7px; color:#f0d9a6; font-family:"Cinzel",serif; font-size:12px; padding:8px 16px; cursor:pointer; transition:0.2s; } + #arena-2v2-screen,#arena-4v4-screen { flex-direction:column; gap:12px; padding:14px; height:100%; overflow-y:auto; } + .arena-lobby-header { display:flex; align-items:center; gap:14px; } + .arena-back-btn { background:none; border:1px solid rgba(255,200,80,.3); color:#c8960c; font-family:"Cinzel",serif; font-size:11px; padding:4px 10px; border-radius:4px; cursor:pointer; } + .arena-back-btn:hover { background:rgba(200,150,12,.15); } + .arena-lobby-actions { margin-bottom:4px; } + .arena-btn-create { background:linear-gradient(#4a3018,#2a1a08); border:2px solid #8b6a3c; border-radius:7px; color:#f0d9a6; font-family:"Cinzel",serif; font-size:11px; padding:7px 14px; cursor:pointer; transition:.2s; } .arena-btn-create:hover { border-color:#f0d060; } - .arena-lobby-title { font-family:"Cinzel",serif; font-size:13px; color:#a08060; letter-spacing:1px; margin-bottom:6px; } - .arena-lobby-empty { font-family:"Cinzel",serif; font-size:12px; color:#606060; padding:12px 0; } - .arena-lobby-row { display:flex; align-items:center; justify-content:space-between; background:linear-gradient(#2a1a08,#1a0f04); border:1px solid #6b4b2a; border-radius:8px; padding:10px 14px; margin-bottom:6px; } - .arena-lobby-row-info { display:flex; align-items:center; gap:12px; } - .arena-lobby-leader { font-family:"Cinzel",serif; font-size:13px; color:#f0d9a6; } - .arena-lobby-level { font-size:11px; color:#a08060; } - .arena-lobby-count { font-size:11px; color:#6a9a4a; } - .arena-btn-join { background:linear-gradient(#1a4a18,#0f2a0e); border:2px solid #4a8a3c; border-radius:6px; color:#a0e090; font-family:"Cinzel",serif; font-size:11px; padding:5px 12px; cursor:pointer; transition:0.2s; } - .arena-btn-join:hover { border-color:#8ae060; color:#c0f0a0; } + .arena-lobby-title { font-family:"Cinzel",serif; font-size:12px; color:#a08060; letter-spacing:1px; margin-bottom:5px; } + .arena-lobby-empty { font-family:"Cinzel",serif; font-size:11px; color:#606060; padding:10px 0; } + .arena-lobby-row { display:flex; align-items:center; justify-content:space-between; background:linear-gradient(#2a1a08,#1a0f04); border:1px solid #6b4b2a; border-radius:7px; padding:9px 12px; margin-bottom:5px; } + .arena-lobby-row-info { display:flex; align-items:center; gap:10px; } + .arena-lobby-leader { font-family:"Cinzel",serif; font-size:12px; color:#f0d9a6; } + .arena-lobby-level { font-size:10px; color:#a08060; } + .arena-lobby-count { font-size:10px; color:#6a9a4a; } + .arena-btn-join { background:linear-gradient(#1a4a18,#0f2a0e); border:2px solid #4a8a3c; border-radius:5px; color:#a0e090; font-family:"Cinzel",serif; font-size:10px; padding:4px 10px; cursor:pointer; transition:.2s; } + .arena-btn-join:hover { border-color:#8ae060; } - .arena-team-box { background:linear-gradient(#2a1a08,#1a0f04); border:2px solid #6b4b2a; border-radius:10px; padding:14px; } - .arena-team-title { font-family:"Cinzel",serif; font-size:13px; color:#f0d060; letter-spacing:2px; margin-bottom:10px; } - .arena-team-slots { font-family:"Cinzel",serif; font-size:11px; color:#a08060; text-align:center; padding:4px 0 8px; } - - /* ── Spieler-Zeile im Team ── */ - .arena-team-player { - display:flex; align-items:center; gap:10px; padding:7px 10px; - border:1px solid #3a2810; border-radius:6px; margin-bottom:5px; - background:rgba(255,255,255,0.03); - } - .arena-team-player.ready { border-color:#4a8a3c; background:rgba(74,138,60,0.1); } - .arena-team-player.is-leader::before { content:"👑 "; font-size:11px; } - .arena-team-player-name { font-family:"Cinzel",serif; font-size:12px; color:#f0d9a6; flex:1; } - .arena-team-player-level { font-size:11px; color:#a08060; } - .arena-team-player-status { font-size:11px; } - - /* ── Kick-Button ── */ - .arena-btn-kick { - background: linear-gradient(#4a1010, #2a0808); - border: 1px solid #8a3030; - border-radius: 5px; - color: #e07070; - font-size: 11px; - font-family: "Cinzel", serif; - padding: 3px 8px; - cursor: pointer; - transition: 0.2s; - flex-shrink: 0; - } - .arena-btn-kick:hover { border-color:#e05050; color:#ff9090; background:linear-gradient(#6a1818,#3a1010); } - - .arena-waiting-partner { font-family:"Cinzel",serif; font-size:11px; color:#a08060; text-align:center; padding:8px; animation:pulse 2s ease-in-out infinite; } - .arena-btn-ready { width:100%; margin-top:10px; background:linear-gradient(#1a4a18,#0f2a0e); border:2px solid #4a8a3c; border-radius:8px; color:#a0e090; font-family:"Cinzel",serif; font-size:14px; padding:10px; cursor:pointer; transition:0.2s; } + .arena-team-box { background:linear-gradient(#2a1a08,#1a0f04); border:2px solid #6b4b2a; border-radius:9px; padding:12px; } + .arena-team-title { font-family:"Cinzel",serif; font-size:12px; color:#f0d060; letter-spacing:2px; margin-bottom:8px; } + .arena-team-slots { font-family:"Cinzel",serif; font-size:10px; color:#a08060; text-align:center; padding:3px 0 6px; } + .arena-team-player { display:flex; align-items:center; gap:8px; padding:6px 9px; border:1px solid #3a2810; border-radius:5px; margin-bottom:4px; background:rgba(255,255,255,.03); } + .arena-team-player.ready { border-color:#4a8a3c; background:rgba(74,138,60,.1); } + .arena-team-player-name { font-family:"Cinzel",serif; font-size:11px; color:#f0d9a6; flex:1; } + .arena-team-player-level { font-size:10px; color:#a08060; } + .arena-team-player-status { font-size:10px; } + .arena-btn-kick { background:linear-gradient(#4a1010,#2a0808); border:1px solid #8a3030; border-radius:4px; color:#e07070; font-size:10px; font-family:"Cinzel",serif; padding:2px 7px; cursor:pointer; transition:.2s; } + .arena-btn-kick:hover { border-color:#e05050; color:#ff9090; } + .arena-waiting-partner { font-family:"Cinzel",serif; font-size:11px; color:#a08060; text-align:center; padding:7px; animation:pulse 2s ease-in-out infinite; } + .arena-btn-ready { width:100%; margin-top:8px; background:linear-gradient(#1a4a18,#0f2a0e); border:2px solid #4a8a3c; border-radius:7px; color:#a0e090; font-family:"Cinzel",serif; font-size:13px; padding:9px; cursor:pointer; transition:.2s; } .arena-btn-ready:hover:not([disabled]) { border-color:#8ae060; background:linear-gradient(#2a6a28,#1a3a18); } .arena-btn-ready.active { border-color:#8ae060; color:#c0f0a0; cursor:default; } - .arena-searching-box { font-family:"Cinzel",serif; font-size:12px; color:#dceb15; text-align:center; padding:10px; border:1px solid rgba(255,215,80,0.3); border-radius:8px; margin-top:8px; animation:pulse 2s ease-in-out infinite; } + .arena-searching-box { font-family:"Cinzel",serif; font-size:11px; color:#dceb15; text-align:center; padding:9px; border:1px solid rgba(255,215,80,.3); border-radius:7px; margin-top:7px; animation:pulse 2s ease-in-out infinite; } + + #arena-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.82); backdrop-filter:blur(5px); z-index:9998; animation:arenaFadeIn .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,.35),0 30px 90px rgba(0,0,0,.85); animation:arenaScaleIn .28s cubic-bezier(.22,1,.36,1); } + #arena-popup-titlebar { display:flex; align-items:center; justify-content:space-between; background:rgba(10,8,5,.95); border-bottom:1px solid rgba(255,215,80,.3); padding:0 16px; height:42px; flex-shrink:0; } + #arena-popup-titlebar .ap-title { font-family:"Cinzel",serif; font-size:13px; letter-spacing:4px; color:rgba(255,215,80,.85); text-transform:uppercase; } + #arena-popup-titlebar .ap-url { font-size:11px; color:rgba(255,255,255,.22); } + #arena-popup iframe { flex:1; border:none; width:100%; display:block; } + + #match-found-overlay { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.9); display:flex; flex-direction:column; align-items:center; justify-content:center; animation:arenaFadeIn .3s ease; } + .mfo-title { font-family:"Cinzel",serif; font-size:36px; color:#ffd750; text-shadow:0 0 30px rgba(255,215,80,.6); letter-spacing:6px; margin-bottom:12px; } + .mfo-vs { font-family:"Cinzel",serif; font-size:18px; color:rgba(255,255,255,.75); letter-spacing:3px; } + .mfo-bar { width:300px; height:4px; background:rgba(255,215,80,.2); border-radius:2px; margin-top:24px; overflow:hidden; } + .mfo-bar-fill { height:100%; background:#ffd750; width:0%; border-radius:2px; transition:width 1.5s ease; } `; document.head.appendChild(style); } -/* ── Socket ─────────────────────────────────────────────────────────────────── */ +/* ── Socket ────────────────────────────────────────────────*/ function getSocket() { return window._socket || null; } -/* ── State ──────────────────────────────────────────────────────────────────── */ +/* ── State ─────────────────────────────────────────────────*/ let myArenaData = null; let my2v2TeamId = null; let my4v4TeamId = null; -/* ── Modus-Klicks ───────────────────────────────────────────────────────────── */ +/* ── Modus-Initialisierung ─────────────────────────────────*/ function initArenaModes() { document.querySelectorAll(".arena-mode-card").forEach(card => { card.addEventListener("click", () => { @@ -215,32 +224,82 @@ function initArenaModes() { }); }); - /* Zurück-Buttons */ document.addEventListener("click", e => { - const btn = e.target.closest(".arena-back-btn"); - if (!btn) return; - const mode = btn.dataset.back; - if (!mode) return; - leaveTeam(mode); - document.getElementById(`arena-${mode}-screen`).style.display = "none"; - document.getElementById("arena-mode-screen").style.display = ""; - if (mode === "2v2") my2v2TeamId = null; - if (mode === "4v4") my4v4TeamId = null; - }); + const backBtn = e.target.closest(".arena-back-btn"); + if (backBtn) { + const mode = backBtn.dataset.back; + if (!mode) return; + leaveTeam(mode); + document.getElementById(`arena-${mode}-screen`).style.display = "none"; + document.getElementById("arena-mode-screen").style.display = ""; + if (mode === "2v2") my2v2TeamId = null; + if (mode === "4v4") my4v4TeamId = null; + return; + } - /* Team erstellen */ - document.addEventListener("click", e => { - const btn = e.target.closest(".arena-btn-create"); - if (!btn) return; - const mode = btn.dataset.create; - const socket = getSocket(); - if (!socket) return showModeError(mode, "Keine Verbindung zum Server."); - console.log(`[${mode}] create_${mode}_team:`, myArenaData); - socket.emit(`create_${mode}_team`, myArenaData); + const createBtn = e.target.closest(".arena-btn-create"); + if (createBtn) { + const mode = createBtn.dataset.create; + const socket = getSocket(); + if (!socket) return showModeError(mode, "Keine Verbindung zum Server."); + socket.emit(`create_${mode}_team`, myArenaData); + } }); } -/* ── Team-Lobby öffnen ──────────────────────────────────────────────────────── */ +/* ── 1v1 ───────────────────────────────────────────────────*/ +async function handle1v1Click(card) { + const socket = getSocket(); + if (!socket) { showArenaError("Keine Verbindung zum Server."); return; } + if (card.classList.contains("searching")) return; + + let me; + try { + const res = await fetch("/arena/me"); + if (!res.ok) throw new Error("Status " + res.status); + me = await res.json(); + } catch { + showArenaError("Spielerdaten konnten nicht geladen werden."); + return; + } + + const extended = document.getElementById("arena-range-extended")?.checked; + const levelRange = extended ? 10 : 5; + + setCardSearching(card, true); + showQueueStatus(me.level, levelRange); + + socket.off("match_found"); + socket.off("queue_status"); + + socket.on("queue_status", data => { + if (data.status === "waiting") showQueueStatus(me.level, levelRange, data.poolSize); + else if (data.status === "left") { setCardSearching(card, false); hideQueueStatus(); } + }); + + socket.once("match_found", data => { + socket.off("queue_status"); + setCardSearching(card, false); + hideQueueStatus(); + showMatchFoundOverlay(me.name, data.opponent.name, () => { + openArenaPopup( + `/arena/1v1?match=${encodeURIComponent(data.matchId)}&slot=${encodeURIComponent(data.mySlot)}`, + data.opponent.name, data.matchId + ); + }); + }); + + socket.emit("join_1v1", { id: me.id, name: me.name, level: me.level, levelRange }); +} + +function cancelQueue(card) { + const socket = getSocket(); + if (socket) { socket.emit("leave_1v1"); socket.off("match_found"); socket.off("queue_status"); } + setCardSearching(card, false); + hideQueueStatus(); +} + +/* ── Team-Lobby (2v2 / 4v4) ────────────────────────────────*/ async function openTeamLobby(mode) { const socket = getSocket(); @@ -257,9 +316,7 @@ async function openTeamLobby(mode) { const res = await fetch("/arena/me"); if (!res.ok) throw new Error("HTTP " + res.status); myArenaData = await res.json(); - console.log(`[${mode}] Spielerdaten:`, myArenaData); - } catch (err) { - console.error(`[${mode}] Spielerdaten Fehler:`, err); + } catch { showModeError(mode, "Spielerdaten konnten nicht geladen werden."); return; } @@ -267,14 +324,11 @@ async function openTeamLobby(mode) { socket.emit(`get_${mode}_lobbies`); - socket.off(`${mode}_lobbies`); - socket.off(`${mode}_team_joined`); - socket.off(`${mode}_team_update`); - socket.off(`${mode}_partner_left`); - socket.off(`${mode}_searching`); - socket.off(`match_found_${mode}`); - socket.off(`${mode}_error`); - socket.off(`${mode}_kicked`); + ["lobbies","team_joined","team_update","partner_left","searching", + `match_found_${mode}`,"error","kicked"].forEach(ev => { + const full = ev.startsWith("match_found") ? ev : `${mode}_${ev}`; + socket.off(full); + }); socket.on(`${mode}_lobbies`, list => renderLobbyList(list, socket, mode)); @@ -286,61 +340,52 @@ async function openTeamLobby(mode) { hideModeError(mode); }); - socket.on(`${mode}_team_update`, data => renderTeamPanel(data, socket, mode)); + socket.on(`${mode}_team_update`, data => renderTeamPanel(data, socket, mode)); socket.on(`${mode}_partner_left`, data => { - const status = document.getElementById(`arena-${mode}-team-status`); - if (status) status.innerHTML = `⚠️ ${data.name} hat das Team verlassen.`; + const statusEl = document.getElementById(`arena-${mode}-team-status`); + if (statusEl) statusEl.innerHTML = `⚠️ ${data.name} hat das Team verlassen.`; const teamId = mode === "2v2" ? my2v2TeamId : my4v4TeamId; - renderTeamPanel({ teamId, leaderId: null, players: [{ socketId: socket.id, name: myArenaData.name, level: myArenaData.level, ready: false }], count: 1, max: mode === "4v4" ? 4 : 2 }, socket, mode); + renderTeamPanel({ + teamId, leaderId: null, + players: [{ socketId: socket.id, name: myArenaData.name, level: myArenaData.level, ready: false }], + count: 1, max: mode === "4v4" ? 4 : 2 + }, socket, mode); }); socket.on(`${mode}_searching`, () => { - const status = document.getElementById(`arena-${mode}-team-status`); - const actions = document.getElementById(`arena-${mode}-team-actions`); - if (status) status.innerHTML = `
⏳ Suche nach Gegnerteam…
`; - if (actions) actions.innerHTML = ""; + const s = document.getElementById(`arena-${mode}-team-status`); + const a = document.getElementById(`arena-${mode}-team-actions`); + if (s) s.innerHTML = `
⏳ Suche nach Gegnerteam…
`; + if (a) a.innerHTML = ""; }); socket.on(`match_found_${mode}`, data => { - socket.off(`${mode}_lobbies`); - socket.off(`${mode}_team_update`); - socket.off(`${mode}_partner_left`); - socket.off(`${mode}_searching`); - + socket.off(`${mode}_lobbies`); socket.off(`${mode}_team_update`); + socket.off(`${mode}_partner_left`); socket.off(`${mode}_searching`); showMatchFoundOverlay(myArenaData.name, `Team ${data.myTeam === 1 ? 2 : 1}`, () => { document.getElementById(`arena-${mode}-screen`).style.display = "none"; document.getElementById("arena-mode-screen").style.display = ""; openArenaPopup( `/arena/${mode}?match=${encodeURIComponent(data.matchId)}&slot=${encodeURIComponent(data.mySlot)}`, - data.opponents?.join(" & ") || "Gegner", - data.matchId, + data.opponents?.join(" & ") || "Gegner", data.matchId ); }); }); - socket.on(`${mode}_error`, data => { - console.warn(`[${mode}] Fehler:`, data.message); - showModeError(mode, data.message); - }); + socket.on(`${mode}_error`, data => showModeError(mode, data.message)); - /* ── Gekickt worden ── */ socket.on(`${mode}_kicked`, data => { if (mode === "2v2") my2v2TeamId = null; if (mode === "4v4") my4v4TeamId = null; - - // Team-Panel verstecken, Lobby-Liste wieder zeigen document.getElementById(`arena-${mode}-team-panel`).style.display = "none"; document.getElementById(`arena-${mode}-lobby-section`).style.display = "block"; - - // Lobby-Liste neu laden socket.emit(`get_${mode}_lobbies`); - showModeError(mode, data.message || "Du wurdest aus dem Team entfernt."); }); } -/* ── Lobby-Liste rendern ────────────────────────────────────────────────────── */ +/* ── Lobby-Liste rendern ───────────────────────────────────*/ function renderLobbyList(list, socket, mode) { const el = document.getElementById(`arena-${mode}-lobby-list`); const max = mode === "4v4" ? 4 : 2; @@ -349,16 +394,15 @@ function renderLobbyList(list, socket, mode) { el.innerHTML = `
Keine offenen Teams vorhanden.
`; return; } - el.innerHTML = list.map(team => ` + el.innerHTML = list.map(t => `
- ⚔️ ${team.leader} - Lvl ${team.leaderLevel} - ${team.count}/${max} Spieler + ⚔️ ${t.leader} + Lvl ${t.leaderLevel} + ${t.count}/${max}
- -
- `).join(""); + + `).join(""); el.querySelectorAll(".arena-btn-join").forEach(btn => { btn.addEventListener("click", () => { @@ -367,59 +411,45 @@ function renderLobbyList(list, socket, mode) { }); } -/* ── Team-Panel rendern ─────────────────────────────────────────────────────── */ +/* ── Team-Panel rendern ────────────────────────────────────*/ function renderTeamPanel(data, socket, mode) { const playersEl = document.getElementById(`arena-${mode}-team-players`); const actionsEl = document.getElementById(`arena-${mode}-team-actions`); if (!playersEl || !actionsEl) return; - const max = data.max || (mode === "4v4" ? 4 : 2); - const teamId = mode === "2v2" ? my2v2TeamId : my4v4TeamId; + const max = data.max || (mode === "4v4" ? 4 : 2); + const teamId = mode === "2v2" ? my2v2TeamId : my4v4TeamId; const mySocketId = getSocket()?.id; const iAmLeader = data.leaderId === mySocketId; - /* Spieler-Zeilen */ const playerRows = data.players.map(p => { - const isLeader = p.socketId === data.leaderId; - const isMe = p.socketId === mySocketId; - - /* Kick-Button: nur sichtbar für Leader, nicht neben sich selbst */ - const kickBtn = (iAmLeader && !isMe) - ? `` + const isLeader = p.socketId === data.leaderId; + const isMe = p.socketId === mySocketId; + const kickBtn = (iAmLeader && !isMe) + ? `` : ""; - return ` -
+
${p.name}${isLeader ? " 👑" : ""} Lvl ${p.level} ${p.ready ? "✅ Bereit" : "⌛ Wartet"} ${kickBtn} -
- `; +
`; }).join(""); - /* Leere Slots */ const emptySlots = Array(max - data.count).fill(0).map(() => - `
+ `
— Wartet auf Spieler — -
` - ).join(""); +
`).join(""); - playersEl.innerHTML = - `
${data.count}/${max} Spieler
` + - playerRows + emptySlots; + playersEl.innerHTML = `
${data.count}/${max} Spieler
${playerRows}${emptySlots}`; - /* Kick-Event an Buttons hängen */ playersEl.querySelectorAll(".arena-btn-kick").forEach(btn => { btn.addEventListener("click", () => { - socket.emit(`kick_from_${mode}_team`, { - teamId: btn.dataset.teamid, - targetSocketId: btn.dataset.socketid, - }); + socket.emit(`kick_from_${mode}_team`, { teamId: btn.dataset.tid, targetSocketId: btn.dataset.sid }); }); }); - /* Bereit / Warten Button */ if (data.count < max) { actionsEl.innerHTML = `
Warte auf ${max - data.count} weiteren Spieler…
`; } else { @@ -428,7 +458,6 @@ function renderTeamPanel(data, socket, mode) { actionsEl.innerHTML = iAmReady ? `` : ``; - if (!iAmReady) { document.getElementById(`arena-${mode}-ready-btn`)?.addEventListener("click", () => { socket.emit(`${mode}_player_ready`, { teamId }); @@ -437,79 +466,18 @@ function renderTeamPanel(data, socket, mode) { } } -/* ── Team verlassen ─────────────────────────────────────────────────────────── */ +/* ── Team verlassen ────────────────────────────────────────*/ function leaveTeam(mode) { const socket = getSocket(); - if (socket) { - socket.emit(`leave_${mode}_team`); - ["lobbies","team_joined","team_update","partner_left","searching",`match_found_${mode}`,"error","kicked"].forEach(e => { - socket.off(e.includes("match_found") ? e : `${mode}_${e}`); - }); - } -} - -/* ── Fehleranzeige ──────────────────────────────────────────────────────────── */ -function showModeError(mode, msg) { - const el = document.getElementById(`arena-${mode}-error`); - if (!el) return; - el.textContent = "❌ " + msg; - el.style.display = "block"; - setTimeout(() => { el.style.display = "none"; }, 4000); -} -function hideModeError(mode) { - const el = document.getElementById(`arena-${mode}-error`); - if (el) el.style.display = "none"; -} - -/* ── 1v1 ────────────────────────────────────────────────────────────────────── */ -async function handle1v1Click(card) { - const socket = getSocket(); - if (!socket) { showArenaError("Keine Verbindung zum Server."); return; } - if (card.classList.contains("searching")) return; - - let me; - try { - const res = await fetch("/arena/me"); - if (!res.ok) throw new Error(); - me = await res.json(); - } catch { - showArenaError("Spielerdaten konnten nicht geladen werden."); - return; - } - - setCardSearching(card, true); - showQueueStatus(me.level); - socket.off("match_found"); - socket.off("queue_status"); - - socket.on("queue_status", data => { - if (data.status === "waiting") showQueueStatus(me.level, data.poolSize); - else if (data.status === "left") { setCardSearching(card, false); hideQueueStatus(); } + if (!socket) return; + socket.emit(`leave_${mode}_team`); + ["lobbies","team_joined","team_update","partner_left","searching", + `match_found_${mode}`,"error","kicked"].forEach(ev => { + socket.off(ev.startsWith("match_found") ? ev : `${mode}_${ev}`); }); - - socket.once("match_found", data => { - socket.off("queue_status"); - setCardSearching(card, false); - hideQueueStatus(); - showMatchFoundOverlay(me.name, data.opponent.name, () => { - openArenaPopup( - `/arena/1v1?match=${encodeURIComponent(data.matchId)}&slot=${encodeURIComponent(data.mySlot)}`, - data.opponent.name, data.matchId, - ); - }); - }); - - socket.emit("join_1v1", { id: me.id, name: me.name, level: me.level }); } -function cancelQueue(card) { - const socket = getSocket(); - if (socket) { socket.emit("leave_1v1"); socket.off("match_found"); socket.off("queue_status"); } - setCardSearching(card, false); - hideQueueStatus(); -} - -/* ── Match-Found Splash ─────────────────────────────────────────────────────── */ +/* ── Match-Found Overlay ───────────────────────────────────*/ function showMatchFoundOverlay(myName, opponentName, onDone) { if (document.getElementById("match-found-overlay")) return; const overlay = document.createElement("div"); @@ -517,33 +485,29 @@ function showMatchFoundOverlay(myName, opponentName, onDone) { overlay.innerHTML = `
⚔️ Match gefunden!
${myName}  vs  ${opponentName}
-
- `; +
`; document.body.appendChild(overlay); requestAnimationFrame(() => { const b = document.getElementById("mfBar"); if (b) b.style.width = "100%"; }); setTimeout(() => { overlay.remove(); onDone(); }, 1600); } -/* ── Popup öffnen ───────────────────────────────────────────────────────────── */ +/* ── Popup öffnen ──────────────────────────────────────────*/ function openArenaPopup(src, opponentName, matchId) { document.getElementById("arena-backdrop")?.remove(); document.getElementById("arena-popup")?.remove(); - const backdrop = document.createElement("div"); - backdrop.id = "arena-backdrop"; - const popup = document.createElement("div"); - popup.id = "arena-popup"; + const backdrop = document.createElement("div"); backdrop.id = "arena-backdrop"; + const popup = document.createElement("div"); popup.id = "arena-popup"; popup.innerHTML = `
-
⚔️ Arena · vs ${opponentName}
+ ⚔️ Arena · vs ${opponentName} ${matchId || src}
- - `; + `; document.body.appendChild(backdrop); document.body.appendChild(popup); } -/* ── UI Hilfsfunktionen ─────────────────────────────────────────────────────── */ +/* ── UI Hilfsfunktionen ────────────────────────────────────*/ function setCardSearching(card, searching) { const label = card.querySelector(".arena-mode-label"); const desc = card.querySelector(".arena-mode-desc"); @@ -558,18 +522,15 @@ function setCardSearching(card, searching) { } } -function showQueueStatus(myLevel, poolSize) { - const box = document.getElementById("arena-queue-status"); +function showQueueStatus(myLevel, range, poolSize) { + const box = document.getElementById("arena-queue-status"); if (!box) return; - const pool = poolSize ? ` · ${poolSize} Spieler im Pool` : ""; + const pool = poolSize ? ` · ${poolSize} im Pool` : ""; box.style.display = "block"; - box.innerHTML = ` - ⏳ Suche Gegner (Level ${Math.max(1, myLevel-5)}–${myLevel+5})${pool} -
Suche abbrechen - `; + box.innerHTML = `⏳ Suche Gegner (Level ${Math.max(1, myLevel-range)}–${myLevel+range})${pool} +
Suche abbrechen`; document.getElementById("qs-cancel-btn")?.addEventListener("click", () => { - const card = document.querySelector(".arena-mode-card[data-mode='1v1']"); - if (card) cancelQueue(card); + cancelQueue(document.querySelector(".arena-mode-card[data-mode='1v1']")); }); } @@ -581,8 +542,20 @@ function hideQueueStatus() { function showArenaError(msg) { const box = document.getElementById("arena-queue-status"); if (!box) return; - box.style.display = "block"; box.style.animation = "none"; - box.style.borderColor = "rgba(231,76,60,0.5)"; box.style.color = "#e74c3c"; + box.style.cssText += ";display:block;animation:none;border-color:rgba(231,76,60,.5);color:#e74c3c;"; box.textContent = "❌ " + msg; - setTimeout(() => { box.style.display="none"; box.style.animation=""; box.style.borderColor=""; box.style.color=""; }, 3000); + setTimeout(() => { box.style.display = "none"; box.style.animation = ""; box.style.borderColor = ""; box.style.color = ""; }, 3000); +} + +function showModeError(mode, msg) { + const el = document.getElementById(`arena-${mode}-error`); + if (!el) return; + el.textContent = "❌ " + msg; + el.style.display = "block"; + setTimeout(() => { el.style.display = "none"; }, 4000); +} + +function hideModeError(mode) { + const el = document.getElementById(`arena-${mode}-error`); + if (el) el.style.display = "none"; }