130 lines
3.6 KiB
Vue
130 lines
3.6 KiB
Vue
<template>
|
|
<article @click="() => playerStore.playTrack(props.track).catch(err => console.error(err))"
|
|
class="card flip-card w-56 h-80" :class="isFaceUp ? 'face-up' : 'face-down'">
|
|
<div class="flip-inner">
|
|
<!-- Face-Up -->
|
|
<main
|
|
class="flip-front backdrop-blur-sm border-2 -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-40 hover:bg-opacity-80 hover:shadow-xl transition-all bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
|
|
<div class="flex items-center justify-center size-7 absolute top-7 right-7" v-if="isPlaylistTrack">
|
|
<div class="suit text-7xl absolute"
|
|
:class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.track.card?.suit]">
|
|
{{ props.track.card?.suit }}
|
|
</div>
|
|
<div class="rank text-white font-bold absolute -mt-1">
|
|
{{ props.track.card?.rank }}
|
|
</div>
|
|
</div>
|
|
<!-- Cover -->
|
|
<figure class="flex-1 overflow-hidden rounded-t-xl cursor-pointer">
|
|
<img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
|
|
</figure>
|
|
|
|
<!-- Body -->
|
|
<div class="p-3 text-center bg-white rounded-b-xl">
|
|
<div class="label" v-if="isOrder">
|
|
{{ props.track.order }}
|
|
</div>
|
|
<h2 class="text-base text-neutral-800 font-bold truncate">
|
|
{{ props.track.title }}
|
|
</h2>
|
|
<p class="text-sm text-neutral-500 truncate">
|
|
<template v-if="isPlaylistTrack">
|
|
{{ props.track.artist.name }}
|
|
</template>
|
|
</p>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Face-Down -->
|
|
<footer
|
|
class="flip-back backdrop-blur-sm -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
|
|
<div class="h-full flex p-16 text-center bg-slate-800 rounded-xl">
|
|
<img src="/favicon.svg" />
|
|
<div class="label label--id" v-if="isOrder">
|
|
{{ props.track.order }}
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Track } from '~~/types/types'
|
|
import { usePlayerStore } from '~/store/player'
|
|
|
|
const props = withDefaults(defineProps<{ track: Track; isFaceUp?: boolean }>(), {
|
|
isFaceUp: false
|
|
})
|
|
const playerStore = usePlayerStore()
|
|
const isManifesto = computed(() => props.track.compilationId.startsWith('ES00'))
|
|
const isOrder = computed(() => props.track.order && !isManifesto)
|
|
const isPlaylistTrack = computed(() => props.track.compilationId.length === 6)
|
|
const isRedCard = computed(() => props.track.card?.suit === '♥' || props.track.card?.suit === '♦')
|
|
const coverUrl = props.track.coverId.startsWith('http')
|
|
? props.track.coverId
|
|
: `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`;
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.label {
|
|
@apply rounded-full size-7 p-2 bg-esyellow leading-3 -mt-6;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Flip effect */
|
|
.flip-card {
|
|
perspective: 1000px;
|
|
|
|
.flip-inner {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform 0.6s;
|
|
transform-style: preserve-3d;
|
|
|
|
.face-down & {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.face-up & {
|
|
transform: rotateY(0deg);
|
|
}
|
|
}
|
|
|
|
.flip-front,
|
|
.flip-back {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
backface-visibility: hidden;
|
|
will-change: transform;
|
|
}
|
|
|
|
.flip-front {
|
|
transform: rotateY(0deg);
|
|
}
|
|
|
|
.flip-back {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.♠ {
|
|
@apply -mt-2;
|
|
}
|
|
|
|
.♣ {
|
|
@apply text-7xl -mt-2;
|
|
}
|
|
|
|
.♦ {
|
|
@apply -mt-3;
|
|
}
|
|
|
|
.♥ {
|
|
@apply text-5xl
|
|
}
|
|
}
|
|
</style> |