147 lines
3.3 KiB
Vue
147 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { initCustomFormatter } from "vue";
|
|
import { buyCard, buyGem, useToken } from "~/netcode";
|
|
import {
|
|
CardEffects,
|
|
type Card,
|
|
type Container,
|
|
type Effect,
|
|
type Game,
|
|
type Player,
|
|
} from "~/netcode/interfaces";
|
|
|
|
export interface Props {
|
|
game: Game;
|
|
player: Player;
|
|
}
|
|
|
|
const settingsStore = useSettingsStore();
|
|
const props = defineProps<Props>();
|
|
|
|
const isVisible = ref(false);
|
|
|
|
const discardTokens = computed(() => {
|
|
// Only check for tokens if it's current player's turn
|
|
const team = props.game.teams.find((t) => t._id == props.game.currentTurn.currentTeam);
|
|
if (team?.players.some(p => p._id == props.player._id)) {
|
|
return 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);
|
|
}
|
|
|
|
function openDiscard() {
|
|
isVisible.value = true;
|
|
if (!settingsStore.saveDiscardSize) {
|
|
settingsStore.discardFullscreen = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div id="discard">
|
|
<GameCardGrouped @cardClick="openDiscard" :container="player.discard" :wrapped="true" :no-effects="true">
|
|
</GameCardGrouped>
|
|
</div>
|
|
<div class="discard-animations discard-background"
|
|
:class="{ visible: isVisible, fullscreen: settingsStore.discardFullscreen }" @click.stop="isVisible = false"></div>
|
|
<div class="discard-animations discard-menu"
|
|
:class="{ visible: isVisible, fullscreen: settingsStore.discardFullscreen }" @click.stop="isVisible = false">
|
|
<span>Discard of {{ player.user.username }}</span>
|
|
<button class="discard-fullscreen-btn" @click.stop="
|
|
settingsStore.discardFullscreen = !settingsStore.discardFullscreen
|
|
">
|
|
TOGGLE FULLSCREEN
|
|
</button>
|
|
<GameCardGrouped :container="player.discard" :wrapped="false" :hidden="false" :tokens="discardTokens"
|
|
:noEffects="true" :playingTurn="game.currentTurn" :locked="true" @tokenClick="tokenClick"></GameCardGrouped>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
span {
|
|
background: white;
|
|
}
|
|
|
|
.discard-fullscreen-btn {
|
|
pointer-events: all;
|
|
}
|
|
|
|
.discard-animations {
|
|
transition: 0.3s all var(--animation-curve);
|
|
}
|
|
|
|
.discard-background {
|
|
transition: 0.3s all linear;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0);
|
|
pointer-events: none;
|
|
z-index: 200;
|
|
}
|
|
|
|
.discard-background.visible {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
pointer-events: all;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.discard-menu {
|
|
left: -75%;
|
|
top: 0;
|
|
width: 25%;
|
|
height: 100%;
|
|
padding-left: 50%;
|
|
background: rgb(100, 53, 44);
|
|
position: fixed;
|
|
z-index: 200;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.discard-menu.visible {
|
|
left: -50%;
|
|
}
|
|
|
|
.discard-menu.fullscreen {
|
|
left: -100%;
|
|
width: 100%;
|
|
padding: 0;
|
|
background: rgba(0, 0, 0, 0);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.discard-menu.visible.fullscreen {
|
|
left: 0%;
|
|
}
|
|
|
|
.discard-menu>.cards_container {
|
|
pointer-events: all;
|
|
overflow: auto;
|
|
padding: 30px;
|
|
max-width: 100%;
|
|
transition: 0.3s all var(--animation-curve);
|
|
justify-content: center;
|
|
}
|
|
|
|
.discard-menu.fullscreen>.cards_container {
|
|
max-width: 50%;
|
|
}
|
|
</style>
|