Bucket v0.1

app/components/Bucket.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="bucket" :class="{ 'drag-over': isDragOver }" @dragenter.prevent="onDragEnter"
+    @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop">
+    <div class="bucket-content">
+      <div v-if="cards.length === 0" class="bucket-empty">
+        Drop cards here
+      </div>
+      <div v-else class="bucket-cards">
+        <Card v-for="(card, index) in cards" :key="index" :track="card" class="bucket-card" isFaceUp />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps<{
+  modelValue?: any[]
+}>()
+
+const emit = defineEmits(['update:modelValue', 'card-dropped'])
+
+const isDragOver = ref(false)
+const cards = ref<any[]>(props.modelValue || [])
+
+// Mettre à jour les cartes quand la prop change
+watch(() => props.modelValue, (newValue) => {
+  if (newValue) {
+    cards.value = [...newValue]
+  }
+})
+
+const onDragEnter = (e: DragEvent) => {
+  e.preventDefault()
+  isDragOver.value = true
+}
+
+const onDragOver = (e: DragEvent) => {
+  e.preventDefault()
+  isDragOver.value = true
+}
+
+const onDragLeave = () => {
+  isDragOver.value = false
+}
+
+const onDrop = (e: DragEvent) => {
+  isDragOver.value = false
+
+  // Récupérer les données de la carte depuis l'événement de glisser
+  const cardData = e.dataTransfer?.getData('application/json')
+  if (cardData) {
+    try {
+      const card = JSON.parse(cardData)
+      cards.value = [...cards.value, card]
+      emit('update:modelValue', cards.value)
+      emit('card-dropped', card)
+    } catch (e) {
+      console.error('Invalid card data', e)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bucket {
+  width: 120px;
+  min-height: 160px;
+  border: 2px dashed #ccc;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f9f9f9;
+  transition: all 0.2s ease;
+  padding: 1rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.bucket.drag-over {
+  border-color: #4f46e5;
+  background-color: #eef2ff;
+  transform: scale(1.02);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.bucket-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.bucket-empty {
+  color: #9ca3af;
+  text-align: center;
+  padding: 1rem;
+}
+
+.bucket-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.bucket-card {
+  background: white;
+  border-radius: 4px;
+  padding: 0.5rem;
+  font-size: 0.8rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

app/components/Card.vue

@@ -5,13 +5,13 @@
   ]">
     <div class="flip-inner">
       <!-- Face-Up -->
-      <main
+      <main draggable="true" @dragstart="dragStart" @dragend="dragEnd"
         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 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`" />
+            <img draggable="false" :src="`/${props.track.card?.suit}.svg`" />
           </div>
           <div class="rank text-white font-bold absolute -mt-1">
             {{ props.track.card?.rank }}
@@ -29,7 +29,7 @@
         <figure class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-xl cursor-pointer"
           @click="playerStore.playTrack(track)">
           <playButton :objectToPlay="track" />
-          <img v-if="isFaceUp" :src="coverUrl" alt="Pochette de l'album" loading="lazy"
+          <img draggable="false" v-if="isFaceUp" :src="coverUrl" alt="Pochette de l'album" loading="lazy"
             class="w-full h-full object-cover object-center" />
         </figure>
 
@@ -56,9 +56,10 @@
       <footer
         class="face-down backdrop-blur-sm z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
         <figure @click.stop="playerStore.playTrack(track)"
-          class="h-full flex text-center bg-slate-800 rounded-xl justify-center cursor-pointer">
+          class="h-full flex text-center rounded-xl justify-center cursor-pointer"
+          :style="{ backgroundColor: cardColor }">
           <playButton :objectToPlay="track" />
-          <img src="/face-down.svg" />
+          <img draggable="false" src="/face-down.svg" />
         </figure>
       </footer>
     </div>
@@ -68,6 +69,7 @@
 <script setup lang="ts">
 import type { Track } from '~~/types/types'
 import { usePlayerStore } from '~/store/player'
+import { useDataStore } from '~/store/data';
 
 const props = withDefaults(defineProps<{ track: Track; isFaceUp?: boolean }>(), {
   isFaceUp: false
@@ -77,12 +79,26 @@ const isManifesto = computed(() => props.track.boxId.startsWith('ES00'))
 const isOrder = computed(() => props.track.order && !isManifesto)
 const isPlaylistTrack = computed(() => props.track.type === 'playlist')
 const isRedCard = computed(() => props.track.card?.suit === '♥' || props.track.card?.suit === '♦')
+const dataStore = useDataStore()
+const cardColor = computed(() => dataStore.getYearColor(props.track.year || 0))
 const coverUrl = computed(() => {
   if (!props.track.coverId) return ''
   return props.track.coverId.startsWith('http')
     ? props.track.coverId
     : `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`
 })
+
+const dragStart = (event: DragEvent) => {
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData('application/json', JSON.stringify(props.track));
+  }
+};
+
+const dragEnd = (event: DragEvent) => {
+  console.log('drag end');
+}
+
 </script>
 
 <style lang="scss">

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()