frontend/src/components/Card.vue

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