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/Card.vue

@@ -3,7 +3,7 @@
     <v-tooltip @input="booted = true" bottom>
       <template v-slot:activator="{ on }">
         <v-list-tile-avatar v-on="on" style="cursor: zoom-in">
-          <Crystal :element="dbentry.element" :cost="dbentry.cost" />
+          <Crystal :size="35" :element="dbentry.element" :cost="dbentry.cost" />
         </v-list-tile-avatar>
       </template>
       <v-img

frontend/src/components/Crystal.vue

@@ -1,22 +1,25 @@
 <template>
   <svg
-    x="0px"
+    :height="size + 'px'"
-    y="0px"
+    :width="(16 / 30) * size + 'px'"
-    width="16px"
-    height="30px"
     viewBox="0 0 16 30"
-    style="enable-background:new 0 0 16 30"
     xml:space="preserve"
   >
-    <polygon points="0,5 8,0 16,5 16,25 8,30 0,25" :fill="color" />
+    <polygon points="0,5 8,0 16,5 16,25 8,30 0,25" :style="{ fill: color }" />
+    <polygon points="7,5 7,25 2,25 2,5" style="fill:rgba(255,255,255,0.3);" />
+    <polygon points="0,5 8,0 16,5" style="fill:rgba(255,255,255,0.6);" />
+    <polygon points="10,25 16,25 8,30" style="fill:rgba(255,255,255,0.5);" />
     <text
-      x="2.5"
+      x="50%"
-      y="22"
+      text-anchor="middle"
+      y="17"
+      dominant-baseline="middle"
       font-size="20"
       font-family="sans-serif"
       fill="white"
       font-weight="bold"
-      class="ng-binding"
+      transform-origin="center center"
+      :transform="`scale(${this.xscale},1)`"
     >
       {{ cost }}
     </text>
@@ -29,6 +32,7 @@ export default {
 
   props: {
     element: String,
+    size: Number,
     cost: Number
   },
 
@@ -53,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

@@ -5,8 +5,10 @@
         <v-flex text-xs-center xs4 sm3 md2>
           <Crystal
             v-for="element in deck.elements()"
-            :key="element.name"
+            :size="40"
+            :cost="element.count"
             :element="element.name"
+            :key="element.name"
           />
         </v-flex>
         <v-flex class="subheading">

frontend/src/components/HeaderIntern.vue

@@ -4,9 +4,7 @@
       <v-icon>view_carousel</v-icon> Decks
     </v-btn>
 
-    <v-btn flat>
+    <v-btn flat> <v-icon>play_arrow</v-icon> Play </v-btn>
-      <v-icon>play_arrow</v-icon> Play
-    </v-btn>
 
     <v-btn flat :to="{ name: 'usercp' }">
       <v-icon>person</v-icon> {{ user.login }}