refacto card / box / deck ajout du template default

This commit is contained in:
valere
2025-10-28 10:44:10 +01:00
parent 8ebda83a22
commit 25d56ec4ef
9 changed files with 191 additions and 86 deletions

View File

@@ -1,12 +1,13 @@
<template>
<div>
<div class="z-50 tools fixed top-0 -left-0 hidden">
<button @click="setDisplay('pile')">pile</button>
<button @click="setDisplay('plateau')">plateau</button>
<button @click="setDisplay('holdem')">holdem</button>
<div class="deck-order">
<button @click="orderDeck('pile')">pile</button>
<button @click="orderDeck('plateau')">plateau</button>
<button @click="orderDeck('holdem')">holdem</button>
</div>
<div ref="deck" class="deck flex flex-wrap justify-center gap-4">
<card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i" />
<card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i"
@click="() => playerStore.playTrack(track).catch(err => console.error(err))" />
</div>
</div>
</template>
@@ -15,6 +16,7 @@
import { computed, ref } from 'vue'
import { useDataStore } from '~/store/data'
import type { Box } from '~~/types/types'
import { usePlayerStore } from '~/store/player'
const props = defineProps<{
box: Box
@@ -22,10 +24,11 @@ const props = defineProps<{
const dataStore = useDataStore()
const deck = ref()
const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
const playerStore = usePlayerStore()
function setDisplay(displayMode) {
function orderDeck(order: string) {
deck.value.classList.remove('pile', 'plateau', 'holdem')
deck.value.classList.add(displayMode)
deck.value.classList.add(order)
}
</script>