100 lines
2.2 KiB
Vue
100 lines
2.2 KiB
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>
|