This commit is contained in:
cay 2026-04-04 09:45:54 +01:00
parent f40af9a049
commit 29e6fd01de

View File

@ -344,11 +344,7 @@ function renderShell() {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.kd-deck-card-wrap {
display: flex;
flex-direction: column;
gap: 5px;
}
.kd-deck-card:hover { .kd-deck-card:hover {
border-color: #ff4444; border-color: #ff4444;
transform: scale(1.05); transform: scale(1.05);
@ -388,20 +384,19 @@ function renderShell() {
font-family: "Cinzel", serif; font-size: 9px; font-family: "Cinzel", serif; font-size: 9px;
color: #c8e0a6; text-align: center; color: #c8e0a6; text-align: center;
} }
.kd-deck-card-count { .kd-deck-card-footer-counts {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 3px 6px; padding: 2px 6px;
background: rgba(0,0,0,0.6); background: rgba(0,0,0,0.85);
border: 1px solid #2a3a10; border-top: 1px solid #2a3a10;
border-radius: 5px; border-radius: 0 0 6px 6px;
font-family: "Cinzel", serif; height: 20px;
font-size: 11px; flex-shrink: 0;
font-weight: bold;
} }
.kd-deck-card-count .owned { color: #c8a86a; } .kd-deck-count-owned { font-family: "Cinzel", serif; font-size: 10px; color: #c8a86a; font-weight: bold; }
.kd-deck-card-count .indeck { color: #88cc44; } .kd-deck-count-indeck { font-family: "Cinzel", serif; font-size: 10px; color: #88cc44; font-weight: bold; }
/* ── Empty / Loading States ──────────────── */ /* ── Empty / Loading States ──────────────── */
.kd-empty { .kd-empty {
@ -731,17 +726,15 @@ function renderDeckGrid(grid, cards) {
const ownedEntry = userCardsCache.find(u => u.card_id === c.card_id && u.level === c.level); const ownedEntry = userCardsCache.find(u => u.card_id === c.card_id && u.level === c.level);
const ownedAmt = ownedEntry ? ownedEntry.amount : "?"; const ownedAmt = ownedEntry ? ownedEntry.amount : "?";
return ` return `
<div class="kd-deck-card-wrap"> <div class="kd-deck-card" data-card-id="${c.card_id}" data-level="${c.level}" title="Klicken zum Entfernen: ${c.name}">
<div class="kd-deck-card" data-card-id="${c.card_id}" data-level="${c.level}" title="Klicken zum Entfernen: ${c.name}"> <img src="/images/cards/${c.image}" alt="${c.name}"
<img src="/images/cards/${c.image}" alt="${c.name}" onerror="this.src='/images/avatar_placeholder.svg'">
onerror="this.src='/images/avatar_placeholder.svg'"> <div class="kd-deck-card-footer">
<div class="kd-deck-card-footer"> <span class="kd-deck-card-name">${c.name}</span>
<span class="kd-deck-card-name">${c.name}</span>
</div>
</div> </div>
<div class="kd-deck-card-count"> <div class="kd-deck-card-footer-counts">
<span class="owned" title="Besessen">${ownedAmt}×</span> <span class="kd-deck-count-owned" title="Besessen">${ownedAmt}×</span>
<span class="indeck" title="Im Deck">🃏 ${c.amount}</span> <span class="kd-deck-count-indeck" title="Im Deck">🃏 ${c.amount}</span>
</div> </div>
</div>`; </div>`;
}).join(""); }).join("");