100 lines
2.6 KiB
Vue
100 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { buyCard, buyGem, useToken } from "~/netcode";
|
|
import {
|
|
CardEffects,
|
|
type Card,
|
|
type Container,
|
|
type Effect,
|
|
type Game,
|
|
} from "~/netcode/interfaces";
|
|
import TokenComponent from "./tokens/TokenComponent.vue";
|
|
|
|
export interface Props {
|
|
game: Game;
|
|
market: Container;
|
|
marketStack: 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 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 marketCardClick(e: string) {
|
|
buyCard(props.game._id, e);
|
|
}
|
|
|
|
function fireGemCardClick(e: string) {
|
|
buyGem(props.game._id);
|
|
}
|
|
|
|
const marketTokens = computed(() =>
|
|
props.game.currentTurn.tokens.filter((t) =>
|
|
[
|
|
CardEffects.STACK_NEXT_CARD_BOUGHT,
|
|
CardEffects.STACK_NEXT_ACTION_BOUGHT,
|
|
CardEffects.PLAY_NEXT_CARD_BOUGHT,
|
|
].includes(t.effect)
|
|
)
|
|
);
|
|
|
|
const gemsTokens = computed(() =>
|
|
props.game.currentTurn.tokens.filter((t) =>
|
|
[
|
|
CardEffects.STACK_NEXT_CARD_BOUGHT,
|
|
CardEffects.PLAY_NEXT_CARD_BOUGHT,
|
|
].includes(t.effect)
|
|
)
|
|
);
|
|
|
|
function tokenClick({ card, token }: { card: Card; token: Effect }) {
|
|
useToken(props.game._id, token._id, card._id);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="market">
|
|
<CardsGrouped :container="market" @cardClick="marketCardClick" :noEffects="true" :tokens="marketTokens"
|
|
@tokenClick="tokenClick">
|
|
</CardsGrouped>
|
|
<div class="separator"></div>
|
|
<CardsGrouped :container="fire_gems" :wrapped="true" @cardClick="fireGemCardClick" :noEffects="true"
|
|
:tokens="gemsTokens" @tokenClick="tokenClick"></CardsGrouped>
|
|
<div class="separator"></div>
|
|
<CardsGrouped :container="marketStack" :wrapped="true" :hidden="true"></CardsGrouped>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.market {
|
|
width: max-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;
|
|
isolation: initial;
|
|
/* filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, 0.6)); */
|
|
/* backdrop-filter: blur(5px) brightness(80%); */
|
|
background: rgba(155, 62, 62, 0.46);
|
|
}
|
|
|
|
.separator {
|
|
width: 50px;
|
|
}
|
|
</style>
|