feat: restyle suicide effect & effects to enemies

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)"
+            <div class="other_player_buttons_container">
-                v-if="isSelfTurn && isPlayerEnemy && goStore.self?.turn && props.player.team"
+                <button @click.stop="damage_team(props.player.team)"
-                :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0">
+                    v-if="isSelfTurn && isPlayerEnemy && goStore.self?.turn && props.player.team"
-                Damage
+                    class="damage_button"
-            </button>
+                    :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0">
-            <button v-if="goStore.self && isSelfTurn && isPlayerEnemy && goStore.self?.turn"
+                    Damage
-                @click.stop="make_discard(props.player)"
+                </button>
-                :disabled="!goStore.self.turn.effects_availables.find((e: Effect) => (e.effect == CardEffects.MAKE_DISCARD) && e.usable)">
+                <button @click.stop="damage_team_all(props.player.team)"
-                make Discard
+                    v-if="isSelfTurn && isPlayerEnemy && goStore.self?.turn && props.player.team"
-            </button>
+                    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>