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

dtzjkdt

Browse Source
This commit is contained in:
cay 2026-04-13 09:54:16 +01:00
parent 6ec9c994c3
commit 408f935402
2 changed files with 18 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
public/css/1v1.css
View File

@ -412,37 +412,15 @@ body {
height: calc(var(--s) * 160); 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);
/* backdrop-filter BEWUSST ENTFERNT – erzeugt GPU-Compositing-Ebene
die position:absolute-Kinder verschluckt (Browser-Bug) */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
border-color 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease,
opacity 0.2s ease;
position: relative; position: relative;
z-index: 0; /* eigener Stacking-Context ohne GPU-Compositing-Bug */ overflow: hidden;
overflow: visible; cursor: pointer;
box-shadow: 0 calc(var(--s) * 4) calc(var(--s) * 12) rgba(0, 0, 0, 0.4); flex-shrink: 0;
} transition: border-color 0.2s ease, transform 0.2s ease;
.hand-slot::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
160deg,
rgba(255, 255, 255, 0.06) 0%,
transparent 50%
);
} }
.hand-slot:hover { .hand-slot:hover {
border-color: rgba(255, 215, 80, 0.9); border-color: rgba(255, 215, 80, 0.9);
transform: translateY(calc(var(--s) * -10)); transform: translateY(calc(var(--s) * -6));
box-shadow: 0 calc(var(--s) * 16) calc(var(--s) * 28) rgba(255, 215, 80, 0.2);
} }
.hand-slot .hs-icon { .hand-slot .hs-icon {
font-size: calc(var(--s) * 22); font-size: calc(var(--s) * 22);
@ -725,13 +703,13 @@ body {
border-color: rgba(255, 215, 80, 0.6); border-color: rgba(255, 215, 80, 0.6);
} }
/* Hand-Slot: Karte ist drin – background-image wird via JS gesetzt, /* Hand-Slot: Karte ist drin */
overflow:hidden clippt an border-radius */
.hand-slot.hand-slot--filled { .hand-slot.hand-slot--filled {
overflow: hidden !important; border-style: solid;
border-color: rgba(255, 215, 80, 0.5);
} }
.hand-slot.hand-slot--filled::before { .hand-slot.hand-slot--filled::before {
display: none !important; display: none;
} }
/* Hand-Slot: Karte ist spielbereit (CD = 0) */ /* Hand-Slot: Karte ist spielbereit (CD = 0) */

33
views/1v1-battlefield.ejs
View File

@ -428,13 +428,7 @@
if (!slot) return; if (!slot) return;
if (!state) { if (!state) {
// Alle Inline-Styles aus dem Karten-Render zurücksetzen slot.innerHTML = '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;"><span class="hs-icon">🃏</span></div>';
slot.style.backgroundImage = "";
slot.style.backgroundSize = "";
slot.style.backgroundPosition = "";
slot.style.backgroundColor = "";
slot.style.overflow = "";
slot.innerHTML = '<span class="hs-icon">🃏</span>';
slot.classList.remove("hand-slot-ready", "hand-slot--filled"); slot.classList.remove("hand-slot-ready", "hand-slot--filled");
slot.draggable = false; slot.draggable = false;
delete slot.dataset.cardSlotId; delete slot.dataset.cardSlotId;
@ -467,24 +461,15 @@
? `<div class="hand-slot-ready-badge">SPIELEN</div>` ? `<div class="hand-slot-ready-badge">SPIELEN</div>`
: ""; : "";
// ── Karte als CSS background-image rendern ──────────────────────────── // Bild als normales Block-Element – kein position:absolute, kein z-index-Konflikt
// Kein <img> mit position:absolute mehr → kein z-index/Compositing-Konflikt.
// CSS background-image liegt IMMER hinter Kindelementen, unabhängig vom Browser.
if (card.image) {
slot.style.backgroundImage = `url('/images/cards/${card.image}')`;
slot.style.backgroundSize = 'cover';
slot.style.backgroundPosition = 'center';
} else {
slot.style.backgroundImage = 'none';
}
// Solides Backing damit kein Hintergrund durchscheint
slot.style.backgroundColor = 'rgba(18,13,6,0.97)';
slot.style.overflow = 'hidden';
slot.innerHTML = card.image slot.innerHTML = card.image
? `${statsHtml}${readyBadge}` ? `<img src="/images/cards/${card.image}"
: `<div style="display:flex;flex-direction:column;align-items:center; onerror="this.src='/images/items/rueckseite.png'"
justify-content:center;height:100%;gap:4px;font-family:Cinzel,serif;"> title="${card.name}"
draggable="false"
style="width:100%;height:100%;display:block;object-fit:cover;">
${statsHtml}${readyBadge}`
: `<div style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-family:Cinzel,serif;">
<span style="font-size:18px;">⚔️</span> <span style="font-size:18px;">⚔️</span>
<span style="font-size:9px;color:#f0d9a6;text-align:center;">${card.name}</span> <span style="font-size:9px;color:#f0d9a6;text-align:center;">${card.name}</span>
</div>${statsHtml}${readyBadge}`; </div>${statsHtml}${readyBadge}`;