566itzj
This commit is contained in:
parent
d67885f98a
commit
df6acd57a8
@ -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");
|
||||
|
||||
@ -40,6 +40,48 @@
|
||||
}
|
||||
.result-close-btn:hover { border-color:#f0d060; filter:brightness(1.2); }
|
||||
</style>
|
||||
|
||||
/* ── 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;
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -164,17 +206,82 @@
|
||||
});
|
||||
|
||||
const hand = document.getElementById("handArea");
|
||||
const silber = document.createElement("div");
|
||||
silber.className = "hand-slot";
|
||||
silber.innerHTML = `<img src="/images/playcards/Silberklinge.png" style="width:100%;height:100%;object-fit:cover;border-radius:7px;">`;
|
||||
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 = `
|
||||
<div class="deck-stack-wrap">
|
||||
<img class="deck-card-back deck-shadow-3" src="/images/playcards/rueckseite.png">
|
||||
<img class="deck-card-back deck-shadow-2" src="/images/playcards/rueckseite.png">
|
||||
<img class="deck-card-back deck-shadow-1" src="/images/playcards/rueckseite.png">
|
||||
<img class="deck-card-top" src="/images/playcards/rueckseite.png">
|
||||
</div>
|
||||
<span class="deck-count" id="deck-count">—</span>`;
|
||||
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 = `<img src="/images/playcards/Silberklinge.png"
|
||||
style="width:100%;height:100%;object-fit:cover;border-radius:7px;">`;
|
||||
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 = '<span class="hs-icon">🃏</span>';
|
||||
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
|
||||
? `<img src="/images/playcards/${card.image}"
|
||||
title="${card.name}"
|
||||
style="width:100%;height:100%;object-fit:cover;border-radius:7px;">`
|
||||
: `<div style="display:flex;flex-direction:column;align-items:center;
|
||||
justify-content:center;height:100%;gap:4px;font-family:Cinzel,serif;">
|
||||
<span style="font-size:18px;">⚔️</span>
|
||||
<span style="font-size:9px;color:#f0d9a6;text-align:center;">${card.name}</span>
|
||||
</div>`;
|
||||
});
|
||||
} catch(e) {
|
||||
console.error("[Battlefield] Deck laden:", e);
|
||||
}
|
||||
})();
|
||||
|
||||
/* ── Match-Daten ────────────────────────────────────── */
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const matchId = urlParams.get("match") || "<%= matchId || '' %>";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user