[Feat] apply a different background on ennemies and allies

Closes #31

components/GameBoard.vue

@@ -16,7 +16,8 @@ const discard_unwrapped = ref<boolean>(false)
             <PlayerListElement v-for="p in goStore.current_game?.players" :player="p">
             </PlayerListElement>
         </div>
-        <div id="current_player">
+        <div id="current_player"
+            :class="(goStore.current_game?.current_turn && (goStore.current_game?.current_turn === goStore.self?.team)) ? 'self' : ''">
             <PlayerSlot v-for="p in current_players" :player="p"></PlayerSlot>
         </div>
     </div>
@@ -41,6 +42,10 @@ const discard_unwrapped = ref<boolean>(false)
     isolation: isolate;
 }
 
+#current_player.self {
+    background-image: url('../images/bg-grass.png');
+}
+
 #market {
     grid-area: market;
     background-image: url("/images/bg-sand.png");
@@ -49,7 +54,7 @@ const discard_unwrapped = ref<boolean>(false)
 
 #current_player {
     grid-area: current_player;
-    background-image: url("/images/bg-grass.png");
+    background-image: url("/images/bg-darkgrass.png");
     padding-left: 70px;
     padding-bottom: 75px;
 
@@ -60,7 +65,7 @@ const discard_unwrapped = ref<boolean>(false)
     border-left: 5px solid black;
     border-bottom: 5px solid black;
     height: 100%;
-    background-image: url("/images/bg-grass.png");
+    background-image: url("/images/bg-darkgrass.png");
 }
 </style>
 

components/PlayerListElement.vue

@@ -17,7 +17,7 @@ const props = defineProps<Props>()
 </script>
 
 <template>
-    <div class="player_list_element">
+    <div :class="`player_list_element ${goStore.self === props.player ? 'self' : ''}`">
         <div class="button" id="player_list_buttons">
             <div class="main_button" @click="show('main')">
                 <div class="tooltip">Board</div>
@@ -121,6 +121,10 @@ const props = defineProps<Props>()
     min-height: 200px;
 }
 
+.player_list_element.self {
+    background-image: url('../images/bg-grass.png');
+}
+
 .view {
     display: flex;
     flex-direction: row;