61 lines
2.0 KiB
JavaScript
61 lines
2.0 KiB
JavaScript
/**
|
||
* Gemeinsame Kartenanzeige für Chastity Game.
|
||
* Benötigt: /js/card-defs.js (CARD_LABELS muss bereits global verfügbar sein)
|
||
* Exportiert: cardTypeGridHtml(cardCounts)
|
||
*/
|
||
(function () {
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
.card-type-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.6rem;
|
||
margin-top: 0.4rem;
|
||
}
|
||
.card-type-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
width: calc((100% - 6 * 0.6rem) / 14);
|
||
min-width: 28px;
|
||
}
|
||
.card-type-item img {
|
||
width: 100%;
|
||
height: auto;
|
||
border-radius: 4px;
|
||
display: block;
|
||
}
|
||
.card-type-badge {
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
color: var(--color-text);
|
||
line-height: 1.2;
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
})();
|
||
|
||
/**
|
||
* Gibt HTML für ein Karten-Typ-Raster zurück (ein Bild pro Typ, Anzahl-Badge).
|
||
* @param {Object} cardCounts – { RED: 3, GREEN: 1, … }
|
||
* @returns {string} HTML-String
|
||
*/
|
||
function cardTypeGridHtml(cardCounts) {
|
||
if (!cardCounts || Object.keys(cardCounts).length === 0) {
|
||
return '<span style="color:var(--color-muted);font-size:0.85rem;">Keine Karten mehr im Stapel.</span>';
|
||
}
|
||
const items = Object.entries(cardCounts)
|
||
.filter(([, n]) => n > 0)
|
||
.map(([type, n]) => {
|
||
const info = CARD_LABELS[type] || { img: '/img/card.png', name: type };
|
||
return `<div class="card-type-item">
|
||
<img src="${info.img}" alt="${info.name}">
|
||
<span class="card-type-badge">${n}</span>
|
||
</div>`;
|
||
}).join('');
|
||
return items
|
||
? `<div class="card-type-grid">${items}</div>`
|
||
: '<span style="color:var(--color-muted);font-size:0.85rem;">Keine Karten mehr im Stapel.</span>';
|
||
}
|