platine as component

app/pages/draggable.vue

@@ -1,13 +1,8 @@
 <template>
   <div class="deck">
-    <button class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors relative z-30"
-      @click="cardStore.revealAllCards(tracks)">
-      reveal
-    </button>
     <draggable v-model="tracks" item-key="id" class="draggable-container" @start="drag = true" @end="onDragEnd">
       <template #item="{ element: track }">
-        <card :key="track.id" :track="track" tabindex="0" :is-face-up="track.isFaceUp" class="draggable-item"
-          @click="flipCard(track)" />
+        <card :key="track.id" :track="track" tabindex="0" is-face-up class="draggable-item" @click="flipCard(track)" />
       </template>
     </draggable>
   </div>
@@ -16,9 +11,7 @@
 <script setup>
 import { useDataStore } from '~/store/data'
 import draggable from 'vuedraggable'
-import { useCardStore } from '~/store/card'
 
-const cardStore = useCardStore()
 const drag = ref(false)
 const tracks = ref([])
 // Configuration du layout

app/pages/mix.vue

@@ -1,22 +1,25 @@
 <template>
-  <Platine />
+  <Platine :track="track1" />
+  <!-- <card v-if="track1" :track="track1" is-face-up /> -->
+  <Platine :track="track2" />
+  <!-- <card v-if="track2" :track="track2" is-face-up /> -->
 </template>
 
 <script setup>
-import { useUiStore } from '~/store/ui'
 import { useDataStore } from '~/store/data'
 
+const dataStore = useDataStore()
+const track1 = computed(() => dataStore.getTrackById(2023322))
+const track2 = computed(() => dataStore.getTrackById(2023329))
+
 // Configuration du layout
 definePageMeta({
-  layout: 'default'
+  layout: 'empty'
 })
 
-const uiStore = useUiStore()
-
 onMounted(async () => {
   const dataStore = useDataStore()
   await dataStore.loadData()
-  uiStore.listBoxes()
 })
 </script>