FEAT: side A/B

2025-11-15 21:56:37 +01:00
parent 3424d2d6fc
commit 1b8b998622
49 changed files with 563 additions and 822 deletions
--- a/app/components/Box.vue
+++ b/app/components/Box.vue
@@ -2,13 +2,15 @@
  <article class="box box-scene z-10" ref="scene">
    <div ref="domBox" class="box-object" :class="{ 'is-draggable': isDraggable }">
      <div class="face front relative" ref="frontFace">
-        <img v-if="box.duration" class="cover absolute" :src="`/${box.id}/cover.jpg`" alt="" />
-        <div class="size-full flex flex-col justify-center items-center text-7xl" v-html="box.description" v-else />
+        <img v-if="isCompilation" class="cover absolute" :src="`/${box.id}/${box.activeSide}/cover.jpg`" alt="" />
+        <div v-else class="size-full flex flex-col justify-center items-center text-7xl text-black"
+          v-html="box.description" />
      </div>
-      <div class="face back flex flex-col flex-wrap items-start p-4 overflow-hidden" ref="backFace">
+      <div class="face back flex flex-row flex-wrap items-start p-4 overflow-hidden"
+        :class="{ 'overflow-y-scroll': !isCompilation }" ref="backFace">
        <li class="list-none text-xxs w-1/2 flex flex-row"
-          v-for="track in dataStore.getTracksByboxId(box.id).slice(0, -1)" :key="track.id" :track="track">
-          <span class="" v-if="isNotManifesto"> {{ track.order }}. </span>
+          v-for="track in dataStore.getTracksByboxId(box.id, box.activeSide)" :key="track.id" :track="track">
+          <span class="text-slate-700" v-if="isNotManifesto"> {{ track.order }}. </span>
          <p class="text-left text-slate-700">
            <i class="text-slate-950">
              {{ track.title }}
@@ -21,14 +23,13 @@
      <div class="face right" ref="rightFace" />
      <div class="face left" ref="leftFace" />
      <div class="face top" ref="topFace">
-        <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 v-if="isCompilation">
+          <img class="logo h-full p-3" src="/logo.svg" alt="" />
+          <img class="absolute block h-10" style="left: 5%" :src="`/${box.id}/${box.activeSide}/title.svg`" alt="" />
        </template>
        <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%">
+          <span class="absolute block h-1/2 right-6 text-black"> ♠♦♣♥</span>
+          <span class="absolute block h-1/2 text-black" style="left: 5%">
            {{ box.name }}
          </span>
        </template>
@@ -55,6 +56,7 @@ const { $isMobile } = useNuxtApp()
 const dataStore = useDataStore()
 const isDraggable = computed(() => !['box-list', 'box-hidden'].includes(props.box.state))
 const isNotManifesto = computed(() => !props.box.id.startsWith('ES00'))
+const isCompilation = computed(() => props.box.type === 'compilation')

 // --- Réfs ---
 const scene = ref<HTMLElement>()
@@ -128,6 +130,20 @@ function applyColor() {
  bottomFace.value.style.background = props.box.color1
 }

+// --- Rotation complète ---
+function rotateBox() {
+  if (!domBox.value) return
+  rotateY.value = rotateY.value === 20 ? 380 : 20
+  applyTransform(0.8)
+}
+
+watch(
+  () => props.box.activeSide,
+  () => {
+    rotateBox()
+  }
+)
+
 // --- Inertie ---
 function tickInertia() {
  if (!enableInertia) return
@@ -296,13 +312,14 @@ watch(isDraggable, (enabled) => (enabled ? addListeners() : removeListeners()))
    font-weight: 600;
    backface-visibility: hidden;
    box-sizing: border-box;
-    border: 1px solid black;
+    // border: 1px solid black;
  }

  .front,
  .back {
    width: 100%;
    height: 100%;
+    filter: brightness(1.1);
  }

  .face.top,
@@ -319,6 +336,7 @@ watch(isDraggable, (enabled) => (enabled ? addListeners() : removeListeners()))
  .face.right {
    width: var(--depth);
    height: var(--height);
+    filter: brightness(0.8);
  }

  .face.front {
--- a/app/components/Boxes.vue
+++ b/app/components/Boxes.vue
@@ -5,18 +5,18 @@
      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="openBox(box)" class="text-center" :class="box.state" :id="box.id">
+    <box v-for="(box, i) in dataStore.boxes" :key="box.id" :tabindex="dataStore.boxes.length - i"
+      :box="getBoxToDisplay(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 />
+        <deckCompilation :box="getBoxToDisplay(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>

-<script setup lang="ts">
+<script lang="ts" setup>
 import type { Box } from '~~/types/types'
 import { useDataStore } from '~/store/data'
 import { usePlayerStore } from '~/store/player'
@@ -26,6 +26,19 @@ const dataStore = useDataStore()
 const playerStore = usePlayerStore()
 const uiStore = useUiStore()

+// Retourne la box avec les propriétés du côté sélectionné si c'est une compilation
+function getBoxToDisplay(box: Box) {
+  if (box.type !== 'compilation' || !('sides' in box)) return box
+
+  const side = box.sides?.[box.activeSide]
+  if (!side) return box
+
+  return {
+    ...box,
+    ...side
+  }
+}
+
 function openBox(box: Box) {
  if (box.state !== 'box-selected') {
    uiStore.selectBox(box.id)
@@ -44,32 +57,36 @@ function playSelectedBox(box: Box) {

 <style lang="scss" scoped>
 .boxes {
-  @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;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  transition: margin-top 0.5s ease;
+  min-height: 100vh;

  &.box-selected {
-    margin-top: 0;
+    justify-content: flex-start;

    .box {
-      @apply w-full;
+      width: 100%;
    }
  }

  .box {
    .play-button {
-      @apply relative z-40 -bottom-1/2 opacity-0;
+      position: relative;
+      z-index: 40;
+      bottom: -50%;
+      opacity: 0;
    }

    &.box-selected .play-button {
-      @apply opacity-100 z-20;
+      opacity: 1;
+      z-index: 20;
      bottom: 20%;
-      transition:
-        bottom 0.7s ease,
-        opacity 0.7s ease;
+      transition: bottom 0.7s ease, opacity 0.7s ease;
    }
  }
 }
--- a/app/components/Card.vue
+++ b/app/components/Card.vue
@@ -6,7 +6,7 @@
    <div class="flip-inner">
      <!-- Face-Up -->
      <main
-        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">
+        class="face-up backdrop-blur-sm border-2 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]">
--- a/app/components/Player.vue
+++ b/app/components/Player.vue
@@ -6,7 +6,6 @@
        <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>
  </div>
--- a/app/components/SearchModal.vue
+++ b/app/components/SearchModal.vue
@@ -1,83 +1,44 @@
 <template>
  <transition name="fade">
-    <div
-      v-if="ui.showSearch"
-      class="fixed inset-0 z-50 flex items-center justify-center transition-all"
-    >
+    <div v-if="ui.showSearch" class="fixed inset-0 z-50 flex items-center justify-center transition-all">
      <div class="absolute inset-0 bg-black/60 backdrop-blur-md" @click="close"></div>
      <div
        class="relative w-full max-w-2xl rounded-xl bg-white shadow-xl ring-1 ring-slate-200 dark:bg-slate-900 dark:ring-slate-700"
-        role="dialog"
-        aria-modal="true"
-        @keydown.esc.prevent.stop="close"
-      >
+        role="dialog" aria-modal="true" @keydown.esc.prevent.stop="close">
        <div class="flex items-center gap-2 dark:border-slate-700">
-          <svg
-            class="ml-4 h-7 w-7 text-slate-500"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
+          <svg class="ml-4 h-7 w-7 text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8" />
            <path d="m21 21-4.3-4.3" />
          </svg>
-          <input
-            ref="inputRef"
-            v-model="ui.searchQuery"
-            type="text"
-            placeholder="Rechercher boxes, artistes, tracks..."
+          <input ref="inputRef" v-model="ui.searchQuery" type="text" placeholder="Rechercher boxes, artistes, tracks..."
            class="flex-1 bg-transparent px-2 py-2 text-slate-900 text-3xl placeholder-slate-400 outline-none dark:text-slate-100"
-            @keydown.down.prevent="move(1)"
-            @keydown.up.prevent="move(-1)"
-            @keydown.enter.prevent="confirm"
-          />
+            @keydown.down.prevent="move(1)" @keydown.up.prevent="move(-1)" @keydown.enter.prevent="confirm" />
        </div>

        <div class="max-h-72 overflow-auto results-scroll">
          <template v-if="results.length">
            <ul class="divide-y divide-slate-100 dark:divide-slate-800">
-              <li
-                v-for="(resultItem, idx) in results"
-                :key="resultItem.key"
-                :class="[
-                  'flex cursor-pointer items-center justify-between gap-3 px-2 py-3 hover:bg-slate-50 dark:hover:bg-slate-800',
-                  idx === activeIndex ? 'bg-slate-100 dark:bg-slate-800' : ''
-                ]"
-                @mouseenter="activeIndex = idx"
-                @click="selectResult(resultItem)"
-              >
+              <li v-for="(resultItem, idx) in results" :key="resultItem.key" :class="[
+                'flex cursor-pointer items-center justify-between gap-3 px-2 py-3 hover:bg-slate-50 dark:hover:bg-slate-800',
+                idx === activeIndex ? 'bg-slate-100 dark:bg-slate-800' : ''
+              ]" @mouseenter="activeIndex = idx" @click="selectResult(resultItem)">
                <div class="flex items-center gap-3">
-                  <img
-                    v-if="coverUrlFor(resultItem)"
-                    :src="coverUrlFor(resultItem)"
-                    alt=""
-                    loading="lazy"
-                    class="h-10 w-10 rounded object-cover ring-1 ring-slate-200 dark:ring-slate-700"
-                  />
+                  <img v-if="coverUrlFor(resultItem)" :src="coverUrlFor(resultItem)" alt="" loading="lazy"
+                    class="h-10 w-10 rounded object-cover ring-1 ring-slate-200 dark:ring-slate-700" />
                  <span
-                    class="inline-flex min-w-[68px] items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold uppercase text-slate-600 dark:text-slate-300 dark:border-slate-600"
-                    >{{ resultItem.type }}</span
-                  >
+                    class="inline-flex min-w-[68px] items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold uppercase text-slate-600 dark:text-slate-300 dark:border-slate-600">{{
+                      resultItem.type }}</span>
                  <span class="text-slate-900 dark:text-slate-100">{{ resultItem.label }}</span>
                </div>
                <div class="flex items-center gap-2">
-                  <span
-                    v-if="resultItem.sublabel"
-                    class="text-sm text-slate-500 dark:text-slate-400"
-                    >{{ resultItem.sublabel }}</span
-                  >
-                  <toggleFavorite v-if="resultItem.type === 'TRACK'" :track="resultItem.payload" />
+                  <span v-if="resultItem.sublabel" class="text-sm text-slate-500 dark:text-slate-400">{{
+                    resultItem.sublabel }}</span>
                </div>
              </li>
            </ul>
          </template>
-          <div
-            v-else-if="ui.searchQuery"
-            class="px-2 py-6 text-center text-slate-500 dark:text-slate-400"
-          >
+          <div v-else-if="ui.searchQuery" class="px-2 py-6 text-center text-slate-500 dark:text-slate-400">
            Aucun résultat
          </div>
        </div>
@@ -91,12 +52,10 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useUiStore } from '~/store/ui'
 import { useDataStore } from '~/store/data'
 import { usePlayerStore } from '~/store/player'
-import { useFavoritesStore } from '~/store/favorites'

 const ui = useUiStore()
 const data = useDataStore()
 const player = usePlayerStore()
-const fav = useFavoritesStore()
 const inputRef = ref<HTMLInputElement | null>(null)
 const activeIndex = ref(0)

@@ -195,15 +154,10 @@ const selectResult = (ResultItem: ResultItem) => {
    }
  } else if (ResultItem.type === 'TRACK') {
    const track = ResultItem.payload
-    // If the selected track is a favorite, just play it without navigating/selecting its box
-    if (fav.isFavorite(track.id)) {
+    const box = data.getBoxById(track.boxId)
+    if (box) {
+      ui.selectBox(box.id)
      player.playTrack(track)
-    } else {
-      const box = data.getBoxById(track.boxId)
-      if (box) {
-        ui.selectBox(box.id)
-        player.playTrack(track)
-      }
    }
  }
  close()
--- a/app/components/ToggleFavorite.vue
+++ b/app/components/ToggleFavorite.vue
@@ -1,41 +0,0 @@
-<template>
-  <button
-    class="p-1 rounded hover:bg-slate-100 transition-colors duration-300"
-    aria-label="Toggle favorite"
-    @click.stop="fav.toggle(props.track)"
-  >
-    <svg
-      v-if="fav.isFavorite(props.track.id)"
-      class="h-5 w-5 text-amber-400 hover:text-amber-300"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-    >
-      <path
-        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-      />
-    </svg>
-    <svg
-      v-else
-      class="h-5 w-5 text-slate-400"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path
-        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-      />
-    </svg>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { useFavoritesStore } from '~/store/favorites'
-import type { Track } from '~/../types/types'
-
-const fav = useFavoritesStore()
-
-const props = defineProps<{ track: Track }>()
-</script>
--- a/app/components/deck/DeckCompilation.vue
+++ b/app/components/deck/DeckCompilation.vue
@@ -9,13 +9,20 @@
        <button @click="distribute">distribute</button>
        <button @click="halfOutside">halfOutside</button>
        <button @click="backToBox">backToBox</button>
+        <button @click="selectSide('A')" class="px-4 py-2 text-black"
+          :class="{ 'bg-white text-black': props.box.activeSide === 'A' }">
+          Side A
+        </button>
+        <button @click="selectSide('B')" class="px-4 py-2"
+          :class="{ 'bg-white text-black': props.box.activeSide === 'B' }">
+          Side B
+        </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'
@@ -31,7 +38,7 @@ const playerStore = usePlayerStore()

 const deck = ref()
 const tracks = computed(() =>
-  dataStore.getTracksByboxId(props.box.id).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+  dataStore.getTracksByboxId(props.box.id, props.box.activeSide).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
 )

 const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)
@@ -58,6 +65,11 @@ const backToBox = () => {
  })
 }

+// Fonction pour sélectionner un côté (A ou B)
+const selectSide = (side: 'A' | 'B') => {
+  dataStore.setActiveSideByBoxId(props.box.id, side)
+}
+
 </script>

 <style lang="scss" scoped>