evilSpins v1

app/components/Card.vue

@@ -0,0 +1,192 @@
+<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>