evilSpins v1

app/components/deck/BlackJack.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    ref="deck"
+    class="deck flex flex-wrap justify-center gap-4"
+    :class="{ 'pb-36': playerStore.currentTrack }"
+  >
+    <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 type { Box } from '~~/types/types'
+
+const props = defineProps<{
+  box: Box
+}>()
+
+const cardStore = useCardStore()
+const dataStore = useDataStore()
+const playerStore = usePlayerStore()
+
+const deck = ref()
+const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
+
+const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)
+</script>