cay/dok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

6r8po06r

Browse Source
This commit is contained in:
cay 2026-04-10 06:41:00 +01:00
parent 74ce4ba913
commit 40961c64ad
2 changed files with 97 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
public/css/1v1.css
View File

@ -590,6 +590,58 @@ body {
box-shadow: 0 0 calc(var(--s) * 16) rgba(255, 255, 255, 0.2);
}
/* ── Karten-Stats Overlay (Hand & Feld) ── */
.card-stat-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: calc(var(--s) * 3);
padding: calc(var(--s) * 3) calc(var(--s) * 2);
background: linear-gradient(transparent, rgba(0,0,0,0.82));
border-radius: 0 0 calc(var(--s) * 7) calc(var(--s) * 7);
pointer-events: none;
z-index: 5;
}
.cs-badge {
font-family: "Cinzel", serif;
font-size: calc(var(--s) * 9);
font-weight: 700;
padding: calc(var(--s) * 1.5) calc(var(--s) * 4);
border-radius: calc(var(--s) * 3);
letter-spacing: 0;
line-height: 1;
white-space: nowrap;
}
.cs-atk {
background: rgba(180, 30, 30, 0.82);
border: 1px solid rgba(255, 80, 80, 0.55);
color: #ffb0b0;
text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.cs-def {
background: rgba(30, 80, 160, 0.82);
border: 1px solid rgba(80, 140, 255, 0.55);
color: #a8c8ff;
text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.cs-cd {
background: rgba(120, 60, 0, 0.82);
border: 1px solid rgba(200, 140, 40, 0.55);
color: #ffd080;
text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
/* Belegte Feldslots: Rand golden statt gestrichelt */
.card-slot.slot-occupied {
border-style: solid;
border-color: rgba(255, 215, 80, 0.6);
}
/* Spielfeld-Sperre */
#board-lock-overlay {
position: absolute;

47
views/1v1-battlefield.ejs
View File

@ -266,22 +266,65 @@
const card = cards[i];
const slot = document.getElementById(id);
if (!slot || !card) return;
const hasAtk = card.attack != null;
const hasDef = card.defense != null;
const hasCd = card.cd != null;
const showStats = hasAtk || hasDef || hasCd;
const statsHtml = showStats ? `
<div class="card-stat-overlay">
${hasAtk ? `<span class="cs-badge cs-atk">⚔ ${card.attack}</span>` : ""}
${hasDef ? `<span class="cs-badge cs-def">🛡 ${card.defense}</span>` : ""}
${hasCd ? `<span class="cs-badge cs-cd">⏱ ${card.cd}</span>` : ""}
</div>` : "";
slot.innerHTML = card.image
? `<img src="/images/cards/${card.image}"
onerror="this.src='/images/items/rueckseite.png'"
title="${card.name}"
style="width:100%;height:100%;object-fit:cover;border-radius:7px;">`
style="width:100%;height:100%;object-fit:cover;border-radius:7px;">
${statsHtml}`
: `<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>`;
</div>
${statsHtml}`;
});
} catch(e) {
console.error("[Battlefield] Deck laden:", e);
}
})();
/* ── Hilfsfunktion: Karte mit Stats in einen Slot rendern ── */
function renderCardInSlot(slot, card) {
if (!slot || !card) return;
const hasAtk = card.attack != null;
const hasDef = card.defense != null;
const hasCd = card.cd != null;
const statsHtml = (hasAtk || hasDef || hasCd) ? `
<div class="card-stat-overlay">
${hasAtk ? `<span class="cs-badge cs-atk">⚔ ${card.attack}</span>` : ""}
${hasDef ? `<span class="cs-badge cs-def">🛡 ${card.defense}</span>` : ""}
${hasCd ? `<span class="cs-badge cs-cd">⏱ ${card.cd}</span>` : ""}
</div>` : "";
slot.classList.add("slot-occupied");
slot.innerHTML = card.image
? `<img src="/images/cards/${card.image}"
onerror="this.src='/images/items/rueckseite.png'"
title="${card.name}"
style="width:100%;height:100%;object-fit:cover;border-radius:7px;">
${statsHtml}`
: `<div style="display:flex;flex-direction:column;align-items:center;
justify-content:center;height:100%;gap:4px;font-family:Cinzel,serif;padding:4px;">
<span style="font-size:18px;">⚔️</span>
<span style="font-size:9px;color:#f0d9a6;text-align:center;">${card.name}</span>
</div>
${statsHtml}`;
}
/* ── Match-Daten ────────────────────────────────────── */
const urlParams = new URLSearchParams(window.location.search);
const matchId = urlParams.get("match") || "<%= matchId || '' %>";