67 lines
1.3 KiB
Vue
67 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
|
|
import type {ICard} from "@/types/card.type";
|
|
import Card from "@/components/maumau/game/Card.vue";
|
|
|
|
const props = defineProps<{
|
|
cards?: ICard[],
|
|
}>();
|
|
|
|
const emits = defineEmits<{
|
|
(event: 'click', card: ICard): void
|
|
}>();
|
|
|
|
const onCardClick = (card?: ICard) => {
|
|
if (!card) return;
|
|
emits('click', card);
|
|
}
|
|
|
|
const keepItemInPlace = (el: Element) => {
|
|
const htmlElement = el as HTMLElement;
|
|
const rect = htmlElement.getBoundingClientRect();
|
|
htmlElement.style.left = `${rect.left}px`;
|
|
htmlElement.style.top = `${rect.top}px`;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ul class="hand">
|
|
<TransitionGroup @beforeLeave="keepItemInPlace">
|
|
<li v-for="card in cards" :key="card.id">
|
|
<Card :card="card" @click="onCardClick" hoverable/>
|
|
</li>
|
|
</TransitionGroup>
|
|
</ul>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/scss/layout";
|
|
|
|
.hand {
|
|
@extend .container-fill-height;
|
|
|
|
position: relative;
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
flex-flow: row nowrap !important;
|
|
overflow-x: scroll;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.v-enter-from, .v-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-25%);
|
|
}
|
|
|
|
.v-leave-active {
|
|
position: fixed;
|
|
}
|
|
|
|
.v-enter-active,
|
|
.v-leave-active,
|
|
.v-move {
|
|
transition: all 0.5s ease-out;
|
|
}
|
|
</style> |