imporve cards animations

app/app.vue

@@ -71,10 +71,6 @@ input {
   @apply px-4 py-2 m-4 rounded-md text-center font-bold;
 }
 
-button {
-  /* @apply bg-esyellow text-slate-700; */
-}
-
 input[type='email'] {
   @apply bg-slate-900 text-esyellow;
 }

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')
+const coverUrl = computed(() => {
-  ? props.track.coverId
+  if (!props.track.coverId) return ''
-  : `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`
+  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 }"
+    :class="{ loading: isLoading }" :disabled="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 && (isCurrentTrack.value || isCurrentBox.value)
-  return (
-    playerStore.isPlaying &&
-    (playerStore.currentTrack?.boxId === props.objectToPlay.id ||
-      playerStore.currentTrack?.id === props.objectToPlay.id)
-  )
 })
 
 const isLoading = computed(() => {
-  if (!playerStore.currentTrack || !playerStore.isLoading) return false
+  return playerStore.isLoading && (isCurrentTrack.value || isCurrentBox.value)
-  return (
-    playerStore.currentTrack.boxId === props.objectToPlay.id ||
-    playerStore.currentTrack.id === props.objectToPlay.id
-  )
 })
 </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"
+        <button @click="toggleCards">toggleCards</button>
-          :class="{ 'bg-white text-black': props.box.activeSide === 'A' }">
+        <button @click="switchSide">Face {{ box.activeSide }}</button>
-          Side A
-        </button>
-        <button @click="selectSide('B')" class="px-4 py-2"
-          :class="{ 'bg-white text-black': props.box.activeSide === 'B' }">
-          Side B
-        </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 toggleCards = () => {
-const selectSide = (side: 'A' | 'B') => {
+  if (document.querySelector('.card.outside')) {
-  dataStore.setActiveSideByBoxId(props.box.id, side)
+    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;
-
+    translate: 0 0;
-    // hide the wildcard (joker / hidden-track)
+    transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(40px, 0, 0);
-    // &:nth-child(11) {
-    //   display: none;
-    // }
 
     // 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;
+        opacity: 0;
-        transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 260px, 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
+  <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
-    ref="deck"
+    <button @click="closeDatBox" v-if="uiStore.isBoxSelected"
-    class="deck flex flex-wrap justify-center gap-4"
+      class="absolute top-10 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
-    :class="{ 'pb-36': playerStore.currentTrack }"
+      aria-label="close the box">
-  >
+      close
-    <card
+    </button>
-      v-for="(track, i) in tracks"
+    <card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i"
-      :key="track.id"
+      :is-face-up="isCardRevealed(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>

app/layouts/default.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="w-full flex flex-col items-center">
-    <!-- Header avec logo -->
     <slot />
-    <!-- Player de musique fixe en bas -->
     <searchModal />
     <loader />
     <Player class="w-full border-t border-gray-200" />
+    <CinemaScreen />
   </div>
 </template>

app/store/card.ts

@@ -1,5 +1,4 @@
 import { defineStore } from 'pinia'
-import type { Track } from '~/../types/types'
 
 interface CardPosition {
   x: number

app/store/data.ts

@@ -64,6 +64,11 @@ export const useDataStore = defineStore('data', {
         return state.boxes.find((box) => box.id === id)
       }
     },
+    getTrackById: (state) => {
+      return (id: string) => {
+        return state.tracks.find((track) => track.id === id)
+      }
+    },
     getTracksByboxId: (state) => (id: string, side?: 'A' | 'B') => {
       const box = state.boxes.find((box) => box.id === id)
       if (box?.type !== 'compilation' || !side) {

app/store/player.ts

@@ -11,7 +11,8 @@ export const usePlayerStore = defineStore('player', {
     audio: null as HTMLAudioElement | null,
     progressionLast: 0,
     isPlaying: false,
-    isLoading: false
+    isLoading: false,
+    history: [] as string[]
   }),
 
   actions: {
@@ -56,7 +57,7 @@ export const usePlayerStore = defineStore('player', {
 
     async playBox(box: Box) {
       // Si c'est la même box, on toggle simplement la lecture
-      if (this.currentTrack?.boxId === box.id) {
+      if (this.currentTrack?.boxId === box.id && this.currentTrack?.side === box.activeSide) {
         this.togglePlay()
         return
       }
@@ -188,6 +189,7 @@ export const usePlayerStore = defineStore('player', {
 
         // Lancer la lecture
         await audio.play()
+        this.history.push(this.currentTrack?.id)
         this.isLoading = false
       } catch (error) {
         console.error('Error loading/playing track:', error)
@@ -263,7 +265,17 @@ export const usePlayerStore = defineStore('player', {
 
   getters: {
     isCurrentBox: (state) => {
-      return (boxId: string) => boxId === state.currentTrack?.boxId
+      return (box: Box) => {
+        if (box.type === 'compilation') {
+          return box.id === state.currentTrack?.boxId && box.activeSide === state.currentTrack?.side
+        } else {
+          return box.id === state.currentTrack?.boxId
+        }
+      }
+    },
+
+    isCurrentSide: (state) => {
+      return (side: string) => side === state.currentTrack?.side
     },
 
     isPlaylistTrack: () => {

public/play.svg

@@ -1,64 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg data-encore-id="icon" role="img" aria-hidden="true" class="e-91000-icon e-91000-baseline" viewBox="0 0 24 24"><path d="m7.05 3.606 13.49 7.788a.7.7 0 0 1 0 1.212L7.05 20.394A.7.7 0 0 1 6 19.788V4.212a.7.7 0 0 1 1.05-.606"></path></svg>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-
-<svg
-   fill="#000000"
-   height="800px"
-   width="800px"
-   version="1.1"
-   id="Capa_1"
-   viewBox="0 0 60 60"
-   xml:space="preserve"
-   sodipodi:docname="play.svg"
-   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
-   id="defs2">
-	
-	
-</defs><sodipodi:namedview
-   id="namedview2"
-   pagecolor="#505050"
-   bordercolor="#eeeeee"
-   borderopacity="1"
-   inkscape:showpageshadow="0"
-   inkscape:pageopacity="0"
-   inkscape:pagecheckerboard="0"
-   inkscape:deskcolor="#505050"
-   inkscape:zoom="0.26793938"
-   inkscape:cx="-141.82313"
-   inkscape:cy="227.66344"
-   inkscape:window-width="1920"
-   inkscape:window-height="1011"
-   inkscape:window-x="0"
-   inkscape:window-y="0"
-   inkscape:window-maximized="1"
-   inkscape:current-layer="Capa_1" />
-
-<g
-   id="g4"
-   transform="translate(9.7969913,-22.06049)"><circle
-     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.453259;stroke-miterlimit:2.3;stroke-dasharray:0.0906518, 0.498583;stroke-opacity:1"
-     id="path3"
-     cx="20.203009"
-     cy="52.06049"
-     r="30" /><path
-     sodipodi:type="star"
-     style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:4.97313;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2.3;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
-     id="path4"
-     inkscape:flatsided="false"
-     sodipodi:sides="3"
-     sodipodi:cx="-27.198643"
-     sodipodi:cy="-1.6298811"
-     sodipodi:r1="22.807875"
-     sodipodi:r2="11.403937"
-     sodipodi:arg1="1.2575201"
-     sodipodi:arg2="2.3047177"
-     inkscape:rounded="0"
-     inkscape:randomized="0"
-     d="M -20.169779,20.067912 -34.836847,6.838154 -49.503915,-6.3916032 l 18.790841,-6.0871748 18.790839,-6.087174 -4.123772,19.31693243 z"
-     inkscape:transform-center-x="-3.9722134"
-     inkscape:transform-center-y="0.040241052"
-     transform="matrix(0.21341126,-0.77168628,0.66871372,0.24627362,26.125303,31.432826)" /></g></svg>

types/types.ts

@@ -1,5 +1,5 @@
 // types.ts
-export type BoxType = 'playlist' | 'compilation' | 'userPlaylist'
+export type BoxType = 'playlist' | 'compilation'
 
 export interface BoxSide {
   duration: number