more eye candy

frontend/src/classes/Deck.js

@@ -205,7 +205,6 @@ export default class {
         count: elements[element]
       })
 
-    retval = retval.filter(element => element.count > 0)
     retval.sort((element_l, element_r) => element_r.count - element_l.count)
 
     return retval

frontend/src/components/Crystal.vue

@@ -1,7 +1,7 @@
 <template>
   <svg
     :height="size + 'px'"
-    :width="16 / 30 * size + 'px'"
+    :width="(16 / 30) * size + 'px'"
     viewBox="0 0 16 30"
     xml:space="preserve"
   >
@@ -18,6 +18,8 @@
       font-family="sans-serif"
       fill="white"
       font-weight="bold"
+      transform-origin="center center"
+      :transform="`scale(${this.xscale},1)`"
     >
       {{ cost }}
     </text>
@@ -55,6 +57,14 @@ export default {
         default:
           return '#333'
       }
+    },
+
+    xscale() {
+      if (typeof this.cost !== 'undefined') {
+        let len = this.cost.toString().length
+        return Math.pow(0.7, len - 1)
+      }
+      return 1
     }
   }
 }

frontend/src/components/Deck.vue

@@ -6,6 +6,7 @@
           <Crystal
             v-for="element in deck.elements()"
             :size="40"
+            :cost="element.count"
             :element="element.name"
             :key="element.name"
           />