From e2c569394823c6df96d452977dc14a00698e6ef3 Mon Sep 17 00:00:00 2001
From: valere <dev@valerebron.com>
Date: Thu, 9 Oct 2025 22:47:30 +0200
Subject: [PATCH] playlists support v1

---
 .prettierrc                                   |   8 +
 .vscode/settings.json                         |   2 +
 app/app.vue                                   |  11 +-
 app/components/{molecule => }/box.vue         |  49 +++-
 app/components/{molecule => }/card.vue        |  78 +++---
 .../compilationList.vue => compilations.vue}  |  18 +-
 app/components/deck.vue                       |  52 ++++
 app/components/logo.vue                       |   8 +
 app/components/molecule/atropos.vue           | 126 ----------
 app/components/molecule/theObject.vue         | 103 --------
 app/components/newsletter.vue                 |  11 +
 app/components/organism/compilationPage.vue   |  16 --
 app/components/{molecule => }/player.vue      |   7 +-
 app/pages/dev.vue                             |  15 ++
 app/pages/index.vue                           |  11 +-
 app/pages/studio.vue                          |   4 +-
 app/store/data.ts                             |  60 +++--
 app/store/player.ts                           |  32 +--
 app/store/user.ts                             |  11 +
 eslint.config.mjs                             |   2 +
 nuxt.config.ts                                |   2 +-
 package.json                                  |   6 +-
 server/api/compilations.ts                    | 133 +++++++++-
 server/api/playlists.ts                       |  69 +++++
 server/api/playlists/[id].ts                  |  24 --
 server/api/playlists/index.ts                 |  22 --
 server/api/tracks.ts                          | 235 ++++++++----------
 tailwind.config.js                            |   3 +
 types/types.ts                                |  35 ++-
 utils/cards.ts                                |  21 ++
 30 files changed, 620 insertions(+), 554 deletions(-)
 create mode 100644 .prettierrc
 rename app/components/{molecule => }/box.vue (83%)
 rename app/components/{molecule => }/card.vue (52%)
 rename app/components/{organism/compilationList.vue => compilations.vue} (57%)
 create mode 100644 app/components/deck.vue
 create mode 100644 app/components/logo.vue
 delete mode 100644 app/components/molecule/atropos.vue
 delete mode 100644 app/components/molecule/theObject.vue
 create mode 100644 app/components/newsletter.vue
 delete mode 100644 app/components/organism/compilationPage.vue
 rename app/components/{molecule => }/player.vue (85%)
 create mode 100644 app/pages/dev.vue
 create mode 100644 app/store/user.ts
 create mode 100644 server/api/playlists.ts
 delete mode 100644 server/api/playlists/[id].ts
 delete mode 100644 server/api/playlists/index.ts
 create mode 100644 utils/cards.ts

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..c3c856c
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "printWidth": 100
+}
+
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 58aaa72..ee214f9 100644
--- 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"
   }
diff --git a/app/app.vue b/app/app.vue
index bd329ef..850b6eb 100644
--- 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>
\ No newline at end of file
diff --git a/app/components/molecule/box.vue b/app/components/box.vue
similarity index 83%
rename from app/components/molecule/box.vue
rename to app/components/box.vue
index bcc16ab..dbd8818 100644
--- a/app/components/molecule/box.vue
+++ b/app/components/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,
diff --git a/app/components/molecule/card.vue b/app/components/card.vue
similarity index 52%
rename from app/components/molecule/card.vue
rename to app/components/card.vue
index 4a775c0..11f8295 100644
--- a/app/components/molecule/card.vue
+++ b/app/components/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>
\ No newline at end of file
diff --git a/app/components/organism/compilationList.vue b/app/components/compilations.vue
similarity index 57%
rename from app/components/organism/compilationList.vue
rename to app/components/compilations.vue
index 266e443..312dfb8 100644
--- a/app/components/organism/compilationList.vue
+++ b/app/components/compilations.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'
+    });
+
   }
 }
 
diff --git a/app/components/deck.vue b/app/components/deck.vue
new file mode 100644
index 0000000..5c309cc
--- /dev/null
+++ 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>
diff --git a/app/components/logo.vue b/app/components/logo.vue
new file mode 100644
index 0000000..a14ae1a
--- /dev/null
+++ 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>
diff --git a/app/components/molecule/atropos.vue b/app/components/molecule/atropos.vue
deleted file mode 100644
index 9cbbad3..0000000
--- a/app/components/molecule/atropos.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/app/components/molecule/theObject.vue b/app/components/molecule/theObject.vue
deleted file mode 100644
index 747f6f5..0000000
--- a/app/components/molecule/theObject.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/app/components/newsletter.vue b/app/components/newsletter.vue
new file mode 100644
index 0000000..07a959d
--- /dev/null
+++ 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>
diff --git a/app/components/organism/compilationPage.vue b/app/components/organism/compilationPage.vue
deleted file mode 100644
index 89c1e57..0000000
--- a/app/components/organism/compilationPage.vue
+++ /dev/null
@@ -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>
diff --git a/app/components/molecule/player.vue b/app/components/player.vue
similarity index 85%
rename from app/components/molecule/player.vue
rename to app/components/player.vue
index 5d8d051..07f8274 100644
--- a/app/components/molecule/player.vue
+++ b/app/components/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>
 
diff --git a/app/pages/dev.vue b/app/pages/dev.vue
new file mode 100644
index 0000000..a3e9b88
--- /dev/null
+++ 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>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 3cd2ec3..daf2201 100644
--- 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>
diff --git a/app/pages/studio.vue b/app/pages/studio.vue
index 2e4a1ef..5b8edc6 100644
--- 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>
diff --git a/app/store/data.ts b/app/store/data.ts
index 35b14b0..adc54d4 100644
--- 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)
     }
-  },
+  }
 })
diff --git a/app/store/player.ts b/app/store/player.ts
index 73a7461..d70d431 100644
--- 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', {
         }
       }
     }
-  },
+  }
 })
diff --git a/app/store/user.ts b/app/store/user.ts
new file mode 100644
index 0000000..38c04cd
--- /dev/null
+++ 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
+  })
+})
diff --git a/eslint.config.mjs b/eslint.config.mjs
index f0f16dd..41a1420 100644
--- 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
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8d32d4d..6c69276 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -24,4 +24,4 @@ export default defineNuxtConfig({
       ]
     }
   }
-})
+})
\ No newline at end of file
diff --git a/package.json b/package.json
index cab29cf..dbbb0c9 100644
--- 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",
diff --git a/server/api/compilations.ts b/server/api/compilations.ts
index 59fb3ec..7b314db 100644
--- 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'
     }
   ]
 })
diff --git a/server/api/playlists.ts b/server/api/playlists.ts
new file mode 100644
index 0000000..853af45
--- /dev/null
+++ 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
+    }
+  }
+})
diff --git a/server/api/playlists/[id].ts b/server/api/playlists/[id].ts
deleted file mode 100644
index 551a894..0000000
--- a/server/api/playlists/[id].ts
+++ /dev/null
@@ -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
-    }
-  }
-})
diff --git a/server/api/playlists/index.ts b/server/api/playlists/index.ts
deleted file mode 100644
index 402fb0d..0000000
--- a/server/api/playlists/index.ts
+++ /dev/null
@@ -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
-    }
-  }
-})
diff --git a/server/api/tracks.ts b/server/api/tracks.ts
index fb31622..88854bf 100644
--- 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`
+  }))
 })
diff --git a/tailwind.config.js b/tailwind.config.js
index 2ac99bd..7c8135a 100644
--- 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",
       },
diff --git a/types/types.ts b/types/types.ts
index c8fa0f7..9526979 100644
--- 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'
diff --git a/utils/cards.ts b/utils/cards.ts
new file mode 100644
index 0000000..3d1ba9c
--- /dev/null
+++ 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 }
+}