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

fkfg

Browse Source
This commit is contained in:
cay 2026-04-10 06:51:11 +01:00
parent 40961c64ad
commit 391c2448d8
2 changed files with 52 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
public/css/1v1.css
View File

@ -420,7 +420,7 @@ body {
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
position: relative; position: relative;
overflow: hidden; overflow: visible;
box-shadow: 0 calc(var(--s) * 4) calc(var(--s) * 12) rgba(0, 0, 0, 0.4); box-shadow: 0 calc(var(--s) * 4) calc(var(--s) * 12) rgba(0, 0, 0, 0.4);
} }
.hand-slot::before { .hand-slot::before {
@ -590,50 +590,58 @@ 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 (Hand & Feld) ── */ /* ── Karten-Stats Overlay – Slotmaschinen-Style (Eck-Badges) ── */
.card-stat-overlay { .card-stat-overlay {
position: absolute; position: absolute;
bottom: 0; inset: 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; pointer-events: none;
z-index: 5; z-index: 5;
} }
/* Basis-Badge: runder Kreis */
.cs-badge { .cs-badge {
position: absolute;
width: calc(var(--s) * 22);
height: calc(var(--s) * 22);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: "Cinzel", serif; font-family: "Cinzel", serif;
font-size: calc(var(--s) * 9); font-size: calc(var(--s) * 11);
font-weight: 700; 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; line-height: 1;
white-space: nowrap; box-shadow: 0 calc(var(--s) * 2) calc(var(--s) * 6) rgba(0,0,0,0.8);
} }
/* ⚔ Angriff – blauer Kreis oben-links */
.cs-atk { .cs-atk {
background: rgba(180, 30, 30, 0.82); top: calc(var(--s) * 6);
border: 1px solid rgba(255, 80, 80, 0.55); left: calc(var(--s) * 6);
color: #ffb0b0; background: radial-gradient(circle at 40% 35%, #4a90d9, #1a4a8a);
text-shadow: 0 1px 3px rgba(0,0,0,0.9); border: calc(var(--s) * 2) solid rgba(120, 180, 255, 0.8);
color: #fff;
} }
/* 🛡 Verteidigung – roter Kreis oben-rechts */
.cs-def { .cs-def {
background: rgba(30, 80, 160, 0.82); top: calc(var(--s) * 6);
border: 1px solid rgba(80, 140, 255, 0.55); right: calc(var(--s) * 6);
color: #a8c8ff; background: radial-gradient(circle at 40% 35%, #d94a4a, #8a1a1a);
text-shadow: 0 1px 3px rgba(0,0,0,0.9); border: calc(var(--s) * 2) solid rgba(255, 120, 120, 0.8);
color: #fff;
} }
/* ⏱ Cooldown – gold Badge unten-rechts */
.cs-cd { .cs-cd {
background: rgba(120, 60, 0, 0.82); bottom: calc(var(--s) * 6);
border: 1px solid rgba(200, 140, 40, 0.55); right: calc(var(--s) * 6);
color: #ffd080; background: radial-gradient(circle at 40% 35%, #c8960c, #6b4b00);
text-shadow: 0 1px 3px rgba(0,0,0,0.9); 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);
} }
/* Belegte Feldslots: Rand golden statt gestrichelt */ /* Belegte Feldslots: Rand golden statt gestrichelt */

26
views/1v1-battlefield.ejs
View File

@ -75,10 +75,14 @@
color: #f0d060; color: #f0d060;
text-shadow: 0 1px 3px rgba(0,0,0,0.8); text-shadow: 0 1px 3px rgba(0,0,0,0.8);
} }
.hand-slot-card { .hand-slot-card {
border: 1px solid rgba(200,150,42,0.4) !important; border: 1px solid rgba(200,150,42,0.4) !important;
} }
.hand-slot-card:hover { .hand-slot-card > img {
border-radius: calc(var(--s) * 7);
overflow: hidden;
}
.hand-slot-card:hover {
border-color: rgba(200,150,42,0.9) !important; border-color: rgba(200,150,42,0.9) !important;
transform: translateY(-4px); transform: translateY(-4px);
transition: transform 0.15s; transition: transform 0.15s;
@ -274,16 +278,16 @@
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">${card.attack}</span>` : ""}
${hasDef ? `<span class="cs-badge cs-def">🛡 ${card.defense}</span>` : ""} ${hasDef ? `<span class="cs-badge cs-def">${card.defense}</span>` : ""}
${hasCd ? `<span class="cs-badge cs-cd">⏱ ${card.cd}</span>` : ""} ${hasCd ? `<span class="cs-badge cs-cd">${card.cd}</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:cover;border-radius:7px;"> style="width:100%;height:100%;object-fit:contain;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;">
@ -305,9 +309,9 @@
const hasCd = card.cd != null; const hasCd = card.cd != 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">${card.attack}</span>` : ""}
${hasDef ? `<span class="cs-badge cs-def">🛡 ${card.defense}</span>` : ""} ${hasDef ? `<span class="cs-badge cs-def">${card.defense}</span>` : ""}
${hasCd ? `<span class="cs-badge cs-cd">⏱ ${card.cd}</span>` : ""} ${hasCd ? `<span class="cs-badge cs-cd">${card.cd}</span>` : ""}
</div>` : ""; </div>` : "";
slot.classList.add("slot-occupied"); slot.classList.add("slot-occupied");
@ -315,7 +319,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:cover;border-radius:7px;"> style="width:100%;height:100%;object-fit:contain;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;">