Crystal component

frontend/src/classes/Deck.js

@@ -187,4 +187,26 @@ export default class {
   count() {
     return this.cards.reduce((total, card) => total + card.count, 0)
   }
+
+  elements() {
+    let elements = {}
+
+    for (let card of this.cards) {
+      if (!elements[card.dbentry.element]) elements[card.dbentry.element] = 0
+
+      elements[card.dbentry.element] += card.count
+    }
+
+    let retval = []
+
+    for (let element in elements)
+      retval.push({
+        name: element,
+        count: elements[element]
+      })
+
+    retval.sort((element_l, element_r) => element_r.count - element_l.count)
+
+    return retval
+  }
 }

frontend/src/components/Card.vue

@@ -3,28 +3,7 @@
     <v-tooltip @input="booted = true" bottom>
       <template v-slot:activator="{ on }">
         <v-list-tile-avatar v-on="on" style="cursor: zoom-in">
-          <svg
+          <Crystal :element="dbentry.element" :cost="dbentry.cost" />
-            x="0px"
-            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" :fill="color" />
-            <text
-              x="2.5"
-              y="22"
-              font-size="20"
-              font-family="sans-serif"
-              fill="white"
-              font-weight="bold"
-              class="ng-binding"
-            >
-              {{ dbentry.cost }}
-            </text>
-          </svg>
         </v-list-tile-avatar>
       </template>
       <v-img
@@ -48,9 +27,15 @@
 </template>
 
 <script>
+import Crystal from './Crystal.vue'
+
 export default {
   name: 'Card',
 
+  components: {
+    Crystal
+  },
+
   props: {
     count: Number,
     serial: String,
@@ -62,28 +47,6 @@ export default {
   }),
 
   computed: {
-    color() {
-      switch (this.dbentry.element.toLowerCase()) {
-        case 'fire':
-          return '#d41'
-        case 'ice':
-          return '#7ac'
-        case 'wind':
-          return '#596'
-        case 'earth':
-          return '#db1'
-        case 'lightning':
-          return '#859'
-        case 'water':
-          return '#57a'
-        case 'light':
-          return '#888'
-        case 'dark':
-        default:
-          return '#333'
-      }
-    },
-
     full_serial() {
       return this.serial + this.dbentry.rarity[0]
     },

frontend/src/components/Crystal.vue

@@ -0,0 +1,59 @@
+<template>
+  <svg
+    x="0px"
+    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" :fill="color" />
+    <text
+      x="2.5"
+      y="22"
+      font-size="20"
+      font-family="sans-serif"
+      fill="white"
+      font-weight="bold"
+      class="ng-binding"
+    >
+      {{ cost }}
+    </text>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'Crystal',
+
+  props: {
+    element: String,
+    cost: Number
+  },
+
+  computed: {
+    color() {
+      switch (this.element.toLowerCase()) {
+        case 'fire':
+          return '#d41'
+        case 'ice':
+          return '#7ac'
+        case 'wind':
+          return '#596'
+        case 'earth':
+          return '#db1'
+        case 'lightning':
+          return '#859'
+        case 'water':
+          return '#57a'
+        case 'light':
+          return '#888'
+        case 'dark':
+        default:
+          return '#333'
+      }
+    }
+  }
+}
+</script>

frontend/src/components/Deck.vue

@@ -1,7 +1,18 @@
 <template>
   <v-expansion-panel-content>
     <template v-slot:header>
-      <span class="subheading">{{ deck.name }}</span>
+      <v-layout align-center row>
+        <v-flex text-xs-center xs2>
+          <Crystal
+            v-for="element in deck.elements()"
+            :key="element.name"
+            :element="element.name"
+          />
+        </v-flex>
+        <v-flex class="subheading">
+          {{ deck.name }}
+        </v-flex>
+      </v-layout>
     </template>
 
     <v-alert v-if="!editing" :value="deck.note" type="info">
@@ -79,6 +90,7 @@ import * as Cookies from 'js-cookie'
 import axios from '@/plugins/axios'
 
 import Card from './Card.vue'
+import Crystal from './Crystal.vue'
 import DeckEditor from './forms/DeckEditor.vue'
 
 export default {
@@ -90,6 +102,7 @@ export default {
 
   components: {
     Card,
+    Crystal,
     DeckEditor
   },