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);
border-radius: calc(var(--s) * 9);
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;
align-items: center;
justify-content: center;
@ -431,6 +434,7 @@ body {
opacity: 0.2;
}
/* Right side: action icons */
.action-hud {
display: flex;
@ -707,7 +711,7 @@ body {
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 {
border-style: solid;
border-color: rgba(255, 215, 80, 0.5);

View File

@ -428,6 +428,7 @@
if (!slot) return;
if (!state) {
slot.style.backgroundImage = '';
slot.innerHTML = '<span class="hs-icon">🃏</span>';
slot.classList.remove("hand-slot-ready", "hand-slot--filled");
slot.draggable = false;
@ -461,15 +462,19 @@
? `<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
? `<img src="/images/cards/${card.image}"
onerror="this.src='/images/items/rueckseite.png'"
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;">
? `${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:9px;color:#f0d9a6;text-align:center;">${card.name}</span>
</div>${statsHtml}${readyBadge}`;