diff --git a/public/js/buildings/arena.js b/public/js/buildings/arena.js
index 03d84d1..6b08e06 100644
--- a/public/js/buildings/arena.js
+++ b/public/js/buildings/arena.js
@@ -390,6 +390,8 @@ function initArenaModes() {
const select = document.querySelector(`.arena-deck-select[data-mode="${mode}"]`);
selectedDeckId = select ? Number(select.value) : null;
if (!selectedDeckId) return;
+ // Deck-ID für das Battlefield speichern
+ sessionStorage.setItem("selectedDeckId", selectedDeckId);
if (mode === "1v1") handle1v1Click(card);
else if (mode === "2v2") openTeamLobby("2v2");
else if (mode === "4v4") openTeamLobby("4v4");
diff --git a/views/1v1-battlefield.ejs b/views/1v1-battlefield.ejs
index 5f7ee0c..05bc6eb 100644
--- a/views/1v1-battlefield.ejs
+++ b/views/1v1-battlefield.ejs
@@ -40,6 +40,48 @@
}
.result-close-btn:hover { border-color:#f0d060; filter:brightness(1.2); }
+
+ /* ── Deck-Stapel ────────────────────────── */
+ .hand-slot-deck {
+ position: relative;
+ cursor: pointer;
+ }
+ .deck-stack-wrap {
+ position: relative;
+ width: 100%;
+ height: calc(100% - 18px);
+ }
+ .deck-card-back,
+ .deck-card-top {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 7px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.7);
+ }
+ .deck-shadow-3 { transform: translate(-4px, -4px); }
+ .deck-shadow-2 { transform: translate(-2px, -2px); }
+ .deck-shadow-1 { transform: translate(-1px, -1px); }
+ .deck-card-top { transform: translate(0,0); border: 1px solid rgba(200,150,42,0.5); }
+ .deck-count {
+ position: absolute;
+ bottom: 2px;
+ left: 0; right: 0;
+ text-align: center;
+ font-family: "Cinzel", serif;
+ font-size: 10px;
+ color: #f0d060;
+ text-shadow: 0 1px 3px rgba(0,0,0,0.8);
+ }
+ .hand-slot-card {
+ border: 1px solid rgba(200,150,42,0.4) !important;
+ }
+ .hand-slot-card:hover {
+ border-color: rgba(200,150,42,0.9) !important;
+ transform: translateY(-4px);
+ transition: transform 0.15s;
+ }
@@ -164,17 +206,82 @@
});
const hand = document.getElementById("handArea");
- const silber = document.createElement("div");
- silber.className = "hand-slot";
- silber.innerHTML = `
`;
- hand.appendChild(silber);
- for (let i = 1; i < 8; i++) {
+
+ // ── Slot 1: Deck-Stapel (Rückseite oben) ─────────────
+ const deckSlot = document.createElement("div");
+ deckSlot.className = "hand-slot hand-slot-deck";
+ deckSlot.id = "deck-stack";
+ deckSlot.title = "Dein Deck";
+ deckSlot.innerHTML = `
+
+ —`;
+ hand.appendChild(deckSlot);
+
+ // ── Slots 2–4: aufgedeckte Handkarten ────────────────
+ const handCardIds = ["hand-card-1", "hand-card-2", "hand-card-3"];
+ handCardIds.forEach(id => {
+ const s = document.createElement("div");
+ s.className = "hand-slot hand-slot-card";
+ s.id = id;
+ s.innerHTML = ``;
+ hand.appendChild(s);
+ });
+
+ // ── Slots 5–8: leere Slots ───────────────────────────
+ for (let i = 0; i < 4; i++) {
const s = document.createElement("div");
s.className = "hand-slot";
s.innerHTML = '🃏';
hand.appendChild(s);
}
+ // ── Deck via API laden und Karten anzeigen ────────────
+ (async () => {
+ try {
+ // Deck-ID aus sessionStorage (wird von arena.js gesetzt)
+ const deckId = sessionStorage.getItem("selectedDeckId");
+ if (!deckId) return;
+
+ const [deckRes, cardsRes] = await Promise.all([
+ fetch("/api/decks"),
+ fetch("/api/decks/" + deckId + "/cards")
+ ]);
+ if (!deckRes.ok || !cardsRes.ok) return;
+
+ const decks = await deckRes.json();
+ const deck = decks.find(d => d.id == deckId);
+ if (deck) {
+ const countEl = document.getElementById("deck-count");
+ if (countEl) countEl.textContent = deck.card_count;
+ }
+
+ const cards = await cardsRes.json();
+ // Erste 3 Karten aufgedeckt anzeigen
+ handCardIds.forEach((id, i) => {
+ const card = cards[i];
+ const slot = document.getElementById(id);
+ if (!slot || !card) return;
+ slot.innerHTML = card.image
+ ? `
`
+ : `
+ ⚔️
+ ${card.name}
+
`;
+ });
+ } catch(e) {
+ console.error("[Battlefield] Deck laden:", e);
+ }
+ })();
+
/* ── Match-Daten ────────────────────────────────────── */
const urlParams = new URLSearchParams(window.location.search);
const matchId = urlParams.get("match") || "<%= matchId || '' %>";
+