multi cards

app/pages/index.vue

@@ -1,95 +1,58 @@
 <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 class="deck">
+    <div v-for="(card, index) in cards" :key="index">
+      <PlayingCard :card="card" :isFaceUp="isFaceUp[index] || false" />
+    </div>
   </section>
 </template>
 
 <script setup lang="ts">
 import type { Card } from '~~/types/types'
 
-const { data: card, pending, error } = await useFetch<Card>('/api/card/random')
+const nbCards = 1 // Nombre de cartes à afficher
+const cards = ref<Card[]>([])
+const isFaceUp = ref<boolean[]>([])
 
-const isFaceUp = ref(false)
-const platineOpen = ref(false)
+// Chargement des cartes
+const loadCards = async () => {
+  try {
+    const promises = Array(nbCards).fill(0).map(() =>
+      $fetch<Card>('/api/card/random')
+    )
+    const results = await Promise.all(promises)
+    cards.value = results
+    isFaceUp.value = new Array(nbCards).fill(false)
+  } catch (error) {
+    console.error('Error loading cards:', error)
+  }
+}
+
+// Animation de retournement des cartes
+const flipCards = () => {
+  isFaceUp.value.forEach((_, index) => {
+    setTimeout(() => {
+      isFaceUp.value[index] = true
+    }, 400 * (index + 1))
+  })
+}
+
+onMounted(async () => {
+  await loadCards()
+  setTimeout(flipCards, 600)
+})
 
 useHead({
   title: computed(() =>
-    card.value ? `${card.value.artist} - ${card.value.title}` : 'Loading...'
+    cards.value[0] ? `${cards.value[0].artist} - ${cards.value[0].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 {
+<style lang="scss" scoped>
+.deck {
   @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;
-      }
-    }
-  }
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
 }
-</style>
+</style>