39 lines
1.2 KiB
Vue
39 lines
1.2 KiB
Vue
<template>
|
|
<div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
|
|
<button @click="closeDatBox" v-if="uiStore.isBoxSelected"
|
|
class="absolute top-10 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
|
|
aria-label="close the box">
|
|
close
|
|
</button>
|
|
<card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i"
|
|
:is-face-up="isCardRevealed(track.id)" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { useDataStore } from '~/store/data'
|
|
import { useCardStore } from '~/store/card'
|
|
import { usePlayerStore } from '~/store/player'
|
|
import { useUiStore } from '~/store/ui'
|
|
import type { Box } from '~~/types/types'
|
|
|
|
const props = defineProps<{
|
|
box: Box
|
|
}>()
|
|
|
|
const cardStore = useCardStore()
|
|
const dataStore = useDataStore()
|
|
const playerStore = usePlayerStore()
|
|
const uiStore = useUiStore()
|
|
|
|
const deck = ref()
|
|
const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
|
|
|
|
const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)
|
|
|
|
const closeDatBox = () => {
|
|
uiStore.closeBox()
|
|
}
|
|
</script>
|