85 lines
2.3 KiB
Vue
85 lines
2.3 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)
|
|
|
|
|
|
async function playAllCards() {
|
|
socket.value.send(JSON.stringify({
|
|
type: "action",
|
|
data_type: "play_cards",
|
|
data: props.player.hand
|
|
}))
|
|
}
|
|
|
|
async function playCard(cardId: string) {
|
|
socket.value.send(JSON.stringify({
|
|
type: "action",
|
|
data_type: "play_cards",
|
|
data: [cardId]
|
|
}))
|
|
}
|
|
|
|
async function draw() {
|
|
socket.value.send(JSON.stringify({
|
|
type: "action",
|
|
data_type: "draw",
|
|
data: 1
|
|
}))
|
|
}
|
|
|
|
async function discard(cardId: string) {
|
|
socket.value.send(JSON.stringify({
|
|
type: "action",
|
|
data_type: "discard",
|
|
data: [cardId]
|
|
}))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="'player ' + (isTurn ? 'turn' : '')">
|
|
<div v-if="isSelf"><b>YOU</b></div>
|
|
username = <b>{{ props.player.username }}</b>
|
|
<br>
|
|
health = {{ teams[player.team].health }}
|
|
<br>
|
|
hand =
|
|
<template v-for="c in props.player.hand">
|
|
<CardPreview :data="c">
|
|
<button v-if="isSelf && isTurn" @click="playCard(c)">PLAY</button>
|
|
<button v-if="isSelf && isTurn" @click="discard(c)">DISCARD</button>
|
|
</CardPreview> |
|
|
</template>
|
|
<button v-if="isSelf && isTurn && props.player.hand.length > 1" @click="playAllCards">PLAY
|
|
ALL</button>
|
|
<br>
|
|
board =
|
|
<template v-for="c in props.player.board">
|
|
<CardPreview :data="c">
|
|
<button v-if="isSelf && isTurn" @click="discard(c)">DISCARD</button>
|
|
</CardPreview> |
|
|
</template>
|
|
<br>
|
|
stack =
|
|
<CardSlot :stack="props.player.stack_pile">
|
|
<button v-if="isSelf && isTurn" @click="draw">DRAW</button>
|
|
</CardSlot>
|
|
<br>
|
|
discard =
|
|
<CardSlot :stack="props.player.discard_pile"></CardSlot>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.player {
|
|
border-top: 5px solid black;
|
|
}
|
|
|
|
.turn {
|
|
background: lightgreen;
|
|
}
|
|
</style> |