From f9aeb03f82f938336f5400e3bf631eb5b2fd2132 Mon Sep 17 00:00:00 2001
From: valere <dev@valerebron.com>
Date: Tue, 11 Nov 2025 19:23:33 +0100
Subject: [PATCH] WIP: add TODO and small fixies

---
 app/components/Box.vue                        |  16 +-
 app/components/Boxes.vue                      |  73 +++---
 app/components/Card.vue                       |  47 ++--
 app/components/Deck.vue                       |  65 ------
 app/components/Loader.vue                     |   4 +-
 app/components/Player.vue                     |  16 +-
 app/components/deck/DeckCompilation.vue       | 140 +++++++++++
 .../deck/{BlackJack.vue => DeckPlaylist.vue}  |   0
 app/pages/box/[id].vue                        |   2 -
 app/pages/playground.vue                      | 221 ++++++++++++++++++
 app/store/ui.ts                               |  10 +-
 notes.md                                      |  30 +++
 12 files changed, 461 insertions(+), 163 deletions(-)
 delete mode 100644 app/components/Deck.vue
 create mode 100644 app/components/deck/DeckCompilation.vue
 rename app/components/deck/{BlackJack.vue => DeckPlaylist.vue} (100%)
 create mode 100644 app/pages/playground.vue
 create mode 100644 notes.md

diff --git a/app/components/Box.vue b/app/components/Box.vue
index d8b9c9c..7cf24ff 100644
--- a/app/components/Box.vue
+++ b/app/components/Box.vue
@@ -21,11 +21,11 @@
       <div class="face right" ref="rightFace" />
       <div class="face left" ref="leftFace" />
       <div class="face top" ref="topFace">
-        <template v-if="box.duration !== 0">
+        <template v-if="box.type === 'compilation'">
           <img class="logo h-full p-1" src="/logo.svg" alt="" />
           <img class="absolute block h-9" style="left: 5%" :src="`/${box.id}/title.svg`" alt="" />
         </template>
-        <template v-else>
+        <template v-if="box.type === 'playlist'">
           <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%">
@@ -249,7 +249,7 @@ watch(isDraggable, (enabled) => (enabled ? addListeners() : removeListeners()))
 
   &.box-list {
     height: calc(var(--size) * 20);
-    @apply hover:scale-105;
+    @apply hover:scale-105 hover:z-20 focus-visible:scale-105 focus-visible:z-20 focus-visible:outline-none;
     transition: all 0.5s ease;
     will-change: transform;
   }
@@ -368,16 +368,6 @@ watch(isDraggable, (enabled) => (enabled ? addListeners() : removeListeners()))
     pointer-events: auto;
   }
 
-  /* for tabindex */
-  &:focus-visible {
-    outline: 0;
-    @apply scale-105 outline-none;
-
-    .face {
-      // border: 4px solid rgba(0, 0, 0, 0.5);
-    }
-  }
-
   :deep(.indice) {
     @apply text-xl p-2 relative bg-black/50 rounded-full backdrop-blur-md;
   }
diff --git a/app/components/Boxes.vue b/app/components/Boxes.vue
index 3811bdb..154f9a2 100644
--- a/app/components/Boxes.vue
+++ b/app/components/Boxes.vue
@@ -1,29 +1,17 @@
 <template>
-  <div class="boxes">
-    <button
-      @click="uiStore.closeBox"
-      v-if="uiStore.isBoxSelected"
+  <div class="boxes" :class="{ 'box-selected': uiStore.isBoxSelected }">
+    <button @click="uiStore.closeBox" v-if="uiStore.isBoxSelected"
       class="absolute top-10 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
-      aria-label="close the box"
-    >
+      aria-label="close the box">
       close
     </button>
-    <box
-      v-for="(box, i) in dataStore.boxes.slice()"
-      :key="box.id"
-      :tabindex="dataStore.boxes.length - i"
-      :box="box"
-      @click="onBoxClick(box)"
-      class="text-center"
-      :class="box.state"
-      :id="box.id"
-    >
-      <playButton
-        @click.stop="playSelectedBox(box)"
-        :objectToPlay="box"
-        class="relative z-40 m-auto"
-      />
-      <deck :box="box" class="box-page" v-if="box.state === 'box-selected'" @click.stop />
+    <box v-for="(box, i) in dataStore.boxes.slice()" :key="box.id" :tabindex="dataStore.boxes.length - i" :box="box"
+      @click="openBox(box)" class="text-center" :class="box.state" :id="box.id">
+      <playButton @click.stop="playSelectedBox(box)" :objectToPlay="box" class="relative z-40 m-auto" />
+      <template v-if="box.state === 'box-selected'">
+        <deckCompilation :box="box" class="box-page" v-if="box.type === 'compilation'" @click.stop />
+        <deckPlaylist :box="box" class="box-page" v-if="box.type === 'playlist'" @click.stop />
+      </template>
     </box>
   </div>
 </template>
@@ -38,29 +26,38 @@ const dataStore = useDataStore()
 const playerStore = usePlayerStore()
 const uiStore = useUiStore()
 
-function openBox(id: string) {
-  uiStore.selectBox(id)
-  // Scroll to the top smoothly
-  window.scrollTo({
-    top: 0,
-    behavior: 'smooth'
-  })
-}
-
-function onBoxClick(b: Box) {
-  if (b.state !== 'box-selected') {
-    openBox(b.id)
+function openBox(box: Box) {
+  if (box.state !== 'box-selected') {
+    uiStore.selectBox(box.id)
+    // Scroll to the top smoothly
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
   }
 }
 
-function playSelectedBox(b: Box) {
-  playerStore.playBox(b)
+function playSelectedBox(box: Box) {
+  playerStore.playBox(box)
 }
 </script>
 
 <style lang="scss" scoped>
 .boxes {
-  @apply flex flex-col;
+  @apply flex flex-col items-center justify-center text-center w-full;
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-top: 250px;
+  transition: margin-top .5s ease;
+
+  &.box-selected {
+    margin-top: 0;
+
+    .box {
+      @apply w-full;
+    }
+  }
 
   .box {
     .play-button {
@@ -68,7 +65,7 @@ function playSelectedBox(b: Box) {
     }
 
     &.box-selected .play-button {
-      @apply opacity-100;
+      @apply opacity-100 z-20;
       bottom: 20%;
       transition:
         bottom 0.7s ease,
diff --git a/app/components/Card.vue b/app/components/Card.vue
index da545cc..075f05c 100644
--- a/app/components/Card.vue
+++ b/app/components/Card.vue
@@ -1,24 +1,15 @@
 <template>
-  <article
-    class="card w-56 h-80"
-    :class="[
-      isFaceUp ? 'face-up' : 'face-down',
-      { 'current-track': playerStore.currentTrack?.id === track.id }
-    ]"
-  >
+  <article class="card w-56 h-80" :class="[
+    isFaceUp ? 'face-up' : 'face-down',
+    { 'current-track': playerStore.currentTrack?.id === track.id }
+  ]">
     <div class="flip-inner">
       <!-- Face-Up -->
       <main
-        class="face-up backdrop-blur-sm border-1 z-10 card w-56 h-80 p-3 hover:shadow-xl hover:scale-110 transition-all rounded-2xl shadow-lg flex flex-col overflow-hidden"
-      >
-        <div
-          class="flex items-center justify-center size-7 absolute top-7 right-7"
-          v-if="isPlaylistTrack"
-        >
-          <div
-            class="suit text-7xl absolute"
-            :class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.track.card?.suit]"
-          >
+        class="face-up backdrop-blur-sm border-2 border-esyellow z-10 card w-56 h-80 p-3 hover:shadow-xl hover:scale-110 transition-all rounded-2xl shadow-lg flex flex-col overflow-hidden">
+        <div class="flex items-center justify-center size-7 absolute top-7 right-7" v-if="isPlaylistTrack">
+          <div class="suit text-7xl absolute"
+            :class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.track.card?.suit]">
             <img :src="`/${props.track.card?.suit}.svg`" />
           </div>
           <div class="rank text-white font-bold absolute -mt-1">
@@ -26,16 +17,10 @@
           </div>
         </div>
         <!-- Cover -->
-        <figure
-          class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-t-xl cursor-pointer"
-          @click="playerStore.playTrack(track)"
-        >
+        <figure class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-t-xl cursor-pointer"
+          @click="playerStore.playTrack(track)">
           <playButton :objectToPlay="track" />
-          <img
-            :src="coverUrl"
-            alt="Pochette de l'album"
-            class="w-full h-full object-cover object-center"
-          />
+          <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">
@@ -55,12 +40,9 @@
 
       <!-- Face-Down -->
       <footer
-        class="face-down backdrop-blur-sm z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden"
-      >
-        <figure
-          @click.stop="playerStore.playTrack(track)"
-          class="h-full flex text-center bg-slate-800 rounded-xl justify-center cursor-pointer"
-        >
+        class="face-down backdrop-blur-sm z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
+        <figure @click.stop="playerStore.playTrack(track)"
+          class="h-full flex text-center bg-slate-800 rounded-xl justify-center cursor-pointer">
           <playButton :objectToPlay="track" />
           <img src="/face-down.svg" />
         </figure>
@@ -111,6 +93,7 @@ const coverUrl = props.track.coverId.startsWith('http')
     height: 100%;
     transition: transform 0.6s;
     transform-style: preserve-3d;
+    transform-origin: center;
   }
 
   .face-down,
diff --git a/app/components/Deck.vue b/app/components/Deck.vue
deleted file mode 100644
index e8225df..0000000
--- a/app/components/Deck.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <div class="relative w-full">
-    <div
-      ref="deck"
-      class="deck flex flex-wrap justify-center gap-4"
-      :class="{ 'px-16 pb-36': playerStore.currentTrack }"
-    >
-      <card
-        v-for="(track, i) in tracks"
-        :key="track.id"
-        :track="track"
-        tabindex="i"
-        :tab-index="i"
-        :is-face-up="isCardRevealed(track.id)"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted } from 'vue'
-import { useDataStore } from '~/store/data'
-import { useCardStore } from '~/store/card'
-import { usePlayerStore } from '~/store/player'
-import { useUiStore } from '~/store/ui'
-import type { Box } from '~~/types/types'
-
-const props = defineProps<{
-  box: Box
-}>()
-
-const cardStore = useCardStore()
-const dataStore = useDataStore()
-const playerStore = usePlayerStore()
-const uiStore = useUiStore()
-
-const deck = ref<HTMLElement | null>(null)
-const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
-
-const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)
-
-const handleClickOutside = (event: MouseEvent) => {
-  // Vérifier si le clic provient d'un bouton de lecture
-  const target = event.target as HTMLElement
-  const isPlayButton = target.closest('.play-button')
-
-  // Ne pas fermer si le clic provient d'un bouton de lecture
-  if (isPlayButton) return
-
-  // Vérifier si le clic est en dehors du deck
-  if (deck.value && !deck.value.contains(target)) {
-    uiStore.closeBox()
-  }
-}
-
-onMounted(() => {
-  // Ajouter le gestionnaire de clic à l'extérieur
-  document.addEventListener('mousedown', handleClickOutside)
-})
-
-onUnmounted(() => {
-  // Nettoyer le gestionnaire d'événement
-  document.removeEventListener('mousedown', handleClickOutside)
-})
-</script>
diff --git a/app/components/Loader.vue b/app/components/Loader.vue
index 515b927..d0310a6 100644
--- a/app/components/Loader.vue
+++ b/app/components/Loader.vue
@@ -1,8 +1,8 @@
 <template>
   <transition name="fade">
     <div v-if="data.isLoading" class="fixed inset-0 z-50 flex items-center justify-center">
-      <div class="absolute inset-0 bg-black/60 backdrop-blur-md"/>
-      <img src="/loader.svg" alt="Loading" class="relative h-40 w-40" >
+      <div class="absolute inset-0 bg-black/60 backdrop-blur-md" />
+      <img src="/loader.svg" alt="Loading" class="border-esyellow/30 border-2 relative h-40 w-40 p-6 rounded-full">
     </div>
   </transition>
 </template>
diff --git a/app/components/Player.vue b/app/components/Player.vue
index d24460f..f3360bf 100644
--- a/app/components/Player.vue
+++ b/app/components/Player.vue
@@ -1,15 +1,11 @@
 <template>
-  <div
-    class="player fixed left-0 z-50 w-full h-20"
-    :class="playerStore.currentTrack ? '-bottom-0 opacity-100' : '-bottom-32 opacity-0'"
-  >
+  <div class="player fixed left-0 z-50 w-full h-20"
+    :class="playerStore.currentTrack ? '-bottom-0 opacity-100' : '-bottom-32 opacity-0'">
     <div class="flex items-center gap-3 p-2">
-      <img
-        v-if="playerStore.getCurrentCoverUrl"
-        :src="playerStore.getCurrentCoverUrl as string"
-        alt="Current cover"
-        class="size-16 object-cover object-center rounded"
-      >
+      <NuxtLink v-if="playerStore.currentTrack" :to="`/track/${playerStore.currentTrack.id}`">
+        <img v-if="playerStore.getCurrentCoverUrl" :src="playerStore.getCurrentCoverUrl as string" alt="Current cover"
+          class="size-16 object-cover object-center rounded">
+      </NuxtLink>
       <toggleFavorite v-if="playerStore.currentTrack" :track="playerStore.currentTrack" />
       <audio ref="audioRef" class="flex-1" controls />
     </div>
diff --git a/app/components/deck/DeckCompilation.vue b/app/components/deck/DeckCompilation.vue
new file mode 100644
index 0000000..66774ab
--- /dev/null
+++ b/app/components/deck/DeckCompilation.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
+      <card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i"
+        :is-face-up="isCardRevealed(track.id)" />
+    </div>
+    <ul>
+      <li>
+        <button @click="distribute">distribute</button>
+        <button @click="halfOutside">halfOutside</button>
+        <button @click="backToBox">backToBox</button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useDataStore } from '~/store/data'
+import { useCardStore } from '~/store/card'
+import { usePlayerStore } from '~/store/player'
+import type { Box } from '~~/types/types'
+
+const props = defineProps<{
+  box: Box
+}>()
+
+const cardStore = useCardStore()
+const dataStore = useDataStore()
+const playerStore = usePlayerStore()
+
+const deck = ref()
+const tracks = computed(() =>
+  dataStore.getTracksByboxId(props.box.id).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+)
+
+const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)
+
+const distribute = () => {
+  deck.value.querySelectorAll('.card').forEach((card: HTMLElement, index: number) => {
+    setTimeout(() => {
+      card.classList.remove('half-outside')
+      card.classList.add('outside')
+    }, 500 + (index * 100)) // 1s delay + 200ms per card
+  })
+}
+
+const halfOutside = () => {
+  deck.value.querySelectorAll('.card').forEach((card: HTMLElement) => {
+    card.classList.remove('outside')
+    card.classList.add('half-outside')
+  })
+}
+
+const backToBox = () => {
+  deck.value.querySelectorAll('.card').forEach((card: HTMLElement) => {
+    card.classList.remove('half-outside', 'outside')
+  })
+}
+
+</script>
+
+<style lang="scss" scoped>
+.deck {
+  @apply h-screen w-screen fixed top-0 left-0 -z-10 overflow-hidden;
+
+  .card {
+    position: absolute;
+    top: 0;
+    z-index: 1;
+    transition: all 0.5s ease;
+    will-change: transform;
+    display: block;
+    z-index: 2;
+    translate: 70px 40px;
+    transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg);
+    opacity: 0;
+
+    // hide the wildcard (joker / hidden-track)
+    // &:nth-child(11) {
+    //   display: none;
+    // }
+
+    // half outside the box
+    &.half-outside {
+      opacity: 1;
+      top: 0;
+      right: auto;
+
+      &:nth-child(1) {
+        translate: 120px 20px;
+        transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, -100px, 0);
+      }
+
+      &:nth-child(3) {
+        translate: 150px 20px;
+        transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, -40px, 0);
+      }
+
+      &:nth-child(5) {
+        translate: 190px 20px;
+        transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 30px, 0);
+      }
+
+      &:nth-child(7) {
+        translate: 240px 20px;
+        transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 120px, 0);
+      }
+
+      &:nth-child(9) {
+        translate: 280px 20px;
+        transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 200px, 0);
+      }
+
+      &:nth-child(11) {
+        translate: 310px 20px;
+        transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 260px, 0);
+      }
+    }
+
+    // outside the box
+    &.outside {
+      opacity: 1;
+      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+      top: 50%;
+      right: 66%;
+
+      @for $i from 0 through 10 {
+        &:nth-child(#{$i + 1}) {
+          translate: calc(#{$i + 1} * 20%);
+        }
+      }
+    }
+
+    &.current-track {
+      // z-index: 10;
+    }
+  }
+}
+</style>
diff --git a/app/components/deck/BlackJack.vue b/app/components/deck/DeckPlaylist.vue
similarity index 100%
rename from app/components/deck/BlackJack.vue
rename to app/components/deck/DeckPlaylist.vue
diff --git a/app/pages/box/[id].vue b/app/pages/box/[id].vue
index 4854610..f5cf90a 100644
--- a/app/pages/box/[id].vue
+++ b/app/pages/box/[id].vue
@@ -21,8 +21,6 @@ onMounted(async () => {
   const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
   if (typeof idParam === 'string' && idParam.length > 0) {
     uiStore.selectBox(idParam)
-    //   player.playBox(box).catch(console.error)
-    // }
   }
 })
 </script>
diff --git a/app/pages/playground.vue b/app/pages/playground.vue
new file mode 100644
index 0000000..8aad56d
--- /dev/null
+++ b/app/pages/playground.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800 p-8">
+    <h1 class="text-3xl font-bold text-center text-white mb-8">Card 3D Playground</h1>
+
+    <div class="container mx-auto flex flex-col lg:flex-row gap-8">
+      <!-- Controls Panel -->
+      <div class="w-full lg:w-1/3 bg-slate-800 p-6 rounded-xl shadow-lg">
+        <h2 class="text-xl font-semibold text-white mb-6">3D Controls</h2>
+
+        <div class="space-y-6">
+          <!-- Rotation -->
+          <div>
+            <h3 class="text-white font-medium mb-2">Rotation</h3>
+            <div class="space-y-4">
+              <div>
+                <label class="block text-sm text-gray-300 mb-1">X-Axis (rotateX)</label>
+                <input v-model="rotationX" type="range" min="-180" max="180" class="w-full" @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ rotationX }}°</span>
+              </div>
+
+              <div>
+                <label class="block text-sm text-gray-300 mb-1">Y-Axis (rotateY)</label>
+                <input v-model="rotationY" type="range" min="-180" max="180" class="w-full" @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ rotationY }}°</span>
+              </div>
+
+              <div>
+                <label class="block text-sm text-gray-300 mb-1">Z-Axis (rotateZ)</label>
+                <input v-model="rotationZ" type="range" min="-180" max="180" class="w-full" @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ rotationZ }}°</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Translation -->
+          <div>
+            <h3 class="text-white font-medium mb-2">Position (px)</h3>
+            <div class="grid grid-cols-3 gap-4">
+              <div>
+                <label class="block text-xs text-gray-300 mb-1">X</label>
+                <input v-model="translateX" type="range" min="-200" max="200" class="w-full" @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ translateX }}px</span>
+              </div>
+              <div>
+                <label class="block text-xs text-gray-300 mb-1">Y</label>
+                <input v-model="translateY" type="range" min="-200" max="200" class="w-full" @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ translateY }}px</span>
+              </div>
+              <div>
+                <label class="block text-xs text-gray-300 mb-1">Z</label>
+                <input v-model="translateZ" type="range" min="-500" max="500" class="w-full" @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ translateZ }}px</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Scale -->
+          <div>
+            <h3 class="text-white font-medium mb-2">Scale</h3>
+            <div class="grid grid-cols-3 gap-4">
+              <div>
+                <label class="block text-xs text-gray-300 mb-1">X</label>
+                <input v-model="scaleX" type="range" min="0.5" max="2" step="0.1" class="w-full"
+                  @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ scaleX }}x</span>
+              </div>
+              <div>
+                <label class="block text-xs text-gray-300 mb-1">Y</label>
+                <input v-model="scaleY" type="range" min="0.5" max="2" step="0.1" class="w-full"
+                  @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ scaleY }}x</span>
+              </div>
+              <div>
+                <label class="block text-xs text-gray-300 mb-1">Z</label>
+                <input v-model="scaleZ" type="range" min="0.5" max="2" step="0.1" class="w-full"
+                  @input="updateTransform">
+                <span class="text-xs text-gray-400">{{ scaleZ }}x</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Reset Button -->
+          <button
+            class="w-full mt-6 bg-esyellow hover:bg-yellow-500 text-black font-medium py-2 px-4 rounded-md transition-colors"
+            @click="resetTransforms">
+            Reset to Default
+          </button>
+        </div>
+      </div>
+
+      <!-- Card Preview -->
+      <div class="flex-1 flex items-center justify-center min-h-[60vh] lg:min-h-auto">
+        <div class="relative w-64 h-96 transition-transform duration-300" :style="cardStyle">
+          <div class="w-full h-full" :style="{
+            transform: `
+              perspective(1000px)
+              rotateX(${rotationX}deg)
+              rotateY(${rotationY}deg)
+              rotateZ(${rotationZ}deg)
+              translate3d(${translateX}px, ${translateY}px, ${translateZ}px)
+              scale3d(${scaleX}, ${scaleY}, ${scaleZ})
+            `,
+            transformStyle: 'preserve-3d',
+            transition: 'transform 0.3s ease-out',
+            willChange: 'transform',
+            backfaceVisibility: 'visible'
+          }">
+            <div
+              class="w-full h-full bg-gradient-to-br from-cyan-500 to-blue-600 rounded-xl shadow-2xl flex items-center justify-center p-4">
+              <div class="text-center text-white">
+                <div class="text-6xl mb-2">🃏</div>
+                <h3 class="text-xl font-bold">Card Playground</h3>
+                <p class="text-sm opacity-80">Drag the sliders to transform me!</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// State for 3D transformations
+import { useDataStore } from '~/store/data'
+
+const rotationX = ref(0)
+const rotationY = ref(0)
+const rotationZ = ref(0)
+const translateX = ref(0)
+const translateY = ref(0)
+const translateZ = ref(0)
+const scaleX = ref(1)
+const scaleY = ref(1)
+const scaleZ = ref(1)
+const dataStore = useDataStore()
+
+// Computed property for the card's transform style
+const cardStyle = computed(() => {
+  return {
+    transform: `
+      perspective(1000px)
+      rotateX(${rotationX.value}deg)
+      rotateY(${rotationY.value}deg)
+      rotateZ(${rotationZ.value}deg)
+      translate3d(${translateX.value}px, ${translateY.value}px, ${translateZ.value}px)
+      scale3d(${scaleX.value}, ${scaleY.value}, ${scaleZ.value})
+    `,
+    transformStyle: 'preserve-3d',
+    transition: 'transform 0.3s ease-out',
+    willChange: 'transform',
+    backfaceVisibility: 'visible'
+  }
+})
+
+// Function to update transform (for immediate feedback)
+const updateTransform = () => {
+  // The computed property will handle the update
+}
+
+// Function to reset all transforms
+const resetTransforms = () => {
+  rotationX.value = 0
+  rotationY.value = 0
+  rotationZ.value = 0
+  translateX.value = 0
+  translateY.value = 0
+  translateZ.value = 0
+  scaleX.value = 1
+  scaleY.value = 1
+  scaleZ.value = 1
+}
+
+dataStore.isLoading.value = false
+
+// Set page metadata
+definePageMeta({
+  layout: 'default'
+})
+</script>
+
+<style scoped>
+/* Add any additional styles here */
+.container {
+  perspective: 1000px;
+}
+
+/* Style range inputs */
+input[type="range"] {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: #475569;
+  outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #f59e0b;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+input[type="range"]::-webkit-slider-thumb:hover {
+  background: #d97706;
+  transform: scale(1.2);
+}
+
+/* Card styling */
+.card-3d {
+  transform-style: preserve-3d;
+  transition: transform 0.3s ease-out;
+  will-change: transform;
+  backface-visibility: visible;
+}
+</style>
diff --git a/app/store/ui.ts b/app/store/ui.ts
index baaa9fb..9f86df6 100644
--- a/app/store/ui.ts
+++ b/app/store/ui.ts
@@ -54,7 +54,15 @@ export const useUiStore = defineStore('ui', {
         const boxElement = document.getElementById(box.id)
         if (boxElement) {
           setTimeout(() => {
-            boxElement.scrollIntoView({ behavior: 'smooth' })
+            // Récupérer la position de l'élément
+            const elementRect = boxElement.getBoundingClientRect()
+            // Calculer la position de défilement (une boîte plus haut)
+            const offsetPosition = elementRect.top + window.pageYOffset - (elementRect.height * 1.5)
+            // Faire défiler à la nouvelle position
+            window.scrollTo({
+              top: offsetPosition,
+              behavior: 'smooth'
+            })
           }, 333)
         }
       }
diff --git a/notes.md b/notes.md
new file mode 100644
index 0000000..ae353b8
--- /dev/null
+++ b/notes.md
@@ -0,0 +1,30 @@
+first card :
+translate: 310px 20px;
+transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translateY(260px);
+
+last card :
+translate: 120px 20px;
+transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translateY(-100px);
+
+0. [ ] make half outside works
+
+1. [ ] ne plus afficher les playlists sur la home page
+
+2. [ ] ajouter un bouton "créer une compilation" sur la page de box
+
+3. [ ] la page createCompilation liste toutes les tracks classées par dates
+       avec un deck vide en bas de page
+
+4. [ ] les cards sont draggable vers le deck
+
+5. [ ] un bouton avec un oeil permet d'afficher toutes les cartes temporairement
+
+6. [ ] un bouton joker/dés selectionne une carte au hasard,
+       scroll vers la carte et la lit\*
+
+7. [ ] ajouter un lien vers la track dans le lecteur (revoir les watch dans app.vue)
+
+8. [ ] réunir les playlists dans une seule box
+9. [ ] cette box aura un deck qui classera par date / couleur / suite etc ... c'est la pioche = LE Deck
+10. [ ] et la compilation n'aura pas de deck MAIS un JukeBox !
+11. [ ] il faudra ausse debug sur firefox