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] 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;