139 lines
4.2 KiB
Vue
139 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps(['player', 'current_team'])
|
|
const teams = useState<{ [key: string]: any }>('teams')
|
|
const self = useState<string>('self')
|
|
const socket = useState<WebSocket>('socket')
|
|
const isTurn = computed(() => props.player.team == props.current_team)
|
|
const isSelf = computed(() => props.player.uuid == self.value)
|
|
|
|
const discard_wrapped = ref(false)
|
|
|
|
|
|
function playAllCards() {
|
|
props.player.hand.forEach((c: any) => {
|
|
playCard(c)
|
|
});
|
|
|
|
}
|
|
|
|
function playCard(cardId: string) {
|
|
socket.value.send(JSON.stringify({
|
|
type: "action",
|
|
data_type: "play_cards",
|
|
data: cardId
|
|
}))
|
|
}
|
|
|
|
function draw() {
|
|
socket.value.send(JSON.stringify({
|
|
type: "action",
|
|
data_type: "draw",
|
|
data: 1
|
|
}))
|
|
}
|
|
|
|
function play_from_discard(cardId: string) {
|
|
socket.value.send(JSON.stringify({
|
|
type: "temp_action",
|
|
data_type: "play_from_discard",
|
|
data: cardId
|
|
}))
|
|
}
|
|
|
|
function discard(cardId: string) {
|
|
socket.value.send(JSON.stringify({
|
|
type: "action",
|
|
data_type: "discard",
|
|
data: cardId
|
|
}))
|
|
}
|
|
|
|
function sacrifice(cardId: any) {
|
|
socket.value.send(JSON.stringify({
|
|
type: "action",
|
|
data_type: "sacrifice",
|
|
data: cardId
|
|
}))
|
|
}
|
|
|
|
function put_on_stack_from_discard(cardId: any) {
|
|
socket.value.send(JSON.stringify({
|
|
type: "temp_action",
|
|
data_type: "put_on_stack_from_discard",
|
|
data: cardId
|
|
}))
|
|
}
|
|
function setHealth(event: Event) {
|
|
socket.value.send(JSON.stringify({
|
|
type: "temp_action",
|
|
data_type: "set_health",
|
|
data: (event.target as HTMLInputElement).value
|
|
}))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="'player ' + (isTurn ? 'turn' : '')">
|
|
<div v-if="isSelf"><b>YOU</b></div>
|
|
username = <b>{{ props.player.username }}</b>
|
|
<br>
|
|
health =
|
|
<template v-if="!isSelf">{{ teams[player.team].health }}</template>
|
|
<input type="number" :value="teams[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="isSelf && isTurn" @click="playCard(c)">PLAY</button>
|
|
<button v-if="isSelf && isTurn" @click="discard(c)">DISCARD</button>
|
|
</CardPreview>
|
|
</div>
|
|
<button v-if="isSelf && isTurn && props.player.hand.length > 1" @click="playAllCards">PLAY
|
|
ALL</button>
|
|
<br>
|
|
board =
|
|
<div class="cards_container">
|
|
<CardPreview :data="c" v-for="c in props.player.board">
|
|
<button v-if="isSelf && isTurn" @click="discard(c)">DISCARD</button>
|
|
<button v-if="isSelf && isTurn" @click="sacrifice(c)">SACRIFICE</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)">
|
|
<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> |