FEAT: side A/B

app/components/deck/DeckCompilation.vue

@@ -9,13 +9,20 @@
         <button @click="distribute">distribute</button>
         <button @click="halfOutside">halfOutside</button>
         <button @click="backToBox">backToBox</button>
+        <button @click="selectSide('A')" class="px-4 py-2 text-black"
+          :class="{ 'bg-white text-black': props.box.activeSide === 'A' }">
+          Side A
+        </button>
+        <button @click="selectSide('B')" class="px-4 py-2"
+          :class="{ 'bg-white text-black': props.box.activeSide === 'B' }">
+          Side B
+        </button>
       </li>
     </ul>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
 import { useDataStore } from '~/store/data'
 import { useCardStore } from '~/store/card'
 import { usePlayerStore } from '~/store/player'
@@ -31,7 +38,7 @@ const playerStore = usePlayerStore()
 
 const deck = ref()
 const tracks = computed(() =>
-  dataStore.getTracksByboxId(props.box.id).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+  dataStore.getTracksByboxId(props.box.id, props.box.activeSide).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
 )
 
 const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)
@@ -58,6 +65,11 @@ const backToBox = () => {
   })
 }
 
+// Fonction pour sélectionner un côté (A ou B)
+const selectSide = (side: 'A' | 'B') => {
+  dataStore.setActiveSideByBoxId(props.box.id, side)
+}
+
 </script>
 
 <style lang="scss" scoped>