yeah

app/components/Card.vue

@@ -1,56 +1,39 @@
 <template>
-  <article v-bind="attrs" :role="props.role" :draggable="isFaceUp" :class="[
+  <article :role="props.role" :class="[
     'card cursor-pointer',
-    isFaceUp ? 'face-up' : 'face-down',
-    { 'current-track': playerStore.currentTrack?.id === track.id },
-    { 'is-dragging': isDragging }
-  ]" :tabindex="props.tabindex" :aria-disabled="false" @click.stop="handleClick" @keydown.enter.stop="handleClick"
-    @keydown.space.prevent.stop="handleClick" @dragstart="handleDragStart" @dragend="handleDragEnd"
-    @drag="handleDragMove" @touchstart.passive="!isFaceUp" @touchmove.passive="!isFaceUp">
+    isFaceUp ? 'face-up' : 'face-down'
+  ]" :tabindex="props.tabindex" :aria-disabled="false" @click="$emit('click', $event)"
+    @keydown.enter="$emit('click', $event)" @keydown.space.prevent="$emit('click', $event)">
     <div class="flip-inner" ref="cardElement">
       <!-- Face-Up -->
       <main
         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"
-          @click.stop="clickCardSymbol">
+        <div 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 draggable="false" :src="`/${props.track.card?.suit}.svg`" />
+            :class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.card?.suit]">
+            <img :src="`/${props.card?.suit}.svg`" />
           </div>
           <div class="rank text-white font-bold absolute -mt-1">
-            {{ props.track.card?.rank }}
-          </div>
-        </div>
-
-        <div v-else class="flex items-center justify-center size-7 absolute top-6 left-6">
-          <div class="rank text-white font-bold absolute -mt-1">
-            {{ props.track.order }}
+            {{ props.card?.rank }}
           </div>
         </div>
 
         <!-- Cover -->
         <figure class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-xl cursor-pointer">
-          <playButton :objectToPlay="track" />
-          <img draggable="false" v-if="isFaceUp" :src="coverUrl" alt="Pochette de l'album" loading="lazy"
+          <playButton :objectToPlay="card" />
+          <img v-if="isFaceUp" :src="props.card.url_image" alt="Pochette de l'album" loading="lazy"
             class="w-full h-full object-cover object-center" />
         </figure>
 
         <!-- Body -->
         <div
           class="card-body p-3 text-center bg-white rounded-b-xl opacity-0 -mt-16 hover:opacity-100 hover:-mt-0 transition-all duration-300">
-          <div v-if="isOrder" class="label">
-            {{ props.track.order }}
-          </div>
           <h2 class="select-text text-sm text-neutral-500 first-letter:uppercase truncate">
-            {{ props.track.title || 'title' }}
+            {{ props.card.title || 'title' }}
           </h2>
-          <p v-if="isPlaylistTrack && track.artist && typeof track.artist === 'object'"
-            class="select-text text-base text-neutral-800 font-bold capitalize truncate">
-            {{ track.artist.name || 'artist' }}
-          </p>
-          <p v-else-if="isPlaylistTrack" class="select-text text-base text-neutral-800 font-bold capitalize truncate">
-            {{ typeof track.artist === 'string' ? track.artist : 'artist' }}
+          <p class="select-text text-base text-neutral-800 font-bold capitalize truncate">
+            {{ props.card.artist || 'artist' }}
           </p>
         </div>
       </main>
@@ -60,317 +43,35 @@
         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 select-none">
         <figure class="h-full flex text-center rounded-xl justify-center items-center"
           :style="{ backgroundColor: cardColor }">
-          <playButton :objectToPlay="track" />
-          <img draggable="false" src="/face-down.svg" />
+          <playButton :objectToPlay="card" />
+          <img src="/face-down.svg" />
         </figure>
       </footer>
     </div>
   </article>
-
-  <!-- Clone fantôme unifié pour drag souris ET tactile -->
-  <Teleport to="body">
-    <div v-if="isDragging && touchClone" ref="ghostElement"
-      class="ghost-card fixed pointer-events-none z-[9999] w-56 h-80" :style="{
-        left: touchClone.x + 'px',
-        top: touchClone.y + 'px',
-        transform: 'translate(-50%, -50%)'
-      }">
-      <div class="flip-inner">
-        <main
-          class="face-up backdrop-blur-sm border-2 z-10 card w-56 h-80 p-3 rounded-2xl shadow-2xl flex flex-col overflow-hidden bg-white bg-opacity-90">
-
-          <div v-if="isPlaylistTrack" class="flex items-center justify-center size-7 absolute top-7 left-7">
-            <div class="suit text-7xl absolute"
-              :class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.track.card?.suit]">
-              <img draggable="false" :src="`/${props.track.card?.suit}.svg`" />
-            </div>
-            <div class="rank text-white font-bold absolute -mt-1">
-              {{ props.track.card?.rank }}
-            </div>
-          </div>
-          <figure class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-xl">
-            <img draggable="false" :src="coverUrl" alt="Pochette de l'album"
-              class="w-full h-full object-cover object-center" />
-          </figure>
-        </main>
-      </div>
-    </div>
-  </Teleport>
-
-  <!-- Modal de partage -->
-  <ModalSharer v-if="showModalSharer" ref="modalSharer" />
 </template>
 
 <script setup lang="ts">
-import type { Track } from '~~/types/types'
-import { usePlayerStore } from '~/store/player'
-import { useDataStore } from '~/store/data'
-import { useNuxtApp } from '#app'
-import ModalSharer from '~/components/ui/ModalSharer.vue'
+import type { Card } from '~~/types/types'
+
+const emit = defineEmits(['click'])
 
 const props = withDefaults(defineProps<{
-  track: Track;
+  card: Card;
   isFaceUp?: boolean;
   role?: string;
   tabindex?: string | number;
-  'onUpdate:isFaceUp'?: (value: boolean) => void;
 }>(), {
-  isFaceUp: true,
+  isFaceUp: false,
   role: 'button',
   tabindex: '0'
 })
 
-// Use useAttrs to get all other attributes
-const attrs = useAttrs()
+import { getYearColor } from '~/utils/colors'
 
-const modalSharer = ref<InstanceType<typeof ModalSharer> | null>(null)
-const showModalSharer = ref(false)
+const cardColor = computed(() => getYearColor(props.card.year || 0))
+const isRedCard = computed(() => (props.card?.suit === '♥' || props.card?.suit === '♦'))
 
-const emit = defineEmits<{
-  (e: 'update:isFaceUp', value: boolean): void;
-  (e: 'cardClick', track: Track): void;
-  (e: 'clickCardSymbol', track: Track): void;
-  (e: 'dragstart', event: DragEvent): void;
-  (e: 'dragend', event: DragEvent): void;
-  (e: 'drag', event: DragEvent): void;
-  (e: 'click', event: MouseEvent): void;
-}>()
-
-// Handle click events (mouse and keyboard)
-const handleClick = (event: MouseEvent | KeyboardEvent) => {
-  if (!isDragging.value && !hasMovedDuringPress.value) {
-    emit('cardClick', props.track);
-    emit('click', event as MouseEvent);
-  }
-  hasMovedDuringPress.value = false;
-}
-
-const clickCardSymbol = (event: MouseEvent) => {
-  event.stopPropagation();
-
-  // Afficher la modale
-  showModalSharer.value = true;
-
-  // Donner le focus à la modale après le rendu
-  nextTick(() => {
-    if (modalSharer.value) {
-      modalSharer.value.open(props.track);
-    }
-  });
-
-  emit('clickCardSymbol', props.track);
-}
-
-// Handle drag start with proper event emission
-const handleDragStart = (event: DragEvent) => {
-  if (!props.isFaceUp) {
-    event.preventDefault();
-    return;
-  }
-  const { $bodyClass } = useNuxtApp()
-  $bodyClass.add('card-dragging')
-  dragStart(event);
-  emit('dragstart', event);
-}
-
-// Handle drag end with proper event emission
-const handleDragEnd = (event: DragEvent) => {
-  if (!props.isFaceUp) {
-    event.preventDefault();
-    return;
-  }
-  const { $bodyClass } = useNuxtApp()
-  $bodyClass.remove('card-dragging')
-  dragEnd(event);
-  emit('dragend', event);
-}
-
-// Handle drag move with proper event emission
-const handleDragMove = (event: DragEvent) => {
-  if (!props.isFaceUp) {
-    event.preventDefault();
-    return;
-  }
-  dragMove(event);
-  emit('drag', event);
-}
-
-const playerStore = usePlayerStore()
-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(() => props.track.coverId || '/card-dock.svg')
-
-const isDragging = ref(false)
-const cardElement = ref<HTMLElement | null>(null)
-const ghostElement = ref<HTMLElement | null>(null)
-
-// État unifié pour souris et tactile
-const touchClone = ref<{ x: number, y: number } | null>(null)
-const touchStartPos = ref<{ x: number, y: number } | null>(null)
-const longPressTimer = ref<number | null>(null)
-const LONG_PRESS_DURATION = 200 // ms
-const hasMovedDuringPress = ref(false)
-
-
-// Drag desktop - utilise maintenant ghostElement
-const dragStart = (event: DragEvent) => {
-  if (event.dataTransfer && cardElement.value) {
-    event.dataTransfer.effectAllowed = 'move';
-    event.dataTransfer.setData('application/json', JSON.stringify(props.track));
-
-    // Créer une image transparente pour masquer l'image par défaut du navigateur
-    const img = new Image();
-    img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
-    event.dataTransfer.setDragImage(img, 0, 0);
-
-    // Activer le clone fantôme
-    isDragging.value = true
-    touchClone.value = {
-      x: event.clientX,
-      y: event.clientY
-    }
-  }
-};
-
-// Nouveau: suivre le mouvement de la souris pendant le drag
-const dragMove = (event: DragEvent) => {
-  if (isDragging.value && touchClone.value && event.clientX !== 0 && event.clientY !== 0) {
-    touchClone.value = {
-      x: event.clientX,
-      y: event.clientY
-    }
-  }
-}
-
-const instance = getCurrentInstance();
-const dragEnd = (event: DragEvent) => {
-  isDragging.value = false
-  touchClone.value = null
-
-  if (event.dataTransfer?.dropEffect === 'move' && instance?.vnode?.el?.parentNode) {
-    instance.vnode.el.parentNode.removeChild(instance.vnode.el);
-    const parent = instance.parent;
-    if (parent?.update) {
-      parent.update();
-    }
-  }
-}
-
-// Touch events
-const touchStart = (event: TouchEvent) => {
-  const touch = event.touches[0];
-  if (!touch) return;
-
-  touchStartPos.value = { x: touch.clientX, y: touch.clientY };
-  hasMovedDuringPress.value = false;
-
-  // Démarrer un timer pour le long press
-  longPressTimer.value = window.setTimeout(() => {
-    startTouchDrag(touch);
-  }, LONG_PRESS_DURATION);
-}
-
-const startTouchDrag = (touch: Touch) => {
-  if (!touch) return;
-
-  isDragging.value = true;
-  touchClone.value = {
-    x: touch.clientX,
-    y: touch.clientY
-  };
-
-  // Vibration feedback si disponible
-  if (navigator.vibrate) {
-    navigator.vibrate(50);
-  }
-}
-
-const touchMove = (event: TouchEvent) => {
-  const touch = event.touches[0];
-  if (!touch || !longPressTimer.value) return;
-
-  // Annuler le long press si l'utilisateur bouge trop
-  const dx = touch.clientX - (touchStartPos.value?.x || 0);
-  const dy = touch.clientY - (touchStartPos.value?.y || 0);
-  const distance = Math.sqrt(dx * dx + dy * dy);
-
-  if (distance > 10) { // Seuil de tolérance pour un tap
-    clearTimeout(longPressTimer.value)
-    longPressTimer.value = null
-    hasMovedDuringPress.value = true
-  }
-
-  if (isDragging.value && touchClone.value) {
-    event.preventDefault()
-    const touch = event.touches[0]
-    touchClone.value = {
-      x: touch.clientX,
-      y: touch.clientY
-    }
-
-    // Déterminer l'élément sous le doigt
-    checkDropTarget(touch.clientX, touch.clientY)
-  }
-}
-
-const touchEnd = (event: TouchEvent) => {
-  // Annuler le timer de long press
-  if (longPressTimer.value) {
-    clearTimeout(longPressTimer.value);
-    longPressTimer.value = null;
-  }
-
-  // Vérifier si c'était un tap simple (pas de déplacement)
-  if (!hasMovedDuringPress.value && touchStartPos.value) {
-    const touch = event.changedTouches[0];
-    if (touch) {
-      const dx = touch.clientX - touchStartPos.value.x;
-      const dy = touch.clientY - touchStartPos.value.y;
-      const distance = Math.sqrt(dx * dx + dy * dy);
-
-      if (distance < 10) { // Seuil de tolérance pour un tap
-        handleClick(new MouseEvent('click'));
-      }
-    }
-  }
-
-  // Réinitialiser l'état de glisser-déposer
-  if (isDragging.value) {
-    // Vérifier si on est au-dessus d'une cible de dépôt
-    const touch = event.changedTouches[0];
-    if (touch) {
-      checkDropTarget(touch.clientX, touch.clientY);
-    }
-  }
-
-  // Nettoyer
-  isDragging.value = false;
-  touchClone.value = null;
-  touchStartPos.value = null;
-  hasMovedDuringPress.value = false;
-}
-
-const checkDropTarget = (x: number, y: number): HTMLElement | null => {
-  const element = document.elementFromPoint(x, y);
-  if (element) {
-    const dropZone = element.closest('[data-drop-zone]');
-    if (dropZone) {
-      return dropZone as HTMLElement;
-    }
-  }
-  return null;
-}
-
-// Cleanup
-onUnmounted(() => {
-  if (longPressTimer.value) {
-    clearTimeout(longPressTimer.value)
-  }
-})
 </script>
 
 <style lang="scss">
@@ -391,7 +92,6 @@ onUnmounted(() => {
 .card {
   perspective: 1000px;
   @apply transition-all scale-100 w-56 h-80 min-w-56 min-h-80;
-  touch-action: none;
 
   .flip-inner {
     position: relative;
@@ -440,7 +140,7 @@ onUnmounted(() => {
   }
 
   &:focus,
-  &.current-track {
+  &.current-card {
     @apply z-50 scale-110;
     outline: none;
 
@@ -453,7 +153,7 @@ onUnmounted(() => {
   }
 
   &:focus,
-  &.current-track {
+  &.current-card {
     .play-button {
       @apply opacity-100;
     }
@@ -474,7 +174,7 @@ onUnmounted(() => {
   }
 
   .play-button {
-    @apply absolute bottom-1/2 top-24 opacity-0 hover:opacity-100;
+    @apply absolute bottom-1/2 top-28 opacity-0 hover:opacity-100;
   }
 
   .pochette:active,
@@ -498,22 +198,4 @@ onUnmounted(() => {
     }
   }
 }
-
-/* Ghost card styles - maintenant unifié pour souris et tactile */
-.ghost-card {
-  transition: none;
-
-  .card {
-    @apply shadow-2xl scale-95 rotate-6;
-
-    .play-button,
-    .card-body {
-      display: none;
-    }
-  }
-
-  .flip-inner {
-    perspective: 1000px;
-  }
-}
 </style>