heronfief/front
3
1
Fork 0
Code Issues 44 Pull Requests 1 Actions Packages Projects Releases 1 Activity

feat: restyle suicide effect & effects to enemies

Browse Source
This commit is contained in:
Erzangel
2024-05-16 19:25:05 +02:00
parent d89acdc909
commit 462ad0f5fd
1 changed files with 119 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/PlayerSlot.vue
+119 -12
View File
@@ -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>