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

djnd

Browse Source
This commit is contained in:
cay 2026-04-09 08:53:51 +01:00
parent 7eb223c2d8
commit 74788e21e8
3 changed files with 565 additions and 782 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,30 +31,48 @@ export async function loadArena() {
<!-- 2v2 Lobby-Screen --> <!-- 2v2 Lobby-Screen -->
<div id="arena-2v2-screen" style="display:none;"> <div id="arena-2v2-screen" style="display:none;">
<div class="arena-lobby-header"> <div class="arena-lobby-header">
<button class="arena-back-btn" id="arena-2v2-back">← Zurück</button> <button class="arena-back-btn" data-back="2v2">← Zurück</button>
<div class="arena-title" style="margin:0;">⚔️ 2v2 Team-Lobby</div> <div class="arena-title" style="margin:0;">⚔️ 2v2 Team-Lobby</div>
</div> </div>
<!-- Fehlermeldung auf dem 2v2-Screen -->
<div id="arena-2v2-error" style="display:none;"></div> <div id="arena-2v2-error" style="display:none;"></div>
<div id="arena-2v2-team-panel" style="display:none;">
<!-- Team-Panel (erscheint nach Beitritt) -->
<div id="arena-team-panel" style="display:none;">
<div class="arena-team-box"> <div class="arena-team-box">
<div class="arena-team-title">Dein Team</div> <div class="arena-team-title">Dein Team (2v2)</div>
<div id="arena-team-players"></div> <div id="arena-2v2-team-players"></div>
<div id="arena-team-actions"></div> <div id="arena-2v2-team-actions"></div>
</div> </div>
<div id="arena-team-status"></div> <div id="arena-2v2-team-status"></div>
</div> </div>
<div id="arena-2v2-lobby-section">
<!-- Lobby-Liste -->
<div id="arena-lobby-section">
<div class="arena-lobby-actions"> <div class="arena-lobby-actions">
<button class="arena-btn-create" id="arena-create-team-btn">＋ Eigenes Team erstellen</button> <button class="arena-btn-create" data-create="2v2">＋ Eigenes Team erstellen</button>
</div> </div>
<div class="arena-lobby-title">Offene Teams</div> <div class="arena-lobby-title">Offene Teams</div>
<div id="arena-lobby-list"><div class="arena-lobby-empty">Keine offenen Teams vorhanden.</div></div> <div id="arena-2v2-lobby-list"><div class="arena-lobby-empty">Keine offenen Teams vorhanden.</div></div>
</div>
</div>
<!-- 4v4 Lobby-Screen -->
<div id="arena-4v4-screen" style="display:none;">
<div class="arena-lobby-header">
<button class="arena-back-btn" data-back="4v4">← Zurück</button>
<div class="arena-title" style="margin:0;">🛡️ 4v4 Team-Lobby</div>
</div>
<div id="arena-4v4-error" style="display:none;"></div>
<div id="arena-4v4-team-panel" style="display:none;">
<div class="arena-team-box">
<div class="arena-team-title">Dein Team (4v4)</div>
<div id="arena-4v4-team-players"></div>
<div id="arena-4v4-team-actions"></div>
</div>
<div id="arena-4v4-team-status"></div>
</div>
<div id="arena-4v4-lobby-section">
<div class="arena-lobby-actions">
<button class="arena-btn-create" data-create="4v4">＋ Eigenes Team erstellen</button>
</div>
<div class="arena-lobby-title">Offene Teams</div>
<div id="arena-4v4-lobby-list"><div class="arena-lobby-empty">Keine offenen Teams vorhanden.</div></div>
</div> </div>
</div> </div>
@ -68,454 +86,260 @@ export async function loadArena() {
/* ── Styles ─────────────────────────────────────────────────────────────────── */ /* ── Styles ─────────────────────────────────────────────────────────────────── */
function injectArenaStyles() { function injectArenaStyles() {
if (document.getElementById("arena-popup-styles")) return; if (document.getElementById("arena-popup-styles")) return;
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 { @keyframes arenaFadeIn { from { opacity:0; } to { opacity:1; } }
from { opacity: 0; } @keyframes arenaScaleIn { from { transform:scale(0.94); opacity:0; } to { transform:scale(1); opacity:1; } }
to { opacity: 1; } @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
}
@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; }
}
/* ── Queue Status Box ── */
#arena-queue-status { #arena-queue-status {
margin-top: 18px; margin-top:18px; padding:12px 20px; border-radius:10px;
padding: 12px 20px; background:rgba(255,215,80,0.08); border:1px solid rgba(255,215,80,0.3);
border-radius: 10px; color:#dceb15; font-family:"Cinzel",serif; font-size:13px;
background: rgba(255, 215, 80, 0.08); letter-spacing:1px; text-align:center; animation:pulse 2s ease-in-out infinite;
border: 1px solid rgba(255, 215, 80, 0.3);
color: #dceb15;
font-family: "Cinzel", serif;
font-size: 13px;
letter-spacing: 1px;
text-align: center;
animation: pulse 2s ease-in-out infinite;
} }
#arena-queue-status .qs-cancel { #arena-queue-status .qs-cancel {
display: inline-block; display:inline-block; margin-top:8px; font-size:11px;
margin-top: 8px; color:rgba(255,100,100,0.8); cursor:pointer; text-decoration:underline; animation:none;
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; } #arena-queue-status .qs-cancel:hover { color:#e74c3c; }
/* ── 2v2 Fehlermeldung ── */ #arena-2v2-error, #arena-4v4-error {
#arena-2v2-error { padding:10px 14px; border-radius:8px; margin-bottom:8px;
padding: 10px 14px; background:rgba(231,76,60,0.12); border:1px solid rgba(231,76,60,0.4);
border-radius: 8px; color:#e74c3c; font-family:"Cinzel",serif; font-size:12px; text-align:center;
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;
margin-bottom: 8px;
} }
/* ── Backdrop ── */ #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-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.82);
backdrop-filter: blur(5px);
z-index: 9998;
animation: arenaFadeIn 0.25s ease;
}
/* ── Popup ── */
#arena-popup { #arena-popup {
position: fixed; position:fixed; inset:50px; z-index:9999; display:flex; flex-direction:column;
inset: 50px; border-radius:14px; overflow:hidden;
z-index: 9999; box-shadow: 0 0 0 1px rgba(255,215,80,0.35), 0 30px 90px rgba(0,0,0,0.85);
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); animation:arenaScaleIn 0.28s cubic-bezier(0.22,1,0.36,1);
} }
/* ── Titelleiste ── */
#arena-popup-titlebar { #arena-popup-titlebar {
display: flex; display:flex; align-items:center; justify-content:space-between;
align-items: center; background:rgba(10,8,5,0.95); border-bottom:1px solid rgba(255,215,80,0.3);
justify-content: space-between; padding:0 16px; height:42px; flex-shrink:0;
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;
}
#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;
} }
#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 ── */
#match-found-overlay { #match-found-overlay {
position: fixed; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.9);
inset: 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
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; animation:arenaFadeIn 0.3s ease;
} }
#match-found-overlay .mfo-title { #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; }
font-family: "Cinzel", serif; #match-found-overlay .mfo-vs { font-family:"Cinzel",serif; font-size:18px; color:rgba(255,255,255,0.75); letter-spacing:3px; }
font-size: 36px; #match-found-overlay .mfo-bar { width:300px; height:4px; background:rgba(255,215,80,0.2); border-radius:2px; margin-top:24px; overflow:hidden; }
color: #ffd750; #match-found-overlay .mfo-bar-fill { height:100%; background:#ffd750; width:0%; border-radius:2px; transition:width 1.5s ease; }
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;
}
/* ── iframe ── */ .arena-mode-card.searching { opacity:0.6; pointer-events:none; border-color:rgba(255,215,80,0.5)!important; }
#arena-popup iframe {
flex: 1;
border: none;
width: 100%;
display: block;
}
/* ── Card: gesucht-Zustand ── */ #arena-2v2-screen, #arena-4v4-screen {
.arena-mode-card.searching { flex-direction:column; gap:14px; padding:16px; height:100%; overflow-y:auto;
opacity: 0.6;
pointer-events: none;
border-color: rgba(255,215,80,0.5) !important;
}
/* ── 2v2 Lobby Screen ── */
#arena-2v2-screen {
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; background:none; border:1px solid rgba(255,200,80,0.3); color:#c8960c;
border: 1px solid rgba(255,200,80,0.3); font-family:"Cinzel",serif; font-size:12px; padding:4px 12px; border-radius:4px; cursor:pointer;
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); background:linear-gradient(#4a3018,#2a1a08); border:2px solid #8b6a3c; border-radius:7px;
border: 2px solid #8b6a3c; color:#f0d9a6; font-family:"Cinzel",serif; font-size:12px; padding:8px 16px; cursor:pointer; transition:0.2s;
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 { .arena-lobby-title { font-family:"Cinzel",serif; font-size:13px; color:#a08060; letter-spacing:1px; margin-bottom:6px; }
font-family: "Cinzel", serif; .arena-lobby-empty { font-family:"Cinzel",serif; font-size:12px; color:#606060; padding:12px 0; }
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 { .arena-lobby-row {
display: flex; display:flex; align-items:center; justify-content:space-between;
align-items: center; background:linear-gradient(#2a1a08,#1a0f04); border:1px solid #6b4b2a;
justify-content: space-between; border-radius:8px; padding:10px 14px; margin-bottom:6px;
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); background:linear-gradient(#1a4a18,#0f2a0e); border:2px solid #4a8a3c; border-radius:6px;
border: 2px solid #4a8a3c; color:#a0e090; font-family:"Cinzel",serif; font-size:11px; padding:5px 12px; cursor:pointer; transition:0.2s;
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; }
/* ── Team-Panel ── */ .arena-team-box { background:linear-gradient(#2a1a08,#1a0f04); border:2px solid #6b4b2a; border-radius:10px; padding:14px; }
.arena-team-box { .arena-team-title { font-family:"Cinzel",serif; font-size:13px; color:#f0d060; letter-spacing:2px; margin-bottom:10px; }
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-player { .arena-team-player {
display: flex; display:flex; align-items:center; gap:10px; padding:7px 10px;
align-items: center; border:1px solid #3a2810; border-radius:6px; margin-bottom:5px; background:rgba(255,255,255,0.03);
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.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-name { font-family:"Cinzel",serif; font-size:12px; color:#f0d9a6; flex:1; }
.arena-team-player-level { font-size:11px; color:#a08060; } .arena-team-player-level { font-size:11px; color:#a08060; }
.arena-team-player-status { font-size:11px; } .arena-team-player-status { font-size:11px; }
.arena-waiting-partner { .arena-waiting-partner { font-family:"Cinzel",serif; font-size:11px; color:#a08060; text-align:center; padding:8px; animation:pulse 2s ease-in-out infinite; }
font-family: "Cinzel", serif;
font-size: 11px;
color: #a08060;
text-align: center;
padding: 8px;
animation: pulse 2s ease-in-out infinite;
}
.arena-btn-ready { .arena-btn-ready {
width: 100%; width:100%; margin-top:10px; background:linear-gradient(#1a4a18,#0f2a0e); border:2px solid #4a8a3c;
margin-top: 10px; border-radius:8px; color:#a0e090; font-family:"Cinzel",serif; font-size:14px; padding:10px; cursor:pointer; transition:0.2s;
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-family:"Cinzel",serif; font-size:12px; color:#dceb15; text-align:center;
font-size: 12px; padding:10px; border:1px solid rgba(255,215,80,0.3); border-radius:8px; margin-top:8px;
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; 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);
} }
/* ── Socket-Referenz holen ──────────────────────────────────────────────────── */ /* ── Socket ─────────────────────────────────────────────────────────────────── */
function getSocket() { function getSocket() { return window._socket || null; }
return window._socket || null;
}
/* ── Klick-Handler initialisieren ──────────────────────────────────────────── */ /* ── State ──────────────────────────────────────────────────────────────────── */
let myArenaData = null;
let my2v2TeamId = null;
let my4v4TeamId = null;
/* ── 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") { if (mode === "1v1") handle1v1Click(card);
handle1v1Click(card); else if (mode === "2v2") openTeamLobby("2v2");
} else if (mode === "2v2") { else if (mode === "4v4") openTeamLobby("4v4");
open2v2Lobby();
} else {
console.log("Arena Modus gewählt:", mode);
}
}); });
}); });
/* 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;
});
/* Team erstellen Buttons */
document.addEventListener("click", e => {
const btn = e.target.closest(".arena-btn-create");
if (!btn) return;
const mode = btn.dataset.create;
if (!mode) return;
const socket = getSocket();
if (!socket) return showModeError(mode, "Keine Verbindung zum Server.");
console.log(`[${mode}] Team erstellen – sende create_${mode}_team mit:`, myArenaData);
socket.emit(`create_${mode}_team`, myArenaData);
});
} }
/* ══════════════════════════════════════════════════════════ /* ── Team-Lobby öffnen (2v2 oder 4v4) ──────────────────────────────────────── */
2v2 LOBBY async function openTeamLobby(mode) {
══════════════════════════════════════════════════════════ */
let my2v2TeamId = null;
let myArenaData = null;
async function open2v2Lobby() {
const socket = getSocket(); const socket = getSocket();
// Screen ZUERST wechseln – so sind Fehlermeldungen sichtbar /* Screen sofort wechseln */
document.getElementById("arena-mode-screen").style.display = "none"; document.getElementById("arena-mode-screen").style.display = "none";
document.getElementById("arena-2v2-screen").style.display = "flex"; document.getElementById(`arena-${mode}-screen`).style.display = "flex";
if (!socket) { if (!socket) {
console.error("[2v2] Kein Socket – window._socket:", window._socket); showModeError(mode, "Keine Verbindung zum Server. Bitte Seite neu laden.");
show2v2Error("Keine Verbindung zum Server. Bitte Seite neu laden.");
return; return;
} }
// Spielerdaten laden /* Spielerdaten laden */
if (!myArenaData) { if (!myArenaData) {
try { try {
console.log("[2v2] Lade Spielerdaten…");
const res = await fetch("/arena/me"); const res = await fetch("/arena/me");
if (!res.ok) throw new Error("HTTP " + res.status); if (!res.ok) throw new Error("HTTP " + res.status);
myArenaData = await res.json(); myArenaData = await res.json();
console.log("[2v2] Spielerdaten:", myArenaData); console.log(`[${mode}] Spielerdaten:`, myArenaData);
} catch (err) { } catch (err) {
console.error("[2v2] Spielerdaten Fehler:", err); console.error(`[${mode}] Spielerdaten Fehler:`, err);
show2v2Error("Spielerdaten konnten nicht geladen werden. (Eingeloggt?)"); showModeError(mode, "Spielerdaten konnten nicht geladen werden. (Eingeloggt?)");
return; return;
} }
} }
// Lobbyliste anfordern /* Lobbyliste anfordern */
socket.emit("get_2v2_lobbies"); socket.emit(`get_${mode}_lobbies`);
console.log("[2v2] get_2v2_lobbies gesendet");
// Zurück-Button /* Alte Listener entfernen */
document.getElementById("arena-2v2-back").onclick = () => { socket.off(`${mode}_lobbies`);
leave2v2Team(socket); socket.off(`${mode}_team_joined`);
document.getElementById("arena-2v2-screen").style.display = "none"; socket.off(`${mode}_team_update`);
document.getElementById("arena-mode-screen").style.display = ""; socket.off(`${mode}_partner_left`);
my2v2TeamId = null; socket.off(`${mode}_searching`);
}; socket.off(`match_found_${mode}`);
socket.off(`${mode}_error`);
// Team erstellen /* Listener registrieren */
document.getElementById("arena-create-team-btn").onclick = () => { socket.on(`${mode}_lobbies`, list => renderLobbyList(list, socket, mode));
console.log("[2v2] Team erstellen geklickt – sende create_2v2_team mit:", myArenaData);
socket.emit("create_2v2_team", myArenaData);
};
// Socket-Listener registrieren (einmalig) socket.on(`${mode}_team_joined`, data => {
socket.off("2v2_lobbies"); if (mode === "2v2") my2v2TeamId = data.teamId;
socket.off("2v2_team_joined"); if (mode === "4v4") my4v4TeamId = data.teamId;
socket.off("2v2_team_update"); document.getElementById(`arena-${mode}-team-panel`).style.display = "block";
socket.off("2v2_partner_left"); document.getElementById(`arena-${mode}-lobby-section`).style.display = "none";
socket.off("2v2_searching"); hideModeError(mode);
socket.off("match_found_2v2");
socket.off("2v2_error");
socket.on("2v2_lobbies", (list) => {
console.log("[2v2] Lobbies empfangen:", list);
render2v2LobbyList(list, socket);
}); });
socket.on("2v2_team_joined", (data) => { socket.on(`${mode}_team_update`, data => renderTeamPanel(data, socket, mode));
console.log("[2v2] Team joined:", data);
my2v2TeamId = data.teamId;
document.getElementById("arena-team-panel").style.display = "block";
document.getElementById("arena-lobby-section").style.display = "none";
hide2v2Error();
});
socket.on("2v2_team_update", (data) => render2v2TeamPanel(data, socket)); socket.on(`${mode}_partner_left`, data => {
const status = document.getElementById(`arena-${mode}-team-status`);
socket.on("2v2_partner_left", (data) => {
const status = document.getElementById("arena-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>`;
render2v2TeamPanel({ teamId: my2v2TeamId, players: [{ name: myArenaData.name, level: myArenaData.level, ready: false }], count: 1 }, socket); 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);
}); });
socket.on("2v2_searching", () => { socket.on(`${mode}_searching`, () => {
const status = document.getElementById("arena-team-status"); const status = document.getElementById(`arena-${mode}-team-status`);
const actions = document.getElementById(`arena-${mode}-team-actions`);
if (status) status.innerHTML = `<div class="arena-searching-box">⏳ Suche nach Gegnerteam…</div>`; if (status) status.innerHTML = `<div class="arena-searching-box">⏳ Suche nach Gegnerteam…</div>`;
const actions = document.getElementById("arena-team-actions");
if (actions) actions.innerHTML = ""; if (actions) actions.innerHTML = "";
}); });
socket.on("match_found_2v2", (data) => { socket.on(`match_found_${mode}`, data => {
socket.off("2v2_lobbies"); socket.off(`${mode}_lobbies`);
socket.off("2v2_team_update"); socket.off(`${mode}_team_update`);
socket.off("2v2_partner_left"); socket.off(`${mode}_partner_left`);
socket.off("2v2_searching"); socket.off(`${mode}_searching`);
showMatchFoundOverlay(myArenaData.name, `Team ${data.myTeam === 1 ? 2 : 1}`, () => { showMatchFoundOverlay(myArenaData.name, `Team ${data.myTeam === 1 ? 2 : 1}`, () => {
document.getElementById("arena-2v2-screen").style.display = "none"; document.getElementById(`arena-${mode}-screen`).style.display = "none";
document.getElementById("arena-mode-screen").style.display = ""; document.getElementById("arena-mode-screen").style.display = "";
openArenaPopup( openArenaPopup(
`/arena/2v2?match=${encodeURIComponent(data.matchId)}&slot=${encodeURIComponent(data.mySlot)}`, `/arena/${mode}?match=${encodeURIComponent(data.matchId)}&slot=${encodeURIComponent(data.mySlot)}`,
data.opponents?.join(" & ") || "Gegner", data.opponents?.join(" & ") || "Gegner",
data.matchId, data.matchId,
); );
}); });
}); });
socket.on("2v2_error", (data) => { socket.on(`${mode}_error`, data => {
console.warn("[2v2] Fehler vom Server:", data.message); console.warn(`[${mode}] Fehler:`, data.message);
show2v2Error(data.message); showModeError(mode, data.message);
}); });
} }
function render2v2LobbyList(list, socket) { /* ── Lobby-Liste rendern ────────────────────────────────────────────────────── */
const el = document.getElementById("arena-lobby-list"); function renderLobbyList(list, socket, mode) {
const el = document.getElementById(`arena-${mode}-lobby-list`);
if (!el) return; if (!el) return;
const max = mode === "4v4" ? 4 : 2;
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;
@ -525,7 +349,7 @@ function render2v2LobbyList(list, socket) {
<div class="arena-lobby-row-info"> <div class="arena-lobby-row-info">
<span class="arena-lobby-leader">⚔️ ${team.leader}</span> <span class="arena-lobby-leader">⚔️ ${team.leader}</span>
<span class="arena-lobby-level">Lvl ${team.leaderLevel}</span> <span class="arena-lobby-level">Lvl ${team.leaderLevel}</span>
<span class="arena-lobby-count">${team.count}/2 Spieler</span> <span class="arena-lobby-count">${team.count}/${max} Spieler</span>
</div> </div>
<button class="arena-btn-join" data-teamid="${team.teamId}">Beitreten</button> <button class="arena-btn-join" data-teamid="${team.teamId}">Beitreten</button>
</div> </div>
@ -533,79 +357,86 @@ function render2v2LobbyList(list, socket) {
el.querySelectorAll(".arena-btn-join").forEach(btn => { el.querySelectorAll(".arena-btn-join").forEach(btn => {
btn.addEventListener("click", () => { btn.addEventListener("click", () => {
socket.emit("join_2v2_team", { teamId: btn.dataset.teamid, playerData: myArenaData }); socket.emit(`join_${mode}_team`, { teamId: btn.dataset.teamid, playerData: myArenaData });
}); });
}); });
} }
function render2v2TeamPanel(data, socket) { /* ── Team-Panel rendern ─────────────────────────────────────────────────────── */
const playersEl = document.getElementById("arena-team-players"); function renderTeamPanel(data, socket, mode) {
const actionsEl = document.getElementById("arena-team-actions"); const playersEl = document.getElementById(`arena-${mode}-team-players`);
const statusEl = document.getElementById("arena-team-status"); const actionsEl = document.getElementById(`arena-${mode}-team-actions`);
if (!playersEl || !actionsEl) return; if (!playersEl || !actionsEl) return;
playersEl.innerHTML = data.players.map(p => ` const max = data.max || (mode === "4v4" ? 4 : 2);
<div class="arena-team-player ${p.ready ? 'ready' : ''}"> const teamId = mode === "2v2" ? my2v2TeamId : my4v4TeamId;
playersEl.innerHTML =
`<div class="arena-team-slots">${data.count}/${max} Spieler</div>` +
data.players.map(p => `
<div class="arena-team-player ${p.ready ? "ready" : ""}">
<span class="arena-team-player-name">${p.name}</span> <span class="arena-team-player-name">${p.name}</span>
<span class="arena-team-player-level">Lvl ${p.level}</span> <span class="arena-team-player-level">Lvl ${p.level}</span>
<span class="arena-team-player-status">${p.ready ? '✅ Bereit' : '⌛ Wartet'}</span> <span class="arena-team-player-status">${p.ready ? "✅ Bereit" : "⌛ Wartet"}</span>
</div> </div>
`).join(""); `).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("");
if (data.count < 2) { if (data.count < max) {
actionsEl.innerHTML = `<div class="arena-waiting-partner">Warte auf Partner…</div>`; actionsEl.innerHTML = `<div class="arena-waiting-partner">Warte auf ${max - data.count} weiteren Spieler…</div>`;
if (statusEl) statusEl.innerHTML = "";
} else { } else {
const myEntry = data.players.find(p => p.name === myArenaData?.name); const myEntry = data.players.find(p => p.name === myArenaData?.name);
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>`
: `<button class="arena-btn-ready" id="arena-ready-btn">⚔️ Bereit</button>`; : `<button class="arena-btn-ready" id="arena-${mode}-ready-btn">⚔️ Bereit</button>`;
if (!iAmReady) { if (!iAmReady) {
document.getElementById("arena-ready-btn")?.addEventListener("click", () => { document.getElementById(`arena-${mode}-ready-btn`)?.addEventListener("click", () => {
socket.emit("2v2_player_ready", { teamId: my2v2TeamId }); socket.emit(`${mode}_player_ready`, { teamId });
}); });
} }
} }
} }
function leave2v2Team(socket) { /* ── Team verlassen ─────────────────────────────────────────────────────────── */
if (my2v2TeamId) { function leaveTeam(mode) {
socket.emit("leave_2v2_team"); const socket = getSocket();
my2v2TeamId = null; if (socket) {
socket.emit(`leave_${mode}_team`);
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("2v2_lobbies");
socket.off("2v2_team_joined");
socket.off("2v2_team_update");
socket.off("2v2_partner_left");
socket.off("2v2_searching");
socket.off("match_found_2v2");
socket.off("2v2_error");
} }
/* ── 2v2 Fehlermeldung ──────────────────────────────────────────────────────── */ /* ── Fehleranzeige ──────────────────────────────────────────────────────────── */
function show2v2Error(msg) { function showModeError(mode, msg) {
const el = document.getElementById("arena-2v2-error"); const el = document.getElementById(`arena-${mode}-error`);
if (!el) return; if (!el) return;
el.textContent = "❌ " + msg; el.textContent = "❌ " + msg;
el.style.display = "block"; el.style.display = "block";
setTimeout(() => { el.style.display = "none"; }, 4000); setTimeout(() => { el.style.display = "none"; }, 4000);
} }
function hide2v2Error() { function hideModeError(mode) {
const el = document.getElementById("arena-2v2-error"); const el = document.getElementById(`arena-${mode}-error`);
if (el) el.style.display = "none"; if (el) el.style.display = "none";
} }
/* ── 1v1: Hauptlogik ────────────────────────────────────────────────────────── */ /* ── 1v1 ────────────────────────────────────────────────────────────────────── */
async function handle1v1Click(card) { async function handle1v1Click(card) {
const socket = getSocket(); const socket = getSocket();
if (!socket) { if (!socket) { showArenaError("Keine Verbindung zum Server."); return; }
showArenaError("Keine Verbindung zum Server. Bitte Seite neu laden.");
return;
}
if (card.classList.contains("searching")) return; if (card.classList.contains("searching")) return;
let me; let me;
@ -614,55 +445,38 @@ async function handle1v1Click(card) {
if (!res.ok) throw new Error("Status " + res.status); if (!res.ok) throw new Error("Status " + res.status);
me = await res.json(); me = await res.json();
} catch (err) { } catch (err) {
console.error("[1v1] Spielerdaten Fehler:", err); showArenaError("Spielerdaten konnten nicht geladen werden.");
showArenaError("Spielerdaten konnten nicht geladen werden. (Eingeloggt?)");
return; return;
} }
setCardSearching(card, true); setCardSearching(card, true);
showQueueStatus(me.level); showQueueStatus(me.level);
socket.off("match_found"); socket.off("match_found");
socket.off("queue_status"); socket.off("queue_status");
socket.on("queue_status", (data) => { socket.on("queue_status", data => {
if (data.status === "waiting") { if (data.status === "waiting") showQueueStatus(me.level, data.poolSize);
showQueueStatus(me.level, data.poolSize); else if (data.status === "left") { setCardSearching(card, false); hideQueueStatus(); }
} else if (data.status === "left") {
setCardSearching(card, false);
hideQueueStatus();
}
}); });
socket.once("match_found", (data) => { socket.once("match_found", data => {
socket.off("queue_status"); socket.off("queue_status");
setCardSearching(card, false); setCardSearching(card, false);
hideQueueStatus(); hideQueueStatus();
showMatchFoundOverlay(me.name, data.opponent.name, () => { showMatchFoundOverlay(me.name, data.opponent.name, () => {
openArenaPopup( openArenaPopup(
`/arena/1v1?match=${encodeURIComponent(data.matchId)}&slot=${encodeURIComponent(data.mySlot)}`, `/arena/1v1?match=${encodeURIComponent(data.matchId)}&slot=${encodeURIComponent(data.mySlot)}`,
data.opponent.name, data.opponent.name, data.matchId,
data.matchId,
); );
}); });
}); });
socket.emit("join_1v1", { socket.emit("join_1v1", { id: me.id, name: me.name, level: me.level });
id: me.id,
name: me.name,
level: me.level,
});
} }
/* ── Queue abbrechen ────────────────────────────────────────────────────────── */
function cancelQueue(card) { function cancelQueue(card) {
const socket = getSocket(); const socket = getSocket();
if (socket) { if (socket) { socket.emit("leave_1v1"); socket.off("match_found"); socket.off("queue_status"); }
socket.emit("leave_1v1");
socket.off("match_found");
socket.off("queue_status");
}
setCardSearching(card, false); setCardSearching(card, false);
hideQueueStatus(); hideQueueStatus();
} }
@ -670,7 +484,6 @@ function cancelQueue(card) {
/* ── Match-Found Splash ─────────────────────────────────────────────────────── */ /* ── Match-Found Splash ─────────────────────────────────────────────────────── */
function showMatchFoundOverlay(myName, opponentName, onDone) { function showMatchFoundOverlay(myName, opponentName, onDone) {
if (document.getElementById("match-found-overlay")) return; if (document.getElementById("match-found-overlay")) return;
const overlay = document.createElement("div"); const overlay = document.createElement("div");
overlay.id = "match-found-overlay"; overlay.id = "match-found-overlay";
overlay.innerHTML = ` overlay.innerHTML = `
@ -679,16 +492,8 @@ function showMatchFoundOverlay(myName, opponentName, onDone) {
<div class="mfo-bar"><div class="mfo-bar-fill" id="mfBar"></div></div> <div class="mfo-bar"><div class="mfo-bar-fill" id="mfBar"></div></div>
`; `;
document.body.appendChild(overlay); document.body.appendChild(overlay);
requestAnimationFrame(() => { const b = document.getElementById("mfBar"); if (b) b.style.width = "100%"; });
requestAnimationFrame(() => { setTimeout(() => { overlay.remove(); onDone(); }, 1600);
const bar = document.getElementById("mfBar");
if (bar) bar.style.width = "100%";
});
setTimeout(() => {
overlay.remove();
onDone();
}, 1600);
} }
/* ── Popup öffnen ───────────────────────────────────────────────────────────── */ /* ── Popup öffnen ───────────────────────────────────────────────────────────── */
@ -698,24 +503,15 @@ function openArenaPopup(src, opponentName, matchId) {
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");
popup.id = "arena-popup"; popup.id = "arena-popup";
const title = opponentName
? `⚔️ Arena &nbsp;·&nbsp; vs ${opponentName}`
: "⚔️ Arena";
popup.innerHTML = ` popup.innerHTML = `
<div id="arena-popup-titlebar"> <div id="arena-popup-titlebar">
<div class="ap-left"> <div class="ap-left"><span class="ap-title">⚔️ Arena · vs ${opponentName}</span></div>
<span class="ap-title">${title}</span>
</div>
<span class="ap-url">${matchId || src}</span> <span class="ap-url">${matchId || src}</span>
</div> </div>
<iframe src="${src}" allowfullscreen></iframe> <iframe src="${src}" allowfullscreen></iframe>
`; `;
document.body.appendChild(backdrop); document.body.appendChild(backdrop);
document.body.appendChild(popup); document.body.appendChild(popup);
} }
@ -724,7 +520,6 @@ function openArenaPopup(src, opponentName, matchId) {
function setCardSearching(card, searching) { function setCardSearching(card, searching) {
const label = card.querySelector(".arena-mode-label"); const label = card.querySelector(".arena-mode-label");
const desc = card.querySelector(".arena-mode-desc"); const desc = card.querySelector(".arena-mode-desc");
if (searching) { if (searching) {
card.classList.add("searching"); card.classList.add("searching");
label.textContent = "⏳ Suche…"; label.textContent = "⏳ Suche…";
@ -739,18 +534,12 @@ 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 min = Math.max(1, myLevel - 5);
const max = myLevel + 5;
const pool = poolSize ? ` · ${poolSize} Spieler im Pool` : ""; const pool = poolSize ? ` · ${poolSize} Spieler im Pool` : "";
box.style.display = "block"; box.style.display = "block";
box.innerHTML = ` box.innerHTML = `
⏳ Suche Gegner (Level ${min}–${max})${pool} ⏳ Suche Gegner (Level ${Math.max(1, myLevel-5)}–${myLevel+5})${pool}
<br> <br><span class="qs-cancel" id="qs-cancel-btn">Suche abbrechen</span>
<span class="qs-cancel" id="qs-cancel-btn">Suche abbrechen</span>
`; `;
document.getElementById("qs-cancel-btn")?.addEventListener("click", () => { document.getElementById("qs-cancel-btn")?.addEventListener("click", () => {
const card = document.querySelector(".arena-mode-card[data-mode='1v1']"); const card = document.querySelector(".arena-mode-card[data-mode='1v1']");
if (card) cancelQueue(card); if (card) cancelQueue(card);
@ -765,15 +554,11 @@ function hideQueueStatus() {
function showArenaError(msg) { function showArenaError(msg) {
const box = document.getElementById("arena-queue-status"); const box = document.getElementById("arena-queue-status");
if (!box) return; if (!box) return;
box.style.display = "block"; box.style.display = "block"; box.style.animation = "none";
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.display = "none"; box.style.animation = "";
box.style.animation = ""; box.style.borderColor = ""; box.style.color = "";
box.style.borderColor = "";
box.style.color = "";
}, 3000); }, 3000);
} }

133
routes/arena.route.js
View File

@ -1,4 +1,4 @@
const express = require("express"); const express = require("express");
const router = express.Router(); const router = express.Router();
const db = require("../database/database"); const db = require("../database/database");
@ -13,6 +13,27 @@ function requireLogin(req, res, next) {
next(); next();
} }
/* ========================
HELPER: Spieler-Stats laden
======================== */
async function getPlayerStats(userId) {
let hp = 20, mana = 3;
try {
const [[charStats]] = await db.query(
"SELECT hp, mana FROM characters WHERE account_id = ?",
[userId]
);
if (charStats) {
hp = charStats.hp || 20;
mana = charStats.mana || 3;
}
} catch {
// Tabelle existiert evtl. noch nicht – Defaults verwenden
}
return { hp, mana };
}
/* ================================ /* ================================
Arena Übersicht Arena Übersicht
GET /arena GET /arena
@ -30,17 +51,14 @@ router.get("/", (req, res) => {
======================== */ ======================== */
router.get("/me", requireLogin, async (req, res) => { router.get("/me", requireLogin, async (req, res) => {
const userId = req.session.user.id;
try { try {
const [[account]] = await db.query( const [[account]] = await db.query(
"SELECT id, ingame_name, level FROM accounts WHERE id = ?", "SELECT id, ingame_name, level FROM accounts WHERE id = ?",
[userId], [req.session.user.id]
); );
if (!account) { if (!account) {
return res.status(404).json({ error: "Spieler nicht gefunden" }); return res.status(404).json({ error: "Spieler nicht gefunden" });
} }
res.json({ res.json({
id: account.id, id: account.id,
name: account.ingame_name || "Unbekannter Held", name: account.ingame_name || "Unbekannter Held",
@ -67,7 +85,7 @@ router.get("/1v1", requireLogin, async (req, res) => {
title: "1v1 Kampf", title: "1v1 Kampf",
matchId: null, matchId: null,
mySlot: "player1", mySlot: "player1",
player1: req.session?.character?.name || req.session?.user?.ingame_name || "Spieler 1", player1: req.session?.user?.ingame_name || "Spieler 1",
player2: "Gegner", player2: "Gegner",
player1hp: 20, player1hp: 20,
player1mana: 3, player1mana: 3,
@ -77,29 +95,8 @@ router.get("/1v1", requireLogin, async (req, res) => {
} }
try { try {
// Eigene Spielerdaten laden const [[me]] = await db.query("SELECT ingame_name FROM accounts WHERE id = ?", [userId]);
const [[me]] = await db.query( const { hp, mana } = await getPlayerStats(userId);
"SELECT ingame_name, level FROM accounts WHERE id = ?",
[userId],
);
// HP + Mana aus Charakter-Tabelle (falls vorhanden, sonst Defaults)
let myHp = 20;
let myMana = 3;
try {
const [[charStats]] = await db.query(
"SELECT hp, mana FROM characters WHERE account_id = ?",
[userId],
);
if (charStats) {
myHp = charStats.hp || 20;
myMana = charStats.mana || 3;
}
} catch {
// Tabelle existiert evtl. noch nicht – Defaults verwenden
}
const isPlayer1 = slot === "player1"; const isPlayer1 = slot === "player1";
res.render("1v1-battlefield", { res.render("1v1-battlefield", {
@ -108,10 +105,10 @@ router.get("/1v1", requireLogin, async (req, res) => {
mySlot: slot || "player1", mySlot: slot || "player1",
player1: isPlayer1 ? (me?.ingame_name || "Du") : "Gegner", player1: isPlayer1 ? (me?.ingame_name || "Du") : "Gegner",
player2: isPlayer1 ? "Gegner" : (me?.ingame_name || "Du"), player2: isPlayer1 ? "Gegner" : (me?.ingame_name || "Du"),
player1hp: isPlayer1 ? myHp : 20, player1hp: isPlayer1 ? hp : 20,
player1mana: isPlayer1 ? myMana : 3, player1mana: isPlayer1 ? mana : 3,
player2hp: isPlayer1 ? 20 : myHp, player2hp: isPlayer1 ? 20 : hp,
player2mana: isPlayer1 ? 3 : myMana, player2mana: isPlayer1 ? 3 : mana,
}); });
} catch (err) { } catch (err) {
console.error("[Arena /1v1]", err); console.error("[Arena /1v1]", err);
@ -120,41 +117,91 @@ router.get("/1v1", requireLogin, async (req, res) => {
}); });
/* ================================ /* ================================
2v2 Spielfeld (Platzhalter) 2v2 Spielfeld
GET /arena/2v2 GET /arena/2v2
================================ */ ================================ */
router.get("/2v2", (req, res) => { router.get("/2v2", requireLogin, async (req, res) => {
res.render("1v1-battlefield", { const userId = req.session.user.id;
const { match: matchId, slot } = req.query;
if (!matchId) {
return res.render("1v1-battlefield", {
title: "2v2 Kampf", title: "2v2 Kampf",
matchId: null, matchId: null,
mySlot: "player1", mySlot: "team1_player1",
player1: req.session?.character?.name || "Spieler 1", player1: req.session?.user?.ingame_name || "Spieler 1",
player2: "Gegner", player2: "Gegner",
player1hp: 20, player1hp: 20,
player1mana: 3, player1mana: 3,
player2hp: 20, player2hp: 20,
player2mana: 3, player2mana: 3,
}); });
}
try {
const [[me]] = await db.query("SELECT ingame_name FROM accounts WHERE id = ?", [userId]);
const { hp, mana } = await getPlayerStats(userId);
res.render("1v1-battlefield", {
title: "⚔️ 2v2 Kampf",
matchId,
mySlot: slot || "team1_player1",
player1: me?.ingame_name || "Du",
player2: "Gegner",
player1hp: hp,
player1mana: mana,
player2hp: 20,
player2mana: 3,
});
} catch (err) {
console.error("[Arena /2v2]", err);
res.status(500).send("Fehler beim Laden des Spielfelds.");
}
}); });
/* ================================ /* ================================
4v4 Spielfeld (Platzhalter) 4v4 Spielfeld
GET /arena/4v4 GET /arena/4v4
================================ */ ================================ */
router.get("/4v4", (req, res) => { router.get("/4v4", requireLogin, async (req, res) => {
res.render("1v1-battlefield", { const userId = req.session.user.id;
const { match: matchId, slot } = req.query;
if (!matchId) {
return res.render("1v1-battlefield", {
title: "4v4 Kampf", title: "4v4 Kampf",
matchId: null, matchId: null,
mySlot: "player1", mySlot: "team1_player1",
player1: req.session?.character?.name || "Spieler 1", player1: req.session?.user?.ingame_name || "Spieler 1",
player2: "Gegner", player2: "Gegner",
player1hp: 20, player1hp: 20,
player1mana: 3, player1mana: 3,
player2hp: 20, player2hp: 20,
player2mana: 3, player2mana: 3,
}); });
}
try {
const [[me]] = await db.query("SELECT ingame_name FROM accounts WHERE id = ?", [userId]);
const { hp, mana } = await getPlayerStats(userId);
res.render("1v1-battlefield", {
title: "⚔️ 4v4 Kampf",
matchId,
mySlot: slot || "team1_player1",
player1: me?.ingame_name || "Du",
player2: "Gegner",
player1hp: hp,
player1mana: mana,
player2hp: 20,
player2mana: 3,
});
} catch (err) {
console.error("[Arena /4v4]", err);
res.status(500).send("Fehler beim Laden des Spielfelds.");
}
}); });
module.exports = router; module.exports = router;

407
sockets/arena_socket.js
View File

@ -1,45 +1,54 @@
/* ============================================================ /* ============================================================
sockets/arena.js sockets/arena.js
Alle Socket-Events rund um 1v1 Matchmaking & 2v2 Team-Lobby 1v1 Matchmaking + 2v2 Team-Lobby + 4v4 Team-Lobby
============================================================ */ ============================================================ */
const waitingPool = new Map(); // socketId → { socket, player } const waitingPool = new Map(); // socketId → { socket, player }
const LEVEL_RANGE = 5; const LEVEL_RANGE = 5;
const READY_TIMEOUT = 30;
// 2v2 Team-Lobby /* ── 2v2 State ── */
// teams2v2: teamId → { id, players: [{socketId, player}], ready: Set<socketId> } const teams2v2 = new Map(); // teamId → { id, players, ready }
const teams2v2 = new Map(); const readyTeams2v2 = new Map();
const readyTeams = new Map(); // teamId → team (fertige Teams warten auf Matchmaking)
const READY_TIMEOUT = 30; // Sekunden bis Match abgebrochen wird /* ── 4v4 State ── */
const teams4v4 = new Map(); // teamId → { id, players, ready }
const readyTeams4v4 = new Map();
function generateId() { function generateId() {
return `${Date.now()}_${Math.random().toString(36).slice(2, 7)}`; return `${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
} }
/* ───────────────────────────────────────────────── /* ═══════════════════════════════════════════════════════════
HELPER: 2v2 Lobby-Liste an alle senden HELPER: Generisch für 2v2 UND 4v4
───────────────────────────────────────────────── */ mode: "2v2" | "4v4"
function broadcastLobbies(io) { maxPlayers: 2 | 4
═══════════════════════════════════════════════════════════ */
function getTeamMap(mode) { return mode === "4v4" ? teams4v4 : teams2v2; }
function getReadyMap(mode) { return mode === "4v4" ? readyTeams4v4 : readyTeams2v2; }
function getMaxPlayers(mode) { return mode === "4v4" ? 4 : 2; }
function broadcastLobbies(io, mode) {
const teams = getTeamMap(mode);
const max = getMaxPlayers(mode);
const list = []; const list = [];
for (const [teamId, team] of teams2v2) { for (const [teamId, team] of teams) {
if (team.players.length < 2) { if (team.players.length < max) {
list.push({ list.push({
teamId, teamId,
leader: team.players[0]?.player?.name || "?", leader: team.players[0]?.player?.name || "?",
leaderLevel: team.players[0]?.player?.level || 1, leaderLevel: team.players[0]?.player?.level || 1,
count: team.players.length, count: team.players.length,
max,
}); });
} }
} }
io.emit("2v2_lobbies", list); io.emit(`${mode}_lobbies`, list);
} }
/* ───────────────────────────────────────────────── function broadcastTeamStatus(io, teamId, mode) {
HELPER: 2v2 Team-Status an Teammitglieder senden const teams = getTeamMap(mode);
───────────────────────────────────────────────── */ const team = teams.get(teamId);
function broadcastTeamStatus(io, teamId) {
const team = teams2v2.get(teamId);
if (!team) return; if (!team) return;
const data = { const data = {
teamId, teamId,
@ -49,34 +58,31 @@ function broadcastTeamStatus(io, teamId) {
ready: team.ready.has(p.socketId), ready: team.ready.has(p.socketId),
})), })),
count: team.players.length, count: team.players.length,
max: getMaxPlayers(mode),
}; };
for (const p of team.players) { for (const p of team.players) {
io.to(p.socketId).emit("2v2_team_update", data); io.to(p.socketId).emit(`${mode}_team_update`, data);
} }
} }
/* ───────────────────────────────────────────────── function tryMatchmaking_nvn(io, mode) {
HELPER: 2v2 Matchmaking const readyMap = getReadyMap(mode);
───────────────────────────────────────────────── */ const readyList = Array.from(readyMap.values());
function tryMatchmaking2v2(io) {
const readyList = Array.from(readyTeams.values());
if (readyList.length < 2) return; if (readyList.length < 2) return;
const team1 = readyList[0]; const team1 = readyList[0];
const team2 = readyList[1]; const team2 = readyList[1];
readyTeams.delete(team1.id); readyMap.delete(team1.id);
readyTeams.delete(team2.id); readyMap.delete(team2.id);
teams2v2.delete(team1.id); getTeamMap(mode).delete(team1.id);
teams2v2.delete(team2.id); getTeamMap(mode).delete(team2.id);
const matchId = `2v2_${generateId()}`; const matchId = `${mode}_${generateId()}`;
const allPlayers = [ const allPlayers = [
{ team: 1, ...team1.players[0] }, ...team1.players.map(p => ({ team: 1, ...p })),
{ team: 1, ...team1.players[1] }, ...team2.players.map(p => ({ team: 2, ...p })),
{ team: 2, ...team2.players[0] },
{ team: 2, ...team2.players[1] },
]; ];
for (const p of allPlayers) { for (const p of allPlayers) {
@ -85,7 +91,7 @@ function tryMatchmaking2v2(io) {
const teamRef = p.team === 1 ? team1 : team2; const teamRef = p.team === 1 ? team1 : team2;
const slotIndex = teamRef.players.findIndex(x => x.socketId === p.socketId) + 1; const slotIndex = teamRef.players.findIndex(x => x.socketId === p.socketId) + 1;
io.to(p.socketId).emit("match_found_2v2", { io.to(p.socketId).emit(`match_found_${mode}`, {
matchId, matchId,
myTeam: p.team, myTeam: p.team,
teammates, teammates,
@ -95,51 +101,61 @@ function tryMatchmaking2v2(io) {
} }
console.log( console.log(
`[2v2] Match: Team1(${team1.players.map(p => p.player.name)})` + `[${mode}] Match: Team1(${team1.players.map(p => p.player.name)})` +
` vs Team2(${team2.players.map(p => p.player.name)}) | ${matchId}` ` vs Team2(${team2.players.map(p => p.player.name)}) | ${matchId}`
); );
} }
/* ───────────────────────────────────────────────── function leaveAllTeams_nvn(socketId, io, mode) {
HELPER: 1v1 Matchmaking const teams = getTeamMap(mode);
───────────────────────────────────────────────── */ const ready = getReadyMap(mode);
for (const [teamId, team] of teams) {
const idx = team.players.findIndex(p => p.socketId === socketId);
if (idx === -1) continue;
const playerName = team.players[idx].player.name;
team.players.splice(idx, 1);
team.ready.delete(socketId);
ready.delete(teamId);
if (team.players.length === 0) {
teams.delete(teamId);
console.log(`[${mode}] Team ${teamId} aufgelöst.`);
} else {
broadcastTeamStatus(io, teamId, mode);
for (const p of team.players) {
io.to(p.socketId).emit(`${mode}_partner_left`, { name: playerName });
}
console.log(`[${mode}] ${playerName} hat Team ${teamId} verlassen.`);
}
broadcastLobbies(io, mode);
break;
}
}
/* ── 1v1 Matchmaking ── */
function tryMatchmaking(io, newSocketId) { function tryMatchmaking(io, newSocketId) {
const challenger = waitingPool.get(newSocketId); const challenger = waitingPool.get(newSocketId);
if (!challenger) return; if (!challenger) return;
for (const [id, entry] of waitingPool) { for (const [id, entry] of waitingPool) {
if (id === newSocketId) continue; if (id === newSocketId) continue;
if (Math.abs(entry.player.level - challenger.player.level) <= LEVEL_RANGE) {
const levelDiff = Math.abs(entry.player.level - challenger.player.level);
if (levelDiff <= LEVEL_RANGE) {
waitingPool.delete(newSocketId); waitingPool.delete(newSocketId);
waitingPool.delete(id); waitingPool.delete(id);
const matchId = `match_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`; const matchId = `match_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
challenger.socket.emit("match_found", { matchId, opponent: entry.player, mySlot: "player1" });
entry.socket.emit("match_found", { matchId, opponent: challenger.player, mySlot: "player2" });
challenger.socket.emit("match_found", { console.log(`[1v1] ${challenger.player.name} vs ${entry.player.name} | ${matchId}`);
matchId,
opponent: entry.player,
mySlot: "player1",
});
entry.socket.emit("match_found", {
matchId,
opponent: challenger.player,
mySlot: "player2",
});
console.log(
`[1v1] Match: ${challenger.player.name} (Lvl ${challenger.player.level})` +
` vs ${entry.player.name} (Lvl ${entry.player.level}) | ${matchId}`
);
return; return;
} }
} }
} }
/* ───────────────────────────────────────────────── /* ── Bereit-Timer (1v1) ── */
HELPER: Bereit-Timer (1v1)
───────────────────────────────────────────────── */
function startReadyTimer(io, matchId) { function startReadyTimer(io, matchId) {
if (!io._arenaTimers) io._arenaTimers = new Map(); if (!io._arenaTimers) io._arenaTimers = new Map();
if (io._arenaTimers.has(matchId)) return; if (io._arenaTimers.has(matchId)) return;
@ -150,15 +166,11 @@ function startReadyTimer(io, matchId) {
const interval = setInterval(() => { const interval = setInterval(() => {
remaining--; remaining--;
io.to("arena_" + matchId).emit("ready_timer", { remaining }); io.to("arena_" + matchId).emit("ready_timer", { remaining });
if (remaining <= 0) { if (remaining <= 0) {
clearInterval(interval); clearInterval(interval);
io._arenaTimers.delete(matchId); io._arenaTimers.delete(matchId);
console.log(`[1v1] Match ${matchId} abgebrochen – Zeit abgelaufen.`); console.log(`[1v1] Match ${matchId} abgebrochen – Zeit abgelaufen.`);
io.to("arena_" + matchId).emit("match_cancelled", { io.to("arena_" + matchId).emit("match_cancelled", { reason: "timeout", message: "Zeit abgelaufen." });
reason: "timeout",
message: "Zeit abgelaufen – Match wird abgebrochen.",
});
} }
}, 1000); }, 1000);
@ -171,81 +183,125 @@ function stopReadyTimer(io, matchId) {
if (interval) { if (interval) {
clearInterval(interval); clearInterval(interval);
io._arenaTimers.delete(matchId); io._arenaTimers.delete(matchId);
console.log(`[1v1] Timer für Match ${matchId} gestoppt (beide bereit).`);
}
}
/* ─────────────────────────────────────────────────
HELPER: Spieler aus allen 2v2-Teams entfernen
───────────────────────────────────────────────── */
function leaveAllTeams(socketId, io) {
for (const [teamId, team] of teams2v2) {
const idx = team.players.findIndex(p => p.socketId === socketId);
if (idx === -1) continue;
const playerName = team.players[idx].player.name;
team.players.splice(idx, 1);
team.ready.delete(socketId);
readyTeams.delete(teamId);
if (team.players.length === 0) {
teams2v2.delete(teamId);
console.log(`[2v2] Team ${teamId} aufgelöst.`);
} else {
broadcastTeamStatus(io, teamId);
for (const p of team.players) {
io.to(p.socketId).emit("2v2_partner_left", { name: playerName });
}
console.log(`[2v2] ${playerName} hat Team ${teamId} verlassen.`);
}
broadcastLobbies(io);
break;
} }
} }
/* ═══════════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════════
HAUPT-HANDLER – wird einmal pro Socket-Verbindung gerufen Handler-Generator für 2v2 und 4v4 (DRY)
═══════════════════════════════════════════════════════════ */
function registerTeamModeHandlers(io, socket, mode) {
const max = getMaxPlayers(mode);
/* Lobby-Liste anfordern */
socket.on(`get_${mode}_lobbies`, () => {
const teams = getTeamMap(mode);
const list = [];
for (const [teamId, team] of teams) {
if (team.players.length < max) {
list.push({
teamId,
leader: team.players[0]?.player?.name || "?",
leaderLevel: team.players[0]?.player?.level || 1,
count: team.players.length,
max,
});
}
}
socket.emit(`${mode}_lobbies`, list);
});
/* Team erstellen */
socket.on(`create_${mode}_team`, (playerData) => {
leaveAllTeams_nvn(socket.id, io, mode);
const player = { id: playerData.id, name: playerData.name, level: Number(playerData.level) || 1 };
const teamId = `team_${mode}_${generateId()}`;
getTeamMap(mode).set(teamId, {
id: teamId,
players: [{ socketId: socket.id, player }],
ready: new Set(),
});
socket.emit(`${mode}_team_joined`, { teamId, isLeader: true });
broadcastTeamStatus(io, teamId, mode);
broadcastLobbies(io, mode);
console.log(`[${mode}] Team ${teamId} erstellt von ${player.name}`);
});
/* Team beitreten */
socket.on(`join_${mode}_team`, (data) => {
const { teamId, playerData } = data;
const team = getTeamMap(mode).get(teamId);
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.find(p => p.socketId === socket.id)) return;
leaveAllTeams_nvn(socket.id, io, mode);
const player = { id: playerData.id, name: playerData.name, level: Number(playerData.level) || 1 };
team.players.push({ socketId: socket.id, player });
socket.emit(`${mode}_team_joined`, { teamId, isLeader: false });
broadcastTeamStatus(io, teamId, mode);
broadcastLobbies(io, mode);
console.log(`[${mode}] ${player.name} hat Team ${teamId} beigetreten`);
});
/* Team verlassen */
socket.on(`leave_${mode}_team`, () => {
leaveAllTeams_nvn(socket.id, io, mode);
});
/* Bereit klicken */
socket.on(`${mode}_player_ready`, (data) => {
const { teamId } = data;
const team = getTeamMap(mode).get(teamId);
if (!team || team.players.length < max) return;
team.ready.add(socket.id);
broadcastTeamStatus(io, teamId, mode);
console.log(`[${mode}] Bereit in Team ${teamId}: ${team.ready.size}/${max}`);
if (team.ready.size >= max) {
getReadyMap(mode).set(teamId, team);
for (const p of team.players) {
io.to(p.socketId).emit(`${mode}_searching`, { message: "Suche nach Gegnerteam…" });
}
console.log(`[${mode}] Team ${teamId} sucht Gegner.`);
tryMatchmaking_nvn(io, mode);
}
});
}
/* ═══════════════════════════════════════════════════════════
HAUPT-HANDLER
═══════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════ */
function registerArenaHandlers(io, socket) { function registerArenaHandlers(io, socket) {
/* ── 1v1: Queue beitreten ── */ /* ── 1v1 ── */
socket.on("join_1v1", (playerData) => { socket.on("join_1v1", (playerData) => {
if (waitingPool.has(socket.id)) return; if (waitingPool.has(socket.id)) return;
const player = { id: playerData.id, name: playerData.name, level: Number(playerData.level) || 1 };
const player = {
id: playerData.id,
name: playerData.name,
level: Number(playerData.level) || 1,
};
waitingPool.set(socket.id, { socket, player }); waitingPool.set(socket.id, { socket, player });
socket.emit("queue_status", { socket.emit("queue_status", { status: "waiting", poolSize: waitingPool.size });
status: "waiting",
poolSize: waitingPool.size,
message: `Suche Gegner (Level ${player.level - LEVEL_RANGE}–${player.level + LEVEL_RANGE})…`,
});
console.log(`[1v1] ${player.name} (Lvl ${player.level}) im Pool. Größe: ${waitingPool.size}`); console.log(`[1v1] ${player.name} (Lvl ${player.level}) im Pool. Größe: ${waitingPool.size}`);
tryMatchmaking(io, socket.id); tryMatchmaking(io, socket.id);
}); });
/* ── 1v1: Queue verlassen ── */
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" });
console.log(`[1v1] ${socket.id} hat Pool verlassen.`);
} }
}); });
/* ── 1v1: Spielfeld betreten ── */
socket.on("arena_join", (data) => { socket.on("arena_join", (data) => {
const { matchId, slot } = data; const { matchId, slot } = data;
if (!matchId || !slot) return; if (!matchId || !slot) return;
if (!io._arenaRooms) io._arenaRooms = new Map(); if (!io._arenaRooms) io._arenaRooms = new Map();
if (!io._arenaRooms.has(matchId)) { if (!io._arenaRooms.has(matchId)) io._arenaRooms.set(matchId, { sockets: {}, names: {} });
io._arenaRooms.set(matchId, { sockets: {}, names: {} });
}
const room = io._arenaRooms.get(matchId); const room = io._arenaRooms.get(matchId);
room.sockets[slot] = socket.id; room.sockets[slot] = socket.id;
@ -258,144 +314,39 @@ function registerArenaHandlers(io, socket) {
player1: room.names["player1"] || "Spieler 1", player1: room.names["player1"] || "Spieler 1",
player2: room.names["player2"] || "Spieler 2", player2: room.names["player2"] || "Spieler 2",
}); });
console.log(`[Arena] Match ${matchId} bereit: ${room.names["player1"]} vs ${room.names["player2"]}`);
startReadyTimer(io, matchId); startReadyTimer(io, matchId);
} else { } else {
socket.to("arena_" + matchId).emit("arena_opponent_joined", { socket.to("arena_" + matchId).emit("arena_opponent_joined", { name: room.names[slot], slot });
name: room.names[slot],
slot,
});
} }
}); });
/* ── 1v1: Bereit-System ── */
socket.on("player_ready", (data) => { socket.on("player_ready", (data) => {
const { matchId, slot } = data; const { matchId, slot } = data;
if (!matchId || !slot) return; if (!matchId || !slot) return;
if (!io._arenaReady) io._arenaReady = new Map(); if (!io._arenaReady) io._arenaReady = new Map();
if (!io._arenaReady.has(matchId)) io._arenaReady.set(matchId, new Set()); if (!io._arenaReady.has(matchId)) io._arenaReady.set(matchId, new Set());
const readySet = io._arenaReady.get(matchId); const readySet = io._arenaReady.get(matchId);
readySet.add(slot); readySet.add(slot);
io.to("arena_" + matchId).emit("ready_status", { readyCount: readySet.size, readySlots: Array.from(readySet) });
io.to("arena_" + matchId).emit("ready_status", { if (readySet.size >= 2) { stopReadyTimer(io, matchId); io._arenaReady.delete(matchId); }
readyCount: readySet.size,
readySlots: Array.from(readySet),
});
console.log(`[1v1] ${slot} bereit in ${matchId} (${readySet.size}/2)`);
if (readySet.size >= 2) {
stopReadyTimer(io, matchId);
io._arenaReady.delete(matchId);
}
}); });
/* ── 1v1: Aufgeben ── */
socket.on("player_surrender", (data) => { socket.on("player_surrender", (data) => {
const { matchId, slot } = data; const { matchId, slot } = data;
console.log(`[1v1] ${slot} hat aufgegeben in Match ${matchId}`);
io.to("arena_" + matchId).emit("player_surrendered", { slot }); io.to("arena_" + matchId).emit("player_surrendered", { slot });
}); });
/* ════════════════════════════════════════════ /* ── 2v2 & 4v4 (generisch) ── */
2v2 TEAM LOBBY registerTeamModeHandlers(io, socket, "2v2");
════════════════════════════════════════════ */ registerTeamModeHandlers(io, socket, "4v4");
/* ── Lobby-Liste anfordern ── */
socket.on("get_2v2_lobbies", () => {
const list = [];
for (const [teamId, team] of teams2v2) {
if (team.players.length < 2) {
list.push({
teamId,
leader: team.players[0]?.player?.name || "?",
leaderLevel: team.players[0]?.player?.level || 1,
count: team.players.length,
});
}
}
socket.emit("2v2_lobbies", list);
});
/* ── Neues Team erstellen ── */
socket.on("create_2v2_team", (playerData) => {
leaveAllTeams(socket.id, io);
const player = {
id: playerData.id,
name: playerData.name,
level: Number(playerData.level) || 1,
};
const teamId = `team_${generateId()}`;
teams2v2.set(teamId, {
id: teamId,
players: [{ socketId: socket.id, player }],
ready: new Set(),
});
socket.emit("2v2_team_joined", { teamId, isLeader: true });
broadcastTeamStatus(io, teamId);
broadcastLobbies(io);
console.log(`[2v2] Team ${teamId} erstellt von ${player.name}`);
});
/* ── Team beitreten ── */
socket.on("join_2v2_team", (data) => {
const { teamId, playerData } = data;
const team = teams2v2.get(teamId);
if (!team) return socket.emit("2v2_error", { message: "Team nicht mehr verfügbar." });
if (team.players.length >= 2) return socket.emit("2v2_error", { message: "Team ist bereits voll." });
if (team.players.find(p => p.socketId === socket.id)) return;
leaveAllTeams(socket.id, io);
const player = {
id: playerData.id,
name: playerData.name,
level: Number(playerData.level) || 1,
};
team.players.push({ socketId: socket.id, player });
socket.emit("2v2_team_joined", { teamId, isLeader: false });
broadcastTeamStatus(io, teamId);
broadcastLobbies(io);
console.log(`[2v2] ${player.name} hat Team ${teamId} beigetreten`);
});
/* ── Team verlassen ── */
socket.on("leave_2v2_team", () => {
leaveAllTeams(socket.id, io);
});
/* ── Bereit klicken ── */
socket.on("2v2_player_ready", (data) => {
const { teamId } = data;
const team = teams2v2.get(teamId);
if (!team || team.players.length < 2) return;
team.ready.add(socket.id);
broadcastTeamStatus(io, teamId);
console.log(`[2v2] Bereit in Team ${teamId}: ${team.ready.size}/2`);
if (team.ready.size >= 2) {
readyTeams.set(teamId, team);
for (const p of team.players) {
io.to(p.socketId).emit("2v2_searching", { message: "Suche nach Gegnerteam…" });
}
console.log(`[2v2] Team ${teamId} sucht Gegner. Ready-Teams: ${readyTeams.size}`);
tryMatchmaking2v2(io);
}
});
/* ── Disconnect ── */ /* ── Disconnect ── */
socket.on("disconnect", () => { socket.on("disconnect", () => {
if (waitingPool.delete(socket.id)) { if (waitingPool.delete(socket.id)) {
console.log(`[1v1] ${socket.id} disconnected – aus 1v1-Pool entfernt.`); console.log(`[1v1] ${socket.id} disconnected – aus Pool entfernt.`);
} }
leaveAllTeams(socket.id, io); leaveAllTeams_nvn(socket.id, io, "2v2");
leaveAllTeams_nvn(socket.id, io, "4v4");
}); });
} }