evilspins/app/components/deck/DeckCompilation.vue

<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 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="backToBox">backToBox</button>
        <button @click="toggleCards">toggleCards</button>
        <button @click="switchSide">Face {{ box.activeSide }}</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 { useUiStore } from '~/store/ui'
import type { Box } from '~~/types/types'

const uiStore = useUiStore()

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')
    }, index * 12)
  })
}

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')
  })
}

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>
.deck {
  @apply h-screen w-screen fixed top-0 left-0 -z-10 overflow-hidden;

  .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;
    opacity: 0;
    translate: 0 0;
    transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(40px, 0, 0);

    // half outside the box
    &.half-outside {
      opacity: 1;
      top: 0;

      &:nth-child(1) {
        translate: 120px 20px;
        transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, -100px, 0);
      }

      &:nth-child(2) {
        translate: 150px 20px;
        transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, -40px, 0);
      }

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

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

      &: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) {
        opacity: 0;
      }

      &.current-track {
        @apply shadow-none
      }
    }

    // outside the box
    &.outside {
      opacity: 1;
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 0);
      top: 50%;
      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} * 33%);
        }
      }
    }
  }
}
</style>