imporve cards animations

2025-11-23 20:42:49 +01:00
parent 1b8b998622
commit 90cbc0be18
14 changed files with 167 additions and 148 deletions
--- a/app/components/deck/DeckCompilation.vue
+++ b/app/components/deck/DeckCompilation.vue
@@ -1,22 +1,22 @@
 <template>
  <div>
+    <button @click="closeDatBox" 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">
+      close
+    </button>
+    <div class="fixed bg-black text-white p-2 z-50">
+      {{ playerStore.history }}
+    </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>
-        <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>
+        <button @click="toggleCards">toggleCards</button>
+        <button @click="switchSide">Face {{ box.activeSide }}</button>
      </li>
    </ul>
  </div>
@@ -26,8 +26,11 @@
 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 uiStore = useUiStore()
+
 const props = defineProps<{
  box: Box
 }>()
@@ -48,7 +51,7 @@ const distribute = () => {
    setTimeout(() => {
      card.classList.remove('half-outside')
      card.classList.add('outside')
-    }, 500 + (index * 100)) // 1s delay + 200ms per card
+    }, index * 12)
  })
 }

@@ -65,11 +68,43 @@ const backToBox = () => {
  })
 }

-// Fonction pour sélectionner un côté (A ou B)
-const selectSide = (side: 'A' | 'B') => {
-  dataStore.setActiveSideByBoxId(props.box.id, side)
+const toggleCards = () => {
+  if (document.querySelector('.card.outside')) {
+    halfOutside()
+  } else {
+    distribute()
+  }
 }

+const initDeck = () => {
+  setTimeout(() => {
+    if (!playerStore.isCurrentBox(props.box)) {
+      halfOutside()
+    }
+  }, 800)
+  if (playerStore.isCurrentBox(props.box)) {
+    distribute()
+  }
+}
+// Fonction pour sélectionner un côté (A ou B)
+const switchSide = () => {
+  dataStore.setActiveSideByBoxId(props.box.id, props.box.activeSide === 'A' ? 'B' : 'A')
+  initDeck()
+}
+
+const closeDatBox = () => {
+  backToBox()
+  setTimeout(() => {
+    uiStore.closeBox()
+  }, 300)
+}
+
+onMounted(() => {
+  // if is a track change do not init
+
+  initDeck()
+})
+
 </script>

 <style lang="scss" scoped>
@@ -79,74 +114,82 @@ const selectSide = (side: 'A' | 'B') => {
  .card {
    position: absolute;
    top: 0;
+    right: calc(50% - 120px);
    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;
-    // }
+    translate: 0 0;
+    transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(40px, 0, 0);

    // 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) {
+      &:nth-child(2) {
        translate: 150px 20px;
        transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, -40px, 0);
      }

-      &:nth-child(5) {
+      &:nth-child(3) {
        translate: 190px 20px;
        transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 30px, 0);
      }

-      &:nth-child(7) {
+      &:nth-child(4) {
        translate: 240px 20px;
        transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 120px, 0);
      }

-      &:nth-child(9) {
+      &:nth-child(5) {
        translate: 280px 20px;
        transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 200px, 0);
      }

+      &:nth-child(6),
+      &:nth-child(7),
+      &:nth-child(8),
+      &:nth-child(9),
+      &:nth-child(10),
      &:nth-child(11) {
-        translate: 310px 20px;
-        transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 260px, 0);
+        opacity: 0;
+      }
+
+      &.current-track {
+        @apply shadow-none
      }
    }

    // outside the box
    &.outside {
      opacity: 1;
-      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 0);
      top: 50%;
-      right: 66%;
+      right: calc(50% + 320px);
+      @apply translate-y-40;
+
+      &:hover {
+        @apply z-40 translate-y-32;
+      }
+
+      &.current-track {
+        @apply z-30 translate-y-28;
+      }

      @for $i from 0 through 10 {
        &:nth-child(#{$i + 1}) {
-          translate: calc(#{$i + 1} * 20%);
+          translate: calc(#{$i + 1} * 33%);
        }
      }
    }
-
-    &.current-track {
-      // z-index: 10;
-    }
  }
 }
 </style>
--- a/app/components/deck/DeckPlaylist.vue
+++ b/app/components/deck/DeckPlaylist.vue
@@ -1,16 +1,12 @@
 <template>
-  <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 ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
+    <button @click="closeDatBox" 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">
+      close
+    </button>
+    <card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i"
+      :is-face-up="isCardRevealed(track.id)" />
  </div>
 </template>

@@ -19,6 +15,7 @@ import { computed, ref } 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<{
@@ -28,9 +25,14 @@ const props = defineProps<{
 const cardStore = useCardStore()
 const dataStore = useDataStore()
 const playerStore = usePlayerStore()
+const uiStore = useUiStore()

 const deck = ref()
 const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))

 const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)
+
+const closeDatBox = () => {
+  uiStore.closeBox()
+}
 </script>