From db4aac845c0526811125d4efc7dc94f6da64bc0b Mon Sep 17 00:00:00 2001
From: Erzangel <ertche@hotmail.fr>
Date: Wed, 22 May 2024 19:42:22 +0200
Subject: [PATCH 01/12] feat(card): flushed on 002

---
 public/cards/heron/002.png | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/cards/heron/002.png b/public/cards/heron/002.png
index 432233d..02b8f19 100644
--- a/public/cards/heron/002.png
+++ b/public/cards/heron/002.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cbbd4981865187b78dbfaf871e4a281734965a7c6090a530a369918b7277a363
-size 125228
+oid sha256:d1b381184c5d9a4336abacd6c8e4684c1d583886113194c1c94fe25a6da93b23
+size 126449

From 0305dbe9b712af07844fe2ccd4ca3871529f31f1 Mon Sep 17 00:00:00 2001
From: Erzangel <ertche@hotmail.fr>
Date: Wed, 22 May 2024 19:47:44 +0200
Subject: [PATCH 02/12] feat: we are so back, move settings img loc

---
 components/GlobalOverlay.vue     | 2 +-
 components/ResultDialog.vue      | 2 ++
 public/{ => images}/settings.png | 0
 public/images/so_back.png        | 3 +++
 4 files changed, 6 insertions(+), 1 deletion(-)
 rename public/{ => images}/settings.png (100%)
 create mode 100644 public/images/so_back.png

diff --git a/components/GlobalOverlay.vue b/components/GlobalOverlay.vue
index 0db208c..4a0f540 100644
--- a/components/GlobalOverlay.vue
+++ b/components/GlobalOverlay.vue
@@ -7,7 +7,7 @@ const displayOptions = ref(false)
 
 <template>
     <div :class="`card_overlay`" ref="card">
-        <img class="settings_button" src="/settings.png" alt="settings" @click="displayOptions = true"/>
+        <img class="settings_button" src="/images/settings.png" alt="settings" @click="displayOptions = true"/>
     </div>
     <OptionsDialog :isVisible="displayOptions" @close="displayOptions = false" />
 </template>
diff --git a/components/ResultDialog.vue b/components/ResultDialog.vue
index 834f703..44e52dc 100644
--- a/components/ResultDialog.vue
+++ b/components/ResultDialog.vue
@@ -45,7 +45,9 @@ const close = () => {
           Et n'oubliez pas, la prochaine fois, vous gagnerez! Vous verrez! Vous êtes un gagnant, vous êtes un champion!
           Vous êtes le meilleur! Vous êtes
           le roi du monde!
+          <img src="/images/so_back.png" alt="Une image décrivant le meme 'We are so back'" />
         </p>
+        
       </div>
     </div>
   </div>
diff --git a/public/settings.png b/public/images/settings.png
similarity index 100%
rename from public/settings.png
rename to public/images/settings.png
diff --git a/public/images/so_back.png b/public/images/so_back.png
new file mode 100644
index 0000000..5c2ea5b
--- /dev/null
+++ b/public/images/so_back.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:04430d8665385eaab8f9ae63a6c14549ee58f4b8c615cd74a5bf2e8796ba5aa8
+size 20039

From ffd9f0187d106169e86174c75f848218c821d252 Mon Sep 17 00:00:00 2001
From: Erzangel <ertche@hotmail.fr>
Date: Wed, 22 May 2024 20:05:52 +0200
Subject: [PATCH 03/12] feat: new favicon attempt

---
 public/favicon.ico      | 2 +-
 public/favicon_niko.ico | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)
 create mode 100644 public/favicon_niko.ico

diff --git a/public/favicon.ico b/public/favicon.ico
index 6bb35de..10554a8 100644
--- a/public/favicon.ico
+++ b/public/favicon.ico
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3349fdee8c4fe0bfaa60db50fd1442f5e4fc323e96ee6ed5e34405fe65b873cf
+oid sha256:6a3ad0a6c65a9ccd490badc5182b3613d2c30617ae15345064af4f2845088603
 size 15406
diff --git a/public/favicon_niko.ico b/public/favicon_niko.ico
new file mode 100644
index 0000000..6bb35de
--- /dev/null
+++ b/public/favicon_niko.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3349fdee8c4fe0bfaa60db50fd1442f5e4fc323e96ee6ed5e34405fe65b873cf
+size 15406

From ceab43e861adae60fc0202c152de36fc79a7af57 Mon Sep 17 00:00:00 2001
From: Erzangel <ertche@hotmail.fr>
Date: Wed, 22 May 2024 20:40:41 +0200
Subject: [PATCH 04/12] feat(rules): add mention of right click zoom

---
 components/RulesDisplay.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/RulesDisplay.vue b/components/RulesDisplay.vue
index 1fe1afd..2b36884 100644
--- a/components/RulesDisplay.vue
+++ b/components/RulesDisplay.vue
@@ -243,6 +243,7 @@ const router = useRouter();
                 </p>
                 <p>Quand vous avez un effet "Sacrifice", vous pouvez fouiller votre défausse pour choisir la carte à
                     sacrifier. Vous pouvez également sacrifier une carte de la main qui n'est pas encore locked!</p>
+                <p>Pour zoomer sur une carte, maintenez votre clic droit.</p>
             </section>
         </div>
     </div>

From 90ed8a62113462e451127f5769080406d779ebd1 Mon Sep 17 00:00:00 2001
From: Erzangel <ertche@hotmail.fr>
Date: Wed, 22 May 2024 20:41:00 +0200
Subject: [PATCH 05/12] fix: forgot changes

---
 components/RulesDisplay.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/RulesDisplay.vue b/components/RulesDisplay.vue
index 2b36884..5180a44 100644
--- a/components/RulesDisplay.vue
+++ b/components/RulesDisplay.vue
@@ -243,6 +243,7 @@ const router = useRouter();
                 </p>
                 <p>Quand vous avez un effet "Sacrifice", vous pouvez fouiller votre défausse pour choisir la carte à
                     sacrifier. Vous pouvez également sacrifier une carte de la main qui n'est pas encore locked!</p>
+                <h2>Zoomer sur les cartes</h2>
                 <p>Pour zoomer sur une carte, maintenez votre clic droit.</p>
             </section>
         </div>

From 66b6cc61e9e9f6897073cb244d14767050299bb6 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Fri, 24 May 2024 12:14:37 +0200
Subject: [PATCH 06/12] wrap market and player list in containers

---
 components/GameBoard.vue         | 50 ++++++++++++++++++++------------
 components/MarketCards.vue       | 12 ++++++--
 components/PlayerList.vue        |  0
 components/PlayerListElement.vue |  6 ++--
 components/PlayerSlot.vue        |  4 +--
 pages/index.vue                  |  1 -
 6 files changed, 46 insertions(+), 27 deletions(-)
 create mode 100644 components/PlayerList.vue

diff --git a/components/GameBoard.vue b/components/GameBoard.vue
index 6730d43..9fa0b2a 100644
--- a/components/GameBoard.vue
+++ b/components/GameBoard.vue
@@ -59,18 +59,21 @@ function showWinnerScreen() {
 
 <template>
     <div @contextmenu.prevent="false" id="game_board">
+        <AnimatedBackground></AnimatedBackground>
         <div id="market">
             <MarketCards></MarketCards>
         </div>
-        <div id="player_list">
-            <AnimatedBackground />
-            <PlayerListElement v-for="p in goStore.current_game?.players" :player="p">
-            </PlayerListElement>
+        <div id="player_list_container">
+            <div id="player_list">
+                <PlayerListElement v-for="p in goStore.current_game?.players" :player="p">
+                </PlayerListElement>
+            </div>
         </div>
+
         <div id="current_player">
             <template v-for="p in current_players">
-                <AnimatedBackground :color-start="goStore.self == p ? [.0, .3, .3] : undefined"
-                    :color-end="goStore.self == p ? [.0, 1, 1] : undefined" />
+                <!-- <AnimatedBackground :color-start="goStore.self == p ? [.0, .3, .3] : undefined"
+                    :color-end="goStore.self == p ? [.0, 1, 1] : undefined" /> -->
                 <PlayerSlot :player="p"></PlayerSlot>
             </template>
 
@@ -86,7 +89,7 @@ function showWinnerScreen() {
 <style scoped>
 #game_board {
     display: grid;
-    grid-template-columns: 1fr 400px;
+    grid-template-columns: 1fr 450px;
     grid-template-rows: min-content 1fr;
     grid-template-areas:
         "market         player_list"
@@ -99,25 +102,36 @@ function showWinnerScreen() {
     overflow: auto;
     position: relative;
     isolation: isolate;
-    background: url('/images/bg-darkgrass.png');
-}
-
-#market {
-    grid-area: market;
-    background-image: url("/images/bg-sand.png");
-    border-bottom: 3px solid black;
-    ;
+    /* background: url('/images/bg-darkgrass.png'); */
 }
 
 #current_player {
     grid-area: current_player;
 }
 
-#player_list {
+#market {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+#player_list_container {
     grid-area: player_list;
-    border-left: 5px solid black;
+    display: flex;
+    flex-direction: column;
     height: 100%;
-    background-image: url("/images/bg-darkgrass.png");
+    justify-content: center;
+
+    /* background-image: url("/images/bg-darkgrass.png"); */
+}
+
+#player_list {
+    min-height: 90%;
+    background: burlywood;
+    border: 5px solid darkgoldenrod;
+    border-radius: 10px;
+    filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
+    margin: 10px;
 }
 </style>
 
diff --git a/components/MarketCards.vue b/components/MarketCards.vue
index 673bac7..8eba7a5 100644
--- a/components/MarketCards.vue
+++ b/components/MarketCards.vue
@@ -12,7 +12,6 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
 
 <template>
     <div id="market">
-        <AnimatedBackground :color-end="[1, 1, 0]" :color-start="[.3, .3, 0]"></AnimatedBackground>
         <CardPreview :tilted="false" :card_id="undefined"></CardPreview>
         <div class="separator"></div>
         <CardPreview :tilted="false" :card_id="c?.card_id" v-for="c in goStore.current_game?.market"
@@ -55,6 +54,7 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
 
 <style scoped>
 #market {
+    width: min-content;
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -62,8 +62,14 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
     z-index: 2;
     position: relative;
     gap: 2px;
-    padding: 10px;
-    ;
+    margin: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 10px;
+    background: brown;
+    border: 5px solid darkred;
+    filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
+
 }
 
 .separator {
diff --git a/components/PlayerList.vue b/components/PlayerList.vue
new file mode 100644
index 0000000..e69de29
diff --git a/components/PlayerListElement.vue b/components/PlayerListElement.vue
index 605c02f..2761db3 100644
--- a/components/PlayerListElement.vue
+++ b/components/PlayerListElement.vue
@@ -18,7 +18,7 @@ const props = defineProps<Props>()
 
 <template>
     <div :class="`player_list_element ${goStore.self === props.player ? 'self' : ''}`">
-        <AnimatedBackground v-if="goStore.self === props.player" :color-start="[.0, .3, .3]" :color-end="[.0, 1, 1]" />
+        <!-- <AnimatedBackground v-if="goStore.self === props.player" :color-start="[.0, .3, .3]" :color-end="[.0, 1, 1]" /> -->
         <div class="button" id="player_list_buttons">
             <div class="main_button" @click="show('main')">
                 <div class="tooltip">Board</div>
@@ -118,13 +118,13 @@ const props = defineProps<Props>()
     grid-template-columns: min-content 1fr;
     grid-template-areas:
         "button     player";
-    border-bottom: 5px solid black;
+    border: 5px solid brown;
     min-height: 200px;
     position: relative;
 }
 
 .player_list_element.self {
-    background-image: url('/images/bg-grass.png');
+    /* background-image: url('/images/bg-grass.png'); */
 }
 
 .view {
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index ae31c1e..9b4d8df 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -348,8 +348,8 @@ function check_for_guard(player: Player) {
         "stack          player"
         "discard        player";
     transition: all 1s;
-    margin-bottom: -75px;
-    padding-bottom: 75px;
+    /* margin-bottom: -75px;
+    padding-bottom: 75px; */
 }
 
 .discard_overlay {
diff --git a/pages/index.vue b/pages/index.vue
index a45857b..d32c610 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -18,7 +18,6 @@ import goStore, { setReady } from "@/netcode";
     <LoginView v-if="goStore.context === 'login'"></LoginView>
     <GameBoard v-if="goStore.context != 'lobby' && goStore.context != 'login'"></GameBoard>
     <LobbyView v-if="goStore.context == 'lobby'"></LobbyView>
-    <RulesDisplay v-if="goStore.context == 'rules'"></RulesDisplay>
   </div>
 </template>
 

From a6fcc28ced28d5dd9b1c77078e988e27f1005624 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Fri, 24 May 2024 12:28:36 +0200
Subject: [PATCH 07/12] Feat : improve shadow effect

---
 components/CardPreview.vue | 27 ++++++++++++++-------------
 components/GameBoard.vue   |  4 ++--
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 3455620..97b1d78 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -11,7 +11,8 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
     wrapped: () => false,
-    tilted: () => true
+    tilted: () => true,
+    locked: () => true
 })
 
 
@@ -44,9 +45,9 @@ watch(
 </script>
 
 <template>
-    <div :class="`card ${childCount > 0 ? 'active' : ''} ${wrapped ? 'wrapped' : ''} ${props.locked ? 'locked' : ''}`"
-        @contextmenu.prevent="false" @click.left="cardClick" :style="tilted ? `rotate:${rotation}deg;` : ''"
-        @mouseenter="mouseenter" @mouseleave="mouseleave">
+    <div class="card" :class="{ active: childCount > 0, wrapped, unlocked: !props.locked }" @contextmenu.prevent="false"
+        @click.left="cardClick" :style="tilted ? `rotate:${rotation}deg;` : ''" @mouseenter="mouseenter"
+        @mouseleave="mouseleave">
         <div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
             <slot></slot>
         </div>
@@ -66,15 +67,18 @@ watch(
 
 <style scoped>
 .card {
+    --max-height: 250px;
+    --margin-bottom: calc(var(--max-height) * 0.05);
     transition: 0.025s rotate linear;
     max-width: 256px;
     position: relative;
     display: flex;
     margin-bottom: 0px;
-    margin-top: 15px;
+    margin-top: var(--margin-bottom);
     transition: all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
     isolation: isolate;
     pointer-events: all;
+    max-height: var(--max-height);
 }
 
 .card.active {
@@ -82,7 +86,7 @@ watch(
 }
 
 .card_image {
-    max-height: 250px;
+    max-height: var(--max-height);
     transition: all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
     z-index: 1;
 }
@@ -92,20 +96,17 @@ watch(
     outline-offset: -2px;
 }
 
-.card.locked {
+.card.unlocked {
     margin-top: 0px;
-    margin-bottom: 15px;
-    filter: drop-shadow(5px 15px 2px rgba(0, 0, 0, .60));
+
+    margin-bottom: var(--margin-bottom);
+    filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
 }
 
 .card.wrapped {
     max-width: 10px;
 }
 
-.card_image {
-    max-height: 250px;
-}
-
 #contextMenuButtons {
     position: absolute;
     display: flex;
diff --git a/components/GameBoard.vue b/components/GameBoard.vue
index 9fa0b2a..4e3a816 100644
--- a/components/GameBoard.vue
+++ b/components/GameBoard.vue
@@ -136,7 +136,7 @@ function showWinnerScreen() {
 </style>
 
 <style>
-#player_list .card_image {
-    max-width: 64px;
+#player_list .card {
+    --max-height: 90px;
 }
 </style>
\ No newline at end of file

From 6291989dd4acf1c52d587effce1fb687ec14eea8 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Fri, 24 May 2024 12:40:14 +0200
Subject: [PATCH 08/12] Feat : add background to player banner

---
 components/PlayerSlot.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 9b4d8df..4054188 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -478,8 +478,14 @@ function check_for_guard(player: Player) {
     align-items: center;
 }
 
-#player_banner.big>#player_info {
+#player_banner.big {
+    padding: 0;
     margin-left: 500px;
+    max-width: min-content;
+    background: burlywood;
+    border: 5px solid maroon;
+    border-radius: 10px;
+    filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
 }
 
 #player_stats {

From b2a3d4f7018de89bce40adc2986d23e228cfabfd Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Fri, 24 May 2024 13:04:39 +0200
Subject: [PATCH 09/12] Feat : add cards floating animation

---
 components/CardPreview.vue | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 97b1d78..ab24abd 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -22,6 +22,8 @@ const settingsStore = useSettingsStore()
 
 const childCount = ref<number>(0)
 
+const card = ref<HTMLElement>()
+
 function cardClick() {
     if (!props.card_id) return
     emit("click")
@@ -42,12 +44,17 @@ watch(
         props.wrapped ? rotation.value = (Math.random() * 4) - 2 : rotation.value = Math.random() > .5 ? 2 : -2
     },
     { immediate: true })
+
+
+onMounted(() => {
+    card.value?.style.setProperty("--random-seed", -Math.abs(Math.random() * 2) + 's')
+})
 </script>
 
 <template>
-    <div class="card" :class="{ active: childCount > 0, wrapped, unlocked: !props.locked }" @contextmenu.prevent="false"
-        @click.left="cardClick" :style="tilted ? `rotate:${rotation}deg;` : ''" @mouseenter="mouseenter"
-        @mouseleave="mouseleave">
+    <div ref="card" class="card" :class="{ active: childCount > 0, wrapped, unlocked: !props.locked }"
+        @contextmenu.prevent="false" @click.left="cardClick" :style="tilted ? `rotate:${rotation}deg;` : ''"
+        @mouseenter="mouseenter" @mouseleave="mouseleave">
         <div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
             <slot></slot>
         </div>
@@ -96,11 +103,29 @@ watch(
     outline-offset: -2px;
 }
 
+@keyframes slidein {
+    from {
+        transform: none;
+        filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
+    }
+
+    to {
+        transform: translateY(calc(var(--margin-bottom)*-.25));
+        filter: drop-shadow(calc(var(--margin-bottom)*.3) calc(var(--margin-bottom)*1.5) 1px rgba(0, 0, 0, .60));
+    }
+}
+
 .card.unlocked {
     margin-top: 0px;
-
     margin-bottom: var(--margin-bottom);
     filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
+    animation: 2s infinite alternate ease-in-out slidein;
+    animation-delay: var(--random-seed);
+}
+
+.card.unlocked:hover {
+    animation-play-state: paused;
+    rotate: none !important;
 }
 
 .card.wrapped {

From df6d77b8705c438777691f82f25accfef26f9c78 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Fri, 24 May 2024 13:14:19 +0200
Subject: [PATCH 10/12] Feat : more animations and transitions easing

---
 components/CardPreview.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index ab24abd..e6ba8b3 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -76,13 +76,12 @@ onMounted(() => {
 .card {
     --max-height: 250px;
     --margin-bottom: calc(var(--max-height) * 0.05);
-    transition: 0.025s rotate linear;
     max-width: 256px;
     position: relative;
     display: flex;
     margin-bottom: 0px;
     margin-top: var(--margin-bottom);
-    transition: all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
+    transition: filter .125s cubic-bezier(0.075, 0.82, 0.165, 1), rotate 0.075s cubic-bezier(1, 1.81, .59, 1.42);
     isolation: isolate;
     pointer-events: all;
     max-height: var(--max-height);
@@ -94,7 +93,6 @@ onMounted(() => {
 
 .card_image {
     max-height: var(--max-height);
-    transition: all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
     z-index: 1;
 }
 
@@ -141,7 +139,7 @@ onMounted(() => {
     bottom: 0;
     width: 99%;
     transform: translateY(-0px);
-    transition: 0.1s transform cubic-bezier(0.075, 0.82, 0.165, 1);
+    transition: 0.1s transform cubic-bezier(1, 1.81, .59, 1.42);
 }
 
 .card.active:hover #contextMenuButtons {

From 8c7cc199912cfd6464129db1bd3cb2b74207c355 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Fri, 24 May 2024 13:15:55 +0200
Subject: [PATCH 11/12] Fix : remove rotation on locked cards too

---
 components/CardPreview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index e6ba8b3..2fcc91d 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -121,7 +121,7 @@ onMounted(() => {
     animation-delay: var(--random-seed);
 }
 
-.card.unlocked:hover {
+.card:hover {
     animation-play-state: paused;
     rotate: none !important;
 }

From f570b456ca008f014b51f91b3b92eb5aeb81a0d8 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Fri, 24 May 2024 14:14:06 +0200
Subject: [PATCH 12/12] Feat : center current player stats

---
 components/CardPreview.vue | 19 +++++++++++++++----
 components/PlayerSlot.vue  |  3 ++-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 2fcc91d..d748724 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -47,7 +47,7 @@ watch(
 
 
 onMounted(() => {
-    card.value?.style.setProperty("--random-seed", -Math.abs(Math.random() * 2) + 's')
+    card.value?.style.setProperty("--random-seed", -Math.random() * 10 + 's')
 })
 </script>
 
@@ -101,7 +101,7 @@ onMounted(() => {
     outline-offset: -2px;
 }
 
-@keyframes slidein {
+@keyframes unlocked-float {
     from {
         transform: none;
         filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
@@ -113,15 +113,26 @@ onMounted(() => {
     }
 }
 
+@keyframes unlocked-rotate {
+    from {
+        rotate: -2deg;
+    }
+
+    to {
+        rotate: 2deg;
+    }
+}
+
 .card.unlocked {
     margin-top: 0px;
     margin-bottom: var(--margin-bottom);
     filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
-    animation: 2s infinite alternate ease-in-out slidein;
+    animation: 2s infinite alternate ease-in-out unlocked-float, 3.1s infinite alternate ease-in-out unlocked-rotate;
     animation-delay: var(--random-seed);
+    animation-play-state: running;
 }
 
-.card:hover {
+.card:not(.unlocked):hover {
     animation-play-state: paused;
     rotate: none !important;
 }
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 4054188..58cb2b6 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -480,7 +480,8 @@ function check_for_guard(player: Player) {
 
 #player_banner.big {
     padding: 0;
-    margin-left: 500px;
+    left: 50%;
+    transform: translateX(-50%);
     max-width: min-content;
     background: burlywood;
     border: 5px solid maroon;