107 lines
2.2 KiB
Vue
107 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { buyCard, buyGem, useToken } from "~/netcode";
|
|
import {
|
|
CardEffects,
|
|
type Card,
|
|
type Container,
|
|
type Effect,
|
|
type Game,
|
|
type Player,
|
|
} from "~/netcode/interfaces";
|
|
import TokenComponent from "./tokens/TokenComponent.vue";
|
|
|
|
export interface Props {
|
|
game: Game;
|
|
discard: Container;
|
|
player: Player;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const authStore = useAuthStore();
|
|
|
|
const emit = defineEmits(["close"]);
|
|
function marketCardClick(e: string) {
|
|
buyCard(props.game._id, e);
|
|
}
|
|
|
|
function fireGemCardClick(e: string) {
|
|
buyGem(props.game._id);
|
|
}
|
|
|
|
const discardTokens = computed(() =>
|
|
props.game.currentTurn.tokens.filter((t) =>
|
|
[
|
|
CardEffects.RESTACK_DISCARDED_ACTION,
|
|
CardEffects.RESTACK_DISCARDED_CARD,
|
|
CardEffects.RESTACK_DISCARDED_CHAMPION,
|
|
CardEffects.SACRIFICE,
|
|
].includes(t.effect)
|
|
)
|
|
);
|
|
|
|
function tokenClick({ card, token }: { card: Card; token: Effect }) {
|
|
useToken(props.game._id, token._id, card._id);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="overlay">
|
|
<button @click="$emit('close')">Close</button>
|
|
<span>Discard of {{ player.user.username }}</span>
|
|
|
|
<div class="discard_unwrapped" @click.stop>
|
|
<CardsGrouped
|
|
:container="discard"
|
|
:wrapped="false"
|
|
:hidden="false"
|
|
:tokens="discardTokens"
|
|
:noEffects="true"
|
|
:playingTurn="game.currentTurn"
|
|
@tokenClick="tokenClick"
|
|
></CardsGrouped>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
span {
|
|
background: white;
|
|
}
|
|
.overlay {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
position: fixed;
|
|
z-index: 200;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.discard_unwrapped {
|
|
width: max-content;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
/* 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, 0.6)); */
|
|
/* backdrop-filter: blur(5px) brightness(80%); */
|
|
background: rgba(60, 47, 117, 0.46);
|
|
/* left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%); */
|
|
}
|
|
</style>
|