draggable / touchable card v0.1

app/components/deck/Playlist.vue

@@ -6,9 +6,6 @@
     </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="toggleAllCards">
-      {{ allCardsRevealed ? 'Hide All' : 'Reveal All' }}
-    </button>
     <SearchInput @search="onSearch" />
     <SelectCardRank @change="onRankChange" />
     <SelectCardSuit @change="onSuitChange" />
@@ -17,10 +14,6 @@
     <card v-for="(track, i) in filteredTracks" :key="track.id" :track="track" :tabindex="i"
       :is-face-up="isCardRevealed(track.id)" />
   </div>
-  <div class="dock">
-    <Bucket @card-dropped="onCardDropped" />
-    <Platine />
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -52,20 +45,10 @@ const selectedSuit = ref('')
 const selectedRank = ref('')
 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 isCardRevealed = (trackId: number) => {
+  // Si une recherche est en cours, révéler automatiquement les cartes correspondantes
+  if (searchQuery.value) return true
+  return cardStore.isCardRevealed(trackId)
 }
 
 const closeDatBox = () => {
@@ -77,11 +60,6 @@ const onSuitChange = (suit: string) => {
   applyFilters()
 }
 
-const onCardDropped = (card: Track) => {
-  console.log('Carte déposée dans le bucket:', card)
-  // Vous pouvez ajouter ici la logique pour supprimer la carte de la liste actuelle si nécessaire
-}
-
 const onRankChange = (rank: string) => {
   selectedRank.value = rank
   applyFilters()
@@ -124,3 +102,14 @@ const applyFilters = () => {
   filteredTracks.value = result
 }
 </script>
+
+<style>
+.deck {
+  position: relative;
+}
+
+.docked {
+  position: fixed;
+  bottom: 0;
+}
+</style>