bucket + card sharer

app/components/Bucket.vue

@@ -4,22 +4,32 @@
     <div v-if="tracks.length === 0" class="bucket-empty">
       Drop cards here
     </div>
-    <draggable v-else v-model="tracks" item-key="id" class="bucket-cards" @start="onDragStart" @end="onDragEnd"
-      :touch-start-threshold="50">
+    <draggable v-else v-model="tracks" item-key="id" class="bucket-cards" @start="handleDragStart" @end="handleDragEnd"
+      :touch-start-threshold="50" :component-data="{
+        tag: 'div',
+        type: 'transition-group',
+        name: 'list'
+      }">
       <template #item="{ element: track }">
-        <card :track="track" tabindex="0" is-face-up class="bucket-card" @click="flipCard(track)" />
+        <div class="bucket-card-wrapper">
+          <card :track="track" tabindex="0" is-face-up class="bucket-card"
+            @card-click="playerStore.playPlaylistTrack(track)" />
+        </div>
       </template>
     </draggable>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, defineEmits, onMounted } from 'vue'
+import { ref, defineEmits, onMounted } from 'vue'
 import draggable from 'vuedraggable'
-import { useDataStore } from '~/store/data'
+import { useCardStore } from '~/store/card'
+import { usePlayerStore } from '~/store/player'
+
 
 const emit = defineEmits<{
   (e: 'card-dropped', track: any): void
+  (e: 'update:modelValue', value: any[]): void
 }>()
 
 const props = defineProps<{
@@ -27,28 +37,40 @@ const props = defineProps<{
   boxId?: string
 }>()
 
-const dataStore = useDataStore()
+const cardStore = useCardStore()
+const playerStore = usePlayerStore()
 const isDragOver = ref(false)
 const drag = ref(false)
-const tracks = ref<any[]>(props.modelValue || [])
 const bucket = ref()
 
-watch(() => props.modelValue, (newValue) => {
-  if (newValue) {
-    tracks.value = [...newValue]
+// Utilisation du bucket du store comme source de vérité
+const tracks = computed({
+  get: () => cardStore.bucket,
+  set: (value) => {
+    // Update the store when the order changes
+    cardStore.updateBucketOrder(value)
   }
 })
 
-if (props.boxId) {
-  onMounted(async () => {
-    await dataStore.loadData()
-    if (props.boxId) {
-      tracks.value = dataStore.getTracksByboxId(props.boxId)
-    }
-  })
-}
+// Charger les données du localStorage au montage
+onMounted(() => {
+  cardStore.loadBucketFromLocalStorage()
+})
 
 // Gestion du drag and drop desktop
+const handleDragStart = (event: { item: HTMLElement }) => {
+  drag.value = true
+}
+
+const handleDragEnd = (event: { item: HTMLElement; newIndex: number; oldIndex: number }) => {
+  drag.value = false
+  isDragOver.value = false
+  // Update the store with the new order if the position changed
+  if (event.newIndex !== event.oldIndex) {
+    // The store will handle the reordering automatically through the v-model binding
+  }
+}
+
 const onDragEnter = (e: DragEvent) => {
   e.preventDefault()
   isDragOver.value = true
@@ -63,34 +85,19 @@ const onDragLeave = () => {
   isDragOver.value = false
 }
 
-const onDragStart = () => {
-  drag.value = true
-}
-
-const onDragEnd = () => {
-  drag.value = false
-  isDragOver.value = false
-}
-
 const onDrop = (e: DragEvent) => {
   isDragOver.value = false
   const cardData = e.dataTransfer?.getData('application/json')
   if (cardData) {
     try {
       const track = JSON.parse(cardData)
-      if (!tracks.value.some(t => t.id === track.id)) {
-        tracks.value.push(track)
-      }
+      cardStore.addToBucket(track)
     } catch (e) {
       console.error('Erreur lors du traitement de la carte déposée', e)
     }
   }
 }
 
-const flipCard = (track: any) => {
-  track.isFaceUp = !track.isFaceUp
-}
-
 onMounted(() => {
   // Écouter aussi les événements tactiles personnalisés
   bucket.value?.addEventListener('card-dropped-touch', (e: CustomEvent) => {
@@ -99,14 +106,12 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style>
 .bucket {
   min-height: 200px;
-  border: 2px dashed #ccc;
   border-radius: 8px;
   padding: 1rem;
   transition: all 0.3s ease;
-  background-color: rgba(255, 255, 255, 0.1);
   touch-action: none;
 }
 
@@ -125,9 +130,8 @@ onMounted(() => {
 }
 
 .bucket-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 1rem;
+  display: flex;
+  justify-content: center;
   width: 100%;
 }
 
@@ -145,4 +149,19 @@ onMounted(() => {
 .bucket-card:active {
   opacity: 0.7;
 }
+
+.bucket-card-wrapper {
+  width: 70px;
+  transition: width 0.3s ease;
+}
+
+.bucket:hover,
+.card-dragging {
+  border: 2px dashed #ccc;
+  background-color: rgba(255, 255, 255, 0.4);
+
+  .bucket-card-wrapper {
+    width: 280px;
+  }
+}
 </style>