erahaer
This commit is contained in:
parent
72f2b9b91d
commit
a4df7b4605
@ -189,6 +189,86 @@ function injectArenaStyles() {
|
||||
.arena-btn-ready.active { border-color:#8ae060; color:#c0f0a0; cursor:default; }
|
||||
.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; }
|
||||
|
||||
/* ── Deck-Auswahl ── */
|
||||
#deck-select-overlay { animation: arenaFadeIn .2s ease; }
|
||||
.deck-select-box {
|
||||
background: linear-gradient(#2a1a08, #1a0f04);
|
||||
border: 2px solid #c8960c;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
width: min(360px, 90vw);
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.8);
|
||||
}
|
||||
.deck-select-title {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 16px;
|
||||
color: #f0d060;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
.deck-select-hint {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 11px;
|
||||
color: #a08060;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.deck-select-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
overflow-y: auto;
|
||||
max-height: 260px;
|
||||
}
|
||||
.deck-select-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 14px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid #3a2810;
|
||||
border-radius: 7px;
|
||||
cursor: pointer;
|
||||
transition: border-color .15s, background .15s;
|
||||
}
|
||||
.deck-select-row:not(.deck-empty):hover { border-color: #c8960c; background: rgba(200,150,42,0.08); }
|
||||
.deck-select-row.deck-selected { border-color: #f0d060; background: rgba(200,150,42,0.12); }
|
||||
.deck-select-row.deck-empty { opacity: .4; cursor: not-allowed; }
|
||||
.deck-select-name { font-family: "Cinzel", serif; font-size: 12px; color: #f0d9a6; }
|
||||
.deck-select-count { font-size: 11px; color: #a08060; }
|
||||
.deck-select-warn { font-size: 10px; color: #e07070; }
|
||||
.deck-select-actions { display: flex; gap: 10px; justify-content: flex-end; }
|
||||
.deck-select-cancel {
|
||||
background: none;
|
||||
border: 1px solid rgba(255,200,80,.3);
|
||||
color: #a08060;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 11px;
|
||||
padding: 7px 14px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.deck-select-cancel:hover { border-color: rgba(255,200,80,.6); color: #c8a060; }
|
||||
.deck-select-confirm {
|
||||
background: linear-gradient(#4a3010, #2a1a06);
|
||||
border: 2px solid #c8960c;
|
||||
color: #f0d060;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 11px;
|
||||
padding: 7px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: .15s;
|
||||
}
|
||||
.deck-select-confirm:hover:not(:disabled) { border-color: #f0d060; background: linear-gradient(#5a4020,#3a2a10); }
|
||||
.deck-btn-disabled { opacity: .4; cursor: not-allowed !important; }
|
||||
|
||||
#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; }
|
||||
@ -209,18 +289,19 @@ function injectArenaStyles() {
|
||||
function getSocket() { return window._socket || null; }
|
||||
|
||||
/* ── State ─────────────────────────────────────────────────*/
|
||||
let myArenaData = null;
|
||||
let my2v2TeamId = null;
|
||||
let my4v4TeamId = null;
|
||||
let myArenaData = null;
|
||||
let my2v2TeamId = null;
|
||||
let my4v4TeamId = null;
|
||||
let selectedDeckId = null; // Gewähltes Deck für das nächste Match
|
||||
|
||||
/* ── Modus-Initialisierung ─────────────────────────────────*/
|
||||
function initArenaModes() {
|
||||
document.querySelectorAll(".arena-mode-card").forEach(card => {
|
||||
card.addEventListener("click", () => {
|
||||
const mode = card.dataset.mode;
|
||||
if (mode === "1v1") handle1v1Click(card);
|
||||
else if (mode === "2v2") openTeamLobby("2v2");
|
||||
else if (mode === "4v4") openTeamLobby("4v4");
|
||||
if (mode === "1v1") showDeckSelector(() => handle1v1Click(card));
|
||||
else if (mode === "2v2") showDeckSelector(() => openTeamLobby("2v2"));
|
||||
else if (mode === "4v4") showDeckSelector(() => openTeamLobby("4v4"));
|
||||
});
|
||||
});
|
||||
|
||||
@ -247,6 +328,90 @@ function initArenaModes() {
|
||||
});
|
||||
}
|
||||
|
||||
/* ── Deck-Auswahl Popup ────────────────────────────────────*/
|
||||
async function showDeckSelector(onConfirm) {
|
||||
// Decks laden
|
||||
let decks = [];
|
||||
try {
|
||||
const res = await fetch("/api/decks");
|
||||
if (!res.ok) throw new Error();
|
||||
decks = await res.json();
|
||||
} catch {
|
||||
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:9997",
|
||||
"background:rgba(0,0,0,0.75)","display:flex",
|
||||
"align-items:center","justify-content:center"
|
||||
].join(";");
|
||||
|
||||
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());
|
||||
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}">
|
||||
<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>
|
||||
</div>`;
|
||||
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
// Deck anklicken
|
||||
overlay.querySelectorAll(".deck-select-row:not(.deck-empty)").forEach(row => {
|
||||
row.addEventListener("click", () => {
|
||||
overlay.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");
|
||||
btn.disabled = false;
|
||||
btn.classList.remove("deck-btn-disabled");
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById("deck-cancel-btn").addEventListener("click", () => {
|
||||
overlay.remove();
|
||||
selectedDeckId = null;
|
||||
});
|
||||
|
||||
document.getElementById("deck-confirm-btn").addEventListener("click", () => {
|
||||
if (!selectedDeckId) return;
|
||||
overlay.remove();
|
||||
onConfirm();
|
||||
});
|
||||
}
|
||||
|
||||
/* ── 1v1 ───────────────────────────────────────────────────*/
|
||||
async function handle1v1Click(card) {
|
||||
const socket = getSocket();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user