Card Images

frontend/src/components/Card.vue

@@ -0,0 +1,71 @@
+<template>
+  <v-list-tile avatar>
+    <v-tooltip bottom>
+      <template v-slot:activator="{ on }">
+        <v-list-tile-avatar :color="color" v-on="on">
+          <span class="headline font-weight-bold white--text">
+            {{ dbentry.cost }}
+          </span>
+        </v-list-tile-avatar>
+      </template>
+      <v-img :src="ffiurl" :height="300" :width="0.715 * 300" contain />
+    </v-tooltip>
+
+    <v-list-tile-content>
+      <v-list-tile-title class="body-2">{{ dbentry.name }}</v-list-tile-title>
+      <v-list-tile-sub-title>{{ full_serial }}</v-list-tile-sub-title>
+    </v-list-tile-content>
+
+    <v-list-tile-avatar>
+      <span class="subheading">{{ count }}</span>
+    </v-list-tile-avatar>
+  </v-list-tile>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+
+  props: {
+    count: Number,
+    serial: String,
+    dbentry: Object
+  },
+
+  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]
+    },
+
+    ffiurl() {
+      return (
+        'https://fftcg.square-enix-games.com/theme/tcg/images/cards/full/' +
+        this.full_serial +
+        '_eg.jpg'
+      )
+    }
+  }
+}
+</script>

frontend/src/components/Deck.vue

@@ -10,23 +10,17 @@
 
     <v-container grid-list-md fluid>
       <v-layout row wrap>
-        <v-flex v-for="part in deck_parts" :key="part.heading" xs12 sm4>
+        <v-flex v-for="part in deck_parts" :key="part.heading" xs12 sm6 md4>
           <v-card>
             <v-card-title>{{ part.count }} {{ part.heading }}</v-card-title>
             <v-list dense subheader>
-              <v-list-tile v-for="card in part.cards" :key="card.serial" avatar>
-                <v-list-tile-avatar color="yellow">
-                  <span>{{ card.dbentry.cost }}</span>
-                </v-list-tile-avatar>
-
-                <v-list-tile-content>
-                  <v-list-tile-title>{{ card.dbentry.name }}</v-list-tile-title>
-                </v-list-tile-content>
-
-                <v-list-tile-avatar>
-                  <span>{{ card.count }}</span>
-                </v-list-tile-avatar>
-              </v-list-tile>
+              <Card
+                v-for="card in part.cards"
+                :key="card.serial"
+                :count="card.count"
+                :serial="card.serial"
+                :dbentry="card.dbentry"
+              ></Card>
             </v-list>
           </v-card>
         </v-flex>
@@ -36,6 +30,8 @@
 </template>
 
 <script>
+import Card from './Card.vue'
+
 export default {
   name: 'Deck',
 
@@ -43,6 +39,10 @@ export default {
     deck: Object
   },
 
+  components: {
+    Card
+  },
+
   computed: {
     deck_parts() {
       let retval = {

frontend/src/components/DeckList.vue

@@ -7,7 +7,7 @@
 <script>
 import CardsDB from '@/plugins/ffdecks'
 
-import Deck from '@/components/Deck.vue'
+import Deck from './Deck.vue'
 
 export default {
   name: 'DeckList',