dupont release

app/pages/index.vue

@@ -1,15 +1,14 @@
 <template>
   <section class="deck">
-    <div v-for="(card, index) in cards" :key="index">
-      <PlayingCard :card="card" :isFaceUp="isFaceUp[index] || false" />
-    </div>
+    <PlayingCard v-for="(card, index) in cards" :key="index" :card="card" :isFaceUp="isFaceUp[index] || false"
+      @click="isFaceUp[index] = true" />
   </section>
 </template>
 
 <script setup lang="ts">
 import type { Card } from '~~/types/types'
 
-const nbCards = 1 // Nombre de cartes à afficher
+const nbCards = Math.floor(Math.random() * 14) + 1 // Nombre de cartes à afficher (aléatoire entre 1 et 15)
 const cards = ref<Card[]>([])
 const isFaceUp = ref<boolean[]>([])
 
@@ -31,7 +30,7 @@ const loadCards = async () => {
 const flipCards = () => {
   isFaceUp.value.forEach((_, index) => {
     setTimeout(() => {
-      isFaceUp.value[index] = true
+      isFaceUp.value[index] = false
     }, 400 * (index + 1))
   })
 }
@@ -50,9 +49,14 @@ useHead({
 
 <style lang="scss" scoped>
 .deck {
-  @apply screen-centered h-screen;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 1fr 1fr 1fr;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  min-height: 100vh;
+
+  .playing-card {
+    margin: 1rem;
+  }
 }
 </style>