Bucket v0.1

app/components/deck/DeckPlaylist.vue

@@ -5,6 +5,7 @@
         class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50" aria-label="close the box">
         close
       </button>
+      <Bucket v-model="bucketCards" @card-dropped="onCardDropped" />
     </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">
@@ -27,7 +28,7 @@ import { useDataStore } from '~/store/data'
 import { useCardStore } from '~/store/card'
 import { usePlayerStore } from '~/store/player'
 import { useUiStore } from '~/store/ui'
-import type { Box } from '~~/types/types'
+import type { Box, Track } from '~~/types/types'
 import SelectCardSuit from '~/components/ui/SelectCardSuit.vue'
 import SelectCardRank from '~/components/ui/SelectCardRank.vue'
 import SearchInput from '~/components/ui/SearchInput.vue'
@@ -44,6 +45,7 @@ const uiStore = useUiStore()
 const deck = ref()
 const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
 const filteredTracks = ref(tracks.value)
+const bucketCards = ref([])
 
 // Variables réactives pour les filtres
 const selectedSuit = ref('')
@@ -75,6 +77,11 @@ 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()