From dafc8c66fd20cf01402f6621d1aab2f12aec2050 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Mon, 3 Jun 2019 14:35:02 +0200
Subject: [PATCH] vastly improved SVG crystals

---
 frontend/src/components/Card.vue         |  2 +-
 frontend/src/components/Crystal.vue      | 20 +++++++++++---------
 frontend/src/components/Deck.vue         |  3 ++-
 frontend/src/components/HeaderIntern.vue |  4 +---
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Card.vue b/frontend/src/components/Card.vue
index 193a238..113f099 100644
--- a/frontend/src/components/Card.vue
+++ b/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
diff --git a/frontend/src/components/Crystal.vue b/frontend/src/components/Crystal.vue
index ce1d847..054bbb9 100644
--- a/frontend/src/components/Crystal.vue
+++ b/frontend/src/components/Crystal.vue
@@ -1,22 +1,23 @@
 <template>
   <svg
-    x="0px"
-    y="0px"
-    width="16px"
-    height="30px"
+    :height="size + 'px'"
+    :width="16 / 30 * size + 'px'"
     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"
-      y="22"
+      x="50%"
+      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
   },
 
diff --git a/frontend/src/components/Deck.vue b/frontend/src/components/Deck.vue
index 19cce61..b85f226 100644
--- a/frontend/src/components/Deck.vue
+++ b/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">
diff --git a/frontend/src/components/HeaderIntern.vue b/frontend/src/components/HeaderIntern.vue
index a95257b..ddeebce 100644
--- a/frontend/src/components/HeaderIntern.vue
+++ b/frontend/src/components/HeaderIntern.vue
@@ -4,9 +4,7 @@
       <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 }}