multi cards

app/components/PlayingCard.vue

@@ -0,0 +1,85 @@
+<template>
+  <section class="playing-card" :class="{ 'playing-card--platine-open': platineOpen }">
+    <Card :card="props.card!" :is-face-up="props.isFaceUp" @click="clickOnCard" :role="platineOpen ? 'img' : 'button'"
+      showPlayButtonFaceUp />
+    <Platine v-if="platineOpen && card" :card="card" autoplay />
+    <CloseButton v-if="platineOpen" @click="platineOpen = false" />
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { Card } from '~~/types/types'
+
+const props = defineProps<{ card: Card, isFaceUp: boolean }>()
+
+const platineOpen = ref(false)
+
+const clickOnCard = () => {
+  platineOpen.value = !platineOpen.value
+}
+</script>
+
+<style scoped lang="scss">
+$open-speed: 0.4s;
+
+.playing-card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  :deep(.card) {
+    transition: width $open-speed, height $open-speed, transform 0.1s;
+    position: absolute;
+
+    .face-up,
+    .pochette {
+      transition: border-radius $open-speed, box-shadow $open-speed;
+
+      &:active {
+        .play-button {
+          @apply scale-90;
+        }
+      }
+    }
+  }
+
+  &--platine-open {
+    .card {
+      pointer-events: none;
+
+      &:focus {
+        @apply z-auto scale-100;
+      }
+    }
+
+    .card,
+    .platine {
+      width: 100vmin;
+      height: 100vmin;
+    }
+
+    &:deep(.card) {
+      .face-up {
+        border-radius: 999px;
+        @apply shadow-xl;
+
+        .pochette {
+          border-radius: 999px;
+        }
+
+        .rank,
+        .play-button {
+          opacity: 0;
+        }
+      }
+
+      .play-button,
+      .card-body,
+      .face-down {
+        display: none;
+        opacity: 0;
+      }
+    }
+  }
+}
+</style>