<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>