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

<template>
  <v-list-tile avatar>
    <v-tooltip @input="booted = true" bottom>
      <template v-slot:activator="{ on }">
        <v-list-tile-avatar v-on="on" style="cursor: zoom-in">
          <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"
            >
              {{ dbentry.cost }}
            </text>
          </svg>
        </v-list-tile-avatar>
      </template>
      <v-img
        v-if="booted"
        :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
  },

  data: () => ({
    booted: false
  }),

  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>