eS v1

app/components/deck.vue

@@ -6,21 +6,22 @@
       <button @click="setDisplay('holdem')">holdem</button>
     </div>
     <div ref="deck" class="deck flex flex-wrap justify-center gap-4">
-      <card v-for="track in tracks" :key="track.id" :track="track" />
+      <card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from 'vue'
 import { useDataStore } from '~/store/data'
-import type { Compilation } from '~~/types/types'
+import type { Box } from '~~/types/types'
 
 const props = defineProps<{
-  compilation: Compilation
+  box: Box
 }>()
 const dataStore = useDataStore()
 const deck = ref()
-const tracks = props.compilation.duration ? dataStore.getTracksByCompilationId(props.compilation.id) : dataStore.getPlaylistTracksByCompilationId(props.compilation.id)
+const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
 
 function setDisplay(displayMode) {
   deck.value.classList.remove('pile', 'plateau', 'holdem')