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

ghj

Browse Source
This commit is contained in:
cay 2026-04-04 09:42:04 +01:00
parent a426ed00e8
commit f40af9a049
1 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
public/js/quickmenu/carddeck.js
View File

@ -119,7 +119,7 @@ function renderShell() {
/* ── Rechte Spalte: Deck-Builder ─────────── */ /* ── Rechte Spalte: Deck-Builder ─────────── */
.kd-deckbuilder { .kd-deckbuilder {
width: 380px; width: 500px;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -325,7 +325,7 @@ function renderShell() {
.kd-deck-grid { .kd-deck-grid {
flex: 1; flex: 1;
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 8px; gap: 8px;
overflow-y: auto; overflow-y: auto;
padding: 10px 12px; padding: 10px 12px;
@ -344,6 +344,11 @@ 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);
@ -376,24 +381,27 @@ function renderShell() {
background: rgba(0,0,0,0.85); background: rgba(0,0,0,0.85);
border-top: 1px solid #2a3a10; border-top: 1px solid #2a3a10;
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
height: 18px; height: 20px;
flex-shrink: 0; flex-shrink: 0;
} }
.kd-deck-card-name { .kd-deck-card-name {
font-family: "Cinzel", serif; font-size: 8px; font-family: "Cinzel", serif; font-size: 9px;
color: #c8e0a6; text-align: center; color: #c8e0a6; text-align: center;
} }
.kd-deck-amount-badge { .kd-deck-card-count {
position: absolute; display: flex;
top: 3px; right: 3px; justify-content: space-between;
background: rgba(70,130,40,0.9); align-items: center;
border: 1px solid #88cc44; padding: 3px 6px;
border-radius: 3px; background: rgba(0,0,0,0.6);
font-family: "Cinzel", serif; font-size: 10px; border: 1px solid #2a3a10;
font-weight: bold; color: #fff; border-radius: 5px;
padding: 0 4px; font-family: "Cinzel", serif;
pointer-events: none; font-size: 11px;
font-weight: bold;
} }
.kd-deck-card-count .owned { color: #c8a86a; }
.kd-deck-card-count .indeck { color: #88cc44; }
/* ── Empty / Loading States ──────────────── */ /* ── Empty / Loading States ──────────────── */
.kd-empty { .kd-empty {
@ -718,15 +726,25 @@ function renderDeckGrid(grid, cards) {
grid.innerHTML = `<div class="kd-empty-deck">Deck ist leer.<br>Klicke links auf eine Karte um sie hinzuzufügen.</div>`; grid.innerHTML = `<div class="kd-empty-deck">Deck ist leer.<br>Klicke links auf eine Karte um sie hinzuzufügen.</div>`;
return; return;
} }
grid.innerHTML = cards.map(c => ` // Owned-Anzahl aus userCardsCache auslesen
<div class="kd-deck-card" data-card-id="${c.card_id}" data-level="${c.level}" title="Klicken zum Entfernen: ${c.name}"> grid.innerHTML = cards.map(c => {
${c.amount > 1 ? `<span class="kd-deck-amount-badge">${c.amount}×</span>` : ""} const ownedEntry = userCardsCache.find(u => u.card_id === c.card_id && u.level === c.level);
<img src="/images/cards/${c.image}" alt="${c.name}" const ownedAmt = ownedEntry ? ownedEntry.amount : "?";
onerror="this.src='/images/avatar_placeholder.svg'"> return `
<div class="kd-deck-card-footer"> <div class="kd-deck-card-wrap">
<span class="kd-deck-card-name">${c.name}</span> <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}"
onerror="this.src='/images/avatar_placeholder.svg'">
<div class="kd-deck-card-footer">
<span class="kd-deck-card-name">${c.name}</span>
</div>
</div> </div>
</div>`).join(""); <div class="kd-deck-card-count">
<span class="owned" title="Besessen">${ownedAmt}×</span>
<span class="indeck" title="Im Deck">🃏 ${c.amount}</span>
</div>
</div>`;
}).join("");
grid.querySelectorAll(".kd-deck-card").forEach(el => { grid.querySelectorAll(".kd-deck-card").forEach(el => {
el.addEventListener("click", async () => { el.addEventListener("click", async () => {