103 lines
4.0 KiB
Vue
103 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import goStore, { useEffect, playCard, playAllCards, discard, lockCard } from '~/netcode';
|
|
import type { Card } from '~/netcode/Card';
|
|
import type { Player } from '~/netcode/Player';
|
|
|
|
export interface Props {
|
|
player: Player
|
|
}
|
|
const props = defineProps<Props>()
|
|
|
|
const isTurn = computed(() => props.player.team == goStore.game?.current_turn)
|
|
const isSelf = computed(() => props.player.uuid == goStore.self?.uuid)
|
|
|
|
const discard_wrapped = ref(false)
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="'player ' + (isTurn ? 'turn' : '')">
|
|
<div id="turn" v-if="props.player.turn">
|
|
champions_health = {{ props.player.turn.champions_health }} <br>
|
|
heal_reserve = {{ props.player.turn.heal_reserve }} <br>
|
|
damage_reserve = {{ props.player.turn.damage_reserve }} <br>
|
|
gold_reserve = {{ props.player.turn.gold_reserve }} <br>
|
|
discard_markers = {{ props.player.turn.discard_markers }} <br>
|
|
effects_availables = <div v-for="e in props.player.turn.effects_availables" :key="e.uuid"
|
|
@click="useEffect(e)">
|
|
{{ e.effect + '*' + 1 }}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div v-if="isSelf"><b>YOU</b></div>
|
|
username = <b>{{ props.player.username }}</b>
|
|
<br>
|
|
health =
|
|
<template v-if="!isSelf">{{ player.team.health }}</template>
|
|
<!-- <input type="number" :value="player.team.health" v-if="isSelf" @change="setHealth" /> -->
|
|
<br>
|
|
hand =
|
|
<div class="cards_container">
|
|
<CardPreview :data="c" v-for="c in props.player.hand">
|
|
<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"
|
|
:locked="Object.values(props.player.turn.cards_locked).includes(c)">
|
|
<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)">LOCK</button>
|
|
<button v-if="!isSelf && !isTurn"></button>
|
|
</CardPreview>
|
|
</div>
|
|
<br>
|
|
stack =
|
|
<CardSlot :stack="props.player.stack_pile">
|
|
<!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
|
|
</CardSlot>
|
|
<br>
|
|
discard =
|
|
|
|
{{ props.player.discard_pile.length }}
|
|
<input type="checkbox" v-model="discard_wrapped" />
|
|
|
|
<CardPreview v-if="!discard_wrapped" :data="props.player.discard_pile.at(-1) ?? null">
|
|
<!-- <button v-if="isSelf && isTurn" @click="play_from_discard(props.player.discard_pile.at(-1))">DRAW</button>
|
|
<button v-if="isSelf && isTurn" @click="put_on_stack_from_discard(props.player.discard_pile.at(-1))">PUT ON
|
|
STACK</button>
|
|
<button v-if="isSelf && isTurn" @click="sacrifice(props.player.discard_pile.at(-1))">SACRIFICE</button> -->
|
|
</CardPreview>
|
|
|
|
<template v-if="discard_wrapped" v-for="c in props.player.discard_pile">
|
|
<CardPreview :data="c">
|
|
<!-- <button v-if="isSelf && isTurn" @click="play_from_discard(c)">DRAW</button>
|
|
<button v-if="isSelf && isTurn" @click="put_on_stack_from_discard(c)">PUT ON STACK</button>
|
|
<button v-if="isSelf && isTurn" @click="sacrifice(c)">SACRIFICE</button> -->
|
|
</CardPreview>
|
|
</template>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.player {
|
|
border-top: 5px solid black;
|
|
}
|
|
|
|
.turn {
|
|
background: lightgreen;
|
|
}
|
|
</style> |