Verschiebung nach anderem RePo - nun pro Projekt getrennt

2026-04-01 10:41:19 +02:00
commit 7b9eda1d62
1048 changed files with 93351 additions and 0 deletions
--- a/bin/main/static/js/card-display.js
+++ b/bin/main/static/js/card-display.js
@@ -0,0 +1,60 @@
+/**
+ * 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>';
+}