Merge pull request 'feat/button-styles' (#50) from feat/button-styles into main

Reviewed-on: legonzaur/heron-realms-front#50

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>
@@ -132,24 +140,34 @@ function checkEndTurn() {
                     <PlayerStats :player="props.player">
                     </PlayerStats>
                     <template v-if="!hide_stack_and_discard">
-                        <button id="end_turn" v-if="isSelfTurn" @click="checkEndTurn">END TURN</button>
+                        <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!<br> /!\</div>
+                        <div class="warning" v-if="warning">/!\<br> Effets restants!</div>
                     </template>
 
                 </template>
             </div>
         </div>
         <div id="current_player_board">
+            <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>
@@ -218,8 +236,9 @@ function checkEndTurn() {
     color: white;
     padding: 5px;
     border-radius: 5px;
-    width: 60px;
+    width: 85px;
-    font-size: 0.9em;
+    font-size: 0.85em;
+    margin-left: 5px;
 }
 
 #end_turn {
@@ -298,6 +317,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;
 }
@@ -343,6 +446,30 @@ function checkEndTurn() {
     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;
@@ -358,4 +485,9 @@ function checkEndTurn() {
 .not-ready {
     background-color: maroon;
 }
+
+.suicide_effect {
+    background: linear-gradient(to bottom right, #666666, #ccc);
+    color: red;
+}
 </style>