Bucket v0.1

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">