playlists support v1

2025-10-09 22:47:30 +02:00
parent c86e345117
commit e2c5693948
30 changed files with 620 additions and 554 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "printWidth": 100
+}
+
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,6 @@
 {
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
--- a/app/app.vue
+++ b/app/app.vue
@@ -14,7 +14,16 @@ useHead({
 </script>

 <style>
+button,
+input {
+  @apply px-4 py-2 m-4 rounded-md text-center font-bold
+}
+
 button {
-  @apply px-4 py-2 m-4 bg-esyellow text-slate-700 rounded-md;
+  @apply bg-esyellow text-slate-700;
+}
+
+input[type="email"] {
+  @apply bg-slate-900 text-esyellow;
 }
 </style>
--- a/app/components/molecule/box.vue
+++ b/app/components/molecule/box.vue
@@ -2,26 +2,52 @@
  <article class="box box-scene z-10" ref="scene">
    <div class="box-object" ref="box">
      <div class="face front relative" ref="frontFace">
-        <img class="cover absolute" :src="`/${compilation.id}/cover.jpg`" alt="">
+        <img v-if="compilation.duration" class="cover absolute" :src="`/${compilation.id}/cover.jpg`" alt="">
+        <div class="size-full flex justify-center items-center text-7xl" v-else>
+          {{ compilation.description }}
+        </div>
      </div>
-      <div class="face back" ref="backFace">
-        {{ compilation.description }}
+      <div class="face back flex flex-col flex-wrap items-start p-4 overflow-hidden" ref="backFace">
+        <li class="list-none text-xxs w-1/2 flex flex-row"
+          v-for="track in dataStore.getTracksByCompilationId(compilation.id).slice(0, -1)" :key="track.id"
+          :track="track">
+          <span class="" v-if="isNotManifesto">
+            {{ track.order }}.
+          </span>
+          <p class="text-left text-slate-700">
+            <i class="text-slate-950">
+              {{ track.title }}
+            </i> <br /> {{ track.artist.name }}
+          </p>
+        </li>
      </div>
      <div class="face right" ref="rightFace" />
      <div class="face left" ref="leftFace" />
      <div class="face top" ref="topFace">
-        <img class="logo h-full p-1" src="/logo.svg" alt="">
-        <img class="absolute block h-1/2" style="left:5%;" :src="`/${compilation.id}/title.svg`" alt="">
+        <template v-if="compilation.duration !== 0">
+          <img class="logo h-full p-1" src="/logo.svg" alt="">
+          <img class="absolute block h-1/2" style="left:5%;" :src="`/${compilation.id}/title.svg`" alt="">
+        </template>
+        <template v-else>
+          <span class="absolute block h-1/2 right-6">
+            playlist
+          </span>
+          <img class="logo h-full p-1" src="/favicon.svg" alt="">
+          <span class="absolute block h-1/2" style="left:5%;">
+            {{ compilation.name }}
+          </span>
+        </template>
      </div>
      <div class="face bottom" ref="bottomFace" />
    </div>
-    <OrganismCompilationPage :compilation="compilation" class="box-page" v-if="props.BoxState === 'selected'" />
+    <slot></slot>
  </article>
 </template>

 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import type { Compilation, BoxState } from '~~/types/types'
+import { useDataStore } from '~/store/data'

 const props = withDefaults(
  defineProps<{
@@ -30,8 +56,9 @@ const props = withDefaults(
  }>(),
  { BoxState: 'list' }
 )
-
+const dataStore = useDataStore()
 const isDraggable = computed(() => !['list', 'hidden'].includes(BoxState.value()))
+const isNotManifesto = computed(() => !props.compilation.id.startsWith('ES00'))

 // --- Réfs ---
 const scene = ref<HTMLElement>()
@@ -250,10 +277,6 @@ watch(() => isDraggable, (enabled) => enabled ? addListeners() : removeListeners

  .face {
    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
    color: white;
    font-weight: 600;
    backface-visibility: hidden;
@@ -271,6 +294,10 @@ watch(() => isDraggable, (enabled) => enabled ? addListeners() : removeListeners
  .face.bottom {
    width: var(--width);
    height: var(--depth);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
  }

  .face.left,
--- a/app/components/molecule/card.vue
+++ b/app/components/molecule/card.vue
@@ -1,21 +1,28 @@
 <template>
-  <article class="flip-card w-56 h-80">
+  <article @click="() => playerStore.playTrack(props.track).catch(err => console.error(err))"
+    class="card flip-card w-56 h-80" :class="isFaceUp ? 'face-up' : 'face-down'">
    <div class="flip-inner">
      <main
        class="flip-front backdrop-blur-sm border-2 -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-40 hover:bg-opacity-80 hover:shadow-xl transition-all bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
        <!-- Cover -->
-        <figure @click="playerStore.playTrack(props.track)" class="flex-1 overflow-hidden rounded-t-xl cursor-pointer">
+        <figure class="flex-1 overflow-hidden rounded-t-xl cursor-pointer">
          <img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
        </figure>

        <!-- Body -->
        <div class="p-3 text-center bg-white rounded-b-xl">
-          <div class="label">
+          <div class="label" v-if="isOrder">
            {{ props.track.order }}
          </div>
          <h2 class="text-base text-neutral-800 font-bold truncate">{{ props.track.title }}</h2>
          <p class="text-sm text-neutral-500 truncate">
-            {{ props.track.artist.name }}
+            <template v-if="isPlaylistTrack">
+              {{ props.track.artist.name }}
+            </template>
+          <div class="order" v-if="isPlaylistTrack">
+            {{ props.track.card?.rank }}
+            {{ props.track.card?.suit }}
+          </div>
          </p>
        </div>
      </main>
@@ -25,7 +32,7 @@
        <!-- Back -->
        <div class="h-full flex p-16 text-center bg-slate-800 rounded-xl">
          <img src="/favicon.svg" />
-          <div class="label label--id">
+          <div class="label label--id" v-if="isOrder">
            {{ props.track.order }}
          </div>
        </div>
@@ -39,14 +46,19 @@
 import type { Track } from '~~/types/types'
 import { usePlayerStore } from '~/store/player'

-const props = defineProps<{ track: Track }>()
+const props = withDefaults(defineProps<{ track: Track; isFaceUp?: boolean }>(), {
+  isFaceUp: false
+})
 const playerStore = usePlayerStore()
+const isManifesto = computed(() => props.track.compilationId.startsWith('ES00'))
+const isOrder = computed(() => props.track.order && !isManifesto)
+const isPlaylistTrack = computed(() => props.track.compilationId.length === 6)
 const coverUrl = props.track.coverId.startsWith('http')
  ? props.track.coverId
  : `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`;
 </script>

-<style>
+<style lang="scss">
 .label {
  @apply rounded-full size-7 p-2 bg-esyellow leading-3 -mt-6;
  font-weight: bold;
@@ -56,34 +68,38 @@ const coverUrl = props.track.coverId.startsWith('http')
 /* Flip effect */
 .flip-card {
  perspective: 1000px;
-}

-.flip-inner {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  transition: transform 0.6s;
-  transform-style: preserve-3d;
-}
+  .flip-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.6s;
+    transform-style: preserve-3d;

-.flipped .flip-inner {
-  transform: rotateY(180deg);
-}
+    .face-down & {
+      transform: rotateY(180deg);
+    }

-.flip-front,
-.flip-back {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  backface-visibility: hidden;
-  will-change: transform;
-}
+    .face-up & {
+      transform: rotateY(0deg);
+    }
+  }

-.flip-front {
-  transform: rotateY(0deg);
-}
+  .flip-front,
+  .flip-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    will-change: transform;
+  }

-.flip-back {
-  transform: rotateY(180deg);
+  .flip-front {
+    transform: rotateY(0deg);
+  }
+
+  .flip-back {
+    transform: rotateY(180deg);
+  }
 }
 </style>
--- a/app/components/organism/compilationList.vue
+++ b/app/components/organism/compilationList.vue
@@ -1,23 +1,35 @@
 <template>
  <div class="flex flex-col-reverse mt-16">
-    <molecule-box v-for="compilation in dataStore.getAllCompilations.slice().reverse()" :key="compilation.id"
-      :compilation="compilation" :BoxState="boxStates[compilation.id]" @click="() => openCompilation(compilation.id)"
-      :class="boxStates[compilation.id]" />
+    <box v-for="compilation in dataStore.getAllCompilations.slice()" :key="compilation.id" :compilation="compilation"
+      :BoxState="boxStates[compilation.id]" @click="() => openCompilation(compilation.id)"
+      :class="boxStates[compilation.id]" class="text-center">
+      <button @click="playerStore.playCompilation(compilation.id)" v-if="boxStates[compilation.id] === 'selected'"
+        class="relative z-40 rounded-full size-24 bottom-1/2 text-2xl">▶</button>
+      <deck :compilation="compilation" class="box-page" v-if="boxStates[compilation.id] === 'selected'" />
+    </box>
  </div>
 </template>

 <script setup lang="ts">
 import { useDataStore } from '~/store/data'
 import type { BoxState } from '~~/types/types'
+import { usePlayerStore } from '~/store/player'

 const dataStore = useDataStore()
 const boxStates = ref<Record<string, BoxState>>({})
+const playerStore = usePlayerStore()

 function openCompilation(id: string) {
  if (boxStates.value[id] === 'list') {
    for (const key in boxStates.value) {
      boxStates.value[key] = (key === id) ? 'selected' : 'hide'
    }
+    // Scroll to the top smoothly
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+
  }
 }

--- a/app/components/deck.vue
+++ b/app/components/deck.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <div class="hidden tools fixed top-0 -left-0">
+      <button @click="setDisplay('pile')">pile</button>
+      <button @click="setDisplay('plateau')">plateau</button>
+      <button @click="setDisplay('holdem')">holdem</button>
+    </div>
+    <div ref="deck" class="deck flex flex-wrap justify-center gap-4">
+      <card v-if="compilation.duration" v-for="track in dataStore.getTracksByCompilationId(compilation.id)"
+        :key="track.id" :track="track" />
+      <card v-else v-for="track in dataStore.getPlaylistTracksByCompilationId(compilation.id)" :track="track" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDataStore } from '~/store/data'
+import type { Compilation } from '~~/types/types'
+
+const props = defineProps<{
+  compilation: Compilation
+}>()
+const dataStore = useDataStore()
+const deck = ref()
+
+function setDisplay(displayMode) {
+  deck.value.classList.remove('pile', 'plateau', 'holdem')
+  deck.value.classList.add(displayMode)
+}
+</script>
+
+<style lang="scss">
+.deck {
+  @apply transition-all;
+
+  &.pile {
+    @apply relative;
+
+    .card {
+      @apply absolute top-0;
+    }
+  }
+
+  &.plateau {
+    @apply mt-8 p-8 w-full flex flex-wrap justify-around;
+  }
+
+  &.holdem {
+    /* style holdem */
+  }
+}
+</style>
--- a/app/components/logo.vue
+++ b/app/components/logo.vue
@@ -0,0 +1,8 @@
+<template>
+  <header class="py-4">
+    <img class="logo p-1 w-80" src="/logo.svg" alt="">
+    <h1 class="dark:text-white text-center">
+      mix-tapes
+    </h1>
+  </header>
+</template>
--- a/app/components/molecule/atropos.vue
+++ b/app/components/molecule/atropos.vue
@@ -1,126 +0,0 @@
-<template>
-  <div class="w-96 m-6">
-    <atropos-component class="atropos game-box atropos-rotate-touch-scroll-y" rotate-touch="scroll-y" rotate-x-max="24"
-      rotate-y-max="24">
-
-      <div class="atropos-inner relative">
-        <div class="game-box-bg bg-gradient-to-t from-slate-800 to-zinc-900 h-96 relative" data-atropos-offset="-8" />
-        <img :src="id + '/object.png'" data-atropos-offset="-3" class="absolute bottom-0 inset-0 h-96 object-cover">
-        <img :src="id + '/name.png'" data-atropos-offset="0" class="absolute inset-0 self-end justify-self-end p-4">
-        <img src="/logo.svg" data-atropos-offset="0" width="70%"
-          class="logo absolute inset-0 self-center justify-self-center">
-        <!-- <img src="/play.svg" width="20%" class="absolute play"> -->
-      </div>
-      <span class="game-box-t" />
-      <span class="game-box-r" />
-      <span class="game-box-b" />
-      <span class="game-box-l" />
-    </atropos-component>
-  </div>
-</template>
-
-<script setup>
-const id = 'ES01A'
-</script>
-
-<style>
-.game-box .logo {
-  filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.8));
-}
-
-.game-box {
-  --side-color: #004297;
-  --side-size: 32px;
-  aspect-ratio: 526 / 656;
-}
-
-.atropos-rotate {
-  position: relative;
-}
-
-.game-box .atropos-rotate:before {
-  content: "";
-  position: absolute;
-  left: 0;
-  width: calc(100% + 8px);
-  height: calc(100% + 16px);
-  top: -8px;
-  background: #086ef4;
-  z-index: 1;
-}
-
-.atropos-inner {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  transform-style: preserve-3d;
-  transform: translateZ(0);
-  display: block;
-  z-index: 1;
-  position: relative;
-}
-
-.game-box-t,
-.game-box-r,
-.game-box-b,
-.game-box-l {
-  transform-style: preserve-3d;
-  backface-visibility: hidden;
-  position: absolute;
-  /* display: none; */
-}
-
-.game-box-t {
-  width: calc(100% + 8px);
-  height: var(--side-size);
-  background: var(--side-color);
-  left: 0;
-  top: -8px;
-  transform: translate3d(0, 0, -32px) rotateX(90deg);
-  transform-origin: center top;
-  top: -8px;
-  transform: translateZ(-32px) rotateX(90deg);
-  transform-origin: center top;
-}
-
-.game-box-b {
-  width: calc(100% + 8px);
-  height: var(--side-size);
-  background: var(--side-color);
-  left: 0;
-  bottom: -8px;
-  transform: translate3d(0, 0, -32px) rotateX(-90deg);
-  transform-origin: center bottom;
-}
-
-.game-box-r {
-  width: var(--side-size);
-  height: calc(100% + 16px);
-  background: var(--side-color);
-  right: -8px;
-  top: -8px;
-  transform: translate3d(0, 0, -32px) rotateY(90deg);
-  transform-origin: right center;
-}
-
-.game-box-l {
-  width: var(--side-size);
-  height: calc(100% + 16px);
-  background: var(--side-color);
-  left: 0px;
-  top: -8px;
-  transform: translate3d(0, 0, -32px) rotateY(-90deg);
-  transform-origin: left center;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 10.4%;
-    background: #a5a5a5;
-    left: 0;
-    top: 9px;
-  }
-}
-</style>
--- a/app/components/molecule/theObject.vue
+++ b/app/components/molecule/theObject.vue
@@ -1,103 +0,0 @@
-<template>
-  <h1 class="flex items-center justify-center min-h-screen">
-    <atropos-component class="my-atropos">
-      <span class="game-box-t" />
-      <span class="game-box-r" />
-      <span class="game-box-b" />
-      <span class="game-box-l" />
-      <div class="game-box-bg bg-gradient-to-t from-slate-800 to-zinc-900 h-60" data-atropos-offset="-8" />
-      <img :src="id + '/object.png'" data-atropos-offset="-3" class="absolute inset-0 object-cover">
-      <img :src="id + '/name.png'" data-atropos-offset="0" class="absolute inset-0 object-cover">
-      <img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0">
-      <img src="/play.svg" width="20%" class="absolute play">
-    </atropos-component>
-  </h1>
-</template>
-
-<script setup>
-const id = 'ES01A'
-</script>
-
-<style>
-/* .atropos-inner,
-.game-box-bg {
-  width: 300px;
-  height: 300px;
-} */
-
-.game-box-t,
-.game-box-r,
-.game-box-b,
-.game-box-l {
-  transform-style: preserve-3d;
-  backface-visibility: hidden;
-  position: absolute;
-  /* display: none; */
-}
-
-.game-box-t {
-  width: calc(100% + 8px);
-  height: var(--side-size);
-  background: var(--side-color);
-  left: 0;
-  top: -8px;
-  transform: translate3d(0, 0, -32px) rotateX(90deg);
-  transform-origin: center top;
-}
-
-.game-box-b {
-  width: calc(100% + 8px);
-  height: var(--side-size);
-  background: var(--side-color);
-  left: 0;
-  bottom: -8px;
-  transform: translate3d(0, 0, -32px) rotateX(-90deg);
-  transform-origin: center bottom;
-}
-
-.game-box-r {
-  width: var(--side-size);
-  height: calc(100% + 16px);
-  background: var(--side-color);
-  right: -8px;
-  top: -8px;
-  transform: translate3d(0, 0, -32px) rotateY(90deg);
-  transform-origin: right center;
-}
-
-.game-box-l {
-  width: var(--side-size);
-  height: calc(100% + 16px);
-  background: var(--side-color);
-  left: 0px;
-  top: -8px;
-  transform: translate3d(0, 0, -32px) rotateY(-90deg);
-  transform-origin: left center;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 10.4%;
-    background: #a5a5a5;
-    left: 0;
-    top: 9px;
-  }
-}
-
-.atropos-rotate {
-  position: relative;
-}
-
-.atropos-rotate:before {
-  content: "";
-  position: absolute;
-  left: 0;
-  width: calc(100% + 8px);
-  height: calc(100% + 16px);
-  top: -8px;
-  background: #086ef4;
-  z-index: 1;
-}
-</style>
--- a/app/components/newsletter.vue
+++ b/app/components/newsletter.vue
@@ -0,0 +1,11 @@
+<template>
+  <form class="h-screen flex justify-center items-center flex-col absolute top-0 left-1/2 -translate-x-1/2">
+    <label for="email" class="block text-xl">
+      be notify when's evilSpins open :
+    </label>
+    <div>
+      <input type="email" name="" id="email" placeholder="email">
+      <button>ok</button>
+    </div>
+  </form>
+</template>
--- a/app/components/organism/compilationPage.vue
+++ b/app/components/organism/compilationPage.vue
@@ -1,16 +0,0 @@
-<template>
-  <div class="mt-8 p-8 w-full flex flex-wrap justify-around">
-    <MoleculeCard v-for="track in dataStore.getTracksByCompilationId(compilation.id)" :key="track.id" :track="track" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useDataStore } from '~/store/data'
-import type { Compilation } from '~~/types/types'
-
-const props = defineProps<{
-  compilation: Compilation
-}>()
-
-const dataStore = useDataStore()
-</script>
--- a/app/components/molecule/player.vue
+++ b/app/components/molecule/player.vue
@@ -1,13 +1,12 @@
 <template>
  <div class="fixed left-0 bottom-0 opacity-1 z-50 w-full bg-white transition-all"
    :class="{ '-bottom-20 opacity-0': !playerStore.currentTrack }">
-    <!-- <p class="hidden">
+    <!-- <p>
      {{ Math.round(currentTime) }}
      {{ Math.round(currentProgression) }}%
    </p> -->
-    <audio ref="audioRef" class="w-full"
-      :src="playerStore.currentTrack ? playerStore.getCompilationUrlFromTrack(playerStore.currentTrack) : ''"
-      controls />
+    {{ playerStore.currentTrack?.url }}
+    <audio ref="audioRef" class="w-full" :src="playerStore.currentTrack?.url || ''" controls />
  </div>
 </template>

--- a/app/pages/dev.vue
+++ b/app/pages/dev.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="w-full flex flex-col items-center">
+    <logo />
+    <main>
+      <compilations />
+      <player />
+    </main>
+  </div>
+</template>
+
+<style>
+.logo {
+  filter: drop-shadow(2px 2px 0 rgb(0 0 0 / 0.8));
+}
+</style>
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,15 +1,8 @@
 <template>
  <div class="w-full flex flex-col items-center">
-    <header class="py-4">
-      <img class="logo p-1 w-80" src="/logo.svg" alt="">
-      <h1 class="dark:text-white text-center">
-        compilations
-        indépendantes
-      </h1>
-    </header>
+    <logo />
    <main>
-      <OrganismCompilationList />
-      <MoleculePlayer />
+      <newsletter />
    </main>
  </div>
 </template>
--- a/app/pages/studio.vue
+++ b/app/pages/studio.vue
@@ -3,7 +3,7 @@
    <div class="bg-page-dark-bg text-white">
      <div class="flex flex-col-reverse bg-gradient-to-r from-primary to-primary-dark">
        <div class="mt-8 flex flex-wrap justify-center">
-          <!-- <molecule-box :compilation="compilation" /> -->
+          <!-- <box :compilation="compilation" /> -->
          <div class="devtool  absolute right-4 text-white bg-black rounded-2xl px-4 py-2">
            <!-- <button @click="currentPosition = boxPositions.side">side</button>
            <button @click="currentPosition = boxPositions.front">front</button>
@@ -37,7 +37,7 @@
          </div>
        </div>
      </div>
-      <molecule-card :track="track" />
+      <card :track="track" />
    </div>
  </div>
 </template>
--- a/app/store/data.ts
+++ b/app/store/data.ts
@@ -5,10 +5,11 @@ import { defineStore } from 'pinia'

 export const useDataStore = defineStore('data', {
  state: () => ({
-    compilations: [] as Compilation[],  // Store your compilation data here
-    artists: [] as Artist[],       // Store artist data here
-    tracks: [] as Track[],        // Store track data here
-    isLoaded: false,                   // Remember if data is already loaded
+    compilations: [] as Compilation[], // Store your compilation data here
+    artists: [] as Artist[], // Store artist data here
+    tracks: [] as Track[], // Store track data here
+    playlistTracks: [] as Track[], // store playslit tracks
+    isLoaded: false // Remember if data is already loaded
  }),

  actions: {
@@ -17,18 +18,32 @@ export const useDataStore = defineStore('data', {

      const { data: compilations } = await useFetch<Compilation[]>('/api/compilations')
      const { data: artists } = await useFetch<Artist[]>('/api/artists')
-      const { data: rawTracks } = await useFetch<{ id: number, compilationId: string, title: string, artist: number, start: number, url: string, coverId: string }[]>('/api/tracks')
-
+      const { data: rawTracks } = await useFetch<Track[]>('/api/tracks')
+      const { data: playlistTracks } = await useFetch<Track[]>('/api/playlists')
      // Stocker les données de base
      this.compilations = compilations.value ?? []
      this.artists = artists.value ?? []

      // Mapper les tracks pour remplacer l'artistId par l'objet Artist
-      const artistMap = new Map(this.artists.map(a => [a.id, a]))
-
-      this.tracks = (rawTracks.value ?? []).map(track => ({
+      const artistMap = new Map(this.artists.map((a) => [a.id, a]))
+      this.tracks = (rawTracks.value ?? []).map((track) => ({
        ...track,
-        artist: artistMap.get(track.artist) ?? { id: track.artist, name: 'Unknown', url: '', coverId: '' }
+        artist: artistMap.get(track.artist) ?? {
+          id: track.artist,
+          name: 'Unknown',
+          url: '',
+          coverId: ''
+        }
+      }))
+
+      this.playlistTracks = (playlistTracks.value ?? []).map((track) => ({
+        ...track,
+        artist: artistMap.get(track.artist) ?? {
+          id: track.artist,
+          name: track.artist,
+          url: '',
+          coverId: ''
+        }
      }))

      this.isLoaded = true
@@ -40,34 +55,43 @@ export const useDataStore = defineStore('data', {
    getAllCompilations: (state) => state.compilations,
    getCompilationById: (state) => {
      return (id: string) => {
-        return state.compilations.find(compilation => compilation.id === id)
+        return state.compilations.find((compilation) => compilation.id === id)
      }
    },
    // Obtenir toutes les pistes d'une compilation donnée
-    getTracksByCompilationId: (state) => (compilationId: string) => {
-      return state.tracks.filter(track => track.compilationId === compilationId)
+    getTracksByCompilationId: (state) => (id: string) => {
+      return state.tracks.filter((track) => track.compilationId === id)
    },
    // Filtrer les artistes selon certains critères
-    getArtistById: (state) => (id: number) => state.artists.find(artist => artist.id === id),
+    getArtistById: (state) => (id: number) => state.artists.find((artist) => artist.id === id),

    // Obtenir toutes les pistes d'un artiste donné
    getTracksByArtistId: (state) => (artistId: number) => {
-      return state.tracks.filter(track => track.artist.id === artistId)
+      return state.tracks.filter((track) => track.artist.id === artistId)
+    },
+    getFirstTrackOfCompilation() {
+      return (compilationId: string) => {
+        const tracks = this.getTracksByCompilationId(compilationId)
+        return tracks.length > 0 ? tracks[0] : null
+      }
    },
    getNextTrack: (state) => {
      return (track: Track) => {
        // Récupérer toutes les tracks de la même compilation et les trier par ordre
        const tracksInCompilation = state.tracks
-          .filter(t => t.compilationId === track.compilationId)
+          .filter((t) => t.compilationId === track.compilationId)
          .sort((a, b) => a.order - b.order)

        // Trouver l’index de la track courante
-        const index = tracksInCompilation.findIndex(t => t.id === track.id)
+        const index = tracksInCompilation.findIndex((t) => t.id === track.id)
        // Retourner la track suivante ou null si c’est la dernière
        return index >= 0 && index < tracksInCompilation.length - 1
          ? tracksInCompilation[index + 1]
          : null
      }
+    },
+    getPlaylistTracksByCompilationId: (state) => (id: string) => {
+      return state.playlistTracks.filter((track) => track.compilationId === id)
    }
-  },
+  }
 })
--- a/app/store/player.ts
+++ b/app/store/player.ts
@@ -7,11 +7,12 @@ export const usePlayerStore = defineStore('player', {
  state: () => ({
    currentTrack: null as Track | null,
    position: 0,
-    audio: null as HTMLAudioElement | null,
+    audio: null as HTMLAudioElement | null
  }),

  actions: {
    async playTrack(track: Track) {
+      const oldTrack = this.currentTrack
      this.currentTrack = track

      // toggle si on reclique sur la même
@@ -24,21 +25,20 @@ export const usePlayerStore = defineStore('player', {
      }

      // définir la source (fichier de la compilation entière)
-      this.audio.src = this.getCompilationUrlFromTrack(track)
      this.audio.load()

      // attendre que le player soit prêt avant de lire
      await new Promise<void>((resolve, reject) => {
        const onCanPlay = () => {
-          this.audio!.removeEventListener("canplay", onCanPlay)
+          this.audio!.removeEventListener('canplay', onCanPlay)
          resolve()
        }
        const onError = (e: Event) => {
-          this.audio!.removeEventListener("error", onError)
+          this.audio!.removeEventListener('error', onError)
          reject(e)
        }
-        this.audio!.addEventListener("canplay", onCanPlay, { once: true })
-        this.audio!.addEventListener("error", onError, { once: true })
+        this.audio!.addEventListener('canplay', onCanPlay, { once: true })
+        this.audio!.addEventListener('error', onError, { once: true })
      })

      // positionner le début
@@ -48,24 +48,23 @@ export const usePlayerStore = defineStore('player', {
      try {
        await this.audio.play()
      } catch (err) {
-        console.error("Impossible de lire la piste :", err)
+        console.error('Impossible de lire la piste :', err)
      }
    },

    togglePlay() {
      if (!this.audio) return
      if (this.audio.paused) {
-        this.audio.play().catch(err => console.error(err))
+        this.audio.play().catch((err) => console.error(err))
      } else {
        this.audio.pause()
      }
-    },
+    }
  },

  getters: {
    isCurrentCompilation: (state) => {
-      return (compilationId: string) =>
-        compilationId === state.currentTrack?.compilationId
+      return (compilationId: string) => compilationId === state.currentTrack?.compilationId
    },

    isPlayingTrack: (state) => {
@@ -85,15 +84,8 @@ export const usePlayerStore = defineStore('player', {

    getCurrentTrack: (state) => state.currentTrack,

-    getCompilationUrlFromTrack: () => {
-      return (track: Track) =>
-        `https://files.erudi.fr/evilspins/${track.compilationId}.mp3`
-    },
-
    getCurrentCompilation: (state) => {
-      return state.currentTrack
-        ? state.getCompilationUrlFromTrack(state.currentTrack)
-        : null
+      return state.currentTrack ? state.currentTrack.url : null
    },

    getTrackStop: (state) => {
@@ -109,5 +101,5 @@ export const usePlayerStore = defineStore('player', {
        }
      }
    }
-  },
+  }
 })
--- a/app/store/user.ts
+++ b/app/store/user.ts
@@ -0,0 +1,11 @@
+import type { Compilation, Artist, Track } from '~/../types/types'
+
+// stores/user.ts
+import { defineStore } from 'pinia'
+
+export const useDataStore = defineStore('data', {
+  state: () => ({
+    badge: [] // un badge par user achievement pour enrichir le déchifrage de l'app (afichage des nom des titres/artiste, collection de carte déjà joué (et du coups possibilité de les rejouer dans son deck))
+    // evilSpins est un jeux mais pas vraiment pokemon (un morceau = un pokemon) mais aussi un jeux d'aventure / exploration ou plus on progresse plus on peu voir de chose
+  })
+})
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,6 +1,8 @@
 // @ts-check
 import withNuxt from "./.nuxt/eslint.config.mjs";
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'

+export default withNuxt([eslintPluginPrettierRecommended])
 export default withNuxt({
  rules: {
    // Garde l'ordre correct : class avant @click
--- a/package.json
+++ b/package.json
@@ -7,7 +7,11 @@
    "dev": "nuxt dev --host",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --check .",
+    "format:fix": "prettier --write ."
  },
  "dependencies": {
    "@nuxt/eslint": "1.9.0",
--- a/server/api/compilations.ts
+++ b/server/api/compilations.ts
@@ -2,41 +2,158 @@ import { eventHandler } from 'h3'

 export default eventHandler(() => {
  return [
+    {
+      id: 'ES2012',
+      name: '2012',
+      duration: 0,
+      description: '🐉💧',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2013',
+      name: '2013',
+      duration: 0,
+      description: '🐍💧',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2015',
+      name: '2015',
+      duration: 0,
+      description: '🐐🌳',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2016',
+      name: '2016',
+      duration: 0,
+      description: '🐒🔥',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2017',
+      name: '2017',
+      duration: 0,
+      description: '🐓🔥',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2018',
+      name: '2018',
+      duration: 0,
+      description: '🐕🌱',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2019',
+      name: '2019',
+      duration: 0,
+      description: '🐖🌱',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2020',
+      name: '2020',
+      duration: 0,
+      description: '🐀🪙',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2021',
+      name: '2021',
+      duration: 0,
+      description: '🐃🪙',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2022',
+      name: '2022',
+      duration: 0,
+      description: '🐅💧',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2023',
+      name: '2023',
+      duration: 0,
+      description: '🐇💧',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2024',
+      name: '2024',
+      duration: 0,
+      description: '🐉🌳',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2025',
+      name: '2025',
+      duration: 0,
+      description: '🐍🌳',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
    {
      id: 'ES00A',
-      name: 'zero',
+      name: 'manifeste',
      duration: 2794,
      description: 'Zero is for manifesto',
      color1: '#ffffff',
      color2: '#48959d',
-      color3: '#00ff00',
+      color3: '#00ff00'
    },
    {
      id: 'ES00B',
-      name: 'zero b-side',
+      name: 'manifeste B',
      duration: 2470,
      description: 'Even Zero has a b-side',
      color1: '#0d01b9',
      color2: '#3b7589',
-      color3: '#00ff00',
+      color3: '#00ff00'
    },
    {
      id: 'ES01A',
-      name: 'first',
+      name: '...',
      duration: 3487,
      description: '...',
      color1: '#c7b3aa',
      color2: '#000100',
-      color3: '#00ff00',
+      color3: '#00ff00'
    },
    {
      id: 'ES01B',
-      name: 'first b-side',
+      name: '... B',
      duration: 3773,
      description: '...',
      color1: '#f7dd01',
      color2: '#010103',
-      color3: '#00ff00',
+      color3: '#00ff00'
    }
  ]
 })
--- a/server/api/playlists.ts
+++ b/server/api/playlists.ts
@@ -0,0 +1,69 @@
+import fs from 'fs'
+import path from 'path'
+import { eventHandler } from 'h3'
+import { getCardFromDate } from '../../utils/cards'
+
+export default eventHandler(async (event) => {
+  const basePath = path.join(process.cwd(), '/mnt/media/files/music')
+
+  try {
+    let allTracks: any[] = []
+
+    const dirPath = basePath
+    const urlPrefix = `https://files.erudi.fr/music`
+
+    let files = await fs.promises.readdir(dirPath)
+    files = files.filter((f) => !f.startsWith('.'))
+
+    const tracks = files.map((file, index) => {
+      const EXT_RE = /\.(mp3|flac|wav|opus)$/i
+      const nameWithoutExt = file.replace(EXT_RE, '')
+
+      // On split sur __
+      const parts = nameWithoutExt.split('__')
+      let stamp = parts[0] || ''
+      let artist = parts[1] || ''
+      let title = parts[2] || ''
+
+      title = title.replaceAll('_', ' ')
+      artist = artist.replaceAll('_', ' ')
+
+      // Parser la date depuis le stamp
+      let year = 2020,
+        month = 1,
+        day = 1,
+        hour = 0
+      if (stamp.length === 10) {
+        year = Number(stamp.slice(0, 4))
+        month = Number(stamp.slice(4, 6))
+        day = Number(stamp.slice(6, 8))
+        hour = Number(stamp.slice(8, 10))
+      }
+
+      const date = new Date(year, month - 1, day, hour)
+      const card = getCardFromDate(date)
+      const url = `${urlPrefix}/${encodeURIComponent(file)}`
+
+      return {
+        id: Number(`${year}${index + 1}`),
+        compilationId: `ES${year}`,
+        date,
+        title: title.trim(),
+        artist: artist.trim(),
+        url,
+        coverId: '',
+        card
+      }
+    })
+
+    tracks.sort((a, b) => b.date.getTime() - a.date.getTime())
+    allTracks.push(...tracks)
+
+    return allTracks
+  } catch (error) {
+    return {
+      success: false,
+      error: (error as Error).message
+    }
+  }
+})
--- a/server/api/playlists/[id].ts
+++ b/server/api/playlists/[id].ts
@@ -1,24 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-import { eventHandler } from 'h3'
-
-export default eventHandler(async (event) => {
-  const id = event.context.params?.id || ''
-
-  const directoryPath = path.join(process.cwd(), '/mnt/media/files/music/' + id) // replace 'your-folder' with the folder you want to list
-
-  try {
-    // Read the directory contents
-    const files = await fs.promises.readdir(directoryPath)
-
-    return {
-      success: true,
-      files: files.filter(file => !file.startsWith('.')) // optional: exclude unwanted files
-    }
-  } catch (error) {
-    return {
-      success: false,
-      error: error.message
-    }
-  }
-})
--- a/server/api/playlists/index.ts
+++ b/server/api/playlists/index.ts
@@ -1,22 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-import { eventHandler } from 'h3'
-
-export default eventHandler(async (event) => {
-  const directoryPath = path.join(process.cwd(), '/mnt/media/files/music')
-
-  try {
-    // Read the directory contents
-    const files = await fs.promises.readdir(directoryPath)
-
-    return {
-      success: true,
-      files: files.filter(file => !file.startsWith('.')).reverse() // exclude unwanted files
-    }
-  } catch (error) {
-    return {
-      success: false,
-      error: error.message
-    }
-  }
-})
--- a/server/api/tracks.ts
+++ b/server/api/tracks.ts
@@ -1,446 +1,409 @@
 import { eventHandler } from 'h3'

 export default eventHandler(() => {
-  return [
+  const tracks = [
    {
-      id: 0,
      order: 1,
      compilationId: 'ES00A',
      title: 'The grinding wheel',
      artist: 0,
      start: 0,
-      url: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel',
-      coverId: 'a3236746052',
+      link: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel',
+      coverId: 'a3236746052'
    },
    {
-      id: 1,
      order: 2,
      compilationId: 'ES00A',
      title: 'Bleach',
      artist: 1,
      start: 392,
-      url: 'https://the-kundalini-genie.bandcamp.com/track/bleach-2',
-      coverId: 'a1714786533',
+      link: 'https://the-kundalini-genie.bandcamp.com/track/bleach-2',
+      coverId: 'a1714786533'
    },
    {
-      id: 2,
      order: 3,
      compilationId: 'ES00A',
      title: 'Televised mind',
      artist: 2,
      start: 896,
-      url: 'https://fontainesdc.bandcamp.com/track/televised-mind',
+      link: 'https://fontainesdc.bandcamp.com/track/televised-mind',
      coverId: 'a3772806156'
    },
    {
-      id: 3,
      order: 4,
      compilationId: 'ES00A',
      title: 'In it',
      artist: 3,
      start: 1139,
-      url: 'https://howlinbananarecords.bandcamp.com/track/in-it',
-      coverId: 'a1720372066',
+      link: 'https://howlinbananarecords.bandcamp.com/track/in-it',
+      coverId: 'a1720372066'
    },
    {
-      id: 4,
      order: 5,
      compilationId: 'ES00A',
      title: 'Bad michel',
      artist: 4,
      start: 1245,
-      url: 'https://johnnymafia.bandcamp.com/track/bad-michel-3',
-      coverId: 'a0984622869',
+      link: 'https://johnnymafia.bandcamp.com/track/bad-michel-3',
+      coverId: 'a0984622869'
    },
    {
-      id: 5,
      order: 6,
      compilationId: 'ES00A',
      title: 'Overall',
      artist: 5,
      start: 1394,
-      url: 'https://newcandys.bandcamp.com/track/overall',
-      coverId: 'a0559661270',
+      link: 'https://newcandys.bandcamp.com/track/overall',
+      coverId: 'a0559661270'
    },
    {
-      id: 6,
      order: 7,
      compilationId: 'ES00A',
      title: 'Blowup',
      artist: 6,
      start: 1674,
-      url: 'https://magicshoppe.bandcamp.com/track/blowup',
-      coverId: 'a1444895293',
+      link: 'https://magicshoppe.bandcamp.com/track/blowup',
+      coverId: 'a1444895293'
    },
    {
-      id: 7,
      order: 8,
      compilationId: 'ES00A',
      title: 'Guitar jet',
      artist: 7,
      start: 1880,
-      url: 'https://radiomartiko.bandcamp.com/track/guitare-jet',
-      coverId: 'a1494681687',
+      link: 'https://radiomartiko.bandcamp.com/track/guitare-jet',
+      coverId: 'a1494681687'
    },
    {
-      id: 8,
      order: 9,
      compilationId: 'ES00A',
      title: 'Intercontinental radio waves',
      artist: 8,
      start: 2024,
-      url: 'https://traams.bandcamp.com/track/intercontinental-radio-waves',
-      coverId: 'a0046738552',
+      link: 'https://traams.bandcamp.com/track/intercontinental-radio-waves',
+      coverId: 'a0046738552'
    },
    {
-      id: 9,
      order: 10,
      compilationId: 'ES00A',
      title: 'Here comes the sun',
      artist: 9,
      start: 2211,
-      url: 'https://blue-orchid.bandcamp.com/track/here-come-the-sun',
-      coverId: 'a4102567047',
+      link: 'https://blue-orchid.bandcamp.com/track/here-come-the-sun',
+      coverId: 'a4102567047'
    },
    {
-      id: 10,
      order: 11,
      compilationId: 'ES00A',
      title: 'Like in the movies',
      artist: 10,
      start: 2560,
-      url: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies-2',
-      coverId: 'a2203158939',
+      link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies-2',
+      coverId: 'a2203158939'
    },
    {
-      id: 11,
      order: 1,
      compilationId: 'ES00B',
-      title: 'Ce que révèle l\'éclipse',
+      title: "Ce que révèle l'éclipse",
      artist: 0,
      start: 0,
-      url: 'https://arakirecords.bandcamp.com/track/ce-que-r-v-le-l-clipse',
-      coverId: 'a3236746052',
+      link: 'https://arakirecords.bandcamp.com/track/ce-que-r-v-le-l-clipse',
+      coverId: 'a3236746052'
    },
    {
-      id: 12,
      order: 2,
      compilationId: 'ES00B',
-      title: 'Bleedin\' Gums Mushrool',
+      title: "Bleedin' Gums Mushrool",
      artist: 1,
      start: 263,
-      url: 'https://the-kundalini-genie.bandcamp.com/track/bleedin-gums-mushroom',
-      coverId: 'a1714786533',
+      link: 'https://the-kundalini-genie.bandcamp.com/track/bleedin-gums-mushroom',
+      coverId: 'a1714786533'
    },
    {
-      id: 13,
      order: 3,
      compilationId: 'ES00B',
      title: 'A lucid dream',
      artist: 2,
      start: 554,
-      url: 'https://fontainesdc.bandcamp.com/track/a-lucid-dream',
-      coverId: 'a3772806156',
+      link: 'https://fontainesdc.bandcamp.com/track/a-lucid-dream',
+      coverId: 'a3772806156'
    },
    {
-      id: 14,
      order: 4,
      compilationId: 'ES00B',
      title: 'Lights off',
      artist: 3,
      start: 781,
-      url: 'https://howlinbananarecords.bandcamp.com/track/lights-off',
-      coverId: 'a1720372066',
+      link: 'https://howlinbananarecords.bandcamp.com/track/lights-off',
+      coverId: 'a1720372066'
    },
    {
-      id: 15,
      order: 5,
      compilationId: 'ES00B',
-      title: 'I\'m sentimental',
+      title: "I'm sentimental",
      artist: 4,
      start: 969,
-      url: 'https://johnnymafia.bandcamp.com/track/im-sentimental-2',
-      coverId: 'a2333676849',
+      link: 'https://johnnymafia.bandcamp.com/track/im-sentimental-2',
+      coverId: 'a2333676849'
    },
    {
-      id: 16,
      order: 6,
      compilationId: 'ES00B',
      title: 'Thrill or trip',
      artist: 5,
      start: 1128,
-      url: 'https://newcandys.bandcamp.com/track/thrill-or-trip',
-      coverId: 'a0559661270',
+      link: 'https://newcandys.bandcamp.com/track/thrill-or-trip',
+      coverId: 'a0559661270'
    },
    {
-      id: 17,
      order: 7,
      compilationId: 'ES00B',
      title: 'Redhead',
      artist: 6,
      start: 1303,
-      url: 'https://magicshoppe.bandcamp.com/track/redhead',
-      coverId: 'a0594426943',
+      link: 'https://magicshoppe.bandcamp.com/track/redhead',
+      coverId: 'a0594426943'
    },
    {
-      id: 18,
      order: 8,
      compilationId: 'ES00B',
      title: 'Supersonic twist',
      artist: 7,
      start: 1584,
-      url: 'https://open.spotify.com/track/66voQIZAJ3zD3Eju2qtNjF',
-      coverId: 'a1494681687',
+      link: 'https://open.spotify.com/track/66voQIZAJ3zD3Eju2qtNjF',
+      coverId: 'a1494681687'
    },
    {
-      id: 19,
      order: 9,
      compilationId: 'ES00B',
      title: 'Flowers',
      artist: 8,
      start: 1749,
-      url: 'https://traams.bandcamp.com/track/flowers',
-      coverId: 'a3644668199',
+      link: 'https://traams.bandcamp.com/track/flowers',
+      coverId: 'a3644668199'
    },
    {
-      id: 20,
      order: 10,
      compilationId: 'ES00B',
      title: 'The shade',
      artist: 9,
      start: 1924,
-      url: 'https://blue-orchid.bandcamp.com/track/the-shade',
-      coverId: 'a0804204790',
+      link: 'https://blue-orchid.bandcamp.com/track/the-shade',
+      coverId: 'a0804204790'
    },
    {
-      id: 21,
      order: 11,
      compilationId: 'ES00B',
      title: 'Like in the movies',
      artist: 10,
      start: 2186,
-      url: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies',
-      coverId: 'a3647322740',
+      link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies',
+      coverId: 'a3647322740'
    },
    {
-      id: 22,
      order: 1,
      compilationId: 'ES01A',
      title: 'He Walked In',
      artist: 11,
      start: 0,
-      url: 'https://kidcongothepinkmonkeybirds.bandcamp.com/track/he-walked-in',
-      coverId: 'a0336300523',
+      link: 'https://kidcongothepinkmonkeybirds.bandcamp.com/track/he-walked-in',
+      coverId: 'a0336300523'
    },
    {
-      id: 23,
      order: 2,
      compilationId: 'ES01A',
      title: 'The Third Wave',
      artist: 12,
      start: 841,
-      url: 'https://firefriend.bandcamp.com/track/the-third-wave',
-      coverId: 'a2803689859',
+      link: 'https://firefriend.bandcamp.com/track/the-third-wave',
+      coverId: 'a2803689859'
    },
    {
-      id: 24,
      order: 3,
      compilationId: 'ES01A',
      title: 'Broadcaster',
      artist: 13,
      start: 1104.5,
-      url: 'https://squiduk.bandcamp.com/track/broadcaster',
-      coverId: 'a3391719769',
+      link: 'https://squiduk.bandcamp.com/track/broadcaster',
+      coverId: 'a3391719769'
    },
    {
-      id: 25,
      order: 4,
      compilationId: 'ES01A',
      title: 'Mourn',
      artist: 14,
      start: 1441,
-      url: 'https://lysistrata.bandcamp.com/track/mourn-2',
-      coverId: 'a0872900041',
+      link: 'https://lysistrata.bandcamp.com/track/mourn-2',
+      coverId: 'a0872900041'
    },
    {
-      id: 26,
      order: 5,
      compilationId: 'ES01A',
      title: 'Let it Blow',
      artist: 15,
      start: 1844.8,
-      url: 'https://pabloxbroadcastingservices.bandcamp.com/track/let-it-blow',
-      coverId: 'a4000148031',
+      link: 'https://pabloxbroadcastingservices.bandcamp.com/track/let-it-blow',
+      coverId: 'a4000148031'
    },
    {
-      id: 27,
      order: 6,
      compilationId: 'ES01A',
      title: 'Sunday Mourning',
      artist: 16,
      start: 2091.7,
-      url: 'https://nightbeats.bandcamp.com/track/sunday-mourning',
-      coverId: 'a0031987121',
+      link: 'https://nightbeats.bandcamp.com/track/sunday-mourning',
+      coverId: 'a0031987121'
    },
    {
-      id: 28,
      order: 7,
      compilationId: 'ES01A',
      title: '3030 Instrumental',
      artist: 17,
      start: 2339.3,
-      url: 'https://delthefunkyhomosapien.bandcamp.com/track/3030',
-      coverId: 'a1948146136',
+      link: 'https://delthefunkyhomosapien.bandcamp.com/track/3030',
+      coverId: 'a1948146136'
    },
    {
-      id: 29,
      order: 8,
      compilationId: 'ES01A',
      title: 'Immortality Break',
      artist: 18,
      start: 2530.5,
-      url: 'https://theaa.bandcamp.com/track/immortality-break',
-      coverId: 'a2749250329',
+      link: 'https://theaa.bandcamp.com/track/immortality-break',
+      coverId: 'a2749250329'
    },
    {
-      id: 30,
      order: 9,
      compilationId: 'ES01A',
      title: 'Lazy Bones',
      artist: 19,
      start: 2718,
-      url: 'https://woodenshjips.bandcamp.com/track/lazy-bones',
-      coverId: 'a1884221104',
+      link: 'https://woodenshjips.bandcamp.com/track/lazy-bones',
+      coverId: 'a1884221104'
    },
    {
-      id: 31,
      order: 10,
      compilationId: 'ES01A',
      title: 'On the Train of Aches',
      artist: 20,
      start: 2948,
-      url: 'https://silasjdirge.bandcamp.com/track/on-the-train-of-aches',
-      coverId: 'a1124177379',
+      link: 'https://silasjdirge.bandcamp.com/track/on-the-train-of-aches',
+      coverId: 'a1124177379'
    },
    {
-      id: 32,
      order: 11,
      compilationId: 'ES01A',
      title: 'Me',
      artist: 21,
      start: 3265,
-      url: 'https://secretcolours.bandcamp.com/track/me',
-      coverId: 'a1497022499',
+      link: 'https://secretcolours.bandcamp.com/track/me',
+      coverId: 'a1497022499'
    },
    {
-      id: 33,
      order: 1,
      compilationId: 'ES01B',
      title: 'Lady Hawke Blues',
      artist: 11,
      start: 0,
-      url: 'https://kidcongothepinkmonkeybirds.bandcamp.com/track/lady-hawke-blues',
-      coverId: 'a2532623230',
+      link: 'https://kidcongothepinkmonkeybirds.bandcamp.com/track/lady-hawke-blues',
+      coverId: 'a2532623230'
    },
    {
-      id: 34,
      order: 2,
      compilationId: 'ES01B',
      title: 'Dreamscapes',
      artist: 12,
      start: 235,
-      url: 'https://littlecloudrecords.bandcamp.com/track/dreamscapes',
-      coverId: 'a3498981203',
+      link: 'https://littlecloudrecords.bandcamp.com/track/dreamscapes',
+      coverId: 'a3498981203'
    },
    {
-      id: 35,
      order: 3,
      compilationId: 'ES01B',
      title: 'Crispy Skin',
      artist: 13,
      start: 644.2,
-      url: 'https://squiduk.bandcamp.com/track/crispy-skin-2',
-      coverId: 'a2516727021',
+      link: 'https://squiduk.bandcamp.com/track/crispy-skin-2',
+      coverId: 'a2516727021'
    },
    {
-      id: 36,
      order: 4,
      compilationId: 'ES01B',
      title: 'The Boy Who Stood Above The Earth',
      artist: 14,
      start: 1018,
-      url: 'https://lysistrata.bandcamp.com/track/the-boy-who-stood-above-the-earth-2',
-      coverId: 'a0350933426',
+      link: 'https://lysistrata.bandcamp.com/track/the-boy-who-stood-above-the-earth-2',
+      coverId: 'a0350933426'
    },
    {
-      id: 37,
      order: 5,
      compilationId: 'ES01B',
      title: 'Better Off Alone',
      artist: 15,
      start: 1698,
-      url: 'https://pabloxbroadcastingservices.bandcamp.com/track/better-off-alone',
-      coverId: 'a4000148031',
+      link: 'https://pabloxbroadcastingservices.bandcamp.com/track/better-off-alone',
+      coverId: 'a4000148031'
    },
    {
-      id: 38,
      order: 6,
      compilationId: 'ES01B',
      title: 'Celebration #1',
      artist: 16,
      start: 2235,
-      url: 'https://nightbeats.bandcamp.com/track/celebration-1',
-      coverId: 'a0031987121',
+      link: 'https://nightbeats.bandcamp.com/track/celebration-1',
+      coverId: 'a0031987121'
    },
    {
-      id: 39,
      order: 7,
      compilationId: 'ES01B',
      title: '3030 Instrumental',
      artist: 17,
      start: 2458.3,
-      url: 'https://delthefunkyhomosapien.bandcamp.com/track/3030',
-      coverId: 'a1948146136',
+      link: 'https://delthefunkyhomosapien.bandcamp.com/track/3030',
+      coverId: 'a1948146136'
    },
    {
-      id: 40,
      order: 8,
      compilationId: 'ES01B',
      title: 'The Emptiness Of Nothingness',
      artist: 18,
      start: 2864.5,
-      url: 'https://theaa.bandcamp.com/track/the-emptiness-of-nothingness',
-      coverId: 'a1053923875',
+      link: 'https://theaa.bandcamp.com/track/the-emptiness-of-nothingness',
+      coverId: 'a1053923875'
    },
    {
-      id: 41,
      order: 9,
      compilationId: 'ES01B',
      title: 'Rising',
      artist: 19,
      start: 3145,
-      url: 'https://woodenshjips.bandcamp.com/track/rising',
-      coverId: 'a1884221104',
+      link: 'https://woodenshjips.bandcamp.com/track/rising',
+      coverId: 'a1884221104'
    },
    {
-      id: 42,
      order: 10,
      compilationId: 'ES01B',
      title: 'The Last Time',
      artist: 22,
      start: 3447,
-      url: 'https://www.discogs.com/release/12110815-Larry-McNeil-And-The-Blue-Knights-Jealous-Woman',
-      coverId: 'https://i.discogs.com/Yr05_neEXwzPwKlDeV7dimmTG34atkAMgpxbMBhHBkI/rs:fit/g:sm/q:90/h:600/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTEyMTEw/ODE1LTE1Mjg1NjU1/NzQtMjcyOC5qcGVn.jpeg',
+      link: 'https://www.discogs.com/release/12110815-Larry-McNeil-And-The-Blue-Knights-Jealous-Woman',
+      coverId:
+        'https://i.discogs.com/Yr05_neEXwzPwKlDeV7dimmTG34atkAMgpxbMBhHBkI/rs:fit/g:sm/q:90/h:600/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTEyMTEw/ODE1LTE1Mjg1NjU1/NzQtMjcyOC5qcGVn.jpeg'
    },
    {
-      id: 43,
      order: 11,
      compilationId: 'ES01B',
      title: 'Guajira Con Arpa',
      artist: 23,
      start: 3586,
-      url: 'https://elpalmasmusic.bandcamp.com/track/guajira-con-arpa',
-      coverId: 'a3463036407',
-    },
+      link: 'https://elpalmasmusic.bandcamp.com/track/guajira-con-arpa',
+      coverId: 'a3463036407'
+    }
  ]
+
+  return tracks.map((track, index) => ({
+    id: index + 1,
+    ...track,
+    url: `https://files.erudi.fr/evilspins/${track.compilationId}.mp3`
+  }))
 })
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,6 +13,9 @@ module.exports = {
      colors: {
        esyellow: "#fdec50ff",
      },
+      fontSize: {
+        xxs: "0.625rem", // 10px par exemple
+      },
      screens: {
        "2sm": "320px",
      },
--- a/types/types.ts
+++ b/types/types.ts
@@ -16,29 +16,28 @@ export interface Artist {
  url: string
  coverId: string
 }
-
 export interface Track {
  id: number
-  order: number
+  order?: number
  compilationId: string
  title: string
-  artist: Artist
-  start: number
+  artist?: Artist | { id?: Artist }
+  start?: number
  url: string
-  coverId: string
+  coverId?: string
+  date?: Date
+  card?: { suit: CardSuit; value: CardRank }
+  link?: string
+}
+
+export interface Playlist {
+  id: number
+  date: Date
+  title: string
+  url: string
+  filename: string
 }

-// pour une v2
 export type BoxState = 'hide' | 'list' | 'selected'
-
-export interface BoxPosition {
-  x: number
-  y: number
-  z: number
-}
-
-export interface BoxSize {
-  h: number
-  w: number
-  d: number
-}
+export type CardSuit = '♠' | '♣' | '♦' | '♥'
+export type CardRank = 'A' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | 'J' | 'Q' | 'K'
--- a/utils/cards.ts
+++ b/utils/cards.ts
@@ -0,0 +1,21 @@
+import type { CardSuit, CardRank } from '~/types/cards'
+
+export function getCardFromDate(date: Date): { suit: CardSuit; rank: CardRank } {
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hour = date.getHours()
+
+  const suit: CardSuit =
+    month >= 12 || month <= 2
+      ? '♠'
+      : month >= 3 && month <= 5
+      ? '♣'
+      : month >= 6 && month <= 8
+      ? '♦'
+      : '♥'
+
+  const ranks: CardRank[] = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']
+  const rank = ranks[(day + hour) % ranks.length]
+
+  return { suit, rank }
+}