add working player

app/components/molecule/card.vue

@@ -1,5 +1,5 @@
 <template>
-  <article class="flip-card w-56 h-80" :data-flipped="props.isflipped">
+  <article class="flip-card w-56 h-80">
     <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">
@@ -39,7 +39,7 @@
 import type { Track } from '~~/types/types'
 import { usePlayerStore } from '~/store/player'
 
-const props = defineProps<{ track: Track, isflipped: false }>()
+const props = defineProps<{ track: Track }>()
 const playerStore = usePlayerStore()
 const coverUrl = props.track.coverId.startsWith('http')
   ? props.track.coverId
@@ -66,7 +66,7 @@ const coverUrl = props.track.coverId.startsWith('http')
   transform-style: preserve-3d;
 }
 
-.flip-card[data-flipped=false] .flip-inner {
+.flipped .flip-inner {
   transform: rotateY(180deg);
 }