Fix : switch to state based shuffle animation

components/AnimatedBackground.vue

@@ -161,7 +161,7 @@ onUnmounted(() => {
 <style scoped>
 #background {
   left: 0;
-  position: absolute;
+  position: fixed;
   height: 100%;
   width: 100%;
 }

components/CardPreview.vue

@@ -129,14 +129,12 @@ onMounted(() => {
 .card {
   --max-height: 250px;
   --margin-bottom: calc(var(--max-height) * 0.05);
-  /* max-width: 256px; */
   position: relative;
   display: flex;
   justify-content: center;
   margin-bottom: 0px;
   margin-top: var(--margin-bottom);
   transition: all 0.075s cubic-bezier(1, 1.81, 0.59, 1.42);
-  isolation: isolate;
   pointer-events: all;
   max-height: var(--max-height);
 }

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 {

components/PlayerSlot.vue

@@ -258,10 +258,7 @@ function boardCardClick(cardUUID: string) {
 }
 
 #turn_buttons {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
+  grid-area: turn_buttons;
 }
 
 #end_turn {
@@ -273,32 +270,6 @@ function boardCardClick(cardUUID: string) {
   visibility: hidden;
 }
 
-.stack,
-.discard,
-.cards_container {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  flex-wrap: wrap-reverse;
-}
-
-.stack {
-  grid-area: stack;
-  margin-left: 75px;
-}
-
-.discard {
-  margin-top: 40px;
-  grid-area: discard;
-  justify-content: start;
-  cursor: pointer;
-  pointer-events: none;
-  margin-left: 75px;
-}
-
-.discard.invisible {
-  visibility: hidden;
-}
 
 .player {
   display: grid;
@@ -307,12 +278,20 @@ function boardCardClick(cardUUID: string) {
   /* border-top: 5px solid black; */
   grid-template-areas:
     "player_stats"
-    "player";
+    "player"
+    "turn_buttons";
+  justify-items: center;
   transition: all 1s;
+
 }
 
 #current_player_board {
   grid-area: player;
+  display:flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 1200px;
 }
 
 .damage_button {