161 lines
3.2 KiB
Vue
161 lines
3.2 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(() =>
|
|
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>
|