From 22ad0641213218d6a55dba413a22129cb8ef01db Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Thu, 16 May 2024 15:12:43 +0200
Subject: [PATCH] [Fix] Bring back hand overlay my beloved Closes #48

---
 components/GameBoard.vue  |  1 +
 components/PlayerSlot.vue | 48 ++++++++++++++++++++++++++++++++++++---
 components/SelfView.vue   | 40 +++++++++-----------------------
 3 files changed, 57 insertions(+), 32 deletions(-)

diff --git a/components/GameBoard.vue b/components/GameBoard.vue
index ee3ccae..1d466b1 100644
--- a/components/GameBoard.vue
+++ b/components/GameBoard.vue
@@ -20,6 +20,7 @@ const discard_unwrapped = ref<boolean>(false)
             <PlayerSlot v-for="p in current_players" :player="p"></PlayerSlot>
         </div>
     </div>
+    <SelfView></SelfView>
 </template>
 
 <style scoped>
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index be6421a..be74fe1 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -8,6 +8,7 @@ import goStore, {
     heal,
     damage_champion,
     damage_team,
+    endTurn
 
 } from "~/netcode";
 import { CardType, type Card } from "~/netcode/Card";
@@ -51,6 +52,30 @@ const restack_discarded_champion = (target: Card) => run_effect(CardEffects.REST
 const restack_discarded_card = (target: Card) => run_effect(CardEffects.RESTACK_DISCARDED_CARD, target)
 const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, target)
 
+
+let warning = ref(false)
+
+function checkEndTurn() {
+    // TODO: Add a confirmation dialog if resources are left
+    console.log("Checking end turn")
+    if (
+        (!warning.value)
+        && (
+            (goStore.self?.turn?.damage_reserve ? goStore.self?.turn?.damage_reserve > 0 : false)
+            || (goStore.self?.turn?.gold_reserve ? goStore.self?.turn?.gold_reserve > 0 : false)
+            || (goStore.self?.turn?.fuck_u_markers ? goStore.self?.turn?.fuck_u_markers > 0 : false)
+        )) {
+        // Set a warning flag to true
+        // Display an alert somehow using this warning flag
+        warning.value = true
+    }
+    else {
+        warning.value = false
+        endTurn()
+    }
+}
+
+
 </script>
 
 <template>
@@ -101,10 +126,13 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
             </div>
             <div id="player_stats">
                 <template v-if="goStore.current_game?.started">
-                    <PlayerStats v-if="props.player !== goStore.self || hide_stack_and_discard" :player="props.player">
+                    <PlayerStats :player="props.player">
                     </PlayerStats>
-                    <SelfView v-if="props.player === goStore.self && !hide_stack_and_discard" :player="props.player">
-                    </SelfView>
+                    <template v-if="!hide_stack_and_discard">
+                        <button id="end_turn" v-if="isSelfTurn" @click="checkEndTurn">END TURN</button>
+                        <div class="warning" v-if="warning">/!\<br> Effets restants!<br> /!\</div>
+                    </template>
+
                 </template>
             </div>
         </div>
@@ -182,6 +210,20 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
 </template>
 
 <style scoped>
+.warning {
+    background-color: rgba(255, 0, 0, 0.7);
+    color: white;
+    padding: 5px;
+    border-radius: 5px;
+    width: 60px;
+    font-size: 0.9em;
+}
+
+#end_turn {
+    z-index: 10;
+    height: 100%;
+}
+
 .stack,
 .discard,
 .cards_container {
diff --git a/components/SelfView.vue b/components/SelfView.vue
index 308a2e8..781f845 100644
--- a/components/SelfView.vue
+++ b/components/SelfView.vue
@@ -4,40 +4,13 @@ import { CardEffects } from '@/netcode/Effect'
 
 const isTurn = computed(() => goStore.self?.team == goStore.current_game?.current_turn)
 
-let warning = ref(false)
-
-function checkEndTurn() {
-    // TODO: Add a confirmation dialog if resources are left
-    console.log("Checking end turn")
-    if (
-        (!warning.value)
-        && (
-            (goStore.self?.turn?.damage_reserve ? goStore.self?.turn?.damage_reserve > 0 : false)
-            || (goStore.self?.turn?.gold_reserve ? goStore.self?.turn?.gold_reserve > 0 : false)
-            || (goStore.self?.turn?.fuck_u_markers ? goStore.self?.turn?.fuck_u_markers > 0 : false)
-        )) {
-        // Set a warning flag to true
-        // Display an alert somehow using this warning flag
-        warning.value = true
-    }
-    else {
-        warning.value = false
-        endTurn()
-    }
-}
-
-
 </script>
 
 <template>
-
-    <PlayerStats v-if="goStore.self" :player='goStore.self'></PlayerStats>
-    <button id="end_turn" v-if="isTurn" @click="checkEndTurn">END TURN</button>
-    <div class="warning" v-if="warning">/!\<br> Effets restants!<br> /!\</div>
     <div class="cards_container" id="self_hand">
         <CardPreview :card_id="c?.card_id" v-for="  c in goStore.self?.hand  " @click="c && playCard(c)">
-            <button v-if="c && isTurn && goStore.self?.turn && (goStore.self.turn.discard_markers ?? 0) > 0"
-                @click="discard(c!)">DISCARD</button>
+            <button v-if="c && goStore.self?.turn && (goStore.self.turn.fuck_u_markers ?? 0) > 0"
+                @click="discard(c)">DISCARD</button>
         </CardPreview>
     </div>
 
@@ -118,6 +91,15 @@ function checkEndTurn() {
     overflow: visible;
 }
 
+#self_hand .card #contextMenuButtons {
+    top: 0;
+    bottom: unset;
+}
+
+#self_hand .card.active:hover #contextMenuButtons {
+    transform: translateY(-100%);
+}
+
 
 #self_hand .card:hover {
     transform: translateY(-40px);