playlists support v1

app/components/deck.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <div class="hidden tools fixed top-0 -left-0">
+      <button @click="setDisplay('pile')">pile</button>
+      <button @click="setDisplay('plateau')">plateau</button>
+      <button @click="setDisplay('holdem')">holdem</button>
+    </div>
+    <div ref="deck" class="deck flex flex-wrap justify-center gap-4">
+      <card v-if="compilation.duration" v-for="track in dataStore.getTracksByCompilationId(compilation.id)"
+        :key="track.id" :track="track" />
+      <card v-else v-for="track in dataStore.getPlaylistTracksByCompilationId(compilation.id)" :track="track" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDataStore } from '~/store/data'
+import type { Compilation } from '~~/types/types'
+
+const props = defineProps<{
+  compilation: Compilation
+}>()
+const dataStore = useDataStore()
+const deck = ref()
+
+function setDisplay(displayMode) {
+  deck.value.classList.remove('pile', 'plateau', 'holdem')
+  deck.value.classList.add(displayMode)
+}
+</script>
+
+<style lang="scss">
+.deck {
+  @apply transition-all;
+
+  &.pile {
+    @apply relative;
+
+    .card {
+      @apply absolute top-0;
+    }
+  }
+
+  &.plateau {
+    @apply mt-8 p-8 w-full flex flex-wrap justify-around;
+  }
+
+  &.holdem {
+    /* style holdem */
+  }
+}
+</style>