95 lines
1.8 KiB
Vue
95 lines
1.8 KiB
Vue
<template>
|
|
<section class="platine-card" :class="{ 'platine-card--platine-open': platineOpen }">
|
|
<Card :card="card!" :is-face-up @click="clickOnCard" :role="platineOpen ? 'img' : 'button'" showPlayButtonFaceUp />
|
|
<Platine v-if="platineOpen && card" :card="card" autoplay />
|
|
<CloseButton v-if="platineOpen" @click="platineOpen = false" />
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Card } from '~~/types/types'
|
|
|
|
const { data: card, pending, error } = await useFetch<Card>('/api/card/random')
|
|
|
|
const isFaceUp = ref(false)
|
|
const platineOpen = ref(false)
|
|
|
|
useHead({
|
|
title: computed(() =>
|
|
card.value ? `${card.value.artist} - ${card.value.title}` : 'Loading...'
|
|
)
|
|
})
|
|
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
isFaceUp.value = true
|
|
}, 700)
|
|
})
|
|
|
|
const clickOnCard = () => {
|
|
platineOpen.value = !platineOpen.value
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$open-speed: 0.4s;
|
|
|
|
.platine-card {
|
|
@apply screen-centered h-screen;
|
|
|
|
:deep(.card) {
|
|
transition: width $open-speed, height $open-speed, transform 0.1s;
|
|
position: absolute;
|
|
|
|
.face-up,
|
|
.pochette {
|
|
transition: border-radius $open-speed, box-shadow $open-speed;
|
|
|
|
&:active {
|
|
.play-button {
|
|
@apply scale-90;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&--platine-open {
|
|
.card {
|
|
pointer-events: none;
|
|
|
|
&:focus {
|
|
@apply z-auto scale-100;
|
|
}
|
|
}
|
|
|
|
.card,
|
|
.platine {
|
|
width: 100vmin;
|
|
height: 100vmin;
|
|
}
|
|
|
|
&:deep(.card) {
|
|
.face-up {
|
|
border-radius: 999px;
|
|
@apply shadow-xl;
|
|
|
|
.pochette {
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.rank,
|
|
.play-button {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.play-button,
|
|
.card-body,
|
|
.face-down {
|
|
display: none;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |