79 lines
1.5 KiB
Vue
79 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { containerEvents } from '~/netcode/events';
|
|
import type { Container } from '~/netcode/interfaces';
|
|
import type { CardParser } from '~/netcode/interfaces/cards';
|
|
|
|
export interface Props {
|
|
container: Container
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
function populateContainer() {
|
|
|
|
}
|
|
|
|
function shuffleContainer() {
|
|
|
|
}
|
|
|
|
function hideCards(cards: CardParser[]) {
|
|
|
|
}
|
|
|
|
function showCards(cards: CardParser[]) {
|
|
|
|
|
|
}
|
|
|
|
function getCardsPosition(cards: string) {
|
|
|
|
}
|
|
|
|
containerEvents.set(props.container._id, { populateContainer, shuffleContainer, getCardsPosition, hideCards, showCards })
|
|
|
|
onUnmounted(() => {
|
|
containerEvents.delete(props.container._id)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="cards_container">
|
|
<template v-if="props.container.cards.length > 0" v-for="c in props.container.cards">
|
|
<CardPreview :card_id="c?.cardId" :wrapped="true">
|
|
<slot></slot>
|
|
</CardPreview>
|
|
</template>
|
|
<template v-else>
|
|
<div class="empty">
|
|
<img :class="`card_image`" :src="'/cards/background.png'" draggable="false">
|
|
</div>
|
|
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.cards_container::before {
|
|
height: calc(250px - 10px);
|
|
display: block;
|
|
content: "";
|
|
width: 0;
|
|
}
|
|
|
|
.cards_container {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
justify-content: center;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.empty {
|
|
max-height: 10px;
|
|
}
|
|
|
|
.empty>.card_image {
|
|
filter: brightness(0.5);
|
|
max-height: 250px;
|
|
}
|
|
</style> |