120 lines
4.5 KiB
Vue
120 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
import goStore, { buy, useEffect } from '@/netcode';
|
|
import { CardEffects, type Effect } from '@/netcode/Effect'
|
|
import { CardType } from '@/netcode/Card'
|
|
import gsap from 'gsap'
|
|
|
|
|
|
|
|
const isTurn = computed(() => goStore.self && goStore.current_game?.started && (goStore.self.team == goStore.current_game.current_turn))
|
|
const clientStore = useClientSideStore()
|
|
|
|
const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
|
|
|
|
|
|
function onBeforeEnter(el: Element) {
|
|
(el as HTMLElement).style.visibility = "hidden"
|
|
const element = el as HTMLElement
|
|
element.style.top = element.offsetTop + "px"
|
|
element.style.left = element.offsetLeft + "px"
|
|
element.style.zIndex = "999"
|
|
}
|
|
|
|
function onEnter(el: any, done: () => unknown) {
|
|
console.log("enter")
|
|
// setTimeout(() => {
|
|
// el.style.visibility = null
|
|
// done()
|
|
// }, 1000)
|
|
done()
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div id="market">
|
|
<CardPreview :tilted="false" :card_id="undefined"></CardPreview>
|
|
<div class="separator"></div>
|
|
<TransitionGroup name="market_card">
|
|
<CardPreview :tilted="false" :card_id="c?.card_id" v-for="c in goStore.current_game?.market"
|
|
:key="c?.card_id" @click="c && buy(c)">
|
|
<template
|
|
v-if="isTurn && goStore.self?.turn && c && c.cost && (goStore.self?.turn.gold_reserve ?? 0) >= c.cost">
|
|
<button @click.stop="buy(c)">BUY</button>
|
|
<button @click.stop="clientStore.findUseEffect(CardEffects.PLAY_NEXT_CARD_BOUGHT, c);"
|
|
v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
|
|
BUY IN HAND</button>
|
|
<button @click.stop="clientStore.findUseEffect(CardEffects.STACK_NEXT_CARD_BOUGHT, c)"
|
|
v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
|
|
BUY IN STACK (generic)</button>
|
|
|
|
<button @click.stop="clientStore.findUseEffect(CardEffects.STACK_NEXT_ACTION_BOUGHT, c)"
|
|
v-if="c.card_type == CardType.ACTION && clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT) && e.usable)">
|
|
BUY IN STACK (actions)</button>
|
|
</template>
|
|
</CardPreview>
|
|
</TransitionGroup>
|
|
<div class="separator"></div>
|
|
<CardPreview :tilted="false" :card_id="goStore.current_game?.gem_stack.at(-1)?.card_id"
|
|
@click="buy(goStore.current_game?.gem_stack.at(-1)!)">
|
|
<template
|
|
v-if="isTurn && goStore.self?.turn && goStore.current_game?.gem_stack.length && goStore.current_game?.gem_stack.length > 0 && (goStore.self?.turn.gold_reserve ?? 0) >= (goStore.current_game?.gem_stack.at(-1)?.cost ?? Infinity)">
|
|
<button @click.stop="buy(goStore.current_game.gem_stack.at(-1)!)">
|
|
BUY
|
|
</button>
|
|
<button @click.stop="clientStore.findUseEffect(CardEffects.PLAY_NEXT_CARD_BOUGHT, buyableFiregem)"
|
|
v-if="buyableFiregem && clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
|
|
BUY IN HAND</button>
|
|
<button @click.stop="clientStore.findUseEffect(CardEffects.STACK_NEXT_CARD_BOUGHT, buyableFiregem)"
|
|
v-if="buyableFiregem && clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
|
|
BUY IN STACK(generic)
|
|
</button>
|
|
</template>
|
|
</CardPreview>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
/* .market_card-leave-active,
|
|
.market_card-move {
|
|
display: none;
|
|
}
|
|
|
|
.market_card-enter-from {
|
|
transform: translate(-500px);
|
|
}
|
|
|
|
|
|
.market_card-enter-active,
|
|
.market_card-leave-active {
|
|
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
|
} */
|
|
</style>
|
|
<style scoped>
|
|
#market {
|
|
width: min-content;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 2;
|
|
position: relative;
|
|
gap: 2px;
|
|
margin: 10px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
padding-bottom: 10px;
|
|
border-radius: 10px;
|
|
filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
|
|
backdrop-filter: blur(5px) brightness(80%);
|
|
background: rgba(155, 62, 62, 0.46);
|
|
|
|
}
|
|
|
|
.separator {
|
|
width: 50px;
|
|
}
|
|
</style> |