imporve cards animations

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: () => {