56 lines
1.1 KiB
Vue
56 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import type { Card } from '~/netcode/Card';
|
|
|
|
export interface Props {
|
|
stack: (Card | null)[]
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
stack: () => [],
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="cards_container">
|
|
<template v-if="props.stack.length > 0" v-for="c in props.stack">
|
|
<CardPreview :card_id="c?.card_id" :wrapped="true">
|
|
<slot></slot>
|
|
</CardPreview>
|
|
</template>
|
|
<template v-if="props.stack.length == 0">
|
|
<div class="empty">
|
|
<img :class="`card_image`" :src="'/cards/background.png'" draggable="false">
|
|
</div>
|
|
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
.cards_container::before {
|
|
width: calc(185px - 10px);
|
|
display: block;
|
|
content: "";
|
|
height: 0;
|
|
}
|
|
|
|
.cards_container {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: center;
|
|
}
|
|
|
|
.empty {
|
|
max-width: 10px;
|
|
}
|
|
|
|
.empty>.card_image {
|
|
filter: brightness(0.5);
|
|
max-height: 250px;
|
|
}
|
|
</style> |