cay/dok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gtrjhnsr

Browse Source
This commit is contained in:
cay 2026-04-09 08:59:00 +01:00
parent 74788e21e8
commit 31907c7334
2 changed files with 180 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
public/js/buildings/arena.js
View File

@ -89,8 +89,8 @@ function injectArenaStyles() {
const style = document.createElement("style"); const style = document.createElement("style");
style.id = "arena-popup-styles"; style.id = "arena-popup-styles";
style.textContent = ` style.textContent = `
@keyframes arenaFadeIn { from { opacity:0; } to { opacity:1; } } @keyframes arenaFadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes arenaScaleIn { from { transform:scale(0.94); opacity:0; } to { transform:scale(1); 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 pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
#arena-queue-status { #arena-queue-status {
@ -115,7 +115,7 @@ function injectArenaStyles() {
#arena-popup { #arena-popup {
position:fixed; inset:50px; z-index:9999; display:flex; flex-direction:column; position:fixed; inset:50px; z-index:9999; display:flex; flex-direction:column;
border-radius:14px; overflow:hidden; 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); 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); animation:arenaScaleIn 0.28s cubic-bezier(0.22,1,0.36,1);
} }
#arena-popup-titlebar { #arena-popup-titlebar {
@ -139,64 +139,59 @@ function injectArenaStyles() {
.arena-mode-card.searching { opacity:0.6; pointer-events:none; border-color:rgba(255,215,80,0.5)!important; } .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 { #arena-2v2-screen, #arena-4v4-screen { flex-direction:column; gap:14px; padding:16px; height:100%; overflow-y:auto; }
flex-direction:column; gap:14px; padding:16px; height:100%; overflow-y:auto;
}
.arena-lobby-header { display:flex; align-items:center; gap:16px; } .arena-lobby-header { display:flex; align-items:center; gap:16px; }
.arena-back-btn { .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; }
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-back-btn:hover { background:rgba(200,150,12,0.15); }
.arena-lobby-actions { display:flex; gap:10px; margin-bottom:4px; } .arena-lobby-actions { display:flex; gap:10px; margin-bottom:4px; }
.arena-btn-create { .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; }
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-btn-create:hover { border-color:#f0d060; } .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-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-empty { font-family:"Cinzel",serif; font-size:12px; color:#606060; padding:12px 0; }
.arena-lobby-row { .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; }
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-row-info { display:flex; align-items:center; gap:12px; }
.arena-lobby-leader { font-family:"Cinzel",serif; font-size:13px; color:#f0d9a6; } .arena-lobby-leader { font-family:"Cinzel",serif; font-size:13px; color:#f0d9a6; }
.arena-lobby-level { font-size:11px; color:#a08060; } .arena-lobby-level { font-size:11px; color:#a08060; }
.arena-lobby-count { font-size:11px; color:#6a9a4a; } .arena-lobby-count { font-size:11px; color:#6a9a4a; }
.arena-btn-join { .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; }
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-btn-join:hover { border-color:#8ae060; color:#c0f0a0; }
.arena-team-box { background:linear-gradient(#2a1a08,#1a0f04); border:2px solid #6b4b2a; border-radius:10px; padding:14px; } .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-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 { .arena-team-player {
display:flex; align-items:center; gap:10px; padding:7px 10px; 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); 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.ready { border-color:#4a8a3c; background:rgba(74,138,60,0.1); }
.arena-team-player-name { font-family:"Cinzel",serif; font-size:12px; color:#f0d9a6; flex:1; } .arena-team-player.is-leader::before { content:"👑 "; font-size:11px; }
.arena-team-player-level { font-size:11px; color:#a08060; } .arena-team-player-name { font-family:"Cinzel",serif; font-size:12px; color:#f0d9a6; flex:1; }
.arena-team-player-status { font-size:11px; } .arena-team-player-level { font-size:11px; color:#a08060; }
.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-team-player-status { font-size:11px; }
.arena-btn-ready {
width:100%; margin-top:10px; background:linear-gradient(#1a4a18,#0f2a0e); border:2px solid #4a8a3c; /* ── Kick-Button ── */
border-radius:8px; color:#a0e090; font-family:"Cinzel",serif; font-size:14px; padding:10px; cursor:pointer; transition:0.2s; .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-btn-ready:hover:not([disabled]) { border-color:#8ae060; background:linear-gradient(#2a6a28,#1a3a18); } .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-btn-ready.active { border-color:#8ae060; color:#c0f0a0; cursor:default; }
.arena-searching-box { .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; }
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-team-slots {
font-family:"Cinzel",serif; font-size:11px; color:#a08060;
text-align:center; padding:4px 0 8px;
}
`; `;
document.head.appendChild(style); document.head.appendChild(style);
} }
@ -205,16 +200,16 @@ function injectArenaStyles() {
function getSocket() { return window._socket || null; } function getSocket() { return window._socket || null; }
/* ── State ──────────────────────────────────────────────────────────────────── */ /* ── State ──────────────────────────────────────────────────────────────────── */
let myArenaData = null; let myArenaData = null;
let my2v2TeamId = null; let my2v2TeamId = null;
let my4v4TeamId = null; let my4v4TeamId = null;
/* ── Modus-Klicks ───────────────────────────────────────────────────────────── */ /* ── Modus-Klicks ───────────────────────────────────────────────────────────── */
function initArenaModes() { function initArenaModes() {
document.querySelectorAll(".arena-mode-card").forEach(card => { document.querySelectorAll(".arena-mode-card").forEach(card => {
card.addEventListener("click", () => { card.addEventListener("click", () => {
const mode = card.dataset.mode; const mode = card.dataset.mode;
if (mode === "1v1") handle1v1Click(card); if (mode === "1v1") handle1v1Click(card);
else if (mode === "2v2") openTeamLobby("2v2"); else if (mode === "2v2") openTeamLobby("2v2");
else if (mode === "4v4") openTeamLobby("4v4"); else if (mode === "4v4") openTeamLobby("4v4");
}); });
@ -233,24 +228,22 @@ function initArenaModes() {
if (mode === "4v4") my4v4TeamId = null; if (mode === "4v4") my4v4TeamId = null;
}); });
/* Team erstellen Buttons */ /* Team erstellen */
document.addEventListener("click", e => { document.addEventListener("click", e => {
const btn = e.target.closest(".arena-btn-create"); const btn = e.target.closest(".arena-btn-create");
if (!btn) return; if (!btn) return;
const mode = btn.dataset.create; const mode = btn.dataset.create;
if (!mode) return;
const socket = getSocket(); const socket = getSocket();
if (!socket) return showModeError(mode, "Keine Verbindung zum Server."); if (!socket) return showModeError(mode, "Keine Verbindung zum Server.");
console.log(`[${mode}] Team erstellen – sende create_${mode}_team mit:`, myArenaData); console.log(`[${mode}] create_${mode}_team:`, myArenaData);
socket.emit(`create_${mode}_team`, myArenaData); socket.emit(`create_${mode}_team`, myArenaData);
}); });
} }
/* ── Team-Lobby öffnen (2v2 oder 4v4) ──────────────────────────────────────── */ /* ── Team-Lobby öffnen ──────────────────────────────────────────────────────── */
async function openTeamLobby(mode) { async function openTeamLobby(mode) {
const socket = getSocket(); const socket = getSocket();
/* Screen sofort wechseln */
document.getElementById("arena-mode-screen").style.display = "none"; document.getElementById("arena-mode-screen").style.display = "none";
document.getElementById(`arena-${mode}-screen`).style.display = "flex"; document.getElementById(`arena-${mode}-screen`).style.display = "flex";
@ -259,7 +252,6 @@ async function openTeamLobby(mode) {
return; return;
} }
/* Spielerdaten laden */
if (!myArenaData) { if (!myArenaData) {
try { try {
const res = await fetch("/arena/me"); const res = await fetch("/arena/me");
@ -268,15 +260,13 @@ async function openTeamLobby(mode) {
console.log(`[${mode}] Spielerdaten:`, myArenaData); console.log(`[${mode}] Spielerdaten:`, myArenaData);
} catch (err) { } catch (err) {
console.error(`[${mode}] Spielerdaten Fehler:`, err); console.error(`[${mode}] Spielerdaten Fehler:`, err);
showModeError(mode, "Spielerdaten konnten nicht geladen werden. (Eingeloggt?)"); showModeError(mode, "Spielerdaten konnten nicht geladen werden.");
return; return;
} }
} }
/* Lobbyliste anfordern */
socket.emit(`get_${mode}_lobbies`); socket.emit(`get_${mode}_lobbies`);
/* Alte Listener entfernen */
socket.off(`${mode}_lobbies`); socket.off(`${mode}_lobbies`);
socket.off(`${mode}_team_joined`); socket.off(`${mode}_team_joined`);
socket.off(`${mode}_team_update`); socket.off(`${mode}_team_update`);
@ -284,9 +274,9 @@ async function openTeamLobby(mode) {
socket.off(`${mode}_searching`); socket.off(`${mode}_searching`);
socket.off(`match_found_${mode}`); socket.off(`match_found_${mode}`);
socket.off(`${mode}_error`); socket.off(`${mode}_error`);
socket.off(`${mode}_kicked`);
/* Listener registrieren */ socket.on(`${mode}_lobbies`, list => renderLobbyList(list, socket, mode));
socket.on(`${mode}_lobbies`, list => renderLobbyList(list, socket, mode));
socket.on(`${mode}_team_joined`, data => { socket.on(`${mode}_team_joined`, data => {
if (mode === "2v2") my2v2TeamId = data.teamId; if (mode === "2v2") my2v2TeamId = data.teamId;
@ -302,7 +292,7 @@ async function openTeamLobby(mode) {
const status = document.getElementById(`arena-${mode}-team-status`); const status = document.getElementById(`arena-${mode}-team-status`);
if (status) status.innerHTML = `<span style="color:#e74c3c;">⚠️ ${data.name} hat das Team verlassen.</span>`; if (status) status.innerHTML = `<span style="color:#e74c3c;">⚠️ ${data.name} hat das Team verlassen.</span>`;
const teamId = mode === "2v2" ? my2v2TeamId : my4v4TeamId; const teamId = mode === "2v2" ? my2v2TeamId : my4v4TeamId;
renderTeamPanel({ teamId, players: [{ 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`, () => { socket.on(`${mode}_searching`, () => {
@ -333,13 +323,28 @@ async function openTeamLobby(mode) {
console.warn(`[${mode}] Fehler:`, data.message); console.warn(`[${mode}] Fehler:`, data.message);
showModeError(mode, data.message); 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) { function renderLobbyList(list, socket, mode) {
const el = document.getElementById(`arena-${mode}-lobby-list`); const el = document.getElementById(`arena-${mode}-lobby-list`);
if (!el) return;
const max = mode === "4v4" ? 4 : 2; const max = mode === "4v4" ? 4 : 2;
if (!el) return;
if (!list.length) { if (!list.length) {
el.innerHTML = `<div class="arena-lobby-empty">Keine offenen Teams vorhanden.</div>`; el.innerHTML = `<div class="arena-lobby-empty">Keine offenen Teams vorhanden.</div>`;
return; return;
@ -368,29 +373,57 @@ function renderTeamPanel(data, socket, mode) {
const actionsEl = document.getElementById(`arena-${mode}-team-actions`); const actionsEl = document.getElementById(`arena-${mode}-team-actions`);
if (!playersEl || !actionsEl) return; if (!playersEl || !actionsEl) return;
const max = data.max || (mode === "4v4" ? 4 : 2); const max = data.max || (mode === "4v4" ? 4 : 2);
const teamId = mode === "2v2" ? my2v2TeamId : my4v4TeamId; 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)
? `<button class="arena-btn-kick" data-socketid="${p.socketId}" data-teamid="${teamId}">Kick</button>`
: "";
return `
<div class="arena-team-player ${p.ready ? "ready" : ""} ${isLeader ? "is-leader" : ""}">
<span class="arena-team-player-name">${p.name}${isLeader ? " 👑" : ""}</span>
<span class="arena-team-player-level">Lvl ${p.level}</span>
<span class="arena-team-player-status">${p.ready ? "✅ Bereit" : "⌛ Wartet"}</span>
${kickBtn}
</div>
`;
}).join("");
/* Leere Slots */
const emptySlots = Array(max - data.count).fill(0).map(() =>
`<div class="arena-team-player" style="opacity:0.3;">
<span class="arena-team-player-name">— Wartet auf Spieler —</span>
</div>`
).join("");
playersEl.innerHTML = playersEl.innerHTML =
`<div class="arena-team-slots">${data.count}/${max} Spieler</div>` + `<div class="arena-team-slots">${data.count}/${max} Spieler</div>` +
data.players.map(p => ` playerRows + emptySlots;
<div class="arena-team-player ${p.ready ? "ready" : ""}">
<span class="arena-team-player-name">${p.name}</span>
<span class="arena-team-player-level">Lvl ${p.level}</span>
<span class="arena-team-player-status">${p.ready ? "✅ Bereit" : "⌛ Wartet"}</span>
</div>
`).join("") +
/* Leere Slots anzeigen */
Array(max - data.count).fill(0).map(() =>
`<div class="arena-team-player" style="opacity:0.3;">
<span class="arena-team-player-name">— Wartet auf Spieler —</span>
</div>`
).join("");
/* 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,
});
});
});
/* Bereit / Warten Button */
if (data.count < max) { if (data.count < max) {
actionsEl.innerHTML = `<div class="arena-waiting-partner">Warte auf ${max - data.count} weiteren Spieler…</div>`; actionsEl.innerHTML = `<div class="arena-waiting-partner">Warte auf ${max - data.count} weiteren Spieler…</div>`;
} else { } else {
const myEntry = data.players.find(p => p.name === myArenaData?.name); const myEntry = data.players.find(p => p.socketId === mySocketId);
const iAmReady = myEntry?.ready; const iAmReady = myEntry?.ready;
actionsEl.innerHTML = iAmReady actionsEl.innerHTML = iAmReady
? `<button class="arena-btn-ready active" disabled>✅ Du bist bereit</button>` ? `<button class="arena-btn-ready active" disabled>✅ Du bist bereit</button>`
@ -409,13 +442,9 @@ function leaveTeam(mode) {
const socket = getSocket(); const socket = getSocket();
if (socket) { if (socket) {
socket.emit(`leave_${mode}_team`); socket.emit(`leave_${mode}_team`);
socket.off(`${mode}_lobbies`); ["lobbies","team_joined","team_update","partner_left","searching",`match_found_${mode}`,"error","kicked"].forEach(e => {
socket.off(`${mode}_team_joined`); socket.off(e.includes("match_found") ? e : `${mode}_${e}`);
socket.off(`${mode}_team_update`); });
socket.off(`${mode}_partner_left`);
socket.off(`${mode}_searching`);
socket.off(`match_found_${mode}`);
socket.off(`${mode}_error`);
} }
} }
@ -427,7 +456,6 @@ function showModeError(mode, msg) {
el.style.display = "block"; el.style.display = "block";
setTimeout(() => { el.style.display = "none"; }, 4000); setTimeout(() => { el.style.display = "none"; }, 4000);
} }
function hideModeError(mode) { function hideModeError(mode) {
const el = document.getElementById(`arena-${mode}-error`); const el = document.getElementById(`arena-${mode}-error`);
if (el) el.style.display = "none"; if (el) el.style.display = "none";
@ -442,9 +470,9 @@ async function handle1v1Click(card) {
let me; let me;
try { try {
const res = await fetch("/arena/me"); const res = await fetch("/arena/me");
if (!res.ok) throw new Error("Status " + res.status); if (!res.ok) throw new Error();
me = await res.json(); me = await res.json();
} catch (err) { } catch {
showArenaError("Spielerdaten konnten nicht geladen werden."); showArenaError("Spielerdaten konnten nicht geladen werden.");
return; return;
} }
@ -500,7 +528,6 @@ function showMatchFoundOverlay(myName, opponentName, onDone) {
function openArenaPopup(src, opponentName, matchId) { function openArenaPopup(src, opponentName, matchId) {
document.getElementById("arena-backdrop")?.remove(); document.getElementById("arena-backdrop")?.remove();
document.getElementById("arena-popup")?.remove(); document.getElementById("arena-popup")?.remove();
const backdrop = document.createElement("div"); const backdrop = document.createElement("div");
backdrop.id = "arena-backdrop"; backdrop.id = "arena-backdrop";
const popup = document.createElement("div"); const popup = document.createElement("div");
@ -532,7 +559,7 @@ function setCardSearching(card, searching) {
} }
function showQueueStatus(myLevel, poolSize) { function showQueueStatus(myLevel, poolSize) {
const box = document.getElementById("arena-queue-status"); const box = document.getElementById("arena-queue-status");
if (!box) return; if (!box) return;
const pool = poolSize ? ` · ${poolSize} Spieler im Pool` : ""; const pool = poolSize ? ` · ${poolSize} Spieler im Pool` : "";
box.style.display = "block"; box.style.display = "block";
@ -557,8 +584,5 @@ function showArenaError(msg) {
box.style.display = "block"; box.style.animation = "none"; box.style.display = "block"; box.style.animation = "none";
box.style.borderColor = "rgba(231,76,60,0.5)"; box.style.color = "#e74c3c"; box.style.borderColor = "rgba(231,76,60,0.5)"; box.style.color = "#e74c3c";
box.textContent = "❌ " + msg; box.textContent = "❌ " + msg;
setTimeout(() => { setTimeout(() => { box.style.display="none"; box.style.animation=""; box.style.borderColor=""; box.style.color=""; }, 3000);
box.style.display = "none"; box.style.animation = "";
box.style.borderColor = ""; box.style.color = "";
}, 3000);
} }

92
sockets/arena_socket.js
View File

@ -1,18 +1,19 @@
/* ============================================================ /* ============================================================
sockets/arena.js sockets/arena.js
1v1 Matchmaking + 2v2 Team-Lobby + 4v4 Team-Lobby 1v1 Matchmaking + 2v2 Team-Lobby + 4v4 Team-Lobby
inkl. Kick-Funktion für Team-Leader
============================================================ */ ============================================================ */
const waitingPool = new Map(); // socketId → { socket, player } const waitingPool = new Map();
const LEVEL_RANGE = 5; const LEVEL_RANGE = 5;
const READY_TIMEOUT = 30; const READY_TIMEOUT = 30;
/* ── 2v2 State ── */ /* ── 2v2 State ── */
const teams2v2 = new Map(); // teamId → { id, players, ready } const teams2v2 = new Map();
const readyTeams2v2 = new Map(); const readyTeams2v2 = new Map();
/* ── 4v4 State ── */ /* ── 4v4 State ── */
const teams4v4 = new Map(); // teamId → { id, players, ready } const teams4v4 = new Map();
const readyTeams4v4 = new Map(); const readyTeams4v4 = new Map();
function generateId() { function generateId() {
@ -21,12 +22,10 @@ function generateId() {
/* ═══════════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════════
HELPER: Generisch für 2v2 UND 4v4 HELPER: Generisch für 2v2 UND 4v4
mode: "2v2" | "4v4"
maxPlayers: 2 | 4
═══════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════ */
function getTeamMap(mode) { return mode === "4v4" ? teams4v4 : teams2v2; } function getTeamMap(mode) { return mode === "4v4" ? teams4v4 : teams2v2; }
function getReadyMap(mode) { return mode === "4v4" ? readyTeams4v4 : readyTeams2v2; } function getReadyMap(mode) { return mode === "4v4" ? readyTeams4v4 : readyTeams2v2; }
function getMaxPlayers(mode) { return mode === "4v4" ? 4 : 2; } function getMaxPlayers(mode) { return mode === "4v4" ? 4 : 2; }
function broadcastLobbies(io, mode) { function broadcastLobbies(io, mode) {
const teams = getTeamMap(mode); const teams = getTeamMap(mode);
@ -47,15 +46,16 @@ function broadcastLobbies(io, mode) {
} }
function broadcastTeamStatus(io, teamId, mode) { function broadcastTeamStatus(io, teamId, mode) {
const teams = getTeamMap(mode); const team = getTeamMap(mode).get(teamId);
const team = teams.get(teamId);
if (!team) return; if (!team) return;
const data = { const data = {
teamId, teamId,
players: team.players.map(p => ({ leaderId: team.leaderId, // ← Leader-SocketId mitschicken
name: p.player.name, players: team.players.map(p => ({
level: p.player.level, socketId: p.socketId, // ← für Kick-Button im Frontend
ready: team.ready.has(p.socketId), name: p.player.name,
level: p.player.level,
ready: team.ready.has(p.socketId),
})), })),
count: team.players.length, count: team.players.length,
max: getMaxPlayers(mode), max: getMaxPlayers(mode),
@ -78,8 +78,7 @@ function tryMatchmaking_nvn(io, mode) {
getTeamMap(mode).delete(team1.id); getTeamMap(mode).delete(team1.id);
getTeamMap(mode).delete(team2.id); getTeamMap(mode).delete(team2.id);
const matchId = `${mode}_${generateId()}`; const matchId = `${mode}_${generateId()}`;
const allPlayers = [ const allPlayers = [
...team1.players.map(p => ({ team: 1, ...p })), ...team1.players.map(p => ({ team: 1, ...p })),
...team2.players.map(p => ({ team: 2, ...p })), ...team2.players.map(p => ({ team: 2, ...p })),
@ -123,6 +122,11 @@ function leaveAllTeams_nvn(socketId, io, mode) {
teams.delete(teamId); teams.delete(teamId);
console.log(`[${mode}] Team ${teamId} aufgelöst.`); console.log(`[${mode}] Team ${teamId} aufgelöst.`);
} else { } else {
// Falls Leader das Team verlässt → nächsten Spieler zum Leader machen
if (team.leaderId === socketId) {
team.leaderId = team.players[0].socketId;
console.log(`[${mode}] Neuer Leader in Team ${teamId}: ${team.players[0].player.name}`);
}
broadcastTeamStatus(io, teamId, mode); broadcastTeamStatus(io, teamId, mode);
for (const p of team.players) { for (const p of team.players) {
io.to(p.socketId).emit(`${mode}_partner_left`, { name: playerName }); io.to(p.socketId).emit(`${mode}_partner_left`, { name: playerName });
@ -187,7 +191,7 @@ function stopReadyTimer(io, matchId) {
} }
/* ═══════════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════════
Handler-Generator für 2v2 und 4v4 (DRY) Handler-Generator für 2v2 und 4v4
═══════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════ */
function registerTeamModeHandlers(io, socket, mode) { function registerTeamModeHandlers(io, socket, mode) {
const max = getMaxPlayers(mode); const max = getMaxPlayers(mode);
@ -218,9 +222,10 @@ function registerTeamModeHandlers(io, socket, mode) {
const teamId = `team_${mode}_${generateId()}`; const teamId = `team_${mode}_${generateId()}`;
getTeamMap(mode).set(teamId, { getTeamMap(mode).set(teamId, {
id: teamId, id: teamId,
players: [{ socketId: socket.id, player }], leaderId: socket.id, // ← Ersteller wird Leader
ready: new Set(), players: [{ socketId: socket.id, player }],
ready: new Set(),
}); });
socket.emit(`${mode}_team_joined`, { teamId, isLeader: true }); socket.emit(`${mode}_team_joined`, { teamId, isLeader: true });
@ -234,9 +239,9 @@ function registerTeamModeHandlers(io, socket, mode) {
const { teamId, playerData } = data; const { teamId, playerData } = data;
const team = getTeamMap(mode).get(teamId); const team = getTeamMap(mode).get(teamId);
if (!team) return socket.emit(`${mode}_error`, { message: "Team nicht mehr verfügbar." }); if (!team) return socket.emit(`${mode}_error`, { message: "Team nicht mehr verfügbar." });
if (team.players.length >= max) return socket.emit(`${mode}_error`, { message: "Team ist bereits voll." }); if (team.players.length >= max) return socket.emit(`${mode}_error`, { message: "Team ist bereits voll." });
if (team.players.find(p => p.socketId === socket.id)) return; if (team.players.find(p => p.socketId===socket.id)) return;
leaveAllTeams_nvn(socket.id, io, mode); leaveAllTeams_nvn(socket.id, io, mode);
@ -254,6 +259,39 @@ function registerTeamModeHandlers(io, socket, mode) {
leaveAllTeams_nvn(socket.id, io, mode); leaveAllTeams_nvn(socket.id, io, mode);
}); });
/* ── Kick (nur Leader) ── */
socket.on(`kick_from_${mode}_team`, (data) => {
const { teamId, targetSocketId } = data;
const team = getTeamMap(mode).get(teamId);
if (!team) return;
// Nur der Leader darf kicken
if (team.leaderId !== socket.id) {
return socket.emit(`${mode}_error`, { message: "Nur der Team-Leader kann Spieler entfernen." });
}
// Sich selbst kicken nicht erlaubt
if (targetSocketId === socket.id) return;
const idx = team.players.findIndex(p => p.socketId === targetSocketId);
if (idx === -1) return;
const kickedName = team.players[idx].player.name;
team.players.splice(idx, 1);
team.ready.delete(targetSocketId);
getReadyMap(mode).delete(teamId);
// Gekickten Spieler benachrichtigen
io.to(targetSocketId).emit(`${mode}_kicked`, {
message: "Du wurdest vom Team-Leader aus dem Team entfernt.",
});
broadcastTeamStatus(io, teamId, mode);
broadcastLobbies(io, mode);
console.log(`[${mode}] ${kickedName} wurde aus Team ${teamId} gekickt.`);
});
/* Bereit klicken */ /* Bereit klicken */
socket.on(`${mode}_player_ready`, (data) => { socket.on(`${mode}_player_ready`, (data) => {
const { teamId } = data; const { teamId } = data;
@ -291,9 +329,7 @@ function registerArenaHandlers(io, socket) {
}); });
socket.on("leave_1v1", () => { socket.on("leave_1v1", () => {
if (waitingPool.delete(socket.id)) { if (waitingPool.delete(socket.id)) socket.emit("queue_status", { status: "left" });
socket.emit("queue_status", { status: "left" });
}
}); });
socket.on("arena_join", (data) => { socket.on("arena_join", (data) => {
@ -336,7 +372,7 @@ function registerArenaHandlers(io, socket) {
io.to("arena_" + matchId).emit("player_surrendered", { slot }); io.to("arena_" + matchId).emit("player_surrendered", { slot });
}); });
/* ── 2v2 & 4v4 (generisch) ── */ /* ── 2v2 & 4v4 ── */
registerTeamModeHandlers(io, socket, "2v2"); registerTeamModeHandlers(io, socket, "2v2");
registerTeamModeHandlers(io, socket, "4v4"); registerTeamModeHandlers(io, socket, "4v4");