Fix : switch to state based shuffle animation

components/CardsGrouped.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { containerEvents, delay } from "~/netcode/events";
+import { delay } from "~/netcode/events";
 import type { Container, PlayingTurn } from "~/netcode/interfaces";
 
 export interface Props {
@@ -34,13 +34,13 @@ const shuffleAnimationSpeed = computed(
 );
 function populateContainer() {}
 
-const rotate = ref(false);
-async function shuffleContainer() {
-  rotate.value = true;
-  await delay(settingsStore.animationSpeed * 2);
-  rotate.value = false;
-  await delay(settingsStore.animationSpeed * 2);
-}
+// const rotate = ref(false);
+// async function shuffleContainer() {
+//   rotate.value = true;
+//   await delay(settingsStore.animationSpeed * 2);
+//   rotate.value = false;
+//   await delay(settingsStore.animationSpeed * 2);
+// }
 
 function getCardsPosition(cards: string) {}
 
@@ -55,47 +55,44 @@ function endAnimation() {
   animationCallbacks.value.forEach((p) => p());
 }
 
-watch(
-  props.container,
-  (newValue, oldValue) => {
-    if (oldValue) {
-      containerEvents.delete(oldValue._id);
-    }
-    if (newValue) {
-      containerEvents.set(newValue._id, {
-        populateContainer,
-        shuffleContainer,
-        getCardsPosition,
-        startAnimation,
-        endAnimation,
-      });
-    }
-  },
-  { immediate: true }
-);
+// watch(
+//   props.container,
+//   (newValue, oldValue) => {
+//     if (oldValue) {
+//       containerEvents.delete(oldValue._id);
+//     }
+//     if (newValue) {
+//       containerEvents.set(newValue._id, {
+//         populateContainer,
+//         shuffleContainer,
+//         getCardsPosition,
+//         startAnimation,
+//         endAnimation,
+//       });
+//     }
+//   },
+//   { immediate: true }
+// );
 
-async function onEnter(_el: any, done: () => void) {
-  animationCallbacks.value.push(done);
-}
+// async function onEnter(_el: any, done: () => void) {
+//   animationCallbacks.value.push(done);
+// }
+
+// async function onLeave(_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);
+  // containerEvents.delete(props.container._id);
 });
 </script>
 
 <template>
-  <div class="cards_container" :class="{ wrapped, rotate }">
+  <div class="cards_container" :class="{ wrapped, rotate:container.shuffling }">
     <TransitionGroup
       name="list"
-      @enter="onEnter"
-      @leave="onLeave"
-      @before-enter="onBeforeEnter"
     >
       <CardPreview
         @click="$emit('cardClick', c._id)"
@@ -115,15 +112,21 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+.list-move,
 .list-enter-active,
 .list-leave-active {
   transition: all v-bind("animationSpeed") ease;
 }
 
-.list-leave-to,
+/* .list-leave-to, */
 .list-enter-from {
   opacity: 0;
-  transform: translateX(30px);
+  /* transform: translateX(30px); */
+}
+
+.list-leave-active {
+  position: absolute;
+  height:unset;
 }
 
 .rotate {
@@ -133,13 +136,14 @@ onUnmounted(() => {
 .cards_container {
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: space-evenly;
   min-width: 200px;
   transition: rotate v-bind("shuffleAnimationSpeed") ease;
 }
 
 .cards_container.wrapped {
   flex-direction: column-reverse;
+  justify-content: center;
 }
 
 .cards_container.wrapped:before {