79 lines
4.7 KiB
Vue
79 lines
4.7 KiB
Vue
<script setup lang="ts">
|
|
import goStore, { buy, endTurn, useEffect } from '@/netcode';
|
|
import { CardEffects } from '@/netcode/Effect'
|
|
import { CardType } from '@/netcode/Card'
|
|
|
|
const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.self.team == goStore.game.current_turn))
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div @contextmenu.prevent="false">
|
|
<button v-if="isTurn" @click="endTurn">END TURN</button>
|
|
<div v-if="!goStore.self"><b>SPECTATOR MODE</b></div>
|
|
<div>
|
|
market_amount = {{ goStore.game?.market_stack?.length }}
|
|
<br>
|
|
<div class="cards_container">
|
|
<CardSlot :stack="goStore.game?.gem_stack">
|
|
<template v-if="isTurn && goStore.game?.gem_stack.length && goStore.game?.gem_stack.length > 0">
|
|
<button @click="buy(goStore.game.gem_stack.at(-1)!)">
|
|
BUY
|
|
</button>
|
|
<button
|
|
@click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)!, goStore.game.gem_stack.at(-1))"
|
|
:disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)!.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < goStore.game.gem_stack.at(-1)!.cost!) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
|
|
BUY IN HAND</button>
|
|
<button
|
|
@click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)!, goStore.game.gem_stack.at(-1))"
|
|
:disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)?.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < (goStore.game.gem_stack.at(-1)?.cost ?? Infinity)) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
|
|
BUY IN STACK (generic)</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 class="separator"></div>
|
|
<CardPreview :data="c" v-for="c in goStore.game?.market" @click="c && buy(c)">
|
|
<template v-if="isTurn && c">
|
|
<button @click="buy(c)"
|
|
:disabled="goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost">BUY</button>
|
|
<button
|
|
@click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)!, c)"
|
|
:disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
|
|
BUY IN HAND</button>
|
|
<button
|
|
@click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)!, c)"
|
|
:disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
|
|
BUY IN STACK (generic)</button>
|
|
<button v-if="c.card_type == CardType.ACTION"
|
|
@click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT) && e.usable)!, c)"
|
|
:disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT) && e.usable)">
|
|
BUY IN STACK (actions)</button>
|
|
</template>
|
|
</CardPreview>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
<PlayerList>
|
|
</PlayerList>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.cards_container {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: center;
|
|
}
|
|
|
|
.separator {
|
|
margin-left: 100px;
|
|
}
|
|
</style> |