wrap market and player list in containers

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_container">
             <div id="player_list">
-            <AnimatedBackground />
                 <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>
 

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 {

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 {

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 {

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>