WIP starbook demo

app/pages/card/[slug].vue

@@ -19,7 +19,7 @@ useHead({
 })
 
 const clickOnSlugCard = () => {
-  isFaceUp.value = true
+  //
 }
 
 const imageLoaded = () => {
@@ -28,7 +28,7 @@ const imageLoaded = () => {
 
 onMounted(() => {
   setTimeout(() => {
-    clickOnSlugCard()
+    isFaceUp.value = true
   }, 700)
 })
 </script>

app/pages/random.vue

@@ -1,8 +1,8 @@
 <template>
-  <section class="flex justify-center items-center h-screen">
-    <div class="aspect-square size-[100vmin] max-h-screen max-w-screen overflow-hidden">
-      <Platine :card="card" />
-    </div>
+  <section class="platine-card" :class="{ 'platine-card--platine-open': platineOpen }">
+    <Card :card="card!" :is-face-up @click="clickOnCard" :role="platineOpen ? 'img' : 'button'" showPlayButtonFaceUp />
+    <Platine v-if="platineOpen && card" :card="card" autoplay />
+    <CloseButton v-if="platineOpen" @click="platineOpen = false" />
   </section>
 </template>
 
@@ -11,9 +11,84 @@ import type { Card } from '~~/types/types'
 
 const { data: card, pending, error } = await useFetch<Card>('/api/card/random')
 
+const isFaceUp = ref(false)
+const platineOpen = ref(false)
+
 useHead({
   title: computed(() =>
     card.value ? `${card.value.artist} - ${card.value.title}` : 'Loading...'
   )
 })
+
+onMounted(() => {
+  setTimeout(() => {
+    isFaceUp.value = true
+  }, 700)
+})
+
+const clickOnCard = () => {
+  platineOpen.value = !platineOpen.value
+}
 </script>
+
+<style scoped lang="scss">
+$open-speed: 0.4s;
+
+.platine-card {
+  @apply screen-centered h-screen;
+
+  :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 {
+          opacity: 0;
+        }
+      }
+
+      .play-button,
+      .card-body,
+      .face-down {
+        display: none;
+        opacity: 0;
+      }
+    }
+  }
+}
+</style>