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">
-            <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>