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 1/8] 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 2/8] 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 3/8] 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 4/8] 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 5/8] 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 6/8] 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 7/8] 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;

From 3f8a580984db4a4d47bbd552bc56cd899a0ed05f Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Fri, 24 May 2024 19:57:44 +0200
Subject: [PATCH 8/8] Better panel background

---
 components/GameBoard.vue         |  5 +++--
 components/MarketCards.vue       |  5 ++---
 components/PlayerListElement.vue |  2 +-
 components/PlayerSlot.vue        | 14 +++++++++-----
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/components/GameBoard.vue b/components/GameBoard.vue
index 4e3a816..86d22fa 100644
--- a/components/GameBoard.vue
+++ b/components/GameBoard.vue
@@ -127,11 +127,12 @@ function showWinnerScreen() {
 
 #player_list {
     min-height: 90%;
-    background: burlywood;
-    border: 5px solid darkgoldenrod;
+    background: rgba(0, 0, 0, 0.35);
+    border: 5px solid #000;
     border-radius: 10px;
     filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
     margin: 10px;
+    backdrop-filter: hue-rotate(73deg) blur(10px) contrast(90%) brightness(165%);
 }
 </style>
 
diff --git a/components/MarketCards.vue b/components/MarketCards.vue
index 8eba7a5..e846351 100644
--- a/components/MarketCards.vue
+++ b/components/MarketCards.vue
@@ -65,11 +65,10 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
     margin: 10px;
     padding-left: 10px;
     padding-right: 10px;
+    padding-bottom: 10px;
     border-radius: 10px;
-    background: brown;
-    border: 5px solid darkred;
     filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
-
+    backdrop-filter: hue-rotate(625deg) blur(5px) brightness(80%);
 }
 
 .separator {
diff --git a/components/PlayerListElement.vue b/components/PlayerListElement.vue
index 2761db3..e714739 100644
--- a/components/PlayerListElement.vue
+++ b/components/PlayerListElement.vue
@@ -118,7 +118,7 @@ const props = defineProps<Props>()
     grid-template-columns: min-content 1fr;
     grid-template-areas:
         "button     player";
-    border: 5px solid brown;
+    border: 5px solid black;
     min-height: 200px;
     position: relative;
 }
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 58cb2b6..065c59a 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -144,9 +144,8 @@ function check_for_guard(player: Player) {
                     <PlayerStats :player="props.player">
                     </PlayerStats>
                     <template v-if="!hide_stack_and_discard">
-                        <button id="end_turn" v-if="isSelfTurn" class="end_turn_button turn_icon"
-                            @click="checkEndTurn">END
-                            TURN</button>
+                        <button id="end_turn" class="end_turn_button turn_icon" :class="{ hidden: !isSelfTurn }"
+                            @click="checkEndTurn">END TURN</button>
 
                         <div class="warning"
                             :class="{ 'warning-fire-gem': warningText == 'P\'tite Fire gem?', 'visible': warning }">
@@ -275,6 +274,10 @@ function check_for_guard(player: Player) {
     height: 100%;
 }
 
+#end_turn.hidden {
+    visibility: hidden
+}
+
 .stack,
 .discard,
 .cards_container {
@@ -476,6 +479,7 @@ function check_for_guard(player: Player) {
 #player_info {
     display: flex;
     align-items: center;
+    min-width: 200px;
 }
 
 #player_banner.big {
@@ -483,10 +487,10 @@ function check_for_guard(player: Player) {
     left: 50%;
     transform: translateX(-50%);
     max-width: min-content;
-    background: burlywood;
-    border: 5px solid maroon;
+    border: 5px solid black;
     border-radius: 10px;
     filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
+    backdrop-filter: blur(5px) brightness(80%) hue-rotate(0deg) grayscale(80%);
 }
 
 #player_stats {