-
-
🗡️
-
1v1
-
Einzelkampf – Beweis deine Stärke im Duell
+
+
+
+
🗡️
+
1v1
+
Einzelkampf – Duell
+
+
-
-
⚔️
-
2v2
-
Verbünde dich mit einem Kameraden im Kampf
+
+
+
+
⚔️
+
2v2
+
Team-Kampf
+
+
-
-
🛡️
-
4v4
-
Schlachtruf – Führe deine Truppe zum Sieg
+
+
+
+
🛡️
+
4v4
+
Schlachtruf
+
+
+
@@ -36,6 +74,10 @@ export async function loadArena() {
+ ${decks.length === 0
+ ? `
⚠️ Kein Deck vorhanden – gehe zur Burg → Kartendeck
`
+ : ""}
+
@@ -104,6 +146,35 @@ function injectArenaStyles() {
#arena-ui { display:flex; flex-direction:column; height:100%; }
+ /* ── Deck+Mode Layout ── */
+ .arena-modes { gap:8px; }
+ .arena-mode-wrap {
+ flex:1; min-width:80px; max-width:130px;
+ display:flex; flex-direction:column; gap:6px;
+ }
+ .arena-mode-locked {
+ opacity:.45; cursor:not-allowed !important;
+ border-color:#3a2810 !important;
+ }
+ .arena-mode-locked:hover { transform:none !important; border-color:#3a2810 !important; }
+ .arena-deck-select {
+ width:100%; background:#1a0f04; border:1px solid #6b4b2a;
+ border-radius:6px; color:#f0d9a6; font-family:"Cinzel",serif;
+ font-size:10px; padding:5px 6px; cursor:pointer;
+ appearance:none; -webkit-appearance:none;
+ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a08060'/%3E%3C/svg%3E");
+ background-repeat:no-repeat; background-position:right 6px center;
+ padding-right:20px;
+ }
+ .arena-deck-select:focus { outline:none; border-color:#c8960c; }
+ .arena-deck-select option { background:#1a0f04; color:#f0d9a6; }
+ .arena-no-deck-hint {
+ margin-top:10px; padding:8px 12px; border-radius:7px;
+ background:rgba(231,76,60,.1); border:1px solid rgba(231,76,60,.3);
+ color:#e07060; font-family:"Cinzel",serif; font-size:11px; text-align:center;
+ }
+ .arena-no-deck-hint strong { color:#f0c84a; }
+
#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; }
@@ -296,12 +367,32 @@ let selectedDeckId = null; // Gewähltes Deck für das nächste Match
/* ── Modus-Initialisierung ─────────────────────────────────*/
function initArenaModes() {
+ // Deck-Dropdown: Card freischalten wenn Deck gewählt
+ document.querySelectorAll(".arena-deck-select").forEach(select => {
+ select.addEventListener("change", () => {
+ const mode = select.dataset.mode;
+ const card = document.querySelector(`.arena-mode-card[data-mode="${mode}"]`);
+ if (!card) return;
+ if (select.value) {
+ card.classList.remove("arena-mode-locked");
+ selectedDeckId = Number(select.value);
+ } else {
+ card.classList.add("arena-mode-locked");
+ }
+ });
+ });
+
document.querySelectorAll(".arena-mode-card").forEach(card => {
card.addEventListener("click", () => {
+ if (card.classList.contains("arena-mode-locked")) return;
+ // Deck aus dem zugehörigen Dropdown lesen
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"));
+ const select = document.querySelector(`.arena-deck-select[data-mode="${mode}"]`);
+ selectedDeckId = select ? Number(select.value) : null;
+ if (!selectedDeckId) return;
+ if (mode === "1v1") handle1v1Click(card);
+ else if (mode === "2v2") openTeamLobby("2v2");
+ else if (mode === "4v4") openTeamLobby("4v4");
});
});
@@ -328,88 +419,7 @@ 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("HTTP " + res.status);
- decks = await res.json();
- } catch (err) {
- console.error("[Arena] Deck-Ladefehler:", err);
- showArenaError("Decks konnten nicht geladen werden.");
- return;
- }
-
- // 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) {
- modeScreen.innerHTML = `
-
⚠️ Kein Deck vorhanden
-
- Du musst zuerst ein Deck erstellen
bevor du kämpfen kannst.
- Gehe zur Burg → Kartendeck.
-
-
`;
- document.getElementById("deck-back-btn").addEventListener("click", restore);
- return;
- }
-
- const deckRows = decks.map(d => `
-
- 🃏 ${d.name}
- ${d.card_count} Karten
- ${d.card_count === 0 ? "Leer" : ""}
-
`).join("");
-
- modeScreen.innerHTML = `
-
⚔️ Deck auswählen
-
Mit welchem Deck möchtest du kämpfen?
-
${deckRows}
-
-
-
-
`;
-
- modeScreen.querySelectorAll(".deck-select-row:not(.deck-empty)").forEach(row => {
- row.addEventListener("click", () => {
- 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");
- btn.disabled = false;
- btn.classList.remove("deck-btn-disabled");
- });
- });
-
- document.getElementById("deck-cancel-btn").addEventListener("click", restore);
-
- document.getElementById("deck-confirm-btn").addEventListener("click", () => {
- if (!selectedDeckId) return;
- restore();
- onConfirm();
- });
-}
/* ── 1v1 ───────────────────────────────────────────────────*/
async function handle1v1Click(card) {
diff --git a/public/js/map-ui.js b/public/js/map-ui.js
index 3945d5f..ce37fc2 100644
--- a/public/js/map-ui.js
+++ b/public/js/map-ui.js
@@ -1,4 +1,4 @@
-import { loadArena } from "./buildings/arena.js?v=2";
+import { loadArena } from "./buildings/arena.js?v=3";
import { loadCharacterHouse } from "./buildings/character-house.js?v=2";
import { loadBlackmarket } from "./buildings/blackmarket.js?v=2";
import { loadMine } from "./buildings/mine.js?v=2";