54 lines
1.5 KiB
Vue
54 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps(['game'])
|
|
const self = useState<string>('self')
|
|
const gameObject = useState<{ [key: string]: any }>('gameObject')
|
|
const socket = useState<WebSocket>('socket')
|
|
|
|
const isTurn = computed(() => self.value && props.game?.started && (gameObject.value[self.value]?.team == props.game.turn))
|
|
|
|
async function buy(cardId: string) {
|
|
socket.value.send(JSON.stringify({
|
|
type: "action",
|
|
data_type: "buy",
|
|
data: [cardId]
|
|
}))
|
|
}
|
|
|
|
async function endTurn() {
|
|
socket.value.send(JSON.stringify({
|
|
type: "action",
|
|
data_type: "end_turn",
|
|
data: true
|
|
}))
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div>
|
|
<button v-if="isTurn" @click="endTurn">END TURN</button>
|
|
<div v-if="!self"><b>SPECTATOR MODE</b></div>
|
|
<div>
|
|
market_amount = {{ props.game.market_stack?.length }}
|
|
<br>
|
|
market =
|
|
<template v-for="c in props.game.market">
|
|
|
|
<CardPreview :data="c">
|
|
<button v-if="isTurn && c" @click="buy(c)">BUY</button>
|
|
</CardPreview> |
|
|
</template>
|
|
|
|
<br>
|
|
gems =
|
|
<CardSlot :stack="props.game.gem_stack">
|
|
<button v-if="isTurn && props.game.gem_stack.length > 0"
|
|
@click="buy(props.game.gem_stack.at(-1))">BUY</button>
|
|
</CardSlot>
|
|
</div>
|
|
<div>
|
|
<PlayerList :players="props.game?.players" :current_team="game.turn"></PlayerList>
|
|
</div>
|
|
</div>
|
|
</template> |