311 lines
10 KiB
Vue
311 lines
10 KiB
Vue
<script setup lang="ts">
|
|
import goStore, {
|
|
useEffect,
|
|
playCard,
|
|
playAllCards,
|
|
discard,
|
|
lockCard,
|
|
heal,
|
|
damage_champion,
|
|
damage_team,
|
|
|
|
} from "~/netcode";
|
|
import { CardType, type Card } from "~/netcode/Card";
|
|
import type { Player } from "~/netcode/Player";
|
|
import { CardEffects, type Effect } from "@/netcode/Effect";
|
|
|
|
export interface Props {
|
|
player: Player;
|
|
hide_stack_and_discard?: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
hide_stack_and_discard: () => false,
|
|
})
|
|
|
|
const discard_unwrapped = ref(false)
|
|
const isPlayerTurn = computed(() => props.player.team === goStore.current_game?.current_turn);
|
|
const isSelf = computed(() => props.player.uuid === goStore.self?.uuid);
|
|
const isSelfTurn = computed(() => goStore.self?.team === goStore.current_game?.current_turn)
|
|
const isPlayerEnemy = computed(() => goStore.self?.team !== props.player.team)
|
|
|
|
function run_effect(
|
|
effect_type: CardEffects,
|
|
target: Player | Card
|
|
) {
|
|
if (!goStore.self?.turn) {
|
|
return
|
|
}
|
|
const effect = goStore.self?.turn.find_effect(effect_type);
|
|
if (!effect) {
|
|
return;
|
|
}
|
|
useEffect(effect, target);
|
|
}
|
|
|
|
const make_discard = (target: Player) =>
|
|
run_effect(CardEffects.MAKE_DISCARD, target);
|
|
const sacrifice = (target: Card) => run_effect(CardEffects.SACRIFICE, target);
|
|
const stun = (target: Card) => run_effect(CardEffects.STUN, target)
|
|
const restack_discarded_champion = (target: Card) => run_effect(CardEffects.RESTACK_DISCARDED_CHAMPION, target)
|
|
const restack_discarded_card = (target: Card) => run_effect(CardEffects.RESTACK_DISCARDED_CARD, target)
|
|
const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, target)
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="`player ${isPlayerTurn ? 'turn' : ''} ${discard_unwrapped ? 'discard_unwrapped' : ''}`">
|
|
<template v-if="!hide_stack_and_discard">
|
|
<div class="stack">
|
|
|
|
<CardsGrouped :stack="props.player.stack_pile">
|
|
<!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
|
|
</CardsGrouped>
|
|
<span>stack =</span>
|
|
</div>
|
|
<div :id="`discard_unwrapped_bg`" :class="`${discard_unwrapped ? 'unwrapped' : ''}`"
|
|
@click="() => discard_unwrapped = false"></div>
|
|
<div :class="`discard ${discard_unwrapped ? 'unwrapped' : ''}`">
|
|
<div class="discard_container" @click="() => discard_unwrapped = true">
|
|
<CardsGrouped :stack="props.player.discard_pile" v-if="!discard_unwrapped"> </CardsGrouped>
|
|
<CardPreview :tilted="false" v-if="discard_unwrapped" :card_id="c.card_id"
|
|
v-for="c in props.player.discard_pile">
|
|
<template v-if="goStore.self?.turn && c && isSelf && isPlayerTurn">
|
|
|
|
<button v-if="goStore.self?.turn.find_effect(CardEffects.SACRIFICE)"
|
|
@click.stop="sacrifice(c)">
|
|
SACRIFICE
|
|
</button>
|
|
<button v-if="goStore.self?.turn.find_effect(CardEffects.RESTACK_DISCARDED_CHAMPION)"
|
|
@click.stop="restack_discarded_champion(c)">
|
|
RESTACK_DISCARDED_CHAMPION
|
|
</button>
|
|
<button v-if="goStore.self?.turn.find_effect(CardEffects.RESTACK_DISCARDED_CARD)"
|
|
@click.stop="restack_discarded_card(c)">
|
|
RESTACK_DISCARDED_CARD
|
|
</button>
|
|
|
|
</template>
|
|
</CardPreview>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
<div id="player_banner">
|
|
<div class="ready-bubble not-ready" v-if="!props.player.ready && !goStore.current_game?.started">Pas encore prêt...</div>
|
|
<div class="ready-bubble ready" v-if="props.player.ready && !goStore.current_game?.started">Prêt!</div>
|
|
<div id="player_info">
|
|
<PlayerIcon :player="props.player"></PlayerIcon>
|
|
</div>
|
|
<div id="player_stats">
|
|
|
|
<PlayerStats v-if="goStore.current_game?.started" :player="props.player"></PlayerStats>
|
|
</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.find_effect(CardEffects.MAKE_DISCARD)">
|
|
make Discard
|
|
</button>
|
|
<br />
|
|
|
|
<div class="cards_container">
|
|
<!-- HAND -->
|
|
<CardPreview :card_id="c?.card_id" v-for="c in props.player.hand" @click="c && playCard(c)">
|
|
<button
|
|
v-if="props.player.turn && c && isSelf && (props.player.turn.discard_markers + props.player.turn.fuck_u_markers) > 0"
|
|
@click.stop="discard(c)">
|
|
DISCARD
|
|
</button>
|
|
</CardPreview>
|
|
<!-- BOARD -->
|
|
<CardPreview :card_id="c.card_id" v-for="c in props.player.board" @click="lockCard(c)"
|
|
:locked="props.player.turn && c.uuid in props.player.turn.cards_locked">
|
|
|
|
<template v-if="c && isSelf && isPlayerTurn && props.player.turn">
|
|
<!-- 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">
|
|
EFFECT<br>
|
|
{{ e.effect + " " + (e.effect_type ?? '') }}
|
|
</button>
|
|
</template>
|
|
<button
|
|
v-if="props.player.turn.find_effect(CardEffects.PREPARE) && c.card_type == CardType.CHAMPION"
|
|
@click.stop="prepare_champion(c)">PREPARE</button>
|
|
</template>
|
|
<!-- Card Unlocked -->
|
|
<template v-if="!(c.uuid in props.player.turn.cards_locked)">
|
|
<button v-if="(props.player.turn.discard_markers + props.player.turn.fuck_u_markers) > 0"
|
|
@click.stop="discard(c)">
|
|
DISCARD
|
|
</button>
|
|
<button v-if="props.player.turn.find_effect(CardEffects.SACRIFICE)"
|
|
@click.stop="sacrifice(c)">
|
|
SACRIFICE
|
|
</button>
|
|
<button @click.stop="lockCard(c)"
|
|
:disabled="((props.player.turn.discard_markers + props.player.turn.fuck_u_markers) > 0 && c !== props.player.turn.discard_marker_card) || props.player.turn.fuck_u_markers > 0">
|
|
LOCK
|
|
</button>
|
|
</template>
|
|
</template>
|
|
<template
|
|
v-if="c && goStore.self?.turn && isPlayerEnemy && isSelfTurn && (c.health_as_champion ?? 0) > 0">
|
|
<button class="enemy_action"
|
|
:disabled="(goStore.self?.turn.damage_reserve ?? 0) < (c.health_as_champion ?? Infinity)"
|
|
@click.stop="damage_champion(c)">
|
|
DAMAGE ({{ c.health_as_champion }})
|
|
</button>
|
|
<button class="enemy_action" v-if="goStore.self?.turn.find_effect(CardEffects.STUN)"
|
|
@click.stop="stun(c)">
|
|
STUN
|
|
</button>
|
|
</template>
|
|
</CardPreview>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.stack,
|
|
.discard,
|
|
.cards_container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
flex-wrap: wrap-reverse;
|
|
}
|
|
|
|
.stack {
|
|
grid-area: stack;
|
|
}
|
|
|
|
.discard {
|
|
margin-top: 50px;
|
|
grid-area: discard;
|
|
justify-content: start;
|
|
cursor: pointer;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.discard.unwrapped {
|
|
z-index: 9;
|
|
cursor: default;
|
|
position: absolute;
|
|
}
|
|
|
|
.discard_container {
|
|
display: flex;
|
|
/* background: blue; */
|
|
pointer-events: all;
|
|
}
|
|
|
|
#discard_unwrapped_bg {
|
|
display: none;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 8;
|
|
background: rgba(0, 0, 0, 0.5)
|
|
}
|
|
|
|
#discard_unwrapped_bg.unwrapped {
|
|
display: block;
|
|
}
|
|
|
|
.player {
|
|
display: grid;
|
|
grid-template-columns: min-content 1fr;
|
|
grid-template-rows: min-content min-content 1fr;
|
|
/* border-top: 5px solid black; */
|
|
grid-template-areas:
|
|
"player_stats player_stats"
|
|
"stack player"
|
|
"discard player";
|
|
transition: all 1s;
|
|
}
|
|
|
|
.player.discard_unwrapped {
|
|
grid-template-areas:
|
|
"player_stats player_stats"
|
|
"stack player"
|
|
"discard discard";
|
|
}
|
|
|
|
#current_player_board {
|
|
grid-area: player;
|
|
}
|
|
|
|
.turn_icon {
|
|
position: relative;
|
|
}
|
|
|
|
#player_banner {
|
|
display: flex;
|
|
grid-area: player_stats;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: sticky;
|
|
top: 0;
|
|
padding-top: 1em;
|
|
z-index: 1;
|
|
}
|
|
|
|
#player_info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#player_stats {
|
|
display: flex;
|
|
grid-area: player_stats;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#player_banner img {
|
|
height: 50px;
|
|
border-radius: 25px;
|
|
}
|
|
|
|
.turn_icon img {
|
|
height: 50px;
|
|
}
|
|
|
|
.turn_icon_number {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.ready-bubble {
|
|
color: white;
|
|
padding: 0.5em;
|
|
border-radius: 1em;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
margin-bottom: 3%;
|
|
}
|
|
|
|
.ready {
|
|
background-color: green;
|
|
}
|
|
|
|
.not-ready {
|
|
background-color: maroon;
|
|
}
|
|
</style>
|