toogle cards

app/components/deck/DeckPlaylist.vue

@@ -7,13 +7,8 @@
       </button>
     </div>
     <div class="controls flex justify-center z-50 relative">
-      <button class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors"
-        @click="cardStore.revealAllCards(tracks)">
-        reveal
-      </button>
-      <button class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors"
-        @click="cardStore.hideAllCards(tracks)">
-        hide
+      <button class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors" @click="toggleAllCards">
+        {{ allCardsRevealed ? 'Hide All' : 'Reveal All' }}
       </button>
       <SearchInput @search="onSearch" />
       <SelectCardRank @change="onRankChange" />
@@ -27,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useDataStore } from '~/store/data'
 import { useCardStore } from '~/store/card'
 import { usePlayerStore } from '~/store/player'
@@ -57,6 +52,20 @@ const searchQuery = ref('')
 
 const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)
 
+// Vérifie si toutes les cartes sont révélées
+const allCardsRevealed = computed(() => {
+  return tracks.value.every(track => cardStore.isCardRevealed(track.id))
+})
+
+// Fonction pour basculer l'état de toutes les cartes
+const toggleAllCards = () => {
+  if (allCardsRevealed.value) {
+    cardStore.hideAllCards(tracks.value)
+  } else {
+    cardStore.revealAllCards(tracks.value)
+  }
+}
+
 const closeDatBox = () => {
   uiStore.closeBox()
 }