frontend/src/classes/Deck.js

@@ -205,6 +205,7 @@ 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 :size="35" :element="dbentry.element" :cost="dbentry.cost" />
+          <Crystal :element="dbentry.element" :cost="dbentry.cost" />
         </v-list-tile-avatar>
       </template>
       <v-img

frontend/src/components/Crystal.vue

@@ -1,25 +1,22 @@
 <template>
   <svg
-    :height="size + 'px'"
+    x="0px"
-    :width="(16 / 30) * size + 'px'"
+    y="0px"
+    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" :style="{ fill: color }" />
+    <polygon points="0,5 8,0 16,5 16,25 8,30 0,25" :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="50%"
+      x="2.5"
-      text-anchor="middle"
+      y="22"
-      y="17"
-      dominant-baseline="middle"
       font-size="20"
       font-family="sans-serif"
       fill="white"
       font-weight="bold"
-      transform-origin="center center"
+      class="ng-binding"
-      :transform="`scale(${this.xscale},1)`"
     >
       {{ cost }}
     </text>
@@ -32,7 +29,6 @@ export default {
 
   props: {
     element: String,
-    size: Number,
     cost: Number
   },
 
@@ -57,14 +53,6 @@ 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,10 +5,8 @@
         <v-flex text-xs-center xs4 sm3 md2>
           <Crystal
             v-for="element in deck.elements()"
-            :size="40"
-            :cost="element.count"
-            :element="element.name"
             :key="element.name"
+            :element="element.name"
           />
         </v-flex>
         <v-flex class="subheading">

frontend/src/components/HeaderIntern.vue

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