evilspins/app/components/Card.vue

<template>
  <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]"
          >
            <img :src="`/${props.track.card?.suit}.svg`" />
          </div>
          <div class="rank text-white font-bold absolute -mt-1">
            {{ props.track.card?.rank }}
          </div>
        </div>
        <!-- Cover -->
        <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"
          />
        </figure>
        <!-- Body -->
        <div class="p-3 text-center bg-white rounded-b-xl">
          <div class="label" v-if="isOrder">
            {{ props.track.order }}
          </div>
          <h2 class="text-base text-neutral-800 font-bold truncate">
            {{ props.track.title }}
          </h2>
          <p class="text-sm text-neutral-500 truncate">
            <template v-if="isPlaylistTrack">
              {{ props.track.artist.name }}
            </template>
          </p>
        </div>
      </main>

      <!-- 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"
        >
          <playButton :objectToPlay="track" />
          <img src="/face-down.svg" />
        </figure>
      </footer>
    </div>
  </article>
</template>

<script setup lang="ts">
import type { Track } from '~~/types/types'
import { usePlayerStore } from '~/store/player'

const props = withDefaults(defineProps<{ track: Track; isFaceUp?: boolean }>(), {
  isFaceUp: false
})
const playerStore = usePlayerStore()
const isManifesto = computed(() => props.track.boxId.startsWith('ES00'))
const isOrder = computed(() => props.track.order && !isManifesto)
const isPlaylistTrack = computed(() => props.track.type === 'playlist')
const isRedCard = computed(() => props.track.card?.suit === '♥' || props.track.card?.suit === '♦')
const coverUrl = props.track.coverId.startsWith('http')
  ? props.track.coverId
  : `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`
</script>

<style lang="scss">
.label {
  @apply rounded-full size-7 p-2 bg-esyellow leading-3 -mt-6;
  font-weight: bold;
  text-align: center;
}

.♠,
.♣,
.♦,
.♥ {
  @apply text-5xl size-14;
}

/* Flip effect */
.card {
  perspective: 1000px;
  @apply transition-all scale-100;

  .flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }

  .face-down,
  .face-up {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    will-change: transform;
    background-color: rgba(255, 255, 255, 0.5);
  }

  .face-up {
    transform: rotateY(0deg);
    transition: box-shadow 0.6s;
  }

  .face-down {
    transform: rotateY(-180deg);
  }

  &.face-down .flip-inner {
    transform: rotateY(180deg);
  }

  &.face-up .flip-inner {
    transform: rotateY(0deg);
  }

  &.face-down:hover {
    .play-button {
      opacity: 1;
    }

    .flip-inner {
      transform: rotateY(170deg);
    }
  }

  &.current-track,
  &:focus {
    @apply z-50;

    .face-up {
      @apply shadow-2xl-custom;
      transition:
        box-shadow 0.6s,
        transform 0.6s;
    }

    @apply scale-110;
  }

  .play-button {
    opacity: 0;
  }

  .face-up:hover {
    .play-button {
      opacity: 1;
    }

    .flip-inner {
      transform: rotateY(-170deg);
    }
  }

  .play-button {
    @apply absolute bottom-1/2 top-24 opacity-0 hover:opacity-100;
  }

  .pochette:active,
  .face-down:active {
    .play-button {
      @apply scale-90;
    }
  }
}
</style>