vastly improved SVG crystals

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,23 @@
 <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"
     >
       {{ cost }}
     </text>
@@ -29,6 +30,7 @@ export default {
 
   props: {
     element: String,
+    size: Number,
     cost: Number
   },
 

frontend/src/components/Deck.vue

@@ -5,8 +5,9 @@
         <v-flex text-xs-center xs4 sm3 md2>
           <Crystal
             v-for="element in deck.elements()"
-            :key="element.name"
+            :size="40"
             :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 }}