evilspins/app/components/Card.vue

<template>
  <article :role="props.role" :class="[
    'card cursor-pointer',
    isFaceUp ? 'face-up' : 'face-down'
  ]" :tabindex="props.tabindex" :aria-disabled="false" @click="$emit('click', $event)"
    @keydown.enter="$emit('click', $event)" @keydown.space.prevent="$emit('click', $event)">
    <div class="flip-inner" ref="cardElement">
      <!-- Face-Up -->
      <main
        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">
          <div class="suit text-7xl absolute"
            :class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.card?.suit]">
            <img :src="`/${props.card?.suit}.svg`" />
          </div>
          <div class="rank text-white font-bold absolute -mt-1">
            {{ props.card?.rank }}
          </div>
        </div>

        <!-- Cover -->
        <figure class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-xl cursor-pointer">
          <playButton :objectToPlay="card" />
          <img v-if="isFaceUp" :src="props.card.url_image" alt="Pochette de l'album" loading="lazy"
            class="w-full h-full object-cover object-center" />
        </figure>

        <!-- Body -->
        <div
          class="card-body p-3 text-center bg-white rounded-b-xl opacity-0 -mt-16 hover:opacity-100 hover:-mt-0 transition-all duration-300">
          <h2 class="select-text text-sm text-neutral-500 first-letter:uppercase truncate">
            {{ props.card.title || 'title' }}
          </h2>
          <p class="select-text text-base text-neutral-800 font-bold capitalize truncate">
            {{ props.card.artist || 'artist' }}
          </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 select-none">
        <figure class="h-full flex text-center rounded-xl justify-center items-center"
          :style="{ backgroundColor: cardColor }">
          <playButton :objectToPlay="card" />
          <img src="/face-down.svg" />
        </figure>
      </footer>
    </div>
  </article>
</template>

<script setup lang="ts">
import type { Card } from '~~/types/types'

const emit = defineEmits(['click'])

const props = withDefaults(defineProps<{
  card: Card;
  isFaceUp?: boolean;
  role?: string;
  tabindex?: string | number;
}>(), {
  isFaceUp: false,
  role: 'button',
  tabindex: '0'
})

import { getYearColor } from '~/utils/colors'

const cardColor = computed(() => getYearColor(props.card.year || 0))
const isRedCard = computed(() => (props.card?.suit === '♥' || props.card?.suit === '♦'))

</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 w-56 h-80 min-w-56 min-h-80;

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

  .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);
    }
  }

  &:focus,
  &.current-card {
    @apply z-50 scale-110;
    outline: none;

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

  &:focus,
  &.current-card {
    .play-button {
      @apply opacity-100;
    }
  }

  .play-button {
    opacity: 0;
  }

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

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

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

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

  &.is-dragging {
    @apply opacity-50 scale-95 rotate-6;
    cursor: grabbing !important;

    .face-up {
      @apply shadow-2xl;
    }

    .play-button,
    .card-body {
      display: none;
    }
  }
}
</style>