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';

static/js/room.js

@@ -1,4 +1,5 @@
 const USERNAME_KEY = 'scrumPoker.username';
+const CARD_ICONS = ['★', '◆', '✦', '☀', '☘', '⚙', '♣', '♠', '♥', '♦', '✚', '⚡', '☾', '✿'];
 
 const roomID = document.body.dataset.roomId;
 const params = new URLSearchParams(window.location.search);
@@ -137,6 +138,36 @@ function parseNumericVote(value) {
     return Number(value);
 }
 
+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 calculateSummary(state) {
     const rows = new Map();
     const numericVotes = [];
@@ -221,7 +252,8 @@ function renderCards(cards, participants, isRevealed) {
         const card = document.createElement('button');
         card.type = 'button';
         card.className = 'vote-card';
-        card.textContent = value;
+        card.setAttribute('aria-label', `Vote ${value}`);
+        appendCardFace(card, value);
 
         if (selfVote === value && !isRevealed) {
             card.classList.add('is-selected');