44 lines
861 B
Vue
44 lines
861 B
Vue
<template>
|
|
<section class="screen-centered">
|
|
<Card :card="card" :isFaceUp="isFaceUp" @click="clickOnSlugCard" />
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Card } from '~~/types/types'
|
|
const route = useRoute()
|
|
const slug = route.params.slug as string
|
|
const isFaceUp = ref(false)
|
|
|
|
const { data: card, pending, error } = await useFetch<Card>(`/api/card/${slug}`)
|
|
|
|
useHead({
|
|
title: computed(() =>
|
|
card.value ? `${card.value.artist} - ${card.value.title}` : 'Loading...'
|
|
)
|
|
})
|
|
|
|
const clickOnSlugCard = () => {
|
|
isFaceUp.value = true
|
|
const audio = new Audio(card.value?.url_audio)
|
|
audio.play()
|
|
}
|
|
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
clickOnSlugCard()
|
|
}, 700)
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.screen-centered {
|
|
position: fixed;
|
|
inset: 0;
|
|
height: 100dvh;
|
|
width: 100dvw;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
</style>
|