refacto card / box / deck ajout du template default
This commit is contained in:
		| @@ -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> | ||||
|  | ||||
|   | ||||
		Reference in New Issue
	
	Block a user