bucket + card sharer

app/store/card.ts

@@ -1,12 +1,23 @@
 import { defineStore } from 'pinia'
 import type { Track } from '~~/types/types'
+
 export const useCardStore = defineStore('card', {
   state: () => ({
     // Stocke les IDs des cartes déjà révélées
-    revealedCards: new Set<number>()
+    revealedCards: new Set<number>(),
+    // Stocke les pistes dans le panier
+    bucket: [] as Track[],
+    // Stocke l'état d'ouverture du panier
+    isBucketOpen: false
   }),
 
   actions: {
+    // Mettre à jour l'ordre des pistes dans le panier
+    updateBucketOrder(newOrder: Track[]) {
+      this.bucket = [...newOrder]
+      this.saveBucketToLocalStorage()
+    },
+
     // Marquer une carte comme révélée
     revealCard(trackId: number) {
       this.revealedCards.add(trackId)
@@ -18,9 +29,12 @@ export const useCardStore = defineStore('card', {
       this.saveToLocalStorage()
     },
 
-    // Vérifier si une carte est révélée
-    isCardRevealed(trackId: number): boolean {
-      return this.revealedCards.has(trackId)
+    flipCard(track: any) {
+      if (this.isRevealed(track.id)) {
+        this.hideCard(track.id)
+      } else {
+        this.revealCard(track.id)
+      }
     },
 
     // Basculer l'état de révélation de toutes les cartes
@@ -76,6 +90,64 @@ export const useCardStore = defineStore('card', {
     // Initialiser le store
     initialize() {
       this.loadFromLocalStorage()
+    },
+
+    // Gestion du panier
+    addToBucket(track: Track) {
+      // Vérifie si la piste n'est pas déjà dans le panier
+      if (!this.bucket.some((item) => item.id === track.id)) {
+        this.bucket.push(track)
+        this.saveBucketToLocalStorage()
+      }
+    },
+
+    removeFromBucket(trackId: number) {
+      const index = this.bucket.findIndex((item) => item.id === trackId)
+      if (index !== -1) {
+        this.bucket.splice(index, 1)
+        this.saveBucketToLocalStorage()
+      }
+    },
+
+    clearBucket() {
+      this.bucket = []
+      this.saveBucketToLocalStorage()
+    },
+
+    toggleBucket() {
+      this.isBucketOpen = !this.isBucketOpen
+    },
+
+    // Sauvegarder le panier dans le localStorage
+    saveBucketToLocalStorage() {
+      if (typeof window !== 'undefined') {
+        try {
+          localStorage.setItem('cardStoreBucket', JSON.stringify(this.bucket))
+        } catch (e) {
+          console.error('Failed to save bucket to localStorage', e)
+        }
+      }
+    },
+
+    // Charger le panier depuis le localStorage
+    loadBucketFromLocalStorage() {
+      if (typeof window !== 'undefined') {
+        try {
+          const saved = localStorage.getItem('cardStoreBucket')
+          if (saved) {
+            const bucket = JSON.parse(saved)
+            if (Array.isArray(bucket)) {
+              this.bucket = bucket
+            }
+          }
+        } catch (e) {
+          console.error('Failed to load bucket from localStorage', e)
+        }
+      }
+    },
+    // Vérifier si une carte est révélée
+    isCardRevealed(trackId: number): boolean {
+      return this.revealedCards.has(trackId)
     }
   },
 
@@ -83,6 +155,17 @@ export const useCardStore = defineStore('card', {
     // Getter pour la réactivité dans les templates
     isRevealed: (state) => (trackId: number) => {
       return state.revealedCards.has(trackId)
+    },
+
+    // Getters pour le panier
+    bucketCount: (state) => state.bucket.length,
+
+    isInBucket: (state) => (trackId: number) => {
+      return state.bucket.some((track) => track.id === trackId)
+    },
+
+    bucketTotalDuration: (state) => {
+      return state.bucket.reduce((total, track) => total + ((track as any).duration || 0), 0)
     }
   }
 })

app/store/platine.ts

@@ -0,0 +1,169 @@
+import { defineStore } from 'pinia'
+import type { Track } from '~~/types/types'
+import Disc from '~/platine-tools/disc'
+import Sampler from '~/platine-tools/sampler'
+import { useCardStore } from '~/store/card'
+
+export const usePlatineStore = defineStore('platine', () => {
+  // State
+  const currentTrack = ref<Track | null>(null)
+  const isPlaying = ref(false)
+  const isLoadingTrack = ref(false)
+  const isFirstDrag = ref(true)
+  const progressPercentage = ref(0)
+  const currentTurns = ref(0)
+  const totalTurns = ref(0)
+  const isMuted = ref(false)
+
+  // Refs pour les instances
+  const disc = ref<Disc | null>(null)
+  const sampler = ref<Sampler | null>(null)
+  const discRef = ref<HTMLElement>()
+
+  // Actions
+  const initPlatine = (element: HTMLElement) => {
+    discRef.value = element
+    disc.value = new Disc(element)
+    sampler.value = new Sampler()
+
+    // Configurer les callbacks du disque
+    if (disc.value) {
+      disc.value.callbacks.onStop = () => {
+        sampler.value?.pause()
+      }
+
+      disc.value.callbacks.onDragStart = () => {
+        if (isFirstDrag.value) {
+          isFirstDrag.value = false
+          togglePlay()
+          if (sampler.value && disc.value) {
+            sampler.value.play(disc.value.secondsPlayed)
+            disc.value.powerOn()
+          }
+        }
+      }
+
+      disc.value.callbacks.onDragEnded = () => {
+        if (!isPlaying.value) return
+        sampler.value?.play(disc.value?.secondsPlayed || 0)
+      }
+
+      disc.value.callbacks.onLoop = ({ playbackSpeed, isReversed, secondsPlayed }) => {
+        sampler.value?.updateSpeed(playbackSpeed, isReversed, secondsPlayed)
+        updateTurns()
+      }
+    }
+  }
+
+  const updateTurns = () => {
+    if (!disc.value) return
+
+    currentTurns.value = disc.value.secondsPlayed * 0.75
+    totalTurns.value = (disc.value as any)._duration * 0.75
+    progressPercentage.value = Math.min(
+      100,
+      (disc.value.secondsPlayed / (disc.value as any)._duration) * 100
+    )
+  }
+
+  const loadTrack = async (track: Track) => {
+    const cardStore = useCardStore()
+    if (!sampler.value || !track) return
+
+    currentTrack.value = track
+    isLoadingTrack.value = true
+
+    try {
+      await sampler.value.loadTrack(track.url)
+      if (disc.value) {
+        disc.value.setDuration(sampler.value.duration)
+        updateTurns()
+        play()
+      }
+    } finally {
+      isLoadingTrack.value = false
+      cardStore.revealCard(track.id)
+    }
+  }
+
+  const play = (position = 0) => {
+    if (!disc.value || !sampler.value || !currentTrack.value) return
+
+    isPlaying.value = true
+    sampler.value.play(position)
+    disc.value.powerOn()
+  }
+
+  const pause = () => {
+    if (!disc.value || !sampler.value) return
+
+    isPlaying.value = false
+    sampler.value.pause()
+    disc.value.powerOff()
+  }
+
+  const togglePlay = () => {
+    if (isPlaying.value) {
+      pause()
+    } else {
+      play()
+    }
+  }
+
+  const toggleMute = () => {
+    if (!sampler.value) return
+
+    isMuted.value = !isMuted.value
+    if (isMuted.value) {
+      sampler.value.mute()
+    } else {
+      sampler.value.unmute()
+    }
+  }
+
+  const seek = (position: number) => {
+    if (!disc.value) return
+
+    disc.value.secondsPlayed = position
+    if (sampler.value) {
+      sampler.value.play(position)
+    }
+  }
+
+  // Nettoyage
+  const cleanup = () => {
+    if (disc.value) {
+      disc.value.stop()
+      disc.value.powerOff()
+    }
+    if (sampler.value) {
+      sampler.value.pause()
+    }
+  }
+
+  return {
+    // State
+    currentTrack,
+    isPlaying,
+    isLoadingTrack,
+    progressPercentage,
+    currentTurns,
+    totalTurns,
+    isMuted,
+
+    // Getters
+    coverUrl: computed(() => currentTrack.value?.coverId || '/card-dock.svg'),
+
+    // Actions
+    initPlatine,
+    loadTrack,
+    play,
+    pause,
+    togglePlay,
+    toggleMute,
+    seek,
+    cleanup
+  }
+})
+
+export default usePlatineStore

app/store/player.ts

@@ -3,62 +3,65 @@ import { defineStore } from 'pinia'
 import type { Track, Box } from '~/../types/types'
 import { useDataStore } from '~/store/data'
 import { useCardStore } from '~/store/card'
+import { usePlatineStore } from '~/store/platine'
 
 export const usePlayerStore = defineStore('player', {
   state: () => ({
     currentTrack: null as Track | null,
     position: 0,
-    audio: null as HTMLAudioElement | null,
     progressionLast: 0,
-    isPlaying: false,
     isLoading: false,
     history: [] as string[]
   }),
 
   actions: {
-    attachAudio(el: HTMLAudioElement) {
-      this.audio = el
-      // attach listeners if not already attached (idempotent enough for our use)
-      this.audio.addEventListener('play', () => {
-        this.isPlaying = true
-        // Révéler la carte quand la lecture commence
-        if (this.currentTrack) {
-          const cardStore = useCardStore()
-          if (!cardStore.isCardRevealed(this.currentTrack.id)) {
-            requestAnimationFrame(() => {
-              cardStore.revealCard(this.currentTrack!.id)
-            })
+    attachAudio() {
+      const platineStore = usePlatineStore()
+
+      // Écouter les changements de piste dans le platineStore
+      watch(
+        () => platineStore.currentTrack,
+        (newTrack) => {
+          if (newTrack) {
+            this.currentTrack = newTrack
+            // Révéler la carte quand la lecture commence
+            const cardStore = useCardStore()
+            if (!cardStore.isCardRevealed(newTrack.id)) {
+              requestAnimationFrame(() => {
+                cardStore.revealCard(newTrack.id)
+              })
+            }
+          } else {
+            this.currentTrack = null
           }
         }
-      })
-      this.audio.addEventListener('playing', () => {})
-      this.audio.addEventListener('pause', () => {
-        this.isPlaying = false
-      })
-      this.audio.addEventListener('ended', async () => {
-        const track = this.currentTrack
-        if (!track) return
+      )
 
-        const dataStore = useDataStore()
-        // Comportement par défaut pour les playlists standards
-        if (track.type === 'playlist') {
-          const next = dataStore.getNextPlaylistTrack(track)
-          if (next && next.boxId === track.boxId) {
-            await this.playTrack(next)
-            return
+      // Écouter les changements d'état de lecture
+      watch(
+        () => platineStore.isPlaying,
+        (isPlaying) => {
+          if (isPlaying) {
+            // Gérer la logique de lecture suivante quand la lecture se termine
+            if (platineStore.currentTrack?.type === 'playlist') {
+              const dataStore = useDataStore()
+              const nextTrack = dataStore.getNextPlaylistTrack(platineStore.currentTrack)
+              if (nextTrack) {
+                platineStore.loadTrack(nextTrack)
+                platineStore.play()
+              }
+            }
           }
         }
-
-        // Si on arrive ici, c'est qu'il n'y a pas de piste suivante
-        this.currentTrack = null
-        this.isPlaying = false
-      })
+      )
     },
 
     async playBox(box: Box) {
+      const platineStore = usePlatineStore()
+
       // Si c'est la même box, on toggle simplement la lecture
       if (this.currentTrack?.boxId === box.id && this.currentTrack?.side === box.activeSide) {
-        this.togglePlay()
+        platineStore.togglePlay()
         return
       }
 
@@ -67,7 +70,9 @@ export const usePlayerStore = defineStore('player', {
         const dataStore = useDataStore()
         const firstTrack = dataStore.getFirstTrackOfBox(box)
         if (firstTrack) {
-          await this.playTrack(firstTrack)
+          this.currentTrack = firstTrack
+          await platineStore.loadTrack(firstTrack)
+          await platineStore.play()
         }
       } catch (error) {
         console.error('Error playing box:', error)
@@ -75,121 +80,77 @@ export const usePlayerStore = defineStore('player', {
     },
 
     async playTrack(track: Track) {
-      // Pour les autres types de pistes, on utilise la logique existante
-      this.isCompilationTrack(track)
-        ? await this.playCompilationTrack(track)
-        : await this.playPlaylistTrack(track)
-    },
-
-    async playCompilationTrack(track: Track) {
+      const platineStore = usePlatineStore()
       // Si c'est la même piste, on toggle simplement la lecture
       if (this.currentTrack?.id === track.id) {
-        // Si la lecture est en cours, on met en pause
-        if (this.isPlaying) {
-          this.togglePlay()
-          return
-        }
-
-        // Si c'est une compilation, on vérifie si on est dans la plage de la piste
-        if (track.type === 'compilation' && track.start !== undefined) {
-          const dataStore = useDataStore()
-          const nextTrack = dataStore.getNextTrack(track)
-
-          // Si on a une piste suivante et qu'on est dans la plage de la piste courante
-          if (nextTrack?.start && this.position >= track.start && this.position < nextTrack.start) {
-            this.togglePlay()
-            return
-          }
-          // Si c'est la dernière piste de la compilation
-          else if (!nextTrack && this.position >= track.start) {
-            this.togglePlay()
-            return
-          }
-        }
-      }
-
-      // Sinon, on charge et on lit la piste
-      this.currentTrack = track
-      await this.loadAndPlayTrack(track)
-    },
-
-    async playPlaylistTrack(track: Track) {
-      // Toggle simple si c'est la même piste
-      if (this.currentTrack?.id === track.id) {
-        this.togglePlay()
+        platineStore.togglePlay()
         return
       }
 
       // Sinon, on charge et on lit la piste
       this.currentTrack = track
-      await this.loadAndPlayTrack(track)
+      await platineStore.loadTrack(track)
+      platineStore.play()
+    },
+
+    async playCompilationTrack(track: Track) {
+      const platineStore = usePlatineStore()
+
+      // Si c'est la même piste, on toggle simplement la lecture
+      if (this.currentTrack?.id === track.id) {
+        platineStore.togglePlay()
+        return
+      }
+
+      // Pour les compilations, on charge la piste avec le point de départ
+      this.currentTrack = track
+      await platineStore.loadTrack(track)
+
+      // Si c'est une compilation, on définit la position de départ
+      if (track.type === 'compilation' && track.start !== undefined) {
+        platineStore.seek(track.start)
+      }
+
+      platineStore.play()
+    },
+
+    async playPlaylistTrack(track: Track) {
+      const platineStore = usePlatineStore()
+
+      // Toggle simple si c'est la même piste
+      if (this.currentTrack?.id === track.id) {
+        platineStore.togglePlay()
+        return
+      }
+
+      // Sinon, on charge et on lit la piste
+      this.currentTrack = track
+      await platineStore.loadTrack(track)
+      platineStore.play()
     },
 
     async loadTrack(track: Track) {
-      if (!this.audio) return
-
-      return new Promise<void>((resolve) => {
-        this.currentTrack = track
-        const audio = this.audio as HTMLAudioElement
-
-        // Si c'est la même source, on ne fait rien
-        if (audio.src === track.url) {
-          resolve()
-          return
-        }
-
-        // Nouvelle source
-        audio.src = track.url
-
-        // Une fois que suffisamment de données sont chargées
-        const onCanPlay = () => {
-          audio.removeEventListener('canplay', onCanPlay)
-          resolve()
-        }
-        audio.addEventListener('canplay', onCanPlay)
-
-        // Timeout de sécurité
-        setTimeout(resolve, 1000)
-      })
+      const platineStore = usePlatineStore()
+      await platineStore.loadTrack(track)
     },
 
     async loadAndPlayTrack(track: Track) {
-      if (!this.audio) {
-        const newAudio = new Audio()
-        this.attachAudio(newAudio)
-      }
-
-      const audio = this.audio as HTMLAudioElement
+      const platineStore = usePlatineStore()
 
       try {
         this.isLoading = true
-        // Mettre en pause
-        audio.pause()
 
-        // Pour les compilations, on utilise l'URL de la piste avec le point de départ
+        // Charger la piste
+        await platineStore.loadTrack(track)
+
+        // Pour les compilations, on définit la position de départ
         if (track.type === 'compilation' && track.start !== undefined) {
-          audio.src = track.url
-          audio.currentTime = track.start
-        } else {
-          // Pour les playlists, on charge la piste individuelle
-          audio.currentTime = 0
-          await this.loadTrack(track)
+          platineStore.seek(track.start)
         }
 
-        // Attendre que les métadonnées soient chargées
-        await new Promise<void>((resolve) => {
-          const onCanPlay = () => {
-            audio.removeEventListener('canplay', onCanPlay)
-            resolve()
-          }
-          audio.addEventListener('canplay', onCanPlay)
-          // Timeout de sécurité
-          setTimeout(resolve, 1000)
-        })
-
         // Lancer la lecture
-        await audio.play()
-        this.history.push(this.currentTrack?.id)
+        await platineStore.play()
+        this.history.push(track.id.toString()) // S'assurer que l'ID est une chaîne
         this.isLoading = false
       } catch (error) {
         console.error('Error loading/playing track:', error)
@@ -197,33 +158,30 @@ export const usePlayerStore = defineStore('player', {
       }
     },
 
-    async togglePlay() {
-      if (!this.audio) return
-      try {
-        if (this.audio.paused) {
-          await this.audio.play()
-        } else {
-          this.audio.pause()
-        }
-      } catch (error) {
-        console.error('Error toggling play state:', error)
-      }
+    togglePlay() {
+      const platineStore = usePlatineStore()
+      platineStore.togglePlay()
     },
 
     updateTime() {
-      const audio = this.audio
-      if (!audio) return
+      const platineStore = usePlatineStore()
 
-      // update current position
-      this.position = audio.currentTime
+      // Mettre à jour la position actuelle
+      if (platineStore.currentTrack) {
+        this.position = platineStore.currentTurns / 0.75 // Convertir les tours en secondes
 
-      // compute and cache a stable progression value
-      const duration = audio.duration
-      const progression = (this.position / duration) * 100
-      if (!isNaN(progression)) {
-        this.progressionLast = progression
+        // Calculer et mettre en cache la progression
+        const duration = platineStore.totalTurns / 0.75 // Durée totale en secondes
+        const progression = (this.position / duration) * 100
+        if (!isNaN(progression) && isFinite(progression)) {
+          this.progressionLast = progression
+        }
       }
-      // update current track when changing time in compilation
+    },
+
+    // update current track when changing time in compilation
+    async updateCurrentTrack() {
+      const platineStore = usePlatineStore()
       const currentTrack = this.currentTrack
       if (currentTrack && currentTrack.type === 'compilation') {
         const dataStore = useDataStore()
@@ -234,7 +192,7 @@ export const usePlayerStore = defineStore('player', {
           .sort((a, b) => (a.start ?? 0) - (b.start ?? 0))
 
         if (tracks.length > 0) {
-          const now = audio.currentTime
+          const now = platineStore.currentTurns / 0.75
           // find the last track whose start <= now (fallback to first track)
           let nextTrack = tracks[0]
           for (const t of tracks) {
@@ -254,7 +212,7 @@ export const usePlayerStore = defineStore('player', {
             if (nextTrack.id && !cardStore.isCardRevealed(nextTrack.id)) {
               // Utiliser requestAnimationFrame pour une meilleure synchronisation avec le rendu
               requestAnimationFrame(() => {
-                cardStore.revealCard(nextTrack.id!)
+                cardStore.revealCard(nextTrack.id)
               })
             }
           }
@@ -290,21 +248,26 @@ export const usePlayerStore = defineStore('player', {
       }
     },
 
-    isPaused: (state) => {
-      return state.audio?.paused ?? true
+    isPaused() {
+      const platineStore = usePlatineStore()
+      return !platineStore.isPlaying
     },
 
     getCurrentTrack: (state) => state.currentTrack,
 
     getCurrentBox: (state) => {
-      return state.currentTrack ? state.currentTrack.url : null
+      return state.currentTrack ? state.currentTrack.boxId : null
     },
 
-    getCurrentProgression(state) {
-      if (!state.audio) return 0
-      const duration = state.audio.duration
-      const progression = (state.position / duration) * 100
-      return isNaN(progression) ? state.progressionLast : progression
+    getCurrentProgression() {
+      const platineStore = usePlatineStore()
+      if (!platineStore.currentTrack) return 0
+
+      // Calculer la progression en fonction des tours actuels et totaux
+      if (platineStore.totalTurns > 0) {
+        return (platineStore.currentTurns / platineStore.totalTurns) * 100
+      }
+      return 0
     },
 
     getCurrentCoverUrl(state) {

app/store/ui.ts

@@ -6,7 +6,8 @@ export const useUiStore = defineStore('ui', {
   state: () => ({
     // UI-only state can live here later
     showSearch: false,
-    searchQuery: ''
+    searchQuery: '',
+    showCardSharer: false
   }),
 
   actions: {
@@ -48,6 +49,10 @@ export const useUiStore = defineStore('ui', {
       })
     },
 
+    openCardSharer() {
+      this.showCardSharer = true
+    },
+
     scrollToBox(box: Box) {
       if (box) {
         const boxElement = document.getElementById(box.id)