.prettierrc

@@ -5,4 +5,3 @@
   "trailingComma": "none",
   "printWidth": 100
 }
-

app/components/Card.vue

@@ -1,7 +1,8 @@
 <template>
   <article :role="props.role" :class="[
     'card cursor-pointer',
-    isFaceUp ? 'face-up' : 'face-down'
+    isFaceUp ? 'face-up' : 'face-down',
+    showPlayButtonFaceUp ? 'show-play-button-face-up' : ''
   ]" :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">
@@ -21,9 +22,9 @@
 
         <!-- Cover -->
         <figure class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-xl cursor-pointer">
-          <playButton :objectToPlay="card" />
+          <playButton />
-          <img v-if="isFaceUp" :src="props.card.url_image" alt="Pochette de l'album" loading="lazy"
+          <img :src="props.card.url_image" alt="Pochette de l'album" :loading="props.imageLoadingType"
-            class="w-full h-full object-cover object-center" />
+            @load="$emit('image-loaded', $event)" class="w-full h-full object-cover object-center" />
         </figure>
 
         <!-- Body -->
@@ -43,7 +44,7 @@
         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="card" />
+          <playButton />
           <img src="/face-down.svg" />
         </figure>
       </footer>
@@ -54,17 +55,21 @@
 <script setup lang="ts">
 import type { Card } from '~~/types/types'
 
-const emit = defineEmits(['click'])
+const emit = defineEmits(['click', 'image-loaded'])
 
 const props = withDefaults(defineProps<{
   card: Card;
   isFaceUp?: boolean;
   role?: string;
   tabindex?: string | number;
+  imageLoadingType?: 'lazy' | 'eager';
+  showPlayButtonFaceUp?: boolean;
 }>(), {
   isFaceUp: false,
   role: 'button',
-  tabindex: '0'
+  tabindex: '0',
+  imageLoadingType: 'eager',
+  showPlayButtonFaceUp: false
 })
 
 import { getYearColor } from '~/utils/colors'
@@ -72,6 +77,11 @@ import { getYearColor } from '~/utils/colors'
 const cardColor = computed(() => getYearColor(props.card.year || 0))
 const isRedCard = computed(() => (props.card?.suit === '♥' || props.card?.suit === '♦'))
 
+/* loading states of the card */
+const isApiLoaded = ref(false)
+const isImageLoaded = ref(false)
+const isTrackLoaded = ref(false)
+
 </script>
 
 <style lang="scss">
@@ -163,9 +173,12 @@ const isRedCard = computed(() => (props.card?.suit === '♥' || props.card?.suit
     opacity: 0;
   }
 
-  .face-up:hover {
+  .face-up {
-    .play-button {
+
-      opacity: 1;
+    &:hover {
+      .play-button {
+        opacity: 1;
+      }
     }
 
     .flip-inner {
@@ -177,6 +190,20 @@ const isRedCard = computed(() => (props.card?.suit === '♥' || props.card?.suit
     @apply absolute bottom-1/2 top-28 opacity-0 hover:opacity-100;
   }
 
+  &.show-play-button {
+    .play-button {
+      opacity: 1;
+    }
+  }
+
+  &.show-play-button-face-up {
+    .face-up {
+      .play-button {
+        opacity: 1;
+      }
+    }
+  }
+
   .pochette:active,
   .face-down:active {
     .play-button {

app/components/Platine.vue

@@ -0,0 +1,357 @@
+<template>
+  <div class="platine" :class="{ 'loading': isLoadingCard, 'mounted': isMounted }" ref="platine">
+    <div class="disc" ref="discRef" id="disc">
+      <div class="bobine" :style="{
+        height: progressPercentage + '%',
+        width: progressPercentage + '%'
+      }"></div>
+      <div class="power-button" @mousedown.stop @click.stop="handlePowerButtonClick">
+        <img class="power-logo" src="/favicon.svg">
+        <div class="power-loading" v-if="isLoadingCard">
+          <div class="spinner"></div>
+        </div>
+      </div>
+      <div class="turn-point" v-if="!isLoadingCard">
+      </div>
+    </div>
+    <div class="debug">
+      <b>progressPercentage</b>: <br>
+      </br>{{ Math.round(progressPercentage) }}%
+      <br>
+      <b>Disc</b>: <br>
+      </br>{{ Math.round(disc?.secondsPlayed || 0) }}sec
+      <br>
+      </br>{{ Math.round(sampler?.duration || 0) }}sec
+      <br>
+      <!-- <pre>{{ sampler }}</pre> -->
+      isPlaying:
+      </br>{{ isPlaying }}
+      <br>
+      <b>isFirstDrag</b>: <br>
+      </br>{{ isFirstDrag }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Card } from '~~/types/types'
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
+import Disc from '~/utils/platine/disc'
+import Sampler from '~/utils/platine/sampler'
+
+const props = defineProps<{ card?: Card }>()
+
+// State
+const isLoadingCard = ref(false)
+const isFirstDrag = ref(true)
+const progressPercentage = ref(0)
+const currentTurns = ref(0)
+const totalTurns = ref(0)// Refs pour les instances
+
+// Refs pour les instances
+const disc = ref<Disc | null>(null)
+const sampler = ref<Sampler | null>(null)
+const discRef = ref<HTMLElement>()
+const platine = ref<HTMLElement>()
+const isMounted = ref(false)
+
+const isPlaying = computed(() => Math.abs(Math.round(sampler.value?.currentSpeed || 0)) !== 0)
+
+// Actions
+const initPlatine = (element: HTMLElement) => {
+  // console.log('[INIT] Platine')
+  discRef.value = element
+  disc.value = new Disc(element)
+  sampler.value = new Sampler()
+
+  // Configurer les callbacks du disque
+  if (disc.value) {
+    disc.value.callbacks.onStop = () => {
+      // console.log('[DISC] On Stop')
+      sampler.value?.pause()
+    }
+
+    disc.value.callbacks.onDragStart = () => {
+      // console.log('[DISC] On Drag Start')
+      if (isFirstDrag.value) {
+        isFirstDrag.value = false
+        // togglePlay()
+        if (sampler.value && disc.value) {
+          sampler.value.play(disc.value.secondsPlayed)
+          disc.value.powerOn()
+          // console.log('[DISC] Power ON')
+        }
+      }
+    }
+
+    disc.value.callbacks.onDragEnded = () => {
+      // console.log('[DISC] On Drag END')
+      sampler.value?.play(disc.value?.secondsPlayed || 0)
+    }
+
+    disc.value.callbacks.onLoop = ({ playbackSpeed, isReversed, secondsPlayed }) => {
+      // Ne mettre à jour que si nécessaire et s'assurer que la position est valide
+      if (Math.abs((sampler.value?.currentSpeed || 0) - playbackSpeed) > 0.01) {
+        const safeSecondsPlayed = Math.max(0, secondsPlayed)
+        sampler.value?.updateSpeed(playbackSpeed, isReversed, safeSecondsPlayed)
+      }
+      updateTurns()
+    }
+  }
+}
+
+const updateTurns = () => {
+  if (!disc.value) return
+
+  const newTurns = disc.value.secondsPlayed * 0.75
+  const newTotalTurns = (disc.value as any)._duration * 0.75
+
+  // Calcul du pourcentage de progression pour l'affichage visuel (22% à 100%)
+  const minPercentage = 22
+  const progressRatio = disc.value.secondsPlayed / (disc.value as any)._duration
+  const newProgressPercentage = minPercentage + (progressRatio * (100 - minPercentage))
+
+  // Ne mettre à jour que si les valeurs ont changé de manière significative
+  if (
+    Math.abs(currentTurns.value - newTurns) > 0.01 ||
+    Math.abs(totalTurns.value - newTotalTurns) > 0.01 ||
+    Math.abs(progressPercentage.value - newProgressPercentage) > 0.1
+  ) {
+    currentTurns.value = newTurns
+    totalTurns.value = newTotalTurns
+    progressPercentage.value = newProgressPercentage
+  }
+}
+
+const loadCard = async (card: Card) => {
+  // console.log('[LOAD CARD]', card)
+  if (!sampler.value || !card) return
+
+  isLoadingCard.value = true
+  // console.log(disc.value)
+  try {
+    await sampler.value.loadTrack(card.url_audio)
+    if (disc.value) {
+      // console.log('[DISC] Set Duration', sampler.value.duration)
+      disc.value.setDuration(sampler.value.duration)
+      updateTurns()
+    }
+  } finally {
+    isLoadingCard.value = false
+  }
+}
+
+const play = (position = 0) => {
+  // console.log('[PLAY]')
+  if (!disc.value || !sampler.value || !props.card) return
+
+  sampler.value.play(position)
+  disc.value.powerOn()
+}
+
+const pause = () => {
+  // console.log('[PAUSE]')
+  if (!disc.value || !sampler.value) return
+
+  sampler.value.pause()
+  disc.value.powerOff()
+}
+
+const togglePlay = () => {
+  if (isPlaying.value) {
+    pause()
+  } else {
+    // Reprendre la lecture à la position actuelle
+    const currentPosition = disc.value?.secondsPlayed || 0
+    play(currentPosition)
+  }
+}
+
+// Nettoyage
+const cleanup = () => {
+  // console.log('[CLEANUP] Platine')
+  if (disc.value) {
+    disc.value.stop()
+    disc.value.powerOff()
+  }
+  if (sampler.value) {
+    sampler.value.pause()
+  }
+}
+
+const handlePowerButtonClick = (e: MouseEvent) => {
+  e.stopPropagation() // Empêcher la propagation de l'événement
+  e.preventDefault() // Empêcher tout comportement par défaut
+  togglePlay()
+  return false // Empêcher tout autre comportement
+}
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (e.code === 'Space' || e.key === ' ' || e.keyCode === 32) {
+    e.preventDefault() // Empêcher le défilement de la page
+    togglePlay()
+  }
+}
+
+// Initialisation du lecteur
+onMounted(() => {
+  isMounted.value = true
+  if (discRef.value) {
+    initPlatine(discRef.value)
+    loadCard(props.card!)
+  }
+
+  // Ajouter l'écouteur d'événement clavier
+  window.addEventListener('keydown', handleKeyDown)
+})
+
+// Nettoyage de l'écouteur d'événement
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown)
+  isMounted.value = false
+  cleanup()
+})
+
+// Surveillance des changements de piste
+watch(() => props.card, (newCard) => {
+  // console.log('[WATCH] Card', newCard)
+  if (newCard) {
+    loadCard(newCard)
+  }
+})
+
+</script>
+
+<style lang="scss">
+.platine {
+  pointer-events: none;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+}
+
+.disc {
+  pointer-events: auto;
+  position: fixed;
+  background-color: transparent;
+  position: relative;
+  aspect-ratio: 1;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 50%;
+  cursor: grab;
+  background-position: center;
+  background-size: cover;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
+
+  .loading & {
+    box-shadow: none;
+  }
+}
+
+.turn-point {
+  @apply absolute top-1/2 right-8 size-1/12 rounded-full bg-esyellow;
+}
+
+.disc.is-scratching {
+  cursor: grabbing;
+}
+
+.power-button {
+  border-radius: 999px;
+  background-size: cover;
+  background-position: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  width: 45%;
+  aspect-ratio: 1/1;
+  // background: no-repeat url(/favicon.svg) center center;
+  background-size: 30%;
+  border-radius: 50%;
+  cursor: pointer !important;
+
+  .power-logo {
+    @apply size-1/2 bg-black rounded-full p-5;
+  }
+
+  .power-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+  }
+}
+
+.disc-middle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 20px;
+  height: 20px;
+  background: rgb(26, 26, 26);
+  border-radius: 50%;
+}
+
+.button {
+  border-radius: 0;
+  border: none;
+  background: rgb(69, 69, 69);
+  font-size: 0.75rem;
+  padding: 0.4rem;
+  color: #fff;
+  line-height: 1.3;
+  cursor: pointer;
+  will-change: box-shadow;
+  transition:
+    box-shadow 0.2s ease-out,
+    transform 0.05s ease-in;
+}
+
+.power.is-active {
+  transform: translate(1px, 2px);
+  color: red;
+}
+
+.button[disabled] {
+  opacity: 0.5;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.bobine {
+  @apply bg-slate-900 bg-opacity-50 backdrop-blur absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full;
+}
+
+.debug {
+  @apply fixed top-4 right-4 bg-slate-200 rounded-md p-2;
+}
+</style>

app/components/PlayButton.vue

@@ -2,11 +2,11 @@
   <button tabindex="-1"
     class="play-button pointer-events-none 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">
-    <template v-if="isLoading">
+    <template v-if="props.isLoading">
       <img src="/loader.svg" alt="Chargement" class="size-16" />
     </template>
     <template v-else>
-      {{ isPlaying ? 'I I' : '▶' }}
+      {{ props.isPlaying ? 'I I' : '▶' }}
     </template>
   </button>
 </template>

app/pages/card/[slug].vue

@@ -1,6 +1,6 @@
 <template>
   <section class="screen-centered">
-    <Card :card="card" :isFaceUp="isFaceUp" @click="clickOnSlugCard" />
+    <Card :card="card" :isFaceUp="isFaceUp" showPlayButtonFaceUp @click="clickOnSlugCard" @image-loaded="imageLoaded" />
   </section>
 </template>
 
@@ -20,8 +20,10 @@ useHead({
 
 const clickOnSlugCard = () => {
   isFaceUp.value = true
-  const audio = new Audio(card.value?.url_audio)
+}
-  audio.play()
+
+const imageLoaded = () => {
+  console.log('imageLoaded')
 }
 
 onMounted(() => {
@@ -30,14 +32,3 @@ onMounted(() => {
   }, 700)
 })
 </script>
-
-<style>
-.screen-centered {
-  position: fixed;
-  inset: 0;
-  height: 100dvh;
-  width: 100dvw;
-  display: grid;
-  place-items: center;
-}
-</style>

app/pages/random.vue

@@ -0,0 +1,19 @@
+<template>
+  <section class="flex justify-center items-center h-screen">
+    <div class="aspect-square size-[100vmin] max-h-screen max-w-screen overflow-hidden">
+      <Platine :card="card" />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { Card } from '~~/types/types'
+
+const { data: card, pending, error } = await useFetch<Card>('/api/card/random')
+
+useHead({
+  title: computed(() =>
+    card.value ? `${card.value.artist} - ${card.value.title}` : 'Loading...'
+  )
+})
+</script>

app/utils/platine/disc.ts

@@ -0,0 +1,391 @@
+const TAU = Math.PI * 2
+
+const targetFPS = 60
+const RPS = 0.75
+const RPM = RPS * 60
+
+const RADIANS_PER_MINUTE = RPM * TAU
+const RADIANS_PER_SECOND = RADIANS_PER_MINUTE / 60
+const RADIANS_PER_MILLISECOND = RADIANS_PER_SECOND * 0.001
+
+const ROTATION_SPEED = (TAU * RPS) / targetFPS
+
+type Vector = {
+  x: number
+  y: number
+}
+
+type NumberArray = Array<number>
+
+const average = (arr: NumberArray) => arr.reduce((memo, val) => memo + val, 0) / arr.length
+
+// Limit array size by cutting off from the start
+const limit = (arr: NumberArray, maxLength = 10) => {
+  const deleteCount = Math.max(0, arr.length - maxLength)
+
+  return arr.slice(deleteCount)
+}
+
+const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(value, max))
+
+const distanceBetween = (vec1: Vector, vec2: Vector) => Math.hypot(vec2.x - vec1.x, vec2.y - vec1.y)
+
+const getElementCenter = (el: HTMLElement): Vector => {
+  const { left, top, width, height } = el.getBoundingClientRect()
+
+  const x = left + width / 2
+  const y = top + height / 2
+
+  return { x, y }
+}
+
+const angleBetween = (vec1: Vector, vec2: Vector) => Math.atan2(vec2.y - vec1.y, vec2.x - vec1.x)
+
+const angleDifference = (x: number, y: number) => Math.atan2(Math.sin(x - y), Math.cos(x - y))
+
+type DiscProgress = {
+  playbackSpeed: number
+  isReversed: boolean
+  secondsPlayed: number
+  progress: number
+}
+class Disc {
+  public el: HTMLElement
+
+  private _playbackSpeed = 1
+  private _duration = 0
+  private _isDragging = false
+  private _isPoweredOn = false
+
+  private _center: Vector
+
+  private _currentAngle = 0
+  private _previousAngle = 0
+  private _maxAngle = TAU
+
+  public rafId: number | null = null
+
+  public previousTimestamp: number
+
+  private _draggingSpeeds: Array<number> = []
+  private _draggingFrom: Vector = { x: 0, y: 0 }
+
+  // Propriétés pour l'inertie
+  private _inertiaVelocity: number = 0
+  private _isInertiaActive: boolean = false
+  private _basePlaybackSpeed: number = 1 // Vitesse de lecture normale
+  private _inertiaFriction: number = 0.93 // Coefficient de frottement pour l'inertie (plus proche de 1 = plus long)
+  private _lastDragVelocity: number = 0 // Dernière vitesse de drag
+  private _lastDragTime: number = 0 // Dernier temps de drag
+  private _inertiaAmplification: number = 25 // Facteur d'amplification de l'inertie
+  private _previousDuration: number = 0 // Pour suivre les changements de durée
+
+  public isReversed: boolean = false
+
+  public callbacks = {
+    onDragStart: (): void => {},
+    onDragEnded: (secondsPlayed: number): void => {},
+    onStop: (): void => {},
+    onLoop: (params: DiscProgress): void => {}
+  }
+
+  constructor(el: HTMLElement) {
+    this.el = el
+
+    this._center = getElementCenter(this.el)
+
+    this.previousTimestamp = performance.now()
+
+    this.onDragStart = this.onDragStart.bind(this)
+    this.onDragProgress = this.onDragProgress.bind(this)
+    this.onDragEnd = this.onDragEnd.bind(this)
+    this.loop = this.loop.bind(this)
+
+    this.init()
+  }
+
+  init() {
+    // Ajout du style pour désactiver le comportement tactile par défaut
+    this.el.style.touchAction = 'none'
+
+    // Écouteurs pour la souris et le tactile
+    this.el.addEventListener('pointerdown', this.onDragStart)
+    this.el.addEventListener(
+      'touchstart',
+      (e) => {
+        // Empêcher le défilement de la page
+        e.preventDefault()
+        this.onDragStart(e)
+      },
+      { passive: false }
+    )
+  }
+
+  get playbackSpeed() {
+    return this._playbackSpeed
+  }
+
+  set playbackSpeed(s) {
+    this._draggingSpeeds.push(s)
+    this._draggingSpeeds = limit(this._draggingSpeeds, 10)
+
+    this._playbackSpeed = average(this._draggingSpeeds)
+    this._playbackSpeed = clamp(this._playbackSpeed, -4, 4)
+  }
+
+  get secondsPlayed() {
+    return this._currentAngle / TAU / RPS
+  }
+
+  set isDragging(d) {
+    this._isDragging = d
+    this.el.classList.toggle('is-scratching', d)
+  }
+
+  get isDragging() {
+    return this._isDragging
+  }
+
+  powerOn() {
+    if (!this.rafId) {
+      this.start()
+    }
+    this._isPoweredOn = true
+    this._basePlaybackSpeed = 1
+    this._playbackSpeed = 1
+  }
+
+  powerOff() {
+    this._isPoweredOn = false
+    this._basePlaybackSpeed = 0
+  }
+
+  public setDuration(duration: number) {
+    this._previousDuration = this._duration
+    this._duration = duration
+    this._maxAngle = duration * RPS * TAU
+  }
+
+  onDragStart(e: PointerEvent | TouchEvent) {
+    // Vérifier si l'événement provient d'un élément avec la classe 'power-button' ou 'power-logo'
+    const target = e.target as HTMLElement
+    if (target.closest('.power-button, .power-logo')) {
+      // Ne rien faire si l'événement provient du bouton power
+      e.preventDefault()
+      e.stopPropagation()
+      return
+    }
+
+    // Empêcher le comportement par défaut pour éviter le défilement
+    e.preventDefault()
+
+    // Appeler le callback onDragStart
+    this.callbacks.onDragStart()
+
+    // Obtenir les coordonnées du toucher ou de la souris
+    const getCoords = (event: PointerEvent | TouchEvent): { x: number; y: number } => {
+      // Gestion des événements tactiles
+      const touchEvent = event as TouchEvent
+      if (touchEvent.touches?.[0]) {
+        return {
+          x: touchEvent.touches[0].clientX,
+          y: touchEvent.touches[0].clientY
+        }
+      }
+
+      // Gestion des événements de souris
+      const mouseEvent = event as PointerEvent
+      return {
+        x: mouseEvent.clientX ?? this._center.x,
+        y: mouseEvent.clientY ?? this._center.y
+      }
+    }
+
+    const startCoords = getCoords(e)
+
+    const onMove = (moveEvent: Event) => {
+      if (!(moveEvent instanceof PointerEvent) && !(moveEvent instanceof TouchEvent)) return
+
+      const coords = getCoords(moveEvent)
+
+      this.onDragProgress({
+        clientX: coords.x,
+        clientY: coords.y,
+        preventDefault: () => moveEvent.preventDefault(),
+        stopPropagation: () => moveEvent.stopPropagation()
+      } as MouseEvent)
+    }
+
+    const onEnd = () => {
+      document.removeEventListener('pointermove', onMove)
+      document.removeEventListener('touchmove', onMove)
+      document.removeEventListener('pointerup', onEnd)
+      document.removeEventListener('touchend', onEnd)
+      this.onDragEnd()
+    }
+
+    document.addEventListener('pointermove', onMove)
+    document.addEventListener('touchmove', onMove, { passive: false })
+    document.addEventListener('pointerup', onEnd)
+    document.addEventListener('touchend', onEnd)
+
+    this._center = getElementCenter(this.el)
+    this._draggingFrom = startCoords
+    this.isDragging = true
+  }
+
+  onDragProgress(e: {
+    clientX: number
+    clientY: number
+    preventDefault: () => void
+    stopPropagation: () => void
+  }) {
+    const currentTime = performance.now()
+    const deltaTime = currentTime - this._lastDragTime
+
+    const pointerPosition: Vector = {
+      x: e.clientX,
+      y: e.clientY
+    }
+
+    const anglePointerToCenter = angleBetween(this._center, pointerPosition)
+    const angle_DraggingFromToCenter = angleBetween(this._center, this._draggingFrom)
+    const angleDragged = angleDifference(angle_DraggingFromToCenter, anglePointerToCenter)
+
+    // Calcul de la vitesse de déplacement angulaire (radians par milliseconde)
+    // On inverse le signe pour que le sens de l'inertie soit naturel
+    if (deltaTime > 0) {
+      this._lastDragVelocity = -angleDragged / deltaTime
+    }
+
+    this._lastDragTime = currentTime
+    this.setAngle(this._currentAngle - angleDragged)
+    this._draggingFrom = { ...pointerPosition }
+  }
+
+  onDragEnd() {
+    document.body.removeEventListener('pointermove', this.onDragProgress)
+    document.body.removeEventListener('pointerup', this.onDragEnd)
+
+    // Activer l'inertie avec la vitesse de drag actuelle
+    this._isInertiaActive = true
+    // Augmenter la sensibilité du drag avec le facteur d'amplification
+    this._inertiaVelocity = this._lastDragVelocity * this._inertiaAmplification
+    this.isDragging = false
+
+    // Toujours conserver la vitesse de base actuelle (1 si allumé, 0 si éteint)
+    this._basePlaybackSpeed = this._isPoweredOn ? 1 : 0
+
+    // Si le lecteur est éteint, s'assurer que la vitesse de base est bien à 0
+    if (!this._isPoweredOn) {
+      this._basePlaybackSpeed = 0
+    }
+
+    this.callbacks.onDragEnded(this.secondsPlayed)
+  }
+
+  autoRotate(currentTimestamp: number) {
+    const timestampElapsed = currentTimestamp - this.previousTimestamp
+
+    if (this._isInertiaActive) {
+      // Appliquer l'inertie
+      const inertiaRotation = this._inertiaVelocity * timestampElapsed
+      this.setAngle(this._currentAngle + inertiaRotation)
+
+      // Si le lecteur est allumé, faire une transition fluide vers la vitesse de lecture
+      if (this._isPoweredOn) {
+        // Si on est proche de la vitesse de lecture normale, on désactive l'inertie
+        if (
+          Math.abs(this._inertiaVelocity - RADIANS_PER_MILLISECOND * this._basePlaybackSpeed) <
+          0.0001
+        ) {
+          this._isInertiaActive = false
+          this._inertiaVelocity = RADIANS_PER_MILLISECOND * this._basePlaybackSpeed
+        } else {
+          // Réduire progressivement la vitesse d'inertie vers la vitesse de lecture
+          this._inertiaVelocity +=
+            (RADIANS_PER_MILLISECOND * this._basePlaybackSpeed - this._inertiaVelocity) * 0.1
+        }
+      } else {
+        // Si le lecteur est éteint, appliquer un frottement normal
+        this._inertiaVelocity *= this._inertiaFriction
+
+        // Si la vitesse est très faible, on arrête l'inertie
+        if (Math.abs(this._inertiaVelocity) < 0.0001) {
+          this._isInertiaActive = false
+          this._inertiaVelocity = 0
+          this._playbackSpeed = 0 // Mettre à jour la vitesse de lecture à 0 uniquement à la fin
+        }
+      }
+    } else {
+      // Rotation normale à la vitesse de lecture de base
+      const baseRotation = RADIANS_PER_MILLISECOND * this._basePlaybackSpeed * timestampElapsed
+      this.setAngle(this._currentAngle + baseRotation)
+    }
+  }
+
+  setAngle(angle: number) {
+    this._currentAngle = clamp(angle, 0, this._maxAngle)
+
+    return this._currentAngle
+  }
+
+  start() {
+    this.previousTimestamp = performance.now()
+
+    this.loop()
+  }
+
+  stop() {
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId)
+      this.rafId = null
+    }
+    this.callbacks.onStop()
+  }
+
+  rewind() {
+    this.setAngle(0)
+  }
+
+  loop() {
+    const currentTimestamp = performance.now()
+    const timestampDifferenceMS = currentTimestamp - this.previousTimestamp
+
+    // Ne mettre à jour la rotation que si le lecteur est allumé et pas en train de glisser
+    if (this._isPoweredOn && !this.isDragging) {
+      this.autoRotate(currentTimestamp)
+    }
+
+    // Calculer la vitesse de lecture
+    const rotated = this._currentAngle - this._previousAngle
+    const rotationNormal = RADIANS_PER_MILLISECOND * timestampDifferenceMS
+    this.playbackSpeed = rotated / rotationNormal || 0
+    this.isReversed = this._currentAngle < this._previousAngle
+
+    // Mettre à jour la rotation visuelle
+    this.el.style.transform = `rotate(${this._currentAngle}rad)`
+
+    // Appeler le callback onLoop avec les informations de lecture
+    const secondsPlayed = this.secondsPlayed
+    const progress = this._duration > 0 ? secondsPlayed / this._duration : 0
+
+    // Ne pas appeler onLoop si rien n'a changé
+    if (this._previousAngle !== this._currentAngle || this._previousDuration !== this._duration) {
+      this.callbacks.onLoop({
+        playbackSpeed: this.playbackSpeed,
+        isReversed: this.isReversed,
+        secondsPlayed,
+        progress
+      })
+    }
+
+    this._previousAngle = this._currentAngle
+    this.previousTimestamp = currentTimestamp
+
+    // Continuer la boucle d'animation
+    this.rafId = requestAnimationFrame(this.loop)
+  }
+}
+
+export default Disc

app/utils/platine/sampler.ts

@@ -0,0 +1,117 @@
+class Sampler {
+  public audioContext: AudioContext = new AudioContext()
+  public gainNode: GainNode = new GainNode(this.audioContext)
+
+  public audioBuffer: AudioBuffer | null = null
+  public audioBufferReversed: AudioBuffer | null = null
+  public audioSource: AudioBufferSourceNode | null = null
+
+  public duration: number = 0
+  public isReversed: boolean = false
+  public currentSpeed: number = 0
+
+  constructor() {
+    this.gainNode.connect(this.audioContext.destination)
+  }
+
+  async getAudioBuffer(audioUrl: string) {
+    const response = await fetch(audioUrl)
+    const arrayBuffer = await response.arrayBuffer()
+
+    const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer)
+
+    return audioBuffer
+  }
+
+  async loadTrack(audioUrl: string) {
+    this.audioBuffer = await this.getAudioBuffer(audioUrl)
+    this.audioBufferReversed = this.getReversedAudioBuffer(this.audioBuffer)
+
+    this.duration = this.audioBuffer.duration
+  }
+
+  getReversedAudioBuffer(audioBuffer: AudioBuffer) {
+    const bufferArray = audioBuffer.getChannelData(0).slice().reverse()
+
+    const audioBufferReversed = this.audioContext.createBuffer(
+      1,
+      audioBuffer.length,
+      audioBuffer.sampleRate
+    )
+
+    audioBufferReversed.getChannelData(0).set(bufferArray)
+
+    return audioBufferReversed
+  }
+
+  changeDirection(isReversed: boolean, secondsPlayed: number) {
+    // S'assurer que la position est dans les limites
+    const safePosition = Math.max(0, Math.min(secondsPlayed, this.duration))
+    this.isReversed = isReversed
+    this.play(safePosition)
+  }
+
+  play(offset = 0) {
+    this.pause()
+
+    if (!this.audioBuffer || !this.audioBufferReversed) {
+      return
+    }
+
+    const buffer = this.isReversed ? this.audioBufferReversed : this.audioBuffer
+
+    // S'assurer que l'offset est dans les limites
+    const safeOffset = Math.max(0, Math.min(offset, this.duration))
+    const cueTime = this.isReversed ? this.duration - safeOffset : safeOffset
+
+    this.audioSource = this.audioContext.createBufferSource()
+    this.audioSource.buffer = buffer
+    this.audioSource.loop = false
+
+    this.audioSource.connect(this.gainNode)
+
+    // S'assurer que le cueTime n'est pas négatif
+    const startTime = Math.max(0, cueTime)
+    this.audioSource.start(0, startTime)
+  }
+
+  updateSpeed(speed: number, isReversed: boolean, secondsPlayed: number) {
+    if (!this.audioSource) {
+      return
+    }
+
+    // Mettre à jour la vitesse actuelle
+    this.currentSpeed = speed
+
+    if (isReversed !== this.isReversed) {
+      this.changeDirection(isReversed, secondsPlayed)
+    }
+
+    const { currentTime } = this.audioContext
+    const speedAbsolute = Math.abs(speed)
+
+    this.audioSource.playbackRate.cancelScheduledValues(currentTime)
+    this.audioSource.playbackRate.linearRampToValueAtTime(
+      Math.max(0.001, speedAbsolute),
+      currentTime
+    )
+  }
+
+  pause() {
+    if (!this.audioSource) {
+      return
+    }
+
+    this.audioSource.stop()
+  }
+
+  mute() {
+    this.gainNode.gain.value = 0
+  }
+
+  unmute() {
+    this.gainNode.gain.value = 1
+  }
+}
+
+export default Sampler

server/api/card/[slug].ts

@@ -7,7 +7,7 @@ export default eventHandler(async (event) => {
   if (!slug) {
     throw createError({
       statusCode: 400,
-      statusMessage: 'ESID manquant dans la requête'
+      statusMessage: 'Slug manquant dans la requête'
     })
   }
 

server/api/card/random.ts

@@ -0,0 +1,15 @@
+import { useDB, schema } from '../../db'
+import { sql } from 'drizzle-orm'
+
+export default defineEventHandler(async (event) => {
+  const db = useDB()
+
+  const count = await db
+    .select({ count: sql<number>`count(*)` })
+    .from(schema.cards)
+    .get()
+  const randomOffset = Math.floor(Math.random() * count.count)
+  const randomCard = await db.select().from(schema.cards).limit(1).offset(randomOffset).get()
+
+  return randomCard
+})

server/utils/getCardFromDate.ts

@@ -14,7 +14,7 @@ export function getCardFromDate(date: Date): { suit: Suit; rank: Rank } {
           ? '♦'
           : '♣'
 
-  const ranks: Rank[] = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']
+  const ranks: Rank[] = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'V', 'D', 'R']
   const rank = ranks[(day + hour) % ranks.length]
 
   return { suit, rank }

tailwind.config.js

@@ -28,5 +28,18 @@ module.exports = {
       }
     }
   },
-  plugins: []
+  plugins: [
+    function ({ addUtilities }) {
+      addUtilities({
+        '.screen-centered': {
+          position: 'fixed',
+          inset: '0',
+          height: '100dvh',
+          width: '100dvw',
+          display: 'grid',
+          'place-items': 'center'
+        }
+      })
+    }
+  ]
 }

types/types.ts

@@ -15,4 +15,4 @@ export interface Card {
 }
 
 export type Suit = '♠' | '♣' | '♦' | '♥'
-export type Rank = 'A' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | 'J' | 'Q' | 'K'
+export type Rank = 'A' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | 'V' | 'D' | 'R'