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