node-fftcg/frontend/src/components/Card.vue

<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>