add debug mode

app/components/Card.vue

@@ -7,7 +7,8 @@
       <!-- Face-Up -->
       <main
         class="face-up backdrop-blur-sm border-2 z-10 card w-56 h-80 p-3 hover:shadow-xl hover:scale-110 transition-all rounded-2xl shadow-lg flex flex-col overflow-hidden">
-        <div class="flex items-center justify-center size-7 absolute top-7 right-7" v-if="isPlaylistTrack">
+
+        <div v-if="isPlaylistTrack" class="flex items-center justify-center size-7 absolute top-7 right-7">
           <div class="suit text-7xl absolute"
             :class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.track.card?.suit]">
             <img :src="`/${props.track.card?.suit}.svg`" />
@@ -17,31 +18,34 @@
           </div>
         </div>
 
-        <div class="flex items-center justify-center size-7 absolute top-6 left-6" v-else>
+        <div v-else class="flex items-center justify-center size-7 absolute top-6 left-6">
           <div class="rank text-white font-bold absolute -mt-1">
             {{ props.track.order }}
           </div>
         </div>
+
         <!-- Cover -->
+
         <figure class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-t-xl cursor-pointer"
           @click="playerStore.playTrack(track)">
           <playButton :objectToPlay="track" />
           <img v-if="isFaceUp" :src="coverUrl" alt="Pochette de l'album" loading="lazy"
             class="w-full h-full object-cover object-center" />
         </figure>
+
         <!-- Body -->
-        <div class="p-3 text-center bg-white rounded-b-xl">
-          <div class="label" v-if="isOrder">
+
+        <div class="select-text p-3 text-center bg-white rounded-b-xl">
+          <div v-if="isOrder" class="label">
             {{ props.track.order }}
           </div>
           <h2 class="text-sm text-neutral-500 first-letter:uppercase truncate">
             {{ props.track.title }}
           </h2>
-          <p class="text-base text-neutral-800 font-bold capitalize truncate">
-            <template v-if="isPlaylistTrack">
-              {{ props.track.artist.name }}
-            </template>
+          <p v-if="isPlaylistTrack" class="text-base text-neutral-800 font-bold capitalize truncate">
+            {{ props.track.artist.name }}
           </p>
+          {{ props.track.url.split('/')[4]?.split('__')[0] }}
         </div>
       </main>
 

app/components/deck/DeckPlaylist.vue

@@ -5,6 +5,10 @@
       aria-label="close the box">
       close
     </button>
+    <button class="absolute top-24 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
+      @click="cardStore.revealAllCards(tracks)">
+      reveal
+    </button>
     <card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i"
       :is-face-up="isCardRevealed(track.id)" />
   </div>

app/store/card.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-
+import type { Track } from '~~/types/types'
 interface CardPosition {
   x: number
   y: number
@@ -42,6 +42,14 @@ export const useCardStore = defineStore('card', {
       return this.cardPositions[boxId]?.[trackId]
     },
 
+    // Basculer l'état de révélation de toutes les cartes
+    revealAllCards(tracks: Track[]) {
+      tracks.forEach((track) => {
+        this.revealCard(track.id)
+      })
+      this.saveToLocalStorage()
+    },
+
     // Sauvegarder l'état dans le localStorage
     saveToLocalStorage() {
       if (typeof window !== 'undefined') {