heronfief/front
3
1
Fork 0
Code Issues 44 Pull Requests 1 Actions Packages Projects Releases 1 Activity

Feat : clickable effect icons

Browse Source
This commit is contained in:
legonzaur
2024-07-02 11:45:12 +02:00
parent 6db8410ccc
commit 221f96860f
106 changed files with 712 additions and 696 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/MarketCards.vue
+8 -59
View File
@@ -4,19 +4,20 @@ import type { Container } from '~/netcode/interfaces';
export interface Props {
container: Container
market: Container
fire_gems: Container
}
const props = defineProps<Props>()
const authStore = useAuthStore()
const selfPlayer = computed(() => authStore.logged ? playerList.value?.find(p => p.user.userId == authStore.selfUser.userId) : undefined)
// const selfPlayer = computed(() => authStore.logged ? playerList.value?.find(p => p.user.userId == authStore.selfUser.userId) : undefined)
const isTurn = computed(() => goStore.self && goStore.current_game?.started && (goStore.self.team == goStore.current_game.current_turn))
const clientStore = useClientSideStore()
// 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))
// const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
function onBeforeEnter(el: Element) {
@@ -43,63 +44,12 @@ function onEnter(el: any, done: () => unknown) {
<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>
<CardsGrouped :container="market"></CardsGrouped>
<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>
<CardsGrouped :container="fire_gems" :wrapped="true"></CardsGrouped>
</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;
@@ -118,7 +68,6 @@ function onEnter(el: any, done: () => unknown) {
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 {