From 7fc8e699dd3f250380bcd41a87ec884ac0e9a11b Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Thu, 16 May 2024 15:37:01 +0200
Subject: [PATCH] [Feat] apply a different background on ennemies and allies
 Closes #31

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

diff --git a/components/GameBoard.vue b/components/GameBoard.vue
index 1d466b1..296f06d 100644
--- a/components/GameBoard.vue
+++ b/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>
 
diff --git a/components/PlayerListElement.vue b/components/PlayerListElement.vue
index 889d70b..b2aaa8c 100644
--- a/components/PlayerListElement.vue
+++ b/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>
@@ -44,7 +44,7 @@ const props = defineProps<Props>()
         <div class="view">
             <PlayerSlot :player="player" :hide_stack_and_discard="true" v-if="view == 'main'" />
             <template v-if="view == 'discard'">
-                <CardPreview :tilted="false" v-for=" card  in  player.discard_pile " :card_id="card.card_id">
+                <CardPreview :tilted="false" v-for=" card in player.discard_pile " :card_id="card.card_id">
                 </CardPreview>
             </template>
 
@@ -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;