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

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

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