imporve cards animations

app/components/deck/DeckPlaylist.vue

@@ -1,16 +1,12 @@
 <template>
-  <div
-    ref="deck"
-    class="deck flex flex-wrap justify-center gap-4"
-    :class="{ 'pb-36': playerStore.currentTrack }"
-  >
-    <card
-      v-for="(track, i) in tracks"
-      :key="track.id"
-      :track="track"
-      tabindex="i"
-      :is-face-up="isCardRevealed(track.id)"
-    />
+  <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
+    <button @click="closeDatBox" v-if="uiStore.isBoxSelected"
+      class="absolute top-10 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
+      aria-label="close the box">
+      close
+    </button>
+    <card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i"
+      :is-face-up="isCardRevealed(track.id)" />
   </div>
 </template>
 
@@ -19,6 +15,7 @@ import { computed, ref } from 'vue'
 import { useDataStore } from '~/store/data'
 import { useCardStore } from '~/store/card'
 import { usePlayerStore } from '~/store/player'
+import { useUiStore } from '~/store/ui'
 import type { Box } from '~~/types/types'
 
 const props = defineProps<{
@@ -28,9 +25,14 @@ const props = defineProps<{
 const cardStore = useCardStore()
 const dataStore = useDataStore()
 const playerStore = usePlayerStore()
+const uiStore = useUiStore()
 
 const deck = ref()
 const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
 
 const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)
+
+const closeDatBox = () => {
+  uiStore.closeBox()
+}
 </script>