refacto card / box / deck ajout du template default

app/components/boxes.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col-reverse mt-16" :class="!!playerStore.currentTrack ? 'mb-36' : 'mb-16'">
+  <div class="boxes">
     <box v-for="(box, i) in dataStore.boxes.slice()" :key="box.id" :tabindex="dataStore.boxes.length - i" :box="box"
       @click="onBoxClick(box)" class="text-center" :class="box.state" :id="box.id">
       <button @click.stop="playSelectedBox(box)" v-if="box.state === 'box-selected'"
@@ -12,7 +12,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
 import type { Box } from '~~/types/types'
 import { useDataStore } from '~/store/data'
 import { usePlayerStore } from '~/store/player'
@@ -40,32 +39,10 @@ function onBoxClick(b: Box) {
 function playSelectedBox(b: Box) {
   playerStore.playBox(b)
 }
-
-function KeyboardAction(e: KeyboardEvent) {
-  switch (e.key) {
-    case 'Escape':
-      uiStore.closeBox()
-      break;
-    case 'ArrowUp':
-      break;
-
-    case 'Enter':
-      if (document.activeElement?.id) {
-        openBox(document.activeElement.id)
-      }
-      break;
-    case 'ArrowDown':
-      break;
-    case 'ArrowLeft':
-      break;
-    case 'ArrowRight':
-      break;
-    default:
-      break;
-  }
-}
-
-onMounted(async () => {
-  window.addEventListener('keydown', KeyboardAction)
-})
 </script>
+
+<style lang="scss">
+.boxes {
+  @apply flex flex-col-reverse;
+}
+</style>

app/components/card.vue

@@ -1,10 +1,9 @@
 <template>
-  <article @click="() => playerStore.playTrack(props.track).catch(err => console.error(err))"
-    class="card flip-card isplaying w-56 h-80" :class="isFaceUp ? 'face-up' : 'face-down'">
+  <article class="card isplaying w-56 h-80" :class="isFaceUp ? 'face-up' : 'face-down'">
     <div class="flip-inner">
       <!-- Face-Up -->
       <main
-        class="flip-front backdrop-blur-sm border-1 -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-40 hover:bg-opacity-80 hover:shadow-xl transition-all bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
+        class="face-up backdrop-blur-sm border-1 z-10 card w-56 h-80 p-3 bg-opacity-40 hover:bg-opacity-80 hover:shadow-xl transition-all bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
         <div class="flex items-center justify-center size-7 absolute top-7 right-7" v-if="isPlaylistTrack">
           <div class="suit text-7xl absolute"
             :class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.track.card?.suit]">
@@ -37,7 +36,7 @@
 
       <!-- Face-Down -->
       <footer
-        class="flip-back backdrop-blur-sm -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
+        class="face-down backdrop-blur-sm z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
         <div class="h-full flex p-16 text-center bg-slate-800 rounded-xl">
           <img src="/favicon.svg" />
           <div class="label label--id" v-if="isOrder">
@@ -52,12 +51,10 @@
 
 <script setup lang="ts">
 import type { Track } from '~~/types/types'
-import { usePlayerStore } from '~/store/player'
 
 const props = withDefaults(defineProps<{ track: Track; isFaceUp?: boolean }>(), {
   isFaceUp: false
 })
-const playerStore = usePlayerStore()
 const isManifesto = computed(() => props.track.boxId.startsWith('ES00'))
 const isOrder = computed(() => props.track.order && !isManifesto)
 const isPlaylistTrack = computed(() => props.track.type === 'playlist')
@@ -75,7 +72,7 @@ const coverUrl = props.track.coverId.startsWith('http')
 }
 
 /* Flip effect */
-.flip-card {
+.card {
   perspective: 1000px;
 
   .flip-inner {
@@ -94,8 +91,8 @@ const coverUrl = props.track.coverId.startsWith('http')
     }
   }
 
-  .flip-front,
-  .flip-back {
+  .face-down,
+  .face-up {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -103,11 +100,11 @@ const coverUrl = props.track.coverId.startsWith('http')
     will-change: transform;
   }
 
-  .flip-front {
+  .face-up {
     transform: rotateY(0deg);
   }
 
-  .flip-back {
+  .face-down {
     transform: rotateY(180deg);
   }
 

app/components/deck.vue

@@ -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>