Merge branch 'main' of git.legonzaur.fr:heronfief/front

components/PlayerListElement.vue

@@ -2,6 +2,8 @@
 import goStore from '@/netcode';
 import type { Player } from "~/netcode/Player";
 
+const settingsStore = useSettingsStore()
+
 const view = ref<"main" | "discard">("main")
 
 function show(data: "main" | "discard") {
@@ -22,7 +24,7 @@ const props = defineProps<Props>()
         <div class="button" id="player_list_buttons">
             <div class="main_button" @click="show('main')">
                 <div class="tooltip">Board</div>
-                <img :src="`/cards/${player.board.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
+                <img :src="`/cards/${settingsStore.cardStyle}/${player.board.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
                     draggable="false" :class="view === 'main' && 'selected'">
                 <span class="button_card_number">{{ player.board.length }}</span>
 
@@ -35,7 +37,7 @@ const props = defineProps<Props>()
             </div>
             <div class="discard_button" @click="show('discard')">
                 <div class="tooltip">Discard</div>
-                <img :src="`/cards/${player.discard_pile.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
+                <img :src="`/cards/${settingsStore.cardStyle}/${player.discard_pile.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
                     draggable="false" :class="view === 'discard' && 'selected'">
                 <span class="button_card_number">{{ player.discard_pile.length }}</span>
 
@@ -62,14 +64,17 @@ const props = defineProps<Props>()
 
 
 .tooltip {
-    visibility: visible;
+    visibility: hidden;
     position: absolute;
     transition: .1s transform;
     background: white;
-    right: 0;
+    right: -0px;
     border-top-right-radius: 1em;
     border-bottom-right-radius: 1em;
     padding-right: 1em;
+    transition-property: visibility, transform;
+    transition-duration: 0.5s, 0.1s;
+    transition-timing-function: ease-in-out, ease-in-out;
 }
 
 .button {
@@ -96,8 +101,9 @@ const props = defineProps<Props>()
 
 .button div:hover .tooltip {
     visibility: visible;
-
+    display: block;
     transform: translateX(100%);
+    transition-duration: 0, 0.1s;
 }
 
 .button_card_number {