Front rewrite
This commit is contained in:
+134
-118
@@ -1,156 +1,172 @@
|
||||
<script setup lang="ts">
|
||||
import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, damage_champion, damage_team } from '~/netcode';
|
||||
import type { Card } from '~/netcode/Card';
|
||||
import type { Player } from '~/netcode/Player';
|
||||
import { CardEffects } from '@/netcode/Effect'
|
||||
import { CardType } from '~/netcode/Card';
|
||||
import goStore, {
|
||||
useEffect,
|
||||
playCard,
|
||||
playAllCards,
|
||||
discard,
|
||||
lockCard,
|
||||
heal,
|
||||
damage_champion,
|
||||
damage_team,
|
||||
} from "~/netcode";
|
||||
import type { Card } from "~/netcode/Card";
|
||||
import type { Player } from "~/netcode/Player";
|
||||
import { CardEffects, type Effect } from "@/netcode/Effect";
|
||||
|
||||
export interface Props {
|
||||
player: Player
|
||||
player: Player;
|
||||
hide_stack_and_discard?: boolean;
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const isTurn = computed(() => props.player.team == goStore.game?.current_turn)
|
||||
const isSelf = computed(() => props.player.uuid == goStore.self?.uuid)
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
hide_stack_and_discard: () => false,
|
||||
})
|
||||
|
||||
const discard_unwrapped = ref(false)
|
||||
const isPlayerTurn = computed(() => props.player.team === goStore.game?.current_turn);
|
||||
const isSelf = computed(() => props.player.uuid === goStore.self?.uuid);
|
||||
const isSelfTurn = computed(() => goStore.self?.team === goStore.game?.current_turn)
|
||||
const isPlayerEnemy = computed(() => goStore.self?.team !== props.player.team)
|
||||
|
||||
function run_effect(
|
||||
effect_type: CardEffects,
|
||||
target: Player | Card
|
||||
) {
|
||||
const effect = goStore.self?.turn.find_effect(effect_type);
|
||||
if (!effect) {
|
||||
return;
|
||||
}
|
||||
useEffect(effect, target);
|
||||
}
|
||||
|
||||
const make_discard = (target: Player) =>
|
||||
run_effect(CardEffects.DISCARD, target);
|
||||
const sacrifice = (target: Card) => run_effect(CardEffects.SACRIFICE, target);
|
||||
const stun = (target: Card) => run_effect(CardEffects.STUN, target)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="'player ' + (isTurn ? 'turn' : '')">
|
||||
<button @click="heal" v-if="props.player.team == goStore.self?.team"
|
||||
:disabled="(goStore.self?.turn.heal_reserve ?? 0) <= 0">
|
||||
Heal
|
||||
</button>
|
||||
<button @click="damage_team(props.player.team)" v-if="props.player.team != goStore.self?.team"
|
||||
:disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0">
|
||||
Damage
|
||||
</button>
|
||||
<button v-if="props.player.team != goStore.self?.team"
|
||||
@click="useEffect(goStore.self?.turn.find_effect(CardEffects.DISCARD)!, props.player)"
|
||||
:disabled="!goStore.self?.turn.find_effect(CardEffects.DISCARD)">
|
||||
make Discard</button>
|
||||
<div id="turn_data">
|
||||
<div class="turn_icon">
|
||||
<img src="/images/champion-shield.png" />
|
||||
<span class="turn_icon_number">
|
||||
{{ props.player.team.health }}
|
||||
</span>
|
||||
<div :class="`player ${isPlayerTurn ? 'turn' : ''}`">
|
||||
<template v-if="!hide_stack_and_discard">
|
||||
<div class="stack">
|
||||
<span>stack =</span>
|
||||
<CardsGrouped :stack="props.player.stack_pile">
|
||||
<!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
|
||||
</CardsGrouped>
|
||||
</div>
|
||||
<div class="turn_icon">
|
||||
<img src="/images/heal.png" />
|
||||
<span class="turn_icon_number">
|
||||
{{ props.player.turn.heal_reserve }}
|
||||
</span>
|
||||
<div class="discard">
|
||||
<CardsGrouped :stack="props.player.discard_pile"> </CardsGrouped>
|
||||
</div>
|
||||
<div class="turn_icon">
|
||||
<img src="/images/damage.png" />
|
||||
<span class="turn_icon_number">
|
||||
{{ props.player.turn.damage_reserve }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="turn_icon">
|
||||
<img src="/images/gold.png" />
|
||||
<span class="turn_icon_number">
|
||||
{{ props.player.turn.gold_reserve }}
|
||||
</span>
|
||||
</template>
|
||||
<div id="player_stats">
|
||||
<PlayerStats :player="props.player"></PlayerStats>
|
||||
<b>{{ props.player.username }}</b>
|
||||
</div>
|
||||
<div id="current_player_board">
|
||||
<button @click="damage_team(props.player.team)" v-if="isSelfTurn && isPlayerEnemy"
|
||||
:disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0">
|
||||
Damage
|
||||
</button>
|
||||
<button v-if="isSelfTurn && isPlayerEnemy" @click="make_discard(props.player)"
|
||||
:disabled="!goStore.self?.turn.find_effect(CardEffects.DISCARD)">
|
||||
make Discard
|
||||
</button>
|
||||
<span>effects_availables =
|
||||
<div v-for="e in props.player.turn.effects_availables">
|
||||
<button v-if="e" @click="useEffect(e)" :disabled="!e.usable">
|
||||
{{ e.effect + " " + e.effect_type }}
|
||||
</button>
|
||||
</div>
|
||||
</span>
|
||||
<br />
|
||||
|
||||
<div class="cards_container">
|
||||
<!-- HAND -->
|
||||
<CardPreview :data="c" v-for="c in props.player.hand" @click="c && playCard(c)">
|
||||
<button v-if="c && isSelf && props.player.turn.discard_markers > 0" @click="discard(c)">
|
||||
DISCARD
|
||||
</button>
|
||||
</CardPreview>
|
||||
<!-- BOARD -->
|
||||
<CardPreview :data="c" v-for="c in props.player.board" @click="lockCard(c)"
|
||||
:locked="c.uuid in props.player.turn.cards_locked">
|
||||
<template v-if="c && isSelf && isPlayerTurn">
|
||||
<button v-if="props.player.turn.discard_markers > 0" @click="discard(c)">
|
||||
DISCARD
|
||||
</button>
|
||||
<button
|
||||
v-if="goStore.self?.turn.find_effect(CardEffects.SACRIFICE) && !(c.uuid in props.player.turn.cards_locked)"
|
||||
@click="sacrifice(c)">
|
||||
SACRIFICE
|
||||
</button>
|
||||
<button
|
||||
v-if="c && isSelf && isPlayerTurn && !(c.uuid in (goStore.self?.turn.cards_locked ?? []))"
|
||||
@click="lockCard(c)">
|
||||
LOCK
|
||||
</button>
|
||||
</template>
|
||||
<button v-if="isPlayerEnemy && isSelfTurn && (c.health_as_champion ?? 0) > 0"
|
||||
:disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0" @click="damage_champion(c)">
|
||||
DAMAGE
|
||||
</button>
|
||||
<button
|
||||
v-if="isPlayerEnemy && isSelfTurn && goStore.self?.turn.find_effect(CardEffects.STUN) && (c.health_as_champion ?? 0) > 0"
|
||||
@click="stun(c)">
|
||||
STUN
|
||||
</button>
|
||||
</CardPreview>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span>discard_markers = {{ props.player.turn.discard_markers }} </span>
|
||||
|
||||
<span>effects_availables = <div v-for=" e in props.player.turn.effects_availables ">
|
||||
<button v-if="e" @click="useEffect(e)" :disabled="!e.usable">
|
||||
{{ e.effect + ' ' + e.effect_type }}
|
||||
</button>
|
||||
|
||||
</div></span>
|
||||
<br>
|
||||
username = <b>{{ props.player.username }}</b>
|
||||
<br>
|
||||
|
||||
hand =
|
||||
<div class="cards_container">
|
||||
<CardPreview :data="c" v-for=" c in props.player.hand " @click="c && playCard(c)">
|
||||
<button v-if="c && isSelf && isTurn" @click="playCard(c)">PLAY</button>
|
||||
<button v-if="c && isSelf && isTurn && props.player.turn.discard_markers > 0"
|
||||
@click="discard(c)">DISCARD</button>
|
||||
</CardPreview>
|
||||
</div>
|
||||
<button v-if="isSelf && isTurn && props.player.hand.length > 1"
|
||||
@click="playAllCards(props.player.hand as Card[])">PLAY
|
||||
ALL</button>
|
||||
<br>
|
||||
board =
|
||||
<div class="cards_container">
|
||||
<CardPreview :data="c" v-for=" c in props.player.board " @click="lockCard(c)"
|
||||
:locked="c.uuid in props.player.turn.cards_locked">
|
||||
<button v-if="isSelf && isTurn && props.player.turn.discard_markers > 0"
|
||||
@click="discard(c)">DISCARD</button>
|
||||
<button v-if="isSelf && isTurn && props.player.turn.discard_markers == 0" @click="lockCard(c)"
|
||||
:disabled="c.uuid in props.player.turn.cards_locked">
|
||||
LOCK
|
||||
</button>
|
||||
<button v-if="isSelf && isTurn && props.player.turn.find_effect(CardEffects.SACRIFICE)"
|
||||
:disabled="!goStore.self || !c || c.uuid in props.player.turn.cards_locked"
|
||||
@click="useEffect(props.player.turn.find_effect(CardEffects.SACRIFICE)!, c)">SACRIFICE</button>
|
||||
|
||||
|
||||
<div>{{ c.health_as_champion }}</div>
|
||||
<button
|
||||
v-if="!isSelf && !isTurn && goStore.self?.team == goStore.game?.current_turn && (c.health_as_champion ?? 0) > 0"
|
||||
:disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0"
|
||||
@click="damage_champion(c)">DAMAGE</button>
|
||||
<button
|
||||
v-if="!isSelf && !isTurn && goStore.self?.team == goStore.game?.current_turn && goStore.self?.turn.find_effect(CardEffects.STUN) && (c.health_as_champion ?? 0) > 0"
|
||||
@click="useEffect(goStore.self.turn.find_effect(CardEffects.STUN)!, c)">STUN</button>
|
||||
</CardPreview>
|
||||
</div>
|
||||
|
||||
<div class="stack_and_discard">
|
||||
<CardSlot :stack="props.player.stack_pile">
|
||||
<!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
|
||||
</CardSlot>
|
||||
<div class="separator"></div>
|
||||
<div class="separator"></div>
|
||||
|
||||
<CardSlot :stack="props.player.discard_pile">
|
||||
|
||||
</CardSlot>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.stack_and_discard {
|
||||
.stack,
|
||||
.discard,
|
||||
.cards_container {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.stack {
|
||||
grid-area: stack;
|
||||
}
|
||||
|
||||
.discard {
|
||||
grid-area: discard;
|
||||
}
|
||||
|
||||
.player {
|
||||
border-top: 5px solid black;
|
||||
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";
|
||||
}
|
||||
|
||||
.turn {
|
||||
background: lightgreen;
|
||||
#current_player_board {
|
||||
grid-area: player;
|
||||
}
|
||||
|
||||
.turn_icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#turn_data {
|
||||
#player_stats {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
grid-area: player_stats;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding-top: 1em;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.turn_icon img {
|
||||
@@ -163,4 +179,4 @@ const discard_unwrapped = ref(false)
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user