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

38
views/1v1-battlefield.ejs
View File

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