Better Cards

static/js/config.js

@@ -13,6 +13,8 @@ const SPECIAL_CARD_ORDER = {
     '☕': 3,
 };
 
+const CARD_ICONS = ['★', '◆', '✦', '☀', '☘', '⚙', '♣', '♠', '♥', '♦', '✚', '⚡', '☾', '✿'];
+
 const roomConfigForm = document.getElementById('room-config-form');
 const statusLine = document.getElementById('config-status');
 const scaleSelect = document.getElementById('estimation-scale');
@@ -82,6 +84,36 @@ function createCard(value) {
     return { id: String(nextCardID++), value: value.toString() };
 }
 
+function iconForCard(value) {
+    if (value === '?') return '❓';
+    if (value === '☕') return '☕';
+    if (value === '∞') return '∞';
+
+    let hash = 0;
+    for (let i = 0; i < value.length; i += 1) {
+        hash = (hash * 31 + value.charCodeAt(i)) >>> 0;
+    }
+    return CARD_ICONS[hash % CARD_ICONS.length];
+}
+
+function appendCardFace(el, value) {
+    const topLeft = document.createElement('span');
+    topLeft.className = 'card-corner top-left';
+    topLeft.textContent = value;
+
+    const center = document.createElement('span');
+    center.className = 'card-center-icon';
+    center.textContent = iconForCard(value);
+
+    const bottomRight = document.createElement('span');
+    bottomRight.className = 'card-corner bottom-right';
+    bottomRight.textContent = value;
+
+    el.appendChild(topLeft);
+    el.appendChild(center);
+    el.appendChild(bottomRight);
+}
+
 function getCardsForScale(scale) {
     return (SCALE_PRESETS[scale] || SCALE_PRESETS.fibonacci).map(createCard);
 }
@@ -157,8 +189,8 @@ function buildCardElement(card) {
     const cardEl = document.createElement('div');
     cardEl.className = 'preview-card';
     cardEl.dataset.cardId = card.id;
-    cardEl.textContent = card.value;
     cardEl.draggable = true;
+    appendCardFace(cardEl, card.value);
 
     const removeBtn = document.createElement('button');
     removeBtn.type = 'button';