dupont release

app/components/PlayingCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="playing-card" :class="{ 'playing-card--platine-open': platineOpen }">
+  <section class="playing-card" :class="{ '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 />
@@ -15,7 +15,9 @@ const props = defineProps<{ card: Card, isFaceUp: boolean }>()
 const platineOpen = ref(false)
 
 const clickOnCard = () => {
-  platineOpen.value = !platineOpen.value
+  setTimeout(() => {
+    platineOpen.value = !platineOpen.value
+  }, 600);
 }
 </script>
 
@@ -23,16 +25,23 @@ const clickOnCard = () => {
 $open-speed: 0.4s;
 
 .playing-card {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  @apply size-card;
+  position: relative;
+
+  .card,
+  .platine {
+    height: 100%;
+    width: 100%;
+    transition: width $open-speed, height $open-speed, min-width $open-speed,
+      min-height $open-speed, transform 0.1s;
+  }
 
   :deep(.card) {
-    transition: width $open-speed, height $open-speed, transform 0.1s;
+    // transition: width $open-speed, height $open-speed, transform 0.1s;
     position: absolute;
 
     .face-up,
-    .pochette {
+    .cover {
       transition: border-radius $open-speed, box-shadow $open-speed;
 
       &:active {
@@ -43,7 +52,13 @@ $open-speed: 0.4s;
     }
   }
 
-  &--platine-open {
+  &.platine-open {
+    $open-size: 20rem;
+    width: $open-size;
+    height: $open-size;
+    min-height: $open-size;
+    min-width: $open-size;
+
     .card {
       pointer-events: none;
 
@@ -52,19 +67,13 @@ $open-speed: 0.4s;
       }
     }
 
-    .card,
-    .platine {
-      width: 100vmin;
-      height: 100vmin;
-    }
-
     &:deep(.card) {
       .face-up {
-        border-radius: 999px;
+        border-radius: 100%;
         @apply shadow-xl;
 
-        .pochette {
-          border-radius: 999px;
+        .cover {
+          border-radius: 100%;
         }
 
         .rank,