Feat : Beta animations

components/CardsGrouped.vue

@@ -1,35 +1,73 @@
 <script setup lang="ts">
-import { containerEvents } from '~/netcode/events';
+import { containerEvents, delay } from '~/netcode/events';
 import type { Container } from '~/netcode/interfaces';
 
 export interface Props {
     container: Container
+    wrapped?: boolean
+    hidden?: boolean
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+    wrapped: () => false,
+    hidden: () => false
+})
 
+const settingsStore = useSettingsStore()
+
+const cards = computed(() => {
+    if (props.hidden) {
+        return props.container.cards.map((_v, i) => ({ _id: i, cardId: undefined }))
+    }
+    return props.container.cards
+})
+
+const animationSpeed = computed(() => settingsStore.animationSpeed + 'ms')
+const shuffleAnimationSpeed = computed(() => settingsStore.animationSpeed * 2 + 'ms')
 function populateContainer() {
 
 }
 
-function shuffleContainer() {
-
+const rotate = ref(false)
+async function shuffleContainer() {
+    console.log("rotate")
+    rotate.value = true
+    await delay(settingsStore.animationSpeed * 2)
+    rotate.value = false
+    await delay(settingsStore.animationSpeed * 2)
 }
 
-function hideCards(cards: CardParser[]) {
-
-}
-
-function showCards(cards: CardParser[]) {
-
-
-}
 
 function getCardsPosition(cards: string) {
 
 }
 
-containerEvents.set(props.container._id, { populateContainer, shuffleContainer, getCardsPosition, hideCards, showCards })
+
+const animationCallbacks = ref<Array<() => void>>([])
+
+function startAnimation() {
+    animationCallbacks.value.forEach(p => p())
+    animationCallbacks.value = []
+}
+
+function endAnimation() {
+    animationCallbacks.value.forEach(p => p())
+}
+
+containerEvents.set(props.container._id, { populateContainer, shuffleContainer, getCardsPosition, startAnimation, endAnimation })
+
+
+async function onEnter(_el: any, done: () => void) {
+    animationCallbacks.value.push(done)
+}
+
+async function onLeave(_el: any, done: () => void) {
+    animationCallbacks.value.push(done)
+}
+
+async function onBeforeEnter() {
+
+}
 
 onUnmounted(() => {
     containerEvents.delete(props.container._id)
@@ -37,34 +75,46 @@ onUnmounted(() => {
 </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">
+    <div class="cards_container" :class="{ wrapped, rotate }">
+        <TransitionGroup name="list" @enter="onEnter" @leave="onLeave" @before-enter="onBeforeEnter">
+            <CardPreview :card_id="c.cardId" :wrapped="wrapped" v-for="c in cards" :key="c?._id">
                 <slot></slot>
             </CardPreview>
-        </template>
-        <template v-else>
-            <div class="empty">
-                <img :class="`card_image`" :src="'/cards/background.png'" draggable="false">
-            </div>
-
-        </template>
+        </TransitionGroup>
+        <!-- <img :class="`card_image`" :src="'/cards/background.png'" draggable="false"> -->
     </div>
 </template>
 
 <style scoped>
-.cards_container::before {
+.list-enter-active,
+.list-leave-active {
+    transition: all v-bind('animationSpeed') ease;
+}
+
+
+.list-leave-to,
+.list-enter-from {
+    opacity: 0;
+    transform: translateX(30px);
+}
+
+.cards_container.wrapped:before {
     height: calc(250px - 10px);
     display: block;
     content: "";
     width: 0;
 }
 
+.rotate {
+    rotate: 360deg;
+}
+
 .cards_container {
     display: flex;
     flex-direction: column-reverse;
     justify-content: center;
     min-width: 200px;
+    transition: rotate v-bind('shuffleAnimationSpeed') ease;
 }
 
 .empty {