Card Images

frontend/src/components/Card.vue

@@ -1,12 +1,19 @@
 <template>
   <v-list-tile avatar>
-    <v-list-tile-avatar :color="color">
-      <span class="headline font-weight-bold white--text">{{ dbentry.cost }}</span>
+    <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>{{ serial }}</v-list-tile-sub-title>
+      <v-list-tile-sub-title>{{ full_serial }}</v-list-tile-sub-title>
     </v-list-tile-content>
 
     <v-list-tile-avatar>
@@ -46,6 +53,18 @@ export default {
         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'
+      )
     }
   }
 }