evilspins/app/components/deck/DeckCompilation.vue

<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>
        <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 { 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, props.box.activeSide).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')
  })
}

// 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>
.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>