sql server + platine v2

app/pages/card/[slug].vue

@@ -1,6 +1,6 @@
 <template>
   <section class="screen-centered">
-    <Card :card="card" :isFaceUp="isFaceUp" @click="clickOnSlugCard" />
+    <Card :card="card" :isFaceUp="isFaceUp" showPlayButtonFaceUp @click="clickOnSlugCard" @image-loaded="imageLoaded" />
   </section>
 </template>
 
@@ -20,8 +20,10 @@ useHead({
 
 const clickOnSlugCard = () => {
   isFaceUp.value = true
-  const audio = new Audio(card.value?.url_audio)
-  audio.play()
+}
+
+const imageLoaded = () => {
+  console.log('imageLoaded')
 }
 
 onMounted(() => {
@@ -30,14 +32,3 @@ onMounted(() => {
   }, 700)
 })
 </script>
-
-<style>
-.screen-centered {
-  position: fixed;
-  inset: 0;
-  height: 100dvh;
-  width: 100dvw;
-  display: grid;
-  place-items: center;
-}
-</style>

app/pages/random.vue

@@ -0,0 +1,19 @@
+<template>
+  <section class="flex justify-center items-center h-screen">
+    <div class="aspect-square size-[100vmin] max-h-screen max-w-screen overflow-hidden">
+      <Platine :card="card" />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { Card } from '~~/types/types'
+
+const { data: card, pending, error } = await useFetch<Card>('/api/card/random')
+
+useHead({
+  title: computed(() =>
+    card.value ? `${card.value.artist} - ${card.value.title}` : 'Loading...'
+  )
+})
+</script>