djnd
This commit is contained in:
parent
7eb223c2d8
commit
74788e21e8
@ -31,30 +31,48 @@ export async function loadArena() {
|
||||
<!-- 2v2 Lobby-Screen -->
|
||||
<div id="arena-2v2-screen" style="display:none;">
|
||||
<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>
|
||||
|
||||
<!-- Fehlermeldung auf dem 2v2-Screen -->
|
||||
<div id="arena-2v2-error" style="display:none;"></div>
|
||||
|
||||
<!-- Team-Panel (erscheint nach Beitritt) -->
|
||||
<div id="arena-team-panel" style="display:none;">
|
||||
<div id="arena-2v2-team-panel" style="display:none;">
|
||||
<div class="arena-team-box">
|
||||
<div class="arena-team-title">Dein Team</div>
|
||||
<div id="arena-team-players"></div>
|
||||
<div id="arena-team-actions"></div>
|
||||
<div class="arena-team-title">Dein Team (2v2)</div>
|
||||
<div id="arena-2v2-team-players"></div>
|
||||
<div id="arena-2v2-team-actions"></div>
|
||||
</div>
|
||||
<div id="arena-team-status"></div>
|
||||
<div id="arena-2v2-team-status"></div>
|
||||
</div>
|
||||
|
||||
<!-- Lobby-Liste -->
|
||||
<div id="arena-lobby-section">
|
||||
<div id="arena-2v2-lobby-section">
|
||||
<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 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>
|
||||
|
||||
@ -68,454 +86,260 @@ export async function loadArena() {
|
||||
/* ── Styles ─────────────────────────────────────────────────────────────────── */
|
||||
function injectArenaStyles() {
|
||||
if (document.getElementById("arena-popup-styles")) return;
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.id = "arena-popup-styles";
|
||||
style.textContent = `
|
||||
@keyframes arenaFadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes arenaScaleIn {
|
||||
from { transform: scale(0.94); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
@keyframes arenaFadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
@keyframes arenaScaleIn { from { transform:scale(0.94); opacity:0; } to { transform:scale(1); opacity:1; } }
|
||||
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
|
||||
|
||||
/* ── Queue Status Box ── */
|
||||
#arena-queue-status {
|
||||
margin-top: 18px;
|
||||
padding: 12px 20px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 215, 80, 0.08);
|
||||
border: 1px solid rgba(255, 215, 80, 0.3);
|
||||
color: #dceb15;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 13px;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
margin-top:18px; padding:12px 20px; border-radius:10px;
|
||||
background:rgba(255,215,80,0.08); border:1px solid rgba(255,215,80,0.3);
|
||||
color:#dceb15; font-family:"Cinzel",serif; font-size:13px;
|
||||
letter-spacing:1px; text-align:center; animation:pulse 2s ease-in-out infinite;
|
||||
}
|
||||
#arena-queue-status .qs-cancel {
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
font-size: 11px;
|
||||
color: rgba(255,100,100,0.8);
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
animation: none;
|
||||
display:inline-block; margin-top:8px; font-size:11px;
|
||||
color:rgba(255,100,100,0.8); cursor:pointer; text-decoration:underline; animation:none;
|
||||
}
|
||||
#arena-queue-status .qs-cancel:hover { color: #e74c3c; }
|
||||
#arena-queue-status .qs-cancel:hover { color:#e74c3c; }
|
||||
|
||||
/* ── 2v2 Fehlermeldung ── */
|
||||
#arena-2v2-error {
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
background: rgba(231,76,60,0.12);
|
||||
border: 1px solid rgba(231,76,60,0.4);
|
||||
color: #e74c3c;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
#arena-2v2-error, #arena-4v4-error {
|
||||
padding:10px 14px; border-radius:8px; margin-bottom:8px;
|
||||
background:rgba(231,76,60,0.12); border:1px solid rgba(231,76,60,0.4);
|
||||
color:#e74c3c; font-family:"Cinzel",serif; font-size:12px; text-align:center;
|
||||
}
|
||||
|
||||
/* ── 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;
|
||||
}
|
||||
|
||||
/* ── Popup ── */
|
||||
#arena-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.82); backdrop-filter:blur(5px); z-index:9998; animation:arenaFadeIn 0.25s ease; }
|
||||
#arena-popup {
|
||||
position: fixed;
|
||||
inset: 50px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 215, 80, 0.35),
|
||||
0 30px 90px rgba(0, 0, 0, 0.85),
|
||||
0 0 60px rgba(255, 215, 80, 0.08);
|
||||
animation: arenaScaleIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
position:fixed; inset:50px; z-index:9999; display:flex; flex-direction:column;
|
||||
border-radius:14px; overflow:hidden;
|
||||
box-shadow: 0 0 0 1px rgba(255,215,80,0.35), 0 30px 90px rgba(0,0,0,0.85);
|
||||
animation:arenaScaleIn 0.28s cubic-bezier(0.22,1,0.36,1);
|
||||
}
|
||||
|
||||
/* ── Titelleiste ── */
|
||||
#arena-popup-titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(10, 8, 5, 0.95);
|
||||
border-bottom: 1px solid rgba(255, 215, 80, 0.3);
|
||||
padding: 0 16px;
|
||||
height: 42px;
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
}
|
||||
#arena-popup-titlebar .ap-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
#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;
|
||||
display:flex; align-items:center; justify-content:space-between;
|
||||
background:rgba(10,8,5,0.95); border-bottom:1px solid rgba(255,215,80,0.3);
|
||||
padding:0 16px; height:42px; flex-shrink:0;
|
||||
}
|
||||
#arena-popup-titlebar .ap-title { font-family:"Cinzel",serif; font-size:13px; letter-spacing:4px; color:rgba(255,215,80,0.85); text-transform:uppercase; }
|
||||
#arena-popup-titlebar .ap-url { font-size:11px; color:rgba(255,255,255,0.22); }
|
||||
#arena-popup iframe { flex:1; border:none; width:100%; display:block; }
|
||||
|
||||
/* ── Match-Found Overlay ── */
|
||||
#match-found-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10000;
|
||||
background: rgba(0,0,0,0.9);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: arenaFadeIn 0.3s ease;
|
||||
}
|
||||
#match-found-overlay .mfo-title {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 36px;
|
||||
color: #ffd750;
|
||||
text-shadow: 0 0 30px rgba(255,215,80,0.6);
|
||||
letter-spacing: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#match-found-overlay .mfo-vs {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 18px;
|
||||
color: rgba(255,255,255,0.75);
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
#match-found-overlay .mfo-bar {
|
||||
width: 300px;
|
||||
height: 4px;
|
||||
background: rgba(255,215,80,0.2);
|
||||
border-radius: 2px;
|
||||
margin-top: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#match-found-overlay .mfo-bar-fill {
|
||||
height: 100%;
|
||||
background: #ffd750;
|
||||
width: 0%;
|
||||
border-radius: 2px;
|
||||
transition: width 1.5s ease;
|
||||
position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.9);
|
||||
display:flex; flex-direction:column; align-items:center; justify-content:center;
|
||||
animation:arenaFadeIn 0.3s ease;
|
||||
}
|
||||
#match-found-overlay .mfo-title { font-family:"Cinzel",serif; font-size:36px; color:#ffd750; text-shadow:0 0 30px rgba(255,215,80,0.6); letter-spacing:6px; margin-bottom:12px; }
|
||||
#match-found-overlay .mfo-vs { font-family:"Cinzel",serif; font-size:18px; color:rgba(255,255,255,0.75); letter-spacing:3px; }
|
||||
#match-found-overlay .mfo-bar { width:300px; height:4px; background:rgba(255,215,80,0.2); border-radius:2px; margin-top:24px; overflow:hidden; }
|
||||
#match-found-overlay .mfo-bar-fill { height:100%; background:#ffd750; width:0%; border-radius:2px; transition:width 1.5s ease; }
|
||||
|
||||
/* ── iframe ── */
|
||||
#arena-popup iframe {
|
||||
flex: 1;
|
||||
border: none;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.arena-mode-card.searching { opacity:0.6; pointer-events:none; border-color:rgba(255,215,80,0.5)!important; }
|
||||
|
||||
/* ── Card: gesucht-Zustand ── */
|
||||
.arena-mode-card.searching {
|
||||
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-2v2-screen, #arena-4v4-screen {
|
||||
flex-direction:column; gap:14px; padding:16px; height:100%; overflow-y:auto;
|
||||
}
|
||||
.arena-lobby-header { display:flex; align-items:center; gap:16px; }
|
||||
.arena-back-btn {
|
||||
background: none;
|
||||
border: 1px solid rgba(255,200,80,0.3);
|
||||
color: #c8960c;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 12px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
background:none; border:1px solid rgba(255,200,80,0.3); color:#c8960c;
|
||||
font-family:"Cinzel",serif; font-size:12px; padding:4px 12px; border-radius:4px; cursor:pointer;
|
||||
}
|
||||
.arena-back-btn:hover { background: rgba(200,150,12,0.15); }
|
||||
.arena-lobby-actions { display: flex; gap: 10px; margin-bottom: 4px; }
|
||||
.arena-back-btn:hover { background:rgba(200,150,12,0.15); }
|
||||
.arena-lobby-actions { display:flex; gap:10px; margin-bottom:4px; }
|
||||
.arena-btn-create {
|
||||
background: linear-gradient(#4a3018, #2a1a08);
|
||||
border: 2px solid #8b6a3c;
|
||||
border-radius: 7px;
|
||||
color: #f0d9a6;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 12px;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.arena-btn-create:hover { border-color: #f0d060; }
|
||||
.arena-lobby-title {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 13px;
|
||||
color: #a08060;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.arena-lobby-empty {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 12px;
|
||||
color: #606060;
|
||||
padding: 12px 0;
|
||||
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-lobby-title { font-family:"Cinzel",serif; font-size:13px; color:#a08060; letter-spacing:1px; margin-bottom:6px; }
|
||||
.arena-lobby-empty { font-family:"Cinzel",serif; font-size:12px; color:#606060; padding:12px 0; }
|
||||
.arena-lobby-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(#2a1a08, #1a0f04);
|
||||
border: 1px solid #6b4b2a;
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 6px;
|
||||
display:flex; align-items:center; justify-content:space-between;
|
||||
background:linear-gradient(#2a1a08,#1a0f04); border:1px solid #6b4b2a;
|
||||
border-radius:8px; padding:10px 14px; margin-bottom:6px;
|
||||
}
|
||||
.arena-lobby-row-info { display: flex; align-items: center; gap: 12px; }
|
||||
.arena-lobby-leader { font-family: "Cinzel", serif; font-size: 13px; color: #f0d9a6; }
|
||||
.arena-lobby-level { font-size: 11px; color: #a08060; }
|
||||
.arena-lobby-count { font-size: 11px; color: #6a9a4a; }
|
||||
.arena-lobby-row-info { display:flex; align-items:center; gap:12px; }
|
||||
.arena-lobby-leader { font-family:"Cinzel",serif; font-size:13px; color:#f0d9a6; }
|
||||
.arena-lobby-level { font-size:11px; color:#a08060; }
|
||||
.arena-lobby-count { font-size:11px; color:#6a9a4a; }
|
||||
.arena-btn-join {
|
||||
background: linear-gradient(#1a4a18, #0f2a0e);
|
||||
border: 2px solid #4a8a3c;
|
||||
border-radius: 6px;
|
||||
color: #a0e090;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 11px;
|
||||
padding: 5px 12px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
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; }
|
||||
|
||||
/* ── Team-Panel ── */
|
||||
.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-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-player {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid #3a2810;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 5px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
}
|
||||
.arena-team-player.ready { border-color: #4a8a3c; background: rgba(74,138,60,0.1); }
|
||||
.arena-team-player-name { font-family: "Cinzel", serif; font-size: 12px; color: #f0d9a6; flex: 1; }
|
||||
.arena-team-player-level { font-size: 11px; color: #a08060; }
|
||||
.arena-team-player-status { font-size: 11px; }
|
||||
.arena-waiting-partner {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 11px;
|
||||
color: #a08060;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
display:flex; align-items:center; gap:10px; padding:7px 10px;
|
||||
border:1px solid #3a2810; border-radius:6px; margin-bottom:5px; background:rgba(255,255,255,0.03);
|
||||
}
|
||||
.arena-team-player.ready { border-color:#4a8a3c; background:rgba(74,138,60,0.1); }
|
||||
.arena-team-player-name { font-family:"Cinzel",serif; font-size:12px; color:#f0d9a6; flex:1; }
|
||||
.arena-team-player-level { font-size:11px; color:#a08060; }
|
||||
.arena-team-player-status { font-size:11px; }
|
||||
.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;
|
||||
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.active { border-color: #8ae060; color: #c0f0a0; cursor: default; }
|
||||
.arena-btn-ready:hover:not([disabled]) { border-color:#8ae060; background:linear-gradient(#2a6a28,#1a3a18); }
|
||||
.arena-btn-ready.active { border-color:#8ae060; color:#c0f0a0; cursor:default; }
|
||||
.arena-searching-box {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 12px;
|
||||
color: #dceb15;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(255,215,80,0.3);
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
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);
|
||||
}
|
||||
|
||||
/* ── Socket-Referenz holen ──────────────────────────────────────────────────── */
|
||||
function getSocket() {
|
||||
return window._socket || null;
|
||||
}
|
||||
/* ── Socket ─────────────────────────────────────────────────────────────────── */
|
||||
function getSocket() { return window._socket || null; }
|
||||
|
||||
/* ── Klick-Handler initialisieren ──────────────────────────────────────────── */
|
||||
/* ── State ──────────────────────────────────────────────────────────────────── */
|
||||
let myArenaData = null;
|
||||
let my2v2TeamId = null;
|
||||
let my4v4TeamId = null;
|
||||
|
||||
/* ── Modus-Klicks ───────────────────────────────────────────────────────────── */
|
||||
function initArenaModes() {
|
||||
document.querySelectorAll(".arena-mode-card").forEach((card) => {
|
||||
document.querySelectorAll(".arena-mode-card").forEach(card => {
|
||||
card.addEventListener("click", () => {
|
||||
const mode = card.dataset.mode;
|
||||
if (mode === "1v1") {
|
||||
handle1v1Click(card);
|
||||
} else if (mode === "2v2") {
|
||||
open2v2Lobby();
|
||||
} else {
|
||||
console.log("Arena Modus gewählt:", mode);
|
||||
}
|
||||
if (mode === "1v1") handle1v1Click(card);
|
||||
else if (mode === "2v2") openTeamLobby("2v2");
|
||||
else if (mode === "4v4") openTeamLobby("4v4");
|
||||
});
|
||||
});
|
||||
|
||||
/* 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);
|
||||
});
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
2v2 LOBBY
|
||||
══════════════════════════════════════════════════════════ */
|
||||
let my2v2TeamId = null;
|
||||
let myArenaData = null;
|
||||
|
||||
async function open2v2Lobby() {
|
||||
/* ── Team-Lobby öffnen (2v2 oder 4v4) ──────────────────────────────────────── */
|
||||
async function openTeamLobby(mode) {
|
||||
const socket = getSocket();
|
||||
|
||||
// Screen ZUERST wechseln – so sind Fehlermeldungen sichtbar
|
||||
document.getElementById("arena-mode-screen").style.display = "none";
|
||||
document.getElementById("arena-2v2-screen").style.display = "flex";
|
||||
/* Screen sofort wechseln */
|
||||
document.getElementById("arena-mode-screen").style.display = "none";
|
||||
document.getElementById(`arena-${mode}-screen`).style.display = "flex";
|
||||
|
||||
if (!socket) {
|
||||
console.error("[2v2] Kein Socket – window._socket:", window._socket);
|
||||
show2v2Error("Keine Verbindung zum Server. Bitte Seite neu laden.");
|
||||
showModeError(mode, "Keine Verbindung zum Server. Bitte Seite neu laden.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Spielerdaten laden
|
||||
/* Spielerdaten laden */
|
||||
if (!myArenaData) {
|
||||
try {
|
||||
console.log("[2v2] Lade Spielerdaten…");
|
||||
const res = await fetch("/arena/me");
|
||||
if (!res.ok) throw new Error("HTTP " + res.status);
|
||||
myArenaData = await res.json();
|
||||
console.log("[2v2] Spielerdaten:", myArenaData);
|
||||
console.log(`[${mode}] Spielerdaten:`, myArenaData);
|
||||
} catch (err) {
|
||||
console.error("[2v2] Spielerdaten Fehler:", err);
|
||||
show2v2Error("Spielerdaten konnten nicht geladen werden. (Eingeloggt?)");
|
||||
console.error(`[${mode}] Spielerdaten Fehler:`, err);
|
||||
showModeError(mode, "Spielerdaten konnten nicht geladen werden. (Eingeloggt?)");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Lobbyliste anfordern
|
||||
socket.emit("get_2v2_lobbies");
|
||||
console.log("[2v2] get_2v2_lobbies gesendet");
|
||||
/* Lobbyliste anfordern */
|
||||
socket.emit(`get_${mode}_lobbies`);
|
||||
|
||||
// Zurück-Button
|
||||
document.getElementById("arena-2v2-back").onclick = () => {
|
||||
leave2v2Team(socket);
|
||||
document.getElementById("arena-2v2-screen").style.display = "none";
|
||||
document.getElementById("arena-mode-screen").style.display = "";
|
||||
my2v2TeamId = null;
|
||||
};
|
||||
/* Alte Listener entfernen */
|
||||
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`);
|
||||
|
||||
// Team erstellen
|
||||
document.getElementById("arena-create-team-btn").onclick = () => {
|
||||
console.log("[2v2] Team erstellen geklickt – sende create_2v2_team mit:", myArenaData);
|
||||
socket.emit("create_2v2_team", myArenaData);
|
||||
};
|
||||
/* Listener registrieren */
|
||||
socket.on(`${mode}_lobbies`, list => renderLobbyList(list, socket, mode));
|
||||
|
||||
// Socket-Listener registrieren (einmalig)
|
||||
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");
|
||||
|
||||
socket.on("2v2_lobbies", (list) => {
|
||||
console.log("[2v2] Lobbies empfangen:", list);
|
||||
render2v2LobbyList(list, socket);
|
||||
socket.on(`${mode}_team_joined`, data => {
|
||||
if (mode === "2v2") my2v2TeamId = data.teamId;
|
||||
if (mode === "4v4") my4v4TeamId = data.teamId;
|
||||
document.getElementById(`arena-${mode}-team-panel`).style.display = "block";
|
||||
document.getElementById(`arena-${mode}-lobby-section`).style.display = "none";
|
||||
hideModeError(mode);
|
||||
});
|
||||
|
||||
socket.on("2v2_team_joined", (data) => {
|
||||
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(`${mode}_team_update`, data => renderTeamPanel(data, socket, mode));
|
||||
|
||||
socket.on("2v2_team_update", (data) => render2v2TeamPanel(data, socket));
|
||||
|
||||
socket.on("2v2_partner_left", (data) => {
|
||||
const status = document.getElementById("arena-team-status");
|
||||
socket.on(`${mode}_partner_left`, data => {
|
||||
const status = document.getElementById(`arena-${mode}-team-status`);
|
||||
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", () => {
|
||||
const status = document.getElementById("arena-team-status");
|
||||
if (status) status.innerHTML = `<div class="arena-searching-box">⏳ Suche nach Gegnerteam…</div>`;
|
||||
const actions = document.getElementById("arena-team-actions");
|
||||
socket.on(`${mode}_searching`, () => {
|
||||
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 (actions) actions.innerHTML = "";
|
||||
});
|
||||
|
||||
socket.on("match_found_2v2", (data) => {
|
||||
socket.off("2v2_lobbies");
|
||||
socket.off("2v2_team_update");
|
||||
socket.off("2v2_partner_left");
|
||||
socket.off("2v2_searching");
|
||||
socket.on(`match_found_${mode}`, data => {
|
||||
socket.off(`${mode}_lobbies`);
|
||||
socket.off(`${mode}_team_update`);
|
||||
socket.off(`${mode}_partner_left`);
|
||||
socket.off(`${mode}_searching`);
|
||||
|
||||
showMatchFoundOverlay(myArenaData.name, `Team ${data.myTeam === 1 ? 2 : 1}`, () => {
|
||||
document.getElementById("arena-2v2-screen").style.display = "none";
|
||||
document.getElementById("arena-mode-screen").style.display = "";
|
||||
document.getElementById(`arena-${mode}-screen`).style.display = "none";
|
||||
document.getElementById("arena-mode-screen").style.display = "";
|
||||
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.matchId,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
socket.on("2v2_error", (data) => {
|
||||
console.warn("[2v2] Fehler vom Server:", data.message);
|
||||
show2v2Error(data.message);
|
||||
socket.on(`${mode}_error`, data => {
|
||||
console.warn(`[${mode}] Fehler:`, data.message);
|
||||
showModeError(mode, data.message);
|
||||
});
|
||||
}
|
||||
|
||||
function render2v2LobbyList(list, socket) {
|
||||
const el = document.getElementById("arena-lobby-list");
|
||||
/* ── Lobby-Liste rendern ────────────────────────────────────────────────────── */
|
||||
function renderLobbyList(list, socket, mode) {
|
||||
const el = document.getElementById(`arena-${mode}-lobby-list`);
|
||||
if (!el) return;
|
||||
const max = mode === "4v4" ? 4 : 2;
|
||||
if (!list.length) {
|
||||
el.innerHTML = `<div class="arena-lobby-empty">Keine offenen Teams vorhanden.</div>`;
|
||||
return;
|
||||
@ -525,7 +349,7 @@ function render2v2LobbyList(list, socket) {
|
||||
<div class="arena-lobby-row-info">
|
||||
<span class="arena-lobby-leader">⚔️ ${team.leader}</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>
|
||||
<button class="arena-btn-join" data-teamid="${team.teamId}">Beitreten</button>
|
||||
</div>
|
||||
@ -533,79 +357,86 @@ function render2v2LobbyList(list, socket) {
|
||||
|
||||
el.querySelectorAll(".arena-btn-join").forEach(btn => {
|
||||
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) {
|
||||
const playersEl = document.getElementById("arena-team-players");
|
||||
const actionsEl = document.getElementById("arena-team-actions");
|
||||
const statusEl = document.getElementById("arena-team-status");
|
||||
/* ── Team-Panel rendern ─────────────────────────────────────────────────────── */
|
||||
function renderTeamPanel(data, socket, mode) {
|
||||
const playersEl = document.getElementById(`arena-${mode}-team-players`);
|
||||
const actionsEl = document.getElementById(`arena-${mode}-team-actions`);
|
||||
if (!playersEl || !actionsEl) return;
|
||||
|
||||
playersEl.innerHTML = 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-level">Lvl ${p.level}</span>
|
||||
<span class="arena-team-player-status">${p.ready ? '✅ Bereit' : '⌛ Wartet'}</span>
|
||||
</div>
|
||||
`).join("");
|
||||
const max = data.max || (mode === "4v4" ? 4 : 2);
|
||||
const teamId = mode === "2v2" ? my2v2TeamId : my4v4TeamId;
|
||||
|
||||
if (data.count < 2) {
|
||||
actionsEl.innerHTML = `<div class="arena-waiting-partner">Warte auf Partner…</div>`;
|
||||
if (statusEl) statusEl.innerHTML = "";
|
||||
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-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("");
|
||||
|
||||
if (data.count < max) {
|
||||
actionsEl.innerHTML = `<div class="arena-waiting-partner">Warte auf ${max - data.count} weiteren Spieler…</div>`;
|
||||
} else {
|
||||
const myEntry = data.players.find(p => p.name === myArenaData?.name);
|
||||
const iAmReady = myEntry?.ready;
|
||||
actionsEl.innerHTML = iAmReady
|
||||
? `<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) {
|
||||
document.getElementById("arena-ready-btn")?.addEventListener("click", () => {
|
||||
socket.emit("2v2_player_ready", { teamId: my2v2TeamId });
|
||||
document.getElementById(`arena-${mode}-ready-btn`)?.addEventListener("click", () => {
|
||||
socket.emit(`${mode}_player_ready`, { teamId });
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function leave2v2Team(socket) {
|
||||
if (my2v2TeamId) {
|
||||
socket.emit("leave_2v2_team");
|
||||
my2v2TeamId = null;
|
||||
/* ── Team verlassen ─────────────────────────────────────────────────────────── */
|
||||
function leaveTeam(mode) {
|
||||
const socket = getSocket();
|
||||
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 ──────────────────────────────────────────────────────── */
|
||||
function show2v2Error(msg) {
|
||||
const el = document.getElementById("arena-2v2-error");
|
||||
/* ── Fehleranzeige ──────────────────────────────────────────────────────────── */
|
||||
function showModeError(mode, msg) {
|
||||
const el = document.getElementById(`arena-${mode}-error`);
|
||||
if (!el) return;
|
||||
el.textContent = "❌ " + msg;
|
||||
el.textContent = "❌ " + msg;
|
||||
el.style.display = "block";
|
||||
setTimeout(() => { el.style.display = "none"; }, 4000);
|
||||
}
|
||||
|
||||
function hide2v2Error() {
|
||||
const el = document.getElementById("arena-2v2-error");
|
||||
function hideModeError(mode) {
|
||||
const el = document.getElementById(`arena-${mode}-error`);
|
||||
if (el) el.style.display = "none";
|
||||
}
|
||||
|
||||
/* ── 1v1: Hauptlogik ────────────────────────────────────────────────────────── */
|
||||
/* ── 1v1 ────────────────────────────────────────────────────────────────────── */
|
||||
async function handle1v1Click(card) {
|
||||
const socket = getSocket();
|
||||
if (!socket) {
|
||||
showArenaError("Keine Verbindung zum Server. Bitte Seite neu laden.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!socket) { showArenaError("Keine Verbindung zum Server."); return; }
|
||||
if (card.classList.contains("searching")) return;
|
||||
|
||||
let me;
|
||||
@ -614,55 +445,38 @@ async function handle1v1Click(card) {
|
||||
if (!res.ok) throw new Error("Status " + res.status);
|
||||
me = await res.json();
|
||||
} catch (err) {
|
||||
console.error("[1v1] Spielerdaten Fehler:", err);
|
||||
showArenaError("Spielerdaten konnten nicht geladen werden. (Eingeloggt?)");
|
||||
showArenaError("Spielerdaten konnten nicht geladen werden.");
|
||||
return;
|
||||
}
|
||||
|
||||
setCardSearching(card, true);
|
||||
showQueueStatus(me.level);
|
||||
|
||||
socket.off("match_found");
|
||||
socket.off("queue_status");
|
||||
|
||||
socket.on("queue_status", (data) => {
|
||||
if (data.status === "waiting") {
|
||||
showQueueStatus(me.level, data.poolSize);
|
||||
} else if (data.status === "left") {
|
||||
setCardSearching(card, false);
|
||||
hideQueueStatus();
|
||||
}
|
||||
socket.on("queue_status", data => {
|
||||
if (data.status === "waiting") showQueueStatus(me.level, data.poolSize);
|
||||
else if (data.status === "left") { setCardSearching(card, false); hideQueueStatus(); }
|
||||
});
|
||||
|
||||
socket.once("match_found", (data) => {
|
||||
socket.once("match_found", data => {
|
||||
socket.off("queue_status");
|
||||
setCardSearching(card, false);
|
||||
hideQueueStatus();
|
||||
|
||||
showMatchFoundOverlay(me.name, data.opponent.name, () => {
|
||||
openArenaPopup(
|
||||
`/arena/1v1?match=${encodeURIComponent(data.matchId)}&slot=${encodeURIComponent(data.mySlot)}`,
|
||||
data.opponent.name,
|
||||
data.matchId,
|
||||
data.opponent.name, data.matchId,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
socket.emit("join_1v1", {
|
||||
id: me.id,
|
||||
name: me.name,
|
||||
level: me.level,
|
||||
});
|
||||
socket.emit("join_1v1", { id: me.id, name: me.name, level: me.level });
|
||||
}
|
||||
|
||||
/* ── Queue abbrechen ────────────────────────────────────────────────────────── */
|
||||
function cancelQueue(card) {
|
||||
const socket = getSocket();
|
||||
if (socket) {
|
||||
socket.emit("leave_1v1");
|
||||
socket.off("match_found");
|
||||
socket.off("queue_status");
|
||||
}
|
||||
if (socket) { socket.emit("leave_1v1"); socket.off("match_found"); socket.off("queue_status"); }
|
||||
setCardSearching(card, false);
|
||||
hideQueueStatus();
|
||||
}
|
||||
@ -670,7 +484,6 @@ function cancelQueue(card) {
|
||||
/* ── Match-Found Splash ─────────────────────────────────────────────────────── */
|
||||
function showMatchFoundOverlay(myName, opponentName, onDone) {
|
||||
if (document.getElementById("match-found-overlay")) return;
|
||||
|
||||
const overlay = document.createElement("div");
|
||||
overlay.id = "match-found-overlay";
|
||||
overlay.innerHTML = `
|
||||
@ -679,16 +492,8 @@ function showMatchFoundOverlay(myName, opponentName, onDone) {
|
||||
<div class="mfo-bar"><div class="mfo-bar-fill" id="mfBar"></div></div>
|
||||
`;
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
const bar = document.getElementById("mfBar");
|
||||
if (bar) bar.style.width = "100%";
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
overlay.remove();
|
||||
onDone();
|
||||
}, 1600);
|
||||
requestAnimationFrame(() => { const b = document.getElementById("mfBar"); if (b) b.style.width = "100%"; });
|
||||
setTimeout(() => { overlay.remove(); onDone(); }, 1600);
|
||||
}
|
||||
|
||||
/* ── Popup öffnen ───────────────────────────────────────────────────────────── */
|
||||
@ -698,24 +503,15 @@ function openArenaPopup(src, opponentName, matchId) {
|
||||
|
||||
const backdrop = document.createElement("div");
|
||||
backdrop.id = "arena-backdrop";
|
||||
|
||||
const popup = document.createElement("div");
|
||||
popup.id = "arena-popup";
|
||||
|
||||
const title = opponentName
|
||||
? `⚔️ Arena · vs ${opponentName}`
|
||||
: "⚔️ Arena";
|
||||
|
||||
popup.innerHTML = `
|
||||
<div id="arena-popup-titlebar">
|
||||
<div class="ap-left">
|
||||
<span class="ap-title">${title}</span>
|
||||
</div>
|
||||
<div class="ap-left"><span class="ap-title">⚔️ Arena · vs ${opponentName}</span></div>
|
||||
<span class="ap-url">${matchId || src}</span>
|
||||
</div>
|
||||
<iframe src="${src}" allowfullscreen></iframe>
|
||||
`;
|
||||
|
||||
document.body.appendChild(backdrop);
|
||||
document.body.appendChild(popup);
|
||||
}
|
||||
@ -724,7 +520,6 @@ function openArenaPopup(src, opponentName, matchId) {
|
||||
function setCardSearching(card, searching) {
|
||||
const label = card.querySelector(".arena-mode-label");
|
||||
const desc = card.querySelector(".arena-mode-desc");
|
||||
|
||||
if (searching) {
|
||||
card.classList.add("searching");
|
||||
label.textContent = "⏳ Suche…";
|
||||
@ -739,18 +534,12 @@ function setCardSearching(card, searching) {
|
||||
function showQueueStatus(myLevel, poolSize) {
|
||||
const box = document.getElementById("arena-queue-status");
|
||||
if (!box) return;
|
||||
|
||||
const min = Math.max(1, myLevel - 5);
|
||||
const max = myLevel + 5;
|
||||
const pool = poolSize ? ` · ${poolSize} Spieler im Pool` : "";
|
||||
|
||||
box.style.display = "block";
|
||||
box.innerHTML = `
|
||||
⏳ Suche Gegner (Level ${min}–${max})${pool}
|
||||
<br>
|
||||
<span class="qs-cancel" id="qs-cancel-btn">Suche abbrechen</span>
|
||||
⏳ Suche Gegner (Level ${Math.max(1, myLevel-5)}–${myLevel+5})${pool}
|
||||
<br><span class="qs-cancel" id="qs-cancel-btn">Suche abbrechen</span>
|
||||
`;
|
||||
|
||||
document.getElementById("qs-cancel-btn")?.addEventListener("click", () => {
|
||||
const card = document.querySelector(".arena-mode-card[data-mode='1v1']");
|
||||
if (card) cancelQueue(card);
|
||||
@ -765,15 +554,11 @@ function hideQueueStatus() {
|
||||
function showArenaError(msg) {
|
||||
const box = document.getElementById("arena-queue-status");
|
||||
if (!box) return;
|
||||
box.style.display = "block";
|
||||
box.style.animation = "none";
|
||||
box.style.borderColor = "rgba(231,76,60,0.5)";
|
||||
box.style.color = "#e74c3c";
|
||||
box.textContent = "❌ " + msg;
|
||||
box.style.display = "block"; box.style.animation = "none";
|
||||
box.style.borderColor = "rgba(231,76,60,0.5)"; box.style.color = "#e74c3c";
|
||||
box.textContent = "❌ " + msg;
|
||||
setTimeout(() => {
|
||||
box.style.display = "none";
|
||||
box.style.animation = "";
|
||||
box.style.borderColor = "";
|
||||
box.style.color = "";
|
||||
box.style.display = "none"; box.style.animation = "";
|
||||
box.style.borderColor = ""; box.style.color = "";
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
const express = require("express");
|
||||
const router = express.Router();
|
||||
const db = require("../database/database");
|
||||
const express = require("express");
|
||||
const router = express.Router();
|
||||
const db = require("../database/database");
|
||||
|
||||
/* ========================
|
||||
Login Middleware (lokal)
|
||||
@ -13,6 +13,27 @@ function requireLogin(req, res, 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
|
||||
GET /arena
|
||||
@ -30,20 +51,17 @@ router.get("/", (req, res) => {
|
||||
======================== */
|
||||
|
||||
router.get("/me", requireLogin, async (req, res) => {
|
||||
const userId = req.session.user.id;
|
||||
try {
|
||||
const [[account]] = await db.query(
|
||||
"SELECT id, ingame_name, level FROM accounts WHERE id = ?",
|
||||
[userId],
|
||||
[req.session.user.id]
|
||||
);
|
||||
|
||||
if (!account) {
|
||||
return res.status(404).json({ error: "Spieler nicht gefunden" });
|
||||
}
|
||||
|
||||
res.json({
|
||||
id: account.id,
|
||||
name: account.ingame_name || "Unbekannter Held",
|
||||
id: account.id,
|
||||
name: account.ingame_name || "Unbekannter Held",
|
||||
level: account.level || 1,
|
||||
});
|
||||
} catch (err) {
|
||||
@ -64,54 +82,33 @@ router.get("/1v1", requireLogin, async (req, res) => {
|
||||
// Kein matchId → direkte Vorschau ohne Matchmaking (z.B. für Tests)
|
||||
if (!matchId) {
|
||||
return res.render("1v1-battlefield", {
|
||||
title: "1v1 Kampf",
|
||||
matchId: null,
|
||||
mySlot: "player1",
|
||||
player1: req.session?.character?.name || req.session?.user?.ingame_name || "Spieler 1",
|
||||
player2: "Gegner",
|
||||
player1hp: 20,
|
||||
title: "1v1 Kampf",
|
||||
matchId: null,
|
||||
mySlot: "player1",
|
||||
player1: req.session?.user?.ingame_name || "Spieler 1",
|
||||
player2: "Gegner",
|
||||
player1hp: 20,
|
||||
player1mana: 3,
|
||||
player2hp: 20,
|
||||
player2hp: 20,
|
||||
player2mana: 3,
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
// Eigene Spielerdaten laden
|
||||
const [[me]] = await db.query(
|
||||
"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 [[me]] = await db.query("SELECT ingame_name FROM accounts WHERE id = ?", [userId]);
|
||||
const { hp, mana } = await getPlayerStats(userId);
|
||||
const isPlayer1 = slot === "player1";
|
||||
|
||||
res.render("1v1-battlefield", {
|
||||
title: "⚔️ 1v1 Kampf",
|
||||
title: "⚔️ 1v1 Kampf",
|
||||
matchId,
|
||||
mySlot: slot || "player1",
|
||||
player1: isPlayer1 ? (me?.ingame_name || "Du") : "Gegner",
|
||||
player2: isPlayer1 ? "Gegner" : (me?.ingame_name || "Du"),
|
||||
player1hp: isPlayer1 ? myHp : 20,
|
||||
player1mana: isPlayer1 ? myMana : 3,
|
||||
player2hp: isPlayer1 ? 20 : myHp,
|
||||
player2mana: isPlayer1 ? 3 : myMana,
|
||||
mySlot: slot || "player1",
|
||||
player1: isPlayer1 ? (me?.ingame_name || "Du") : "Gegner",
|
||||
player2: isPlayer1 ? "Gegner" : (me?.ingame_name || "Du"),
|
||||
player1hp: isPlayer1 ? hp : 20,
|
||||
player1mana: isPlayer1 ? mana : 3,
|
||||
player2hp: isPlayer1 ? 20 : hp,
|
||||
player2mana: isPlayer1 ? 3 : mana,
|
||||
});
|
||||
} catch (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
|
||||
================================ */
|
||||
|
||||
router.get("/2v2", (req, res) => {
|
||||
res.render("1v1-battlefield", {
|
||||
title: "2v2 Kampf",
|
||||
matchId: null,
|
||||
mySlot: "player1",
|
||||
player1: req.session?.character?.name || "Spieler 1",
|
||||
player2: "Gegner",
|
||||
player1hp: 20,
|
||||
player1mana: 3,
|
||||
player2hp: 20,
|
||||
player2mana: 3,
|
||||
});
|
||||
router.get("/2v2", requireLogin, async (req, res) => {
|
||||
const userId = req.session.user.id;
|
||||
const { match: matchId, slot } = req.query;
|
||||
|
||||
if (!matchId) {
|
||||
return res.render("1v1-battlefield", {
|
||||
title: "2v2 Kampf",
|
||||
matchId: null,
|
||||
mySlot: "team1_player1",
|
||||
player1: req.session?.user?.ingame_name || "Spieler 1",
|
||||
player2: "Gegner",
|
||||
player1hp: 20,
|
||||
player1mana: 3,
|
||||
player2hp: 20,
|
||||
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
|
||||
================================ */
|
||||
|
||||
router.get("/4v4", (req, res) => {
|
||||
res.render("1v1-battlefield", {
|
||||
title: "4v4 Kampf",
|
||||
matchId: null,
|
||||
mySlot: "player1",
|
||||
player1: req.session?.character?.name || "Spieler 1",
|
||||
player2: "Gegner",
|
||||
player1hp: 20,
|
||||
player1mana: 3,
|
||||
player2hp: 20,
|
||||
player2mana: 3,
|
||||
});
|
||||
router.get("/4v4", requireLogin, async (req, res) => {
|
||||
const userId = req.session.user.id;
|
||||
const { match: matchId, slot } = req.query;
|
||||
|
||||
if (!matchId) {
|
||||
return res.render("1v1-battlefield", {
|
||||
title: "4v4 Kampf",
|
||||
matchId: null,
|
||||
mySlot: "team1_player1",
|
||||
player1: req.session?.user?.ingame_name || "Spieler 1",
|
||||
player2: "Gegner",
|
||||
player1hp: 20,
|
||||
player1mana: 3,
|
||||
player2hp: 20,
|
||||
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;
|
||||
|
||||
@ -1,45 +1,54 @@
|
||||
/* ============================================================
|
||||
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 LEVEL_RANGE = 5;
|
||||
const READY_TIMEOUT = 30;
|
||||
|
||||
// 2v2 Team-Lobby
|
||||
// teams2v2: teamId → { id, players: [{socketId, player}], ready: Set<socketId> }
|
||||
const teams2v2 = new Map();
|
||||
const readyTeams = new Map(); // teamId → team (fertige Teams warten auf Matchmaking)
|
||||
/* ── 2v2 State ── */
|
||||
const teams2v2 = new Map(); // teamId → { id, players, ready }
|
||||
const readyTeams2v2 = new Map();
|
||||
|
||||
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() {
|
||||
return `${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────
|
||||
HELPER: 2v2 Lobby-Liste an alle senden
|
||||
───────────────────────────────────────────────── */
|
||||
function broadcastLobbies(io) {
|
||||
const list = [];
|
||||
for (const [teamId, team] of teams2v2) {
|
||||
if (team.players.length < 2) {
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
HELPER: Generisch für 2v2 UND 4v4
|
||||
mode: "2v2" | "4v4"
|
||||
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 = [];
|
||||
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,
|
||||
});
|
||||
}
|
||||
}
|
||||
io.emit("2v2_lobbies", list);
|
||||
io.emit(`${mode}_lobbies`, list);
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────
|
||||
HELPER: 2v2 Team-Status an Teammitglieder senden
|
||||
───────────────────────────────────────────────── */
|
||||
function broadcastTeamStatus(io, teamId) {
|
||||
const team = teams2v2.get(teamId);
|
||||
function broadcastTeamStatus(io, teamId, mode) {
|
||||
const teams = getTeamMap(mode);
|
||||
const team = teams.get(teamId);
|
||||
if (!team) return;
|
||||
const data = {
|
||||
teamId,
|
||||
@ -49,34 +58,31 @@ function broadcastTeamStatus(io, teamId) {
|
||||
ready: team.ready.has(p.socketId),
|
||||
})),
|
||||
count: team.players.length,
|
||||
max: getMaxPlayers(mode),
|
||||
};
|
||||
for (const p of team.players) {
|
||||
io.to(p.socketId).emit("2v2_team_update", data);
|
||||
io.to(p.socketId).emit(`${mode}_team_update`, data);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────
|
||||
HELPER: 2v2 Matchmaking
|
||||
───────────────────────────────────────────────── */
|
||||
function tryMatchmaking2v2(io) {
|
||||
const readyList = Array.from(readyTeams.values());
|
||||
function tryMatchmaking_nvn(io, mode) {
|
||||
const readyMap = getReadyMap(mode);
|
||||
const readyList = Array.from(readyMap.values());
|
||||
if (readyList.length < 2) return;
|
||||
|
||||
const team1 = readyList[0];
|
||||
const team2 = readyList[1];
|
||||
|
||||
readyTeams.delete(team1.id);
|
||||
readyTeams.delete(team2.id);
|
||||
teams2v2.delete(team1.id);
|
||||
teams2v2.delete(team2.id);
|
||||
readyMap.delete(team1.id);
|
||||
readyMap.delete(team2.id);
|
||||
getTeamMap(mode).delete(team1.id);
|
||||
getTeamMap(mode).delete(team2.id);
|
||||
|
||||
const matchId = `2v2_${generateId()}`;
|
||||
const matchId = `${mode}_${generateId()}`;
|
||||
|
||||
const allPlayers = [
|
||||
{ team: 1, ...team1.players[0] },
|
||||
{ team: 1, ...team1.players[1] },
|
||||
{ team: 2, ...team2.players[0] },
|
||||
{ team: 2, ...team2.players[1] },
|
||||
...team1.players.map(p => ({ team: 1, ...p })),
|
||||
...team2.players.map(p => ({ team: 2, ...p })),
|
||||
];
|
||||
|
||||
for (const p of allPlayers) {
|
||||
@ -85,7 +91,7 @@ function tryMatchmaking2v2(io) {
|
||||
const teamRef = p.team === 1 ? team1 : team2;
|
||||
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,
|
||||
myTeam: p.team,
|
||||
teammates,
|
||||
@ -95,51 +101,61 @@ function tryMatchmaking2v2(io) {
|
||||
}
|
||||
|
||||
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}`
|
||||
);
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────
|
||||
HELPER: 1v1 Matchmaking
|
||||
───────────────────────────────────────────────── */
|
||||
function leaveAllTeams_nvn(socketId, io, mode) {
|
||||
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) {
|
||||
const challenger = waitingPool.get(newSocketId);
|
||||
if (!challenger) return;
|
||||
|
||||
for (const [id, entry] of waitingPool) {
|
||||
if (id === newSocketId) continue;
|
||||
|
||||
const levelDiff = Math.abs(entry.player.level - challenger.player.level);
|
||||
if (levelDiff <= LEVEL_RANGE) {
|
||||
if (Math.abs(entry.player.level - challenger.player.level) <= LEVEL_RANGE) {
|
||||
waitingPool.delete(newSocketId);
|
||||
waitingPool.delete(id);
|
||||
|
||||
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", {
|
||||
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}`
|
||||
);
|
||||
console.log(`[1v1] ${challenger.player.name} vs ${entry.player.name} | ${matchId}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────
|
||||
HELPER: Bereit-Timer (1v1)
|
||||
───────────────────────────────────────────────── */
|
||||
/* ── Bereit-Timer (1v1) ── */
|
||||
function startReadyTimer(io, matchId) {
|
||||
if (!io._arenaTimers) io._arenaTimers = new Map();
|
||||
if (io._arenaTimers.has(matchId)) return;
|
||||
@ -150,15 +166,11 @@ function startReadyTimer(io, matchId) {
|
||||
const interval = setInterval(() => {
|
||||
remaining--;
|
||||
io.to("arena_" + matchId).emit("ready_timer", { remaining });
|
||||
|
||||
if (remaining <= 0) {
|
||||
clearInterval(interval);
|
||||
io._arenaTimers.delete(matchId);
|
||||
console.log(`[1v1] Match ${matchId} abgebrochen – Zeit abgelaufen.`);
|
||||
io.to("arena_" + matchId).emit("match_cancelled", {
|
||||
reason: "timeout",
|
||||
message: "Zeit abgelaufen – Match wird abgebrochen.",
|
||||
});
|
||||
io.to("arena_" + matchId).emit("match_cancelled", { reason: "timeout", message: "Zeit abgelaufen." });
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
@ -171,81 +183,125 @@ function stopReadyTimer(io, matchId) {
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
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) {
|
||||
|
||||
/* ── 1v1: Queue beitreten ── */
|
||||
/* ── 1v1 ── */
|
||||
socket.on("join_1v1", (playerData) => {
|
||||
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 });
|
||||
socket.emit("queue_status", {
|
||||
status: "waiting",
|
||||
poolSize: waitingPool.size,
|
||||
message: `Suche Gegner (Level ${player.level - LEVEL_RANGE}–${player.level + LEVEL_RANGE})…`,
|
||||
});
|
||||
|
||||
socket.emit("queue_status", { status: "waiting", poolSize: waitingPool.size });
|
||||
console.log(`[1v1] ${player.name} (Lvl ${player.level}) im Pool. Größe: ${waitingPool.size}`);
|
||||
tryMatchmaking(io, socket.id);
|
||||
});
|
||||
|
||||
/* ── 1v1: Queue verlassen ── */
|
||||
socket.on("leave_1v1", () => {
|
||||
if (waitingPool.delete(socket.id)) {
|
||||
socket.emit("queue_status", { status: "left" });
|
||||
console.log(`[1v1] ${socket.id} hat Pool verlassen.`);
|
||||
}
|
||||
});
|
||||
|
||||
/* ── 1v1: Spielfeld betreten ── */
|
||||
socket.on("arena_join", (data) => {
|
||||
const { matchId, slot } = data;
|
||||
if (!matchId || !slot) return;
|
||||
|
||||
if (!io._arenaRooms) io._arenaRooms = new Map();
|
||||
if (!io._arenaRooms.has(matchId)) {
|
||||
io._arenaRooms.set(matchId, { sockets: {}, names: {} });
|
||||
}
|
||||
if (!io._arenaRooms.has(matchId)) io._arenaRooms.set(matchId, { sockets: {}, names: {} });
|
||||
|
||||
const room = io._arenaRooms.get(matchId);
|
||||
room.sockets[slot] = socket.id;
|
||||
@ -258,144 +314,39 @@ function registerArenaHandlers(io, socket) {
|
||||
player1: room.names["player1"] || "Spieler 1",
|
||||
player2: room.names["player2"] || "Spieler 2",
|
||||
});
|
||||
console.log(`[Arena] Match ${matchId} bereit: ${room.names["player1"]} vs ${room.names["player2"]}`);
|
||||
startReadyTimer(io, matchId);
|
||||
} else {
|
||||
socket.to("arena_" + matchId).emit("arena_opponent_joined", {
|
||||
name: room.names[slot],
|
||||
slot,
|
||||
});
|
||||
socket.to("arena_" + matchId).emit("arena_opponent_joined", { name: room.names[slot], slot });
|
||||
}
|
||||
});
|
||||
|
||||
/* ── 1v1: Bereit-System ── */
|
||||
socket.on("player_ready", (data) => {
|
||||
const { matchId, slot } = data;
|
||||
if (!matchId || !slot) return;
|
||||
|
||||
if (!io._arenaReady) io._arenaReady = new Map();
|
||||
if (!io._arenaReady.has(matchId)) io._arenaReady.set(matchId, new Set());
|
||||
|
||||
const readySet = io._arenaReady.get(matchId);
|
||||
readySet.add(slot);
|
||||
|
||||
io.to("arena_" + matchId).emit("ready_status", {
|
||||
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);
|
||||
}
|
||||
io.to("arena_" + matchId).emit("ready_status", { readyCount: readySet.size, readySlots: Array.from(readySet) });
|
||||
if (readySet.size >= 2) { stopReadyTimer(io, matchId); io._arenaReady.delete(matchId); }
|
||||
});
|
||||
|
||||
/* ── 1v1: Aufgeben ── */
|
||||
socket.on("player_surrender", (data) => {
|
||||
const { matchId, slot } = data;
|
||||
console.log(`[1v1] ${slot} hat aufgegeben in Match ${matchId}`);
|
||||
io.to("arena_" + matchId).emit("player_surrendered", { slot });
|
||||
});
|
||||
|
||||
/* ════════════════════════════════════════════
|
||||
2v2 TEAM LOBBY
|
||||
════════════════════════════════════════════ */
|
||||
|
||||
/* ── 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);
|
||||
}
|
||||
});
|
||||
/* ── 2v2 & 4v4 (generisch) ── */
|
||||
registerTeamModeHandlers(io, socket, "2v2");
|
||||
registerTeamModeHandlers(io, socket, "4v4");
|
||||
|
||||
/* ── Disconnect ── */
|
||||
socket.on("disconnect", () => {
|
||||
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");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user