From 6f353e98889c4e1625f0d641ed35de9b3f978722 Mon Sep 17 00:00:00 2001
From: Erzangel <ertche@hotmail.fr>
Date: Thu, 16 May 2024 19:10:07 +0200
Subject: [PATCH 1/4] feat: restyle suicide effect & effects to enemies

---
 components/PlayerSlot.vue | 130 ++++++++++++++++++++++++++++++++++----
 1 file changed, 118 insertions(+), 12 deletions(-)

diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 8d95901..5dacea3 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -13,7 +13,8 @@ import goStore, {
 } from "~/netcode";
 import { CardType, type Card } from "~/netcode/Card";
 import type { Player } from "~/netcode/Player";
-import { CardEffects, type Effect } from "@/netcode/Effect";
+import { CardEffects, type Effect, EffectType } from "@/netcode/Effect";
+import type { Team } from "~/netcode/Team";
 
 export interface Props {
     player: Player;
@@ -75,6 +76,12 @@ function checkEndTurn() {
     }
 }
 
+function damage_team_all(team: Team) {
+    for (let i = 0; i < (goStore.self?.turn?.damage_reserve ?? 0); i++) {
+        damage_team(team)
+    }
+}
+
 
 </script>
 
@@ -136,16 +143,26 @@ function checkEndTurn() {
             </div>
         </div>
         <div id="current_player_board">
-            <button @click.stop="damage_team(props.player.team)"
-                v-if="isSelfTurn && isPlayerEnemy && goStore.self?.turn && props.player.team"
-                :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0">
-                Damage
-            </button>
-            <button v-if="goStore.self && isSelfTurn && isPlayerEnemy && goStore.self?.turn"
-                @click.stop="make_discard(props.player)"
-                :disabled="!goStore.self.turn.effects_availables.find((e: Effect) => (e.effect == CardEffects.MAKE_DISCARD) && e.usable)">
-                make Discard
-            </button>
+            <div class="other_player_buttons_container">
+                <button @click.stop="damage_team(props.player.team)"
+                    v-if="isSelfTurn && isPlayerEnemy && goStore.self?.turn && props.player.team"
+                    class="damage_button"
+                    :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0">
+                    Damage
+                </button>
+                <button @click.stop="damage_team_all(props.player.team)"
+                    v-if="isSelfTurn && isPlayerEnemy && goStore.self?.turn && props.player.team"
+                    class="damage_button all_damage_button"
+                    :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0">
+                    (All)
+                </button>
+                <button v-if="goStore.self && isSelfTurn && isPlayerEnemy && goStore.self?.turn"
+                    @click.stop="make_discard(props.player)"
+                    class="make_discard_button"
+                    :disabled="!goStore.self.turn.effects_availables.find((e: Effect) => (e.effect == CardEffects.MAKE_DISCARD) && e.usable)">
+                    make Discard
+                </button>
+            </div>
             <br />
 
             <div class="cards_container">
@@ -165,7 +182,7 @@ function checkEndTurn() {
                         <!-- Card Locked -->
                         <template v-if="c.uuid in props.player.turn.cards_locked">
                             <template v-for="e in props.player.turn.effects_availables">
-                                <button v-if="e.card == c" @click.stop="useEffect(e)" :disabled="!e.usable">
+                                <button v-if="e.card == c" @click.stop="useEffect(e)" :disabled="!e.usable" :class="{ 'suicide_effect': e.effect_type == EffectType.SUICIDE }" >
                                     EFFECT<br>
                                     {{ e.effect + " " + (e.effect_type ?? '') }}
                                 </button>
@@ -294,6 +311,90 @@ function checkEndTurn() {
     grid-area: player;
 }
 
+.other_player_buttons_container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0 5px;
+}
+
+.damage_button {
+    background-color: #ff4d4d;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 5px 25px;
+    margin: 5px 0 0 0;
+    font-size: 16px;
+    font-weight: bold;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+.damage_button:disabled {
+    background-color: rgba(255, 77, 77, 0.5);
+    color: rgba(255, 255, 255, 0.5);
+    cursor: not-allowed;
+}
+
+.damage_button:hover {
+    background-color: #e60000;
+}
+
+.damage_button:disabled:hover {
+    background-color: rgba(230, 0, 0, 0.5);
+}
+
+.damage_button:active {
+    transform: translateY(2px); 
+    box-shadow: none; 
+}
+
+.all_damage_button {
+    padding: 5px 5px;
+    font-size: 14px;
+}
+
+.make_discard_button {
+    background-color: #55b42f;
+    color: white; 
+    border: none;
+    border-radius: 8px;
+    padding: 5px 15px;
+    margin: 5px 0 0 0;
+    font-size: 16px;
+    font-weight: bold;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4); 
+}
+
+.make_discard_button:disabled {
+    background-color: rgba(85, 180, 47, 0.5);
+    color: rgba(255, 255, 255, 0.5);
+    text-transform: uppercase;
+    cursor: not-allowed;
+    transition: background-color 0.3s ease;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+.make_discard_button:hover {
+    background-color: #03883a;
+}
+
+.make_discard_button:disabled:hover {
+    background-color: rgba(3, 136, 58, 0.5);
+}
+
+.make_discard_button:active {
+    transform: translateY(2px);
+    box-shadow: none;
+}
+
 .turn_icon {
     position: relative;
 }
@@ -354,4 +455,9 @@ function checkEndTurn() {
 .not-ready {
     background-color: maroon;
 }
+
+.suicide_effect {
+    background: linear-gradient(to bottom right, #666666, #ccc);
+    color: red;
+}
 </style>

From 0eecfbbfbeb0fa5cf53db15c9684f6f683f6adc5 Mon Sep 17 00:00:00 2001
From: Erzangel <ertche@hotmail.fr>
Date: Thu, 16 May 2024 19:22:03 +0200
Subject: [PATCH 2/4] feat: end turn style

---
 components/PlayerSlot.vue | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 5dacea3..81a947c 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -135,8 +135,8 @@ function damage_team_all(team: Team) {
                     <PlayerStats :player="props.player">
                     </PlayerStats>
                     <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>
+                        <button id="end_turn" v-if="isSelfTurn" class="end_turn_button" @click="checkEndTurn">END TURN</button>
+                        <div class="warning" v-if="warning">/!\<br> Effets restants!</div>
                     </template>
 
                 </template>
@@ -231,8 +231,9 @@ function damage_team_all(team: Team) {
     color: white;
     padding: 5px;
     border-radius: 5px;
-    width: 60px;
-    font-size: 0.9em;
+    width: 85px;
+    font-size: 0.85em;
+    margin-left: 5px;
 }
 
 #end_turn {
@@ -440,6 +441,30 @@ function damage_team_all(team: Team) {
     transform: translate(-50%, -50%);
 }
 
+.end_turn_button {
+    background-color: #4CAF50; /* Green background color */
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 5px 10px;
+    margin: 0 0 0 5px;
+    font-size: 16px;
+    font-weight: bold;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+.end_turn_button:hover {
+    background-color: #45a049; /* Darker green on hover */
+}
+
+.end_turn_button:active {
+    transform: translateY(2px); /* Add a slight press effect on click */
+    box-shadow: none; /* Remove shadow on click */
+}
+
 .ready-bubble {
     color: white;
     padding: 0.5em;

From 462ad0f5fdfce958235ff89ee105d4fb045d304c Mon Sep 17 00:00:00 2001
From: Erzangel <ertche@hotmail.fr>
Date: Thu, 16 May 2024 19:10:07 +0200
Subject: [PATCH 3/4] feat: restyle suicide effect & effects to enemies

---
 components/PlayerSlot.vue | 131 ++++++++++++++++++++++++++++++++++----
 1 file changed, 119 insertions(+), 12 deletions(-)

diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 93627bd..346c5dc 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -13,7 +13,7 @@ import goStore, {
 } from "~/netcode";
 import { CardType, type Card } from "~/netcode/Card";
 import type { Player } from "~/netcode/Player";
-import { CardEffects, type Effect } from "@/netcode/Effect";
+import { CardEffects, type Effect, EffectType } from "@/netcode/Effect";
 import type { Team } from "~/netcode/Team";
 
 export interface Props {
@@ -80,6 +80,14 @@ function checkEndTurn() {
         endTurn()
     }
 }
+
+function damage_team_all(team: Team) {
+    for (let i = 0; i < (goStore.self?.turn?.damage_reserve ?? 0); i++) {
+        damage_team(team)
+    }
+}
+
+
 </script>
 
 <template>
@@ -140,16 +148,26 @@ function checkEndTurn() {
             </div>
         </div>
         <div id="current_player_board">
-            <button @click.stop="damage_team(props.player.team)"
-                v-if="isSelfTurn && isPlayerEnemy && goStore.self?.turn && props.player.team"
-                :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0">
-                Damage
-            </button>
-            <button v-if="goStore.self && isSelfTurn && isPlayerEnemy && goStore.self?.turn"
-                @click.stop="make_discard(props.player)"
-                :disabled="!goStore.self.turn.effects_availables.find((e: Effect) => (e.effect == CardEffects.MAKE_DISCARD) && e.usable)">
-                make Discard
-            </button>
+            <div class="other_player_buttons_container">
+                <button @click.stop="damage_team(props.player.team)"
+                    v-if="isSelfTurn && isPlayerEnemy && goStore.self?.turn && props.player.team"
+                    class="damage_button"
+                    :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0">
+                    Damage
+                </button>
+                <button @click.stop="damage_team_all(props.player.team)"
+                    v-if="isSelfTurn && isPlayerEnemy && goStore.self?.turn && props.player.team"
+                    class="damage_button all_damage_button"
+                    :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0">
+                    (All)
+                </button>
+                <button v-if="goStore.self && isSelfTurn && isPlayerEnemy && goStore.self?.turn"
+                    @click.stop="make_discard(props.player)"
+                    class="make_discard_button"
+                    :disabled="!goStore.self.turn.effects_availables.find((e: Effect) => (e.effect == CardEffects.MAKE_DISCARD) && e.usable)">
+                    make Discard
+                </button>
+            </div>
             <br />
 
             <div class="cards_container">
@@ -169,7 +187,7 @@ function checkEndTurn() {
                         <!-- Card Locked -->
                         <template v-if="c.uuid in props.player.turn.cards_locked">
                             <template v-for="e in props.player.turn.effects_availables">
-                                <button v-if="e.card == c" @click.stop="useEffect(e)" :disabled="!e.usable">
+                                <button v-if="e.card == c" @click.stop="useEffect(e)" :disabled="!e.usable" :class="{ 'suicide_effect': e.effect_type == EffectType.SUICIDE }" >
                                     EFFECT<br>
                                     {{ e.effect + " " + (e.effect_type ?? '') }}
                                 </button>
@@ -298,6 +316,90 @@ function checkEndTurn() {
     grid-area: player;
 }
 
+.other_player_buttons_container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0 5px;
+}
+
+.damage_button {
+    background-color: #ff4d4d;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 5px 25px;
+    margin: 5px 0 0 0;
+    font-size: 16px;
+    font-weight: bold;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+.damage_button:disabled {
+    background-color: rgba(255, 77, 77, 0.5);
+    color: rgba(255, 255, 255, 0.5);
+    cursor: not-allowed;
+}
+
+.damage_button:hover {
+    background-color: #e60000;
+}
+
+.damage_button:disabled:hover {
+    background-color: rgba(230, 0, 0, 0.5);
+}
+
+.damage_button:active {
+    transform: translateY(2px); 
+    box-shadow: none; 
+}
+
+.all_damage_button {
+    padding: 5px 5px;
+    font-size: 14px;
+}
+
+.make_discard_button {
+    background-color: #55b42f;
+    color: white; 
+    border: none;
+    border-radius: 8px;
+    padding: 5px 15px;
+    margin: 5px 0 0 0;
+    font-size: 16px;
+    font-weight: bold;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4); 
+}
+
+.make_discard_button:disabled {
+    background-color: rgba(85, 180, 47, 0.5);
+    color: rgba(255, 255, 255, 0.5);
+    text-transform: uppercase;
+    cursor: not-allowed;
+    transition: background-color 0.3s ease;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+.make_discard_button:hover {
+    background-color: #03883a;
+}
+
+.make_discard_button:disabled:hover {
+    background-color: rgba(3, 136, 58, 0.5);
+}
+
+.make_discard_button:active {
+    transform: translateY(2px);
+    box-shadow: none;
+}
+
 .turn_icon {
     position: relative;
 }
@@ -358,4 +460,9 @@ function checkEndTurn() {
 .not-ready {
     background-color: maroon;
 }
+
+.suicide_effect {
+    background: linear-gradient(to bottom right, #666666, #ccc);
+    color: red;
+}
 </style>

From b30b0dcf52c688bd62275f1cde26378c27019a28 Mon Sep 17 00:00:00 2001
From: Erzangel <ertche@hotmail.fr>
Date: Thu, 16 May 2024 19:22:03 +0200
Subject: [PATCH 4/4] feat: end turn style

---
 components/PlayerSlot.vue | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 346c5dc..69092d6 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -140,8 +140,8 @@ function damage_team_all(team: Team) {
                     <PlayerStats :player="props.player">
                     </PlayerStats>
                     <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>
+                        <button id="end_turn" v-if="isSelfTurn" class="end_turn_button" @click="checkEndTurn">END TURN</button>
+                        <div class="warning" v-if="warning">/!\<br> Effets restants!</div>
                     </template>
 
                 </template>
@@ -236,8 +236,9 @@ function damage_team_all(team: Team) {
     color: white;
     padding: 5px;
     border-radius: 5px;
-    width: 60px;
-    font-size: 0.9em;
+    width: 85px;
+    font-size: 0.85em;
+    margin-left: 5px;
 }
 
 #end_turn {
@@ -445,6 +446,30 @@ function damage_team_all(team: Team) {
     transform: translate(-50%, -50%);
 }
 
+.end_turn_button {
+    background-color: #4CAF50; /* Green background color */
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 5px 10px;
+    margin: 0 0 0 5px;
+    font-size: 16px;
+    font-weight: bold;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+.end_turn_button:hover {
+    background-color: #45a049; /* Darker green on hover */
+}
+
+.end_turn_button:active {
+    transform: translateY(2px); /* Add a slight press effect on click */
+    box-shadow: none; /* Remove shadow on click */
+}
+
 .ready-bubble {
     color: white;
     padding: 0.5em;