imporve cards animations

app/components/Box.vue

@@ -133,7 +133,12 @@ function applyColor() {
 // --- Rotation complète ---
 function rotateBox() {
   if (!domBox.value) return
+
+  rotateX.value = -20
+
+
   rotateY.value = rotateY.value === 20 ? 380 : 20
+
   applyTransform(0.8)
 }
 

app/components/Boxes.vue

@@ -1,15 +1,11 @@
 <template>
   <div class="boxes" :class="{ 'box-selected': uiStore.isBoxSelected }">
-    <button @click="uiStore.closeBox" v-if="uiStore.isBoxSelected"
-      class="absolute top-10 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
-      aria-label="close the box">
-      close
-    </button>
     <box v-for="(box, i) in dataStore.boxes" :key="box.id" :tabindex="dataStore.boxes.length - i"
       :box="getBoxToDisplay(box)" @click="openBox(box)" class="text-center" :class="box.state" :id="box.id">
       <playButton @click.stop="playSelectedBox(box)" :objectToPlay="box" class="relative z-40 m-auto" />
       <template v-if="box.state === 'box-selected'">
-        <deckCompilation :box="getBoxToDisplay(box)" class="box-page" v-if="box.type === 'compilation'" @click.stop />
+        <deckCompilation :box="getBoxToDisplay(box)" class="box-page" v-if="box.type === 'compilation'"
+          :key="`${box.id}-${box.activeSide}`" @click.stop />
         <deckPlaylist :box="box" class="box-page" v-if="box.type === 'playlist'" @click.stop />
       </template>
     </box>

app/components/Card.vue

@@ -16,11 +16,18 @@
             {{ props.track.card?.rank }}
           </div>
         </div>
+
+        <div class="flex items-center justify-center size-7 absolute top-6 left-6" v-else>
+          <div class="rank text-white font-bold absolute -mt-1">
+            {{ props.track.order }}
+          </div>
+        </div>
         <!-- Cover -->
         <figure class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-t-xl cursor-pointer"
           @click="playerStore.playTrack(track)">
           <playButton :objectToPlay="track" />
-          <img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
+          <img v-if="isFaceUp" :src="coverUrl" alt="Pochette de l'album" loading="lazy"
+            class="w-full h-full object-cover object-center" />
         </figure>
         <!-- Body -->
         <div class="p-3 text-center bg-white rounded-b-xl">
@@ -63,9 +70,12 @@ 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 coverUrl = props.track.coverId.startsWith('http')
-  ? props.track.coverId
-  : `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`
+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`
+})
 </script>
 
 <style lang="scss">
@@ -138,7 +148,7 @@ const coverUrl = props.track.coverId.startsWith('http')
     @apply z-50;
 
     .face-up {
-      @apply shadow-2xl-custom;
+      @apply shadow-none;
       transition:
         box-shadow 0.6s,
         transform 0.6s;

app/components/CinemaScreen.vue

@@ -0,0 +1,3 @@
+<template>
+  <video class="fixed h-full w-full object-cover" ref="video" muted autoplay src=""></video>
+</template>

app/components/PlayButton.vue

@@ -1,9 +1,7 @@
 <template>
   <button
     class="play-button rounded-full size-24 flex items-center justify-center text-esyellow backdrop-blur-sm bg-black/25 transition-all duration-200 ease-in-out transform active:scale-90 scale-110 text-4xl font-bold"
-    :class="{ loading: isLoading }"
-    :disabled="isLoading"
-  >
+    :class="{ loading: isLoading }" :disabled="isLoading">
     <template v-if="isLoading">
       <img src="/loader.svg" alt="Chargement" class="size-16" />
     </template>
@@ -20,26 +18,40 @@ import type { Box, Track } from '~/../types/types'
 const playerStore = usePlayerStore()
 const props = defineProps<{ objectToPlay: Box | Track }>()
 
+const isCurrentBox = computed(() => {
+  if ('activeSide' in props.objectToPlay) {
+    // Vérifier si la piste courante appartient à cette box
+    if (playerStore.currentTrack?.boxId === props.objectToPlay.id) {
+      // Si c'est une compilation, on vérifie le side actif
+      if (props.objectToPlay.type === 'compilation') {
+        return playerStore.currentTrack.side === props.objectToPlay.activeSide
+      }
+      return true
+    }
+    return false
+  }
+  return false
+})
+
+const isCurrentTrack = computed(() => {
+  if (!('activeSide' in props.objectToPlay)) {
+    return playerStore.currentTrack?.id === props.objectToPlay.id
+  }
+  return false
+})
+
 const isPlaying = computed(() => {
-  if (!playerStore.currentTrack) return false
-  return (
-    playerStore.isPlaying &&
-    (playerStore.currentTrack?.boxId === props.objectToPlay.id ||
-      playerStore.currentTrack?.id === props.objectToPlay.id)
-  )
+  return playerStore.isPlaying && (isCurrentTrack.value || isCurrentBox.value)
 })
 
 const isLoading = computed(() => {
-  if (!playerStore.currentTrack || !playerStore.isLoading) return false
-  return (
-    playerStore.currentTrack.boxId === props.objectToPlay.id ||
-    playerStore.currentTrack.id === props.objectToPlay.id
-  )
+  return playerStore.isLoading && (isCurrentTrack.value || isCurrentBox.value)
 })
 </script>
 
 <style>
-.loading {
+.loading,
+.play-button-changed {
   opacity: 1 !important;
 }
 </style>

app/components/deck/DeckCompilation.vue

@@ -1,22 +1,22 @@
 <template>
   <div>
+    <button @click="closeDatBox" v-if="uiStore.isBoxSelected"
+      class="absolute top-10 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
+      aria-label="close the box">
+      close
+    </button>
+    <div class="fixed bg-black text-white p-2 z-50">
+      {{ playerStore.history }}
+    </div>
     <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
       <card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i"
         :is-face-up="isCardRevealed(track.id)" />
     </div>
     <ul>
       <li>
-        <button @click="distribute">distribute</button>
-        <button @click="halfOutside">halfOutside</button>
         <button @click="backToBox">backToBox</button>
-        <button @click="selectSide('A')" class="px-4 py-2 text-black"
-          :class="{ 'bg-white text-black': props.box.activeSide === 'A' }">
-          Side A
-        </button>
-        <button @click="selectSide('B')" class="px-4 py-2"
-          :class="{ 'bg-white text-black': props.box.activeSide === 'B' }">
-          Side B
-        </button>
+        <button @click="toggleCards">toggleCards</button>
+        <button @click="switchSide">Face {{ box.activeSide }}</button>
       </li>
     </ul>
   </div>
@@ -26,8 +26,11 @@
 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'
 
+const uiStore = useUiStore()
+
 const props = defineProps<{
   box: Box
 }>()
@@ -48,7 +51,7 @@ const distribute = () => {
     setTimeout(() => {
       card.classList.remove('half-outside')
       card.classList.add('outside')
-    }, 500 + (index * 100)) // 1s delay + 200ms per card
+    }, index * 12)
   })
 }
 
@@ -65,11 +68,43 @@ const backToBox = () => {
   })
 }
 
-// Fonction pour sélectionner un côté (A ou B)
-const selectSide = (side: 'A' | 'B') => {
-  dataStore.setActiveSideByBoxId(props.box.id, side)
+const toggleCards = () => {
+  if (document.querySelector('.card.outside')) {
+    halfOutside()
+  } else {
+    distribute()
+  }
 }
 
+const initDeck = () => {
+  setTimeout(() => {
+    if (!playerStore.isCurrentBox(props.box)) {
+      halfOutside()
+    }
+  }, 800)
+  if (playerStore.isCurrentBox(props.box)) {
+    distribute()
+  }
+}
+// Fonction pour sélectionner un côté (A ou B)
+const switchSide = () => {
+  dataStore.setActiveSideByBoxId(props.box.id, props.box.activeSide === 'A' ? 'B' : 'A')
+  initDeck()
+}
+
+const closeDatBox = () => {
+  backToBox()
+  setTimeout(() => {
+    uiStore.closeBox()
+  }, 300)
+}
+
+onMounted(() => {
+  // if is a track change do not init
+
+  initDeck()
+})
+
 </script>
 
 <style lang="scss" scoped>
@@ -79,74 +114,82 @@ const selectSide = (side: 'A' | 'B') => {
   .card {
     position: absolute;
     top: 0;
+    right: calc(50% - 120px);
     z-index: 1;
     transition: all 0.5s ease;
     will-change: transform;
     display: block;
     z-index: 2;
-    translate: 70px 40px;
-    transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg);
     opacity: 0;
-
-    // hide the wildcard (joker / hidden-track)
-    // &:nth-child(11) {
-    //   display: none;
-    // }
+    translate: 0 0;
+    transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(40px, 0, 0);
 
     // half outside the box
     &.half-outside {
       opacity: 1;
       top: 0;
-      right: auto;
 
       &:nth-child(1) {
         translate: 120px 20px;
         transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, -100px, 0);
       }
 
-      &:nth-child(3) {
+      &:nth-child(2) {
         translate: 150px 20px;
         transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, -40px, 0);
       }
 
-      &:nth-child(5) {
+      &:nth-child(3) {
         translate: 190px 20px;
         transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 30px, 0);
       }
 
-      &:nth-child(7) {
+      &:nth-child(4) {
         translate: 240px 20px;
         transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 120px, 0);
       }
 
-      &:nth-child(9) {
+      &:nth-child(5) {
         translate: 280px 20px;
         transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 200px, 0);
       }
 
+      &:nth-child(6),
+      &:nth-child(7),
+      &:nth-child(8),
+      &:nth-child(9),
+      &:nth-child(10),
       &:nth-child(11) {
-        translate: 310px 20px;
-        transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 260px, 0);
+        opacity: 0;
+      }
+
+      &.current-track {
+        @apply shadow-none
       }
     }
 
     // outside the box
     &.outside {
       opacity: 1;
-      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 0);
       top: 50%;
-      right: 66%;
+      right: calc(50% + 320px);
+      @apply translate-y-40;
+
+      &:hover {
+        @apply z-40 translate-y-32;
+      }
+
+      &.current-track {
+        @apply z-30 translate-y-28;
+      }
 
       @for $i from 0 through 10 {
         &:nth-child(#{$i + 1}) {
-          translate: calc(#{$i + 1} * 20%);
+          translate: calc(#{$i + 1} * 33%);
         }
       }
     }
-
-    &.current-track {
-      // z-index: 10;
-    }
   }
 }
 </style>

app/components/deck/DeckPlaylist.vue

@@ -1,16 +1,12 @@
 <template>
-  <div
-    ref="deck"
-    class="deck flex flex-wrap justify-center gap-4"
-    :class="{ 'pb-36': playerStore.currentTrack }"
-  >
-    <card
-      v-for="(track, i) in tracks"
-      :key="track.id"
-      :track="track"
-      tabindex="i"
-      :is-face-up="isCardRevealed(track.id)"
-    />
+  <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
+    <button @click="closeDatBox" v-if="uiStore.isBoxSelected"
+      class="absolute top-10 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
+      aria-label="close the box">
+      close
+    </button>
+    <card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i"
+      :is-face-up="isCardRevealed(track.id)" />
   </div>
 </template>
 
@@ -19,6 +15,7 @@ import { computed, ref } from 'vue'
 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'
 
 const props = defineProps<{
@@ -28,9 +25,14 @@ const props = defineProps<{
 const cardStore = useCardStore()
 const dataStore = useDataStore()
 const playerStore = usePlayerStore()
+const uiStore = useUiStore()
 
 const deck = ref()
 const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
 
 const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)
+
+const closeDatBox = () => {
+  uiStore.closeBox()
+}
 </script>