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

djm

Browse Source
This commit is contained in:
cay 2026-04-09 13:53:48 +01:00
parent d90bb98c9c
commit f5f2315fe8
1 changed files with 43 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -330,68 +330,70 @@ function initArenaModes() {
/* ── Deck-Auswahl Popup ────────────────────────────────────*/
async function showDeckSelector(onConfirm) {
// Deck-Screen direkt im arena-mode-screen anzeigen (kein Overlay, kein z-index Problem)
const modeScreen = document.getElementById("arena-mode-screen");
if (!modeScreen) return;
// Decks laden
let decks = [];
try {
const res = await fetch("/api/decks");
if (!res.ok) throw new Error();
if (!res.ok) throw new Error("HTTP " + res.status);
decks = await res.json();
} catch {
} catch (err) {
console.error("[Arena] Deck-Ladefehler:", err);
showArenaError("Decks konnten nicht geladen werden.");
return;
}
// Overlay erstellen
const overlay = document.createElement("div");
overlay.id = "deck-select-overlay";
overlay.style.cssText = [
"position:fixed","inset:0","z-index:99999",
"background:rgba(0,0,0,0.75)","display:flex",
"align-items:center","justify-content:center"
].join(";");
// Originalinhalt merken und ersetzen
const originalHTML = modeScreen.innerHTML;
function restore() {
modeScreen.innerHTML = originalHTML;
// Event-Listener auf die wiederhergestellten Karten neu anhängen
modeScreen.querySelectorAll(".arena-mode-card").forEach(card => {
card.addEventListener("click", () => {
const mode = card.dataset.mode;
if (mode === "1v1") showDeckSelector(() => handle1v1Click(card));
else if (mode === "2v2") showDeckSelector(() => openTeamLobby("2v2"));
else if (mode === "4v4") showDeckSelector(() => openTeamLobby("4v4"));
});
});
selectedDeckId = null;
}
if (decks.length === 0) {
// Kein Deck vorhanden
overlay.innerHTML = `
<div class="deck-select-box">
<div class="deck-select-title">⚠️ Kein Deck vorhanden</div>
<p class="deck-select-hint">
Du musst zuerst ein Deck erstellen bevor du kämpfen kannst.<br>
Gehe zur <strong>Burg</strong> → Kartendeck um ein Deck zu erstellen.
</p>
<button class="deck-select-cancel" id="deck-close-btn">Schließen</button>
</div>`;
document.body.appendChild(overlay);
document.getElementById("deck-close-btn").addEventListener("click", () => overlay.remove());
modeScreen.innerHTML = `
<div class="arena-title" style="margin-bottom:8px;">⚠️ Kein Deck vorhanden</div>
<p class="arena-subtitle" style="text-align:center;line-height:1.7;max-width:280px;">
Du musst zuerst ein Deck erstellen<br>bevor du kämpfen kannst.<br>
Gehe zur <strong style="color:#f0c84a;">Burg → Kartendeck</strong>.
</p>
<button class="arena-btn-create" id="deck-back-btn" style="margin-top:12px;">← Zurück</button>`;
document.getElementById("deck-back-btn").addEventListener("click", restore);
return;
}
// Decks als Auswahl anzeigen
const deckRows = decks.map(d => `
<div class="deck-select-row ${d.card_count === 0 ? "deck-empty" : ""}"
data-id="${d.id}" data-count="${d.card_count}">
<div class="deck-select-row ${d.card_count === 0 ? "deck-empty" : ""}" data-id="${d.id}">
<span class="deck-select-name">🃏 ${d.name}</span>
<span class="deck-select-count">${d.card_count} Karten</span>
${d.card_count === 0 ? "<span class='deck-select-warn'>Leer</span>" : ""}
</div>`).join("");
overlay.innerHTML = `
<div class="deck-select-box">
<div class="deck-select-title">⚔️ Deck auswählen</div>
<p class="deck-select-hint">Mit welchem Deck möchtest du kämpfen?</p>
<div class="deck-select-list">${deckRows}</div>
<div class="deck-select-actions">
<button class="deck-select-cancel" id="deck-cancel-btn">Abbrechen</button>
<button class="deck-select-confirm deck-btn-disabled" id="deck-confirm-btn" disabled>Kämpfen ⚔️</button>
</div>
modeScreen.innerHTML = `
<div class="arena-title" style="margin-bottom:4px;">⚔️ Deck auswählen</div>
<p class="arena-subtitle">Mit welchem Deck möchtest du kämpfen?</p>
<div class="deck-select-list" style="width:100%;max-height:220px;overflow-y:auto;">${deckRows}</div>
<div class="deck-select-actions" style="width:100%;display:flex;gap:10px;justify-content:flex-end;margin-top:10px;">
<button class="deck-select-cancel" id="deck-cancel-btn">← Zurück</button>
<button class="deck-select-confirm deck-btn-disabled" id="deck-confirm-btn" disabled>Kämpfen ⚔️</button>
</div>`;
document.body.appendChild(overlay);
// Deck anklicken
overlay.querySelectorAll(".deck-select-row:not(.deck-empty)").forEach(row => {
modeScreen.querySelectorAll(".deck-select-row:not(.deck-empty)").forEach(row => {
row.addEventListener("click", () => {
overlay.querySelectorAll(".deck-select-row").forEach(r => r.classList.remove("deck-selected"));
modeScreen.querySelectorAll(".deck-select-row").forEach(r => r.classList.remove("deck-selected"));
row.classList.add("deck-selected");
selectedDeckId = Number(row.dataset.id);
const btn = document.getElementById("deck-confirm-btn");
@ -400,14 +402,11 @@ async function showDeckSelector(onConfirm) {
});
});
document.getElementById("deck-cancel-btn").addEventListener("click", () => {
overlay.remove();
selectedDeckId = null;
});
document.getElementById("deck-cancel-btn").addEventListener("click", restore);
document.getElementById("deck-confirm-btn").addEventListener("click", () => {
if (!selectedDeckId) return;
overlay.remove();
restore();
onConfirm();
});
}