78 lines
2.4 KiB
Vue
78 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps(['game'])
|
|
const self = useState<string>('self')
|
|
const gameObject = useState<{ [key: string]: any }>('gameObject')
|
|
const cards = useState<{ [key: string]: any }>('cards')
|
|
const socket = useState<WebSocket>('socket')
|
|
|
|
const isTurn = computed(() => self.value && props.game?.started && (gameObject.value[self.value]?.team == props.game.current_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 @contextmenu.prevent="false">
|
|
<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 =
|
|
<div class="cards_container">
|
|
|
|
<CardPreview :data="c" v-for="c in props.game.market">
|
|
<template v-if="isTurn && c">
|
|
<button @click="buy(c)">BUY</button>
|
|
<!-- <button @click="buy_in_hand(c)">
|
|
BUY IN HAND
|
|
</button>
|
|
<button @click="buy_on_stack(c)">
|
|
BUY ON STACK
|
|
</button> -->
|
|
</template>
|
|
</CardPreview>
|
|
</div>
|
|
|
|
<br>
|
|
gems =
|
|
<CardSlot :stack="props.game.gem_stack">
|
|
<template v-if="isTurn && props.game.gem_stack.length > 0">
|
|
<button @click="buy(props.game.gem_stack.at(-1))">
|
|
BUY
|
|
</button>
|
|
<!-- <button @click="buy_in_hand(props.game.gem_stack.at(-1))">
|
|
BUY IN HAND
|
|
</button>
|
|
<button @click="buy_on_stack(props.game.gem_stack.at(-1))">
|
|
BUY ON STACK
|
|
</button> -->
|
|
</template>
|
|
</CardSlot>
|
|
</div>
|
|
<div>
|
|
<PlayerList :players="props.game?.players" :current_team="game.current_turn"></PlayerList>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.cards_container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
</style> |