bucket + card sharer

app/components/deck/Playlist.vue

@@ -1,18 +1,19 @@
 <template>
-  <div class="flex flex-col fixed right-0 top-0 z-50">
+  <div class="flex flex-col fixed right-0 top-0 z-50" :class="props.class">
     <button @click="closeDatBox" v-if="uiStore.isBoxSelected"
       class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50" aria-label="close the box">
       close
     </button>
   </div>
-  <div class="controls flex justify-center z-50 relative">
+  <div class="controls flex justify-center z-50 relative" v-bind="attrs">
     <SearchInput @search="onSearch" />
     <SelectCardRank @change="onRankChange" />
     <SelectCardSuit @change="onSuitChange" />
   </div>
   <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
     <card v-for="(track, i) in filteredTracks" :key="track.id" :track="track" :tabindex="i"
-      :is-face-up="isCardRevealed(track.id)" />
+      @card-click="playerStore.playPlaylistTrack(track)" :is-face-up="isCardRevealed(track.id)"
+      @click-card-symbol="openCardSharer()" />
   </div>
 </template>
 
@@ -27,10 +28,19 @@ import SelectCardSuit from '~/components/ui/SelectCardSuit.vue'
 import SelectCardRank from '~/components/ui/SelectCardRank.vue'
 import SearchInput from '~/components/ui/SearchInput.vue'
 
-const props = defineProps<{
-  box: Box
+// Define the events this component emits
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void;
 }>()
 
+const props = defineProps<{
+  box: Box;
+  class?: string;
+}>()
+
+// Use useAttrs to get all other attributes
+const attrs = useAttrs()
+
 const cardStore = useCardStore()
 const dataStore = useDataStore()
 const playerStore = usePlayerStore()
@@ -47,12 +57,17 @@ const searchQuery = ref('')
 
 const isCardRevealed = (trackId: number) => {
   // Si une recherche est en cours, révéler automatiquement les cartes correspondantes
-  if (searchQuery.value) return true
+  if (searchQuery.value || (selectedRank.value && selectedSuit.value)) return true
   return cardStore.isCardRevealed(trackId)
 }
 
-const closeDatBox = () => {
+const closeDatBox = (event: MouseEvent) => {
   uiStore.closeBox()
+  emit('click', event)
+}
+
+const openCardSharer = () => {
+  uiStore.openCardSharer()
 }
 
 const onSuitChange = (suit: string) => {
@@ -107,9 +122,4 @@ const applyFilters = () => {
 .deck {
   position: relative;
 }
-
-.docked {
-  position: fixed;
-  bottom: 0;
-}
-</style>
+</style>