flippable cards

app/components/molecule/box.vue

@@ -200,7 +200,6 @@ watch(() => props.compilation, () => applyColor(), { deep: true })
 
   &-scene {
     height: calc(var(--size) * 20);
-    width: var(--width);
     perspective: 1000px;
     touch-action: none;
   }

app/components/molecule/card.vue

@@ -1,34 +1,36 @@
 <template>
-  <article class="relative">
-    <main
-      class="backdrop-blur-sm border-2 -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-40 hover:bg-opacity-80 hover:shadow-xl transition-all bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
-      <!-- Cover -->
-      <figure @click="playerStore.playTrack(props.track)" class="flex-1 overflow-hidden rounded-t-xl cursor-pointer">
-        <img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
-      </figure>
+  <article class="flip-card w-56 h-80" :data-flipped="props.isflipped">
+    <div class="flip-inner">
+      <main
+        class="flip-front backdrop-blur-sm border-2 -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-40 hover:bg-opacity-80 hover:shadow-xl transition-all bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
+        <!-- Cover -->
+        <figure @click="playerStore.playTrack(props.track)" class="flex-1 overflow-hidden rounded-t-xl cursor-pointer">
+          <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">
-          {{ props.track.order }}
+        <!-- Body -->
+        <div class="p-3 text-center bg-white rounded-b-xl">
+          <div class="label">
+            {{ 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">
+            {{ props.track.artist.name }}
+          </p>
         </div>
-        <h2 class="text-base text-neutral-800 font-bold truncate">{{ props.track.title }}</h2>
-        <p class="text-sm text-neutral-500 truncate">
-          {{ props.track.artist.name }}
-        </p>
-      </div>
-    </main>
+      </main>
 
-    <footer
-      class="ml-32 backdrop-blur-sm -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
-      <!-- Back -->
-      <div class="h-full flex p-16 text-center bg-slate-800 rounded-xl">
-        <img src="/favicon.svg" />
-      </div>
-      <div class="label">
-        {{ props.track.id }}
-      </div>
-    </footer>
+      <footer
+        class="flip-back backdrop-blur-sm -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
+        <!-- Back -->
+        <div class="h-full flex p-16 text-center bg-slate-800 rounded-xl">
+          <img src="/favicon.svg" />
+          <div class="label label--id">
+            {{ props.track.order }}
+          </div>
+        </div>
+      </footer>
+    </div>
   </article>
 
 </template>
@@ -37,7 +39,7 @@
 import type { Track } from '~~/types/types'
 import { usePlayerStore } from '~/store/player'
 
-const props = defineProps<{ track: Track }>()
+const props = defineProps<{ track: Track, isflipped: false }>()
 const playerStore = usePlayerStore()
 const coverUrl = props.track.coverId.startsWith('http')
   ? props.track.coverId
@@ -50,4 +52,38 @@ const coverUrl = props.track.coverId.startsWith('http')
   font-weight: bold;
   text-align: center;
 }
+
+/* Flip effect */
+.flip-card {
+  perspective: 1000px;
+}
+
+.flip-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+}
+
+.flip-card[data-flipped=false] .flip-inner {
+  transform: rotateY(180deg);
+}
+
+.flip-front,
+.flip-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  will-change: transform;
+}
+
+.flip-front {
+  transform: rotateY(0deg);
+}
+
+.flip-back {
+  transform: rotateY(180deg);
+}
 </style>

app/components/molecule/player.vue

@@ -36,3 +36,13 @@ watch(
   }
 )
 </script>
+
+<style scoped>
+audio {
+  transition: all 1s;
+}
+
+audio[src=""] {
+  @apply -bottom-1.5 opacity-0
+}
+</style>

app/components/organism/compilationPage.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="mt-8 p-8 w-96 flex flex-wrap">
-    <MoleculeCard v-for="track in dataStore.getTracksByCompilationId(compilation.id)" :key="track.id" :track="track" />
+  <div class="mt-8 p-8 w-full flex flex-wrap justify-around">
+    <MoleculeCard v-for="track in dataStore.getTracksByCompilationId(compilation.id)" :key="track.id" :track="track"
+      :isFlipped="true" />
   </div>
 </template>
 

app/store/player.ts

@@ -21,6 +21,11 @@ export const usePlayerStore = defineStore('player', {
     },
 
     playTrack(track?: Track) {
+      // load compile if not allready loaded
+      // play if track is not already played
+      // else pause
+
+
       if (track) this.setTrack(track)
       if (!this.currentTrack || !this.audio) return