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

gchkl,

Browse Source
This commit is contained in:
cay 2026-04-10 06:59:08 +01:00
parent 391c2448d8
commit ba952fe607
2 changed files with 54 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
public/css/1v1.css
View File

@ -408,8 +408,8 @@ body {
justify-content: center;
}
.hand-slot {
width: calc(var(--s) * 95);
height: calc(var(--s) * 155);
width: calc(var(--s) * 105);
height: calc(var(--s) * 160);
border-radius: calc(var(--s) * 9);
border: 2px dashed rgba(255, 215, 80, 0.35);
background: rgba(0, 0, 0, 0.4);
@ -590,61 +590,61 @@ body {
box-shadow: 0 0 calc(var(--s) * 16) rgba(255, 255, 255, 0.2);
}
/* ── Karten-Stats Overlay – Slotmaschinen-Style (Eck-Badges) ── */
/* ── Karten-Stats Overlay – exakt wie Slotmaschine ── */
.card-stat-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
border-radius: calc(var(--s) * 7);
}
/* Basis-Badge: runder Kreis */
/* Gemeinsamer Badge-Stil: runder Kreis */
.cs-badge {
position: absolute;
width: calc(var(--s) * 22);
height: calc(var(--s) * 22);
width: calc(var(--s) * 24);
height: calc(var(--s) * 24);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: "Cinzel", serif;
font-size: calc(var(--s) * 11);
font-size: calc(var(--s) * 12);
font-weight: 700;
line-height: 1;
box-shadow: 0 calc(var(--s) * 2) calc(var(--s) * 6) rgba(0,0,0,0.8);
box-shadow:
0 calc(var(--s) * 2) calc(var(--s) * 6) rgba(0,0,0,0.85),
inset 0 1px 0 rgba(255,255,255,0.2);
text-shadow: 0 1px 3px rgba(0,0,0,0.9);
color: #fff;
}
/* ⚔ Angriff – blauer Kreis oben-links */
/* ⚔ Angriff – blau, oben-links (wie Slotmaschine) */
.cs-atk {
top: calc(var(--s) * 6);
left: calc(var(--s) * 6);
background: radial-gradient(circle at 40% 35%, #4a90d9, #1a4a8a);
border: calc(var(--s) * 2) solid rgba(120, 180, 255, 0.8);
color: #fff;
top: calc(var(--s) * 7);
left: calc(var(--s) * 7);
background: radial-gradient(circle at 38% 32%, #5ba8e8, #1a4f9a);
border: calc(var(--s) * 2) solid rgba(140, 200, 255, 0.85);
}
/* 🛡 Verteidigung – roter Kreis oben-rechts */
/* 🛡 Verteidigung – rot, oben-rechts (wie Slotmaschine) */
.cs-def {
top: calc(var(--s) * 6);
right: calc(var(--s) * 6);
background: radial-gradient(circle at 40% 35%, #d94a4a, #8a1a1a);
border: calc(var(--s) * 2) solid rgba(255, 120, 120, 0.8);
color: #fff;
top: calc(var(--s) * 7);
right: calc(var(--s) * 7);
background: radial-gradient(circle at 38% 32%, #e85b5b, #9a1a1a);
border: calc(var(--s) * 2) solid rgba(255, 140, 140, 0.85);
}
/* ⏱ Cooldown – gold Badge unten-rechts */
/* ⏱ Cooldown – gold, unten-rechts (wie Slotmaschine) */
.cs-cd {
bottom: calc(var(--s) * 6);
right: calc(var(--s) * 6);
background: radial-gradient(circle at 40% 35%, #c8960c, #6b4b00);
border: calc(var(--s) * 2) solid rgba(255, 210, 60, 0.8);
color: #fff;
width: calc(var(--s) * 20);
height: calc(var(--s) * 20);
font-size: calc(var(--s) * 10);
bottom: calc(var(--s) * 7);
right: calc(var(--s) * 7);
background: radial-gradient(circle at 38% 32%, #d4a020, #7a5200);
border: calc(var(--s) * 2) solid rgba(255, 210, 80, 0.85);
font-size: calc(var(--s) * 11);
}
/* Belegte Feldslots: Rand golden statt gestrichelt */
/* Belegte Feldslots */
.card-slot.slot-occupied {
border-style: solid;
border-color: rgba(255, 215, 80, 0.6);

38
views/1v1-battlefield.ejs
View File

@ -271,23 +271,28 @@
const slot = document.getElementById(id);
if (!slot || !card) return;
const hasAtk = card.attack != null;
const hasDef = card.defense != null;
const hasCd = card.cd != null;
// Feldnamen aus der API (attack, defends, cooldown)
const atkVal = card.attack ?? null;
const defVal = card.defends ?? null;
const cdVal = card.cooldown ?? null;
const hasAtk = atkVal != null;
const hasDef = defVal != null;
const hasCd = cdVal != 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>` : ""}
${hasAtk ? `<span class="cs-badge cs-atk">${atkVal}</span>` : ""}
${hasDef ? `<span class="cs-badge cs-def">${defVal}</span>` : ""}
${hasCd ? `<span class="cs-badge cs-cd">${cdVal}</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:contain;border-radius:7px;display:block;">
style="width:100%;height:100%;object-fit:cover;border-radius:7px;display:block;">
${statsHtml}`
: `<div style="display:flex;flex-direction:column;align-items:center;
justify-content:center;height:100%;gap:4px;font-family:Cinzel,serif;">
@ -296,6 +301,7 @@
</div>
${statsHtml}`;
});
});
} catch(e) {
console.error("[Battlefield] Deck laden:", e);
}
@ -304,14 +310,18 @@
/* ── 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 atkVal = card.attack ?? null;
const defVal = card.defends ?? null;
const cdVal = card.cooldown ?? null;
const hasAtk = atkVal != null;
const hasDef = defVal != null;
const hasCd = cdVal != 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>` : ""}
${hasAtk ? `<span class="cs-badge cs-atk">${atkVal}</span>` : ""}
${hasDef ? `<span class="cs-badge cs-def">${defVal}</span>` : ""}
${hasCd ? `<span class="cs-badge cs-cd">${cdVal}</span>` : ""}
</div>` : "";
slot.classList.add("slot-occupied");
@ -319,7 +329,7 @@
? `<img src="/images/cards/${card.image}"
onerror="this.src='/images/items/rueckseite.png'"
title="${card.name}"
style="width:100%;height:100%;object-fit:contain;border-radius:7px;display:block;">
style="width:100%;height:100%;object-fit:cover;border-radius:7px;display:block;">
${statsHtml}`
: `<div style="display:flex;flex-direction:column;align-items:center;
justify-content:center;height:100%;gap:4px;font-family:Cinzel,serif;padding:4px;">