multi cards

app/pages/card/[slug].vue

@@ -1,15 +1,13 @@
 <template>
-  <section class="screen-centered">
-    <Card :card="card" :isFaceUp="isFaceUp" showPlayButtonFaceUp @click="clickOnSlugCard" @image-loaded="imageLoaded" />
-  </section>
+  <PlayingCard :card :isFaceUp />
 </template>
 
 <script setup lang="ts">
 import type { Card } from '~~/types/types'
+
+const isFaceUp = ref(false)
 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({
@@ -18,17 +16,9 @@ useHead({
   )
 })
 
-const clickOnSlugCard = () => {
-  //
-}
-
-const imageLoaded = () => {
-  console.log('imageLoaded')
-}
-
 onMounted(() => {
   setTimeout(() => {
     isFaceUp.value = true
   }, 700)
 })
-</script>
+</script>