WIP: add TODO and small fixies

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;
   }

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,

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,

app/components/Deck.vue

@@ -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>

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>

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>

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>