This commit is contained in:
cay 2026-04-13 10:08:24 +01:00
parent 17fe78bbe4
commit 4ba993edb8
2 changed files with 19 additions and 10 deletions

View File

@ -412,7 +412,10 @@ 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(10, 8, 5, 0.92); /* dunkles Backing deckt transparente PNG-Bereiche ab */ background-color: rgba(10, 8, 5, 0.92);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -431,6 +434,7 @@ body {
opacity: 0.2; opacity: 0.2;
} }
/* Right side: action icons */ /* Right side: action icons */
.action-hud { .action-hud {
display: flex; display: flex;
@ -707,7 +711,7 @@ body {
border-color: rgba(255, 215, 80, 0.6); border-color: rgba(255, 215, 80, 0.6);
} }
/* Hand-Slot: Karte ist drin */ /* Hand-Slot: Karte drin border auf solid, background-image via JS gesetzt */
.hand-slot.hand-slot--filled { .hand-slot.hand-slot--filled {
border-style: solid; border-style: solid;
border-color: rgba(255, 215, 80, 0.5); border-color: rgba(255, 215, 80, 0.5);

View File

@ -428,6 +428,7 @@
if (!slot) return; if (!slot) return;
if (!state) { if (!state) {
slot.style.backgroundImage = '';
slot.innerHTML = '<span class="hs-icon">🃏</span>'; 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;
@ -461,15 +462,19 @@
? `<div class="hand-slot-ready-badge">SPIELEN</div>` ? `<div class="hand-slot-ready-badge">SPIELEN</div>`
: ""; : "";
// Bild als normales Block-Element kein position:absolute, kein z-index // ── Karte als CSS background-image auf dem Slot ──────────────────────
// Kein <img>-Element → keine Flex-Höhen-Probleme, kein z-index-Konflikt.
// background-color (#0a0805) deckt transparente PNG-Bereiche solid ab.
if (card.image) {
slot.style.backgroundImage = `url('/images/cards/${card.image}')`;
} else {
slot.style.backgroundImage = 'none';
}
slot.innerHTML = card.image slot.innerHTML = card.image
? `<img src="/images/cards/${card.image}" ? `${statsHtml}${readyBadge}`
onerror="this.src='/images/items/rueckseite.png'" : `<div style="width:100%;height:100%;display:flex;flex-direction:column;
title="${card.name}" align-items:center;justify-content:center;gap:4px;font-family:Cinzel,serif;">
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}`;