progress rendering playing cards: stock display working

index.html

@@ -92,11 +92,12 @@
               ></textarea>
             </div>
 
-            <div id="playingCardsDisplay" class="playingCards">
-              <span class="card rank-2 diams">
-                <span class="rank">2</span>
-                <span class="suit">&diams;</span>
-              </span>
+            <div id="playingCardsStock" class="playingCards">
+              <ul class="hand">
+                <template x-for="(card, index) in $store.global.cardsToSolve.slice(52-24)">
+                  <li x-html="cardHtml(card, index)"></li>
+                </template>
+              </ul>
             </div>
 
           </div>

main.js

@@ -4,11 +4,50 @@ import Alpine from "alpinejs";
 // import 'bootstrap/dist/js/bootstrap'
 
 Alpine.store('global', {
-  cardsToSolve: []
+  cardsToSolve: Array(52).fill(0)
 })
 
 Alpine.data("playingCardsPreview", () => ({
-  testing: true
+  rankText: {
+    'A': 'Ace',
+    '2': 'Two',
+    '3': 'Three',
+    '4': 'Four',
+    '5': 'Five',
+    '6': 'Six',
+    '7': 'Seven',
+    '8': 'Eight',
+    '9': 'Nine',
+    'T': 'Ten',
+    'J': 'Jack',
+    'Q': 'Queen',
+    'K': 'King'
+  },
+  suitText: {
+    'C': 'Clubs',
+    'D': 'Diamonds',
+    'H': 'Hearts',
+    'S': 'Spades'
+  },
+  rankSlug(rank) {
+    return `rank-${rank === 'T' ? '10' : rank}`
+  },
+  suitSlug: {
+    'C': 'clubs',
+    'D': 'diams',
+    'H': 'hearts',
+    'S': 'spades'
+  },
+  cardHtml(card, index) {
+    if (card === '0' || card === 0) {
+      return `<abbr title="Unknown" class="card" style="z-index:${this.stockCard(index)};"></abbr>`
+    } else {
+      return `<abbr title="${this.rankText[card[0]]} of ${this.suitText[card[1]]}" class="card ${this.rankSlug(card[0])} ${this.suitSlug[card[1]]}" style="z-index:${this.stockCard(index)};"><abbr class="rank" aria-hidden="true">${card[0]}</abbr><abbr class="suit" aria-hidden="true">&${this.suitSlug[card[1]]};</abbr><abbr class="suit-b" aria-hidden="true">&${this.suitSlug[card[1]]};</abbr><abbr class="rank-b" aria-hidden="true">${card[0]}</abbr></abbr>`
+    }
+  },
+  stockCard(index) {
+    return 500 - (10 * index)
+  }
 }));
 
 Alpine.data("cardsInputForm", () => ({

style.scss

@@ -1,12 +1,31 @@
 @import "../node_modules/bootstrap/scss/bootstrap";
 
+abbr[title] {
+  border-bottom: none !important;
+  cursor: inherit !important;
+  text-decoration: none !important;
+}
+
 .playingCards {
   .card {
-    box-shadow: .1em .1em .3em #999 !important;
+    box-shadow: .05em .05em .1em #888 !important;
+    border-color: #aaa !important;
+    border-radius: 0.2em !important;
     .suit {
       &::after {
-        line-height: .8 !important;
+        margin-top: -.9em !important;
+        font-size: 0.9em !important;
       }
     }
+    .suit-b {
+      position: absolute;
+      right: 4px;
+      bottom: 18px;
+    }
+    .rank-b {
+      position: absolute;
+      right: 4px;
+      bottom: -1px;
+    }
   }
 }