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}"]`);
|
const select = document.querySelector(`.arena-deck-select[data-mode="${mode}"]`);
|
||||||
selectedDeckId = select ? Number(select.value) : null;
|
selectedDeckId = select ? Number(select.value) : null;
|
||||||
if (!selectedDeckId) return;
|
if (!selectedDeckId) return;
|
||||||
|
// Deck-ID für das Battlefield speichern
|
||||||
|
sessionStorage.setItem("selectedDeckId", selectedDeckId);
|
||||||
if (mode === "1v1") handle1v1Click(card);
|
if (mode === "1v1") handle1v1Click(card);
|
||||||
else if (mode === "2v2") openTeamLobby("2v2");
|
else if (mode === "2v2") openTeamLobby("2v2");
|
||||||
else if (mode === "4v4") openTeamLobby("4v4");
|
else if (mode === "4v4") openTeamLobby("4v4");
|
||||||
|
|||||||
@ -40,6 +40,48 @@
|
|||||||
}
|
}
|
||||||
.result-close-btn:hover { border-color:#f0d060; filter:brightness(1.2); }
|
.result-close-btn:hover { border-color:#f0d060; filter:brightness(1.2); }
|
||||||
</style>
|
</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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@ -164,17 +206,82 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
const hand = document.getElementById("handArea");
|
const hand = document.getElementById("handArea");
|
||||||
const silber = document.createElement("div");
|
|
||||||
silber.className = "hand-slot";
|
// ── Slot 1: Deck-Stapel (Rückseite oben) ─────────────
|
||||||
silber.innerHTML = `<img src="/images/playcards/Silberklinge.png" style="width:100%;height:100%;object-fit:cover;border-radius:7px;">`;
|
const deckSlot = document.createElement("div");
|
||||||
hand.appendChild(silber);
|
deckSlot.className = "hand-slot hand-slot-deck";
|
||||||
for (let i = 1; i < 8; i++) {
|
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");
|
const s = document.createElement("div");
|
||||||
s.className = "hand-slot";
|
s.className = "hand-slot";
|
||||||
s.innerHTML = '<span class="hs-icon">🃏</span>';
|
s.innerHTML = '<span class="hs-icon">🃏</span>';
|
||||||
hand.appendChild(s);
|
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 ────────────────────────────────────── */
|
/* ── Match-Daten ────────────────────────────────────── */
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
const matchId = urlParams.get("match") || "<%= matchId || '' %>";
|
const matchId = urlParams.get("match") || "<%= matchId || '' %>";
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user