Vue rewrite

src/components/maumau/game/Hand.vue

@@ -0,0 +1,67 @@
+<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>