From 75b114d66d5f048da8beb4fe9b08943884fcd418 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 12 Aug 2025 10:50:47 -0600
Subject: [PATCH] se animan desde el primer momento

---
 client/src/components/RoomsTable.vue      | 12 +++----
 client/src/views/games/AnimatedNumber.vue | 44 +++++++++++++++--------
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/client/src/components/RoomsTable.vue b/client/src/components/RoomsTable.vue
index a61ff5f..8ecdcb5 100644
--- a/client/src/components/RoomsTable.vue
+++ b/client/src/components/RoomsTable.vue
@@ -57,9 +57,9 @@
                   {{ getRoomDetails(room.roomId).players[0].name }}
                 </div>
                 <div class="token-summary">
-                  <span class="token pavo">🦃 <AnimatedNumber :value="getRoomDetails(room.roomId).players[0].pavoTokens || 0" :duration-ms="800" /></span>
-                  <span class="token elote">🌽 <AnimatedNumber :value="getRoomDetails(room.roomId).players[0].eloteTokens || 0" :duration-ms="800" /></span>
-                  <span class="token shame">😳 <AnimatedNumber :value="getRoomDetails(room.roomId).players[0].shameTokens || 0" :duration-ms="800" /></span>
+                  <span class="token pavo">🦃 <AnimatedNumber :value="getRoomDetails(room.roomId).players[0].pavoTokens || 0" :duration-ms="800" :animate-on-mount="true" /></span>
+                  <span class="token elote">🌽 <AnimatedNumber :value="getRoomDetails(room.roomId).players[0].eloteTokens || 0" :duration-ms="800" :animate-on-mount="true" /></span>
+                  <span class="token shame">😳 <AnimatedNumber :value="getRoomDetails(room.roomId).players[0].shameTokens || 0" :duration-ms="800" :animate-on-mount="true" /></span>
                 </div>
               </div>
               <div v-else class="no-data">-</div>
@@ -73,9 +73,9 @@
                   {{ getRoomDetails(room.roomId).players[1].name }}
                 </div>
                 <div class="token-summary">
-                  <span class="token pavo">🦃 <AnimatedNumber :value="getRoomDetails(room.roomId).players[1].pavoTokens || 0" :duration-ms="800" /></span>
-                  <span class="token elote">🌽 <AnimatedNumber :value="getRoomDetails(room.roomId).players[1].eloteTokens || 0" :duration-ms="800" /></span>
-                  <span class="token shame">😳 <AnimatedNumber :value="getRoomDetails(room.roomId).players[1].shameTokens || 0" :duration-ms="800" /></span>
+                  <span class="token pavo">🦃 <AnimatedNumber :value="getRoomDetails(room.roomId).players[1].pavoTokens || 0" :duration-ms="800" :animate-on-mount="true" /></span>
+                  <span class="token elote">🌽 <AnimatedNumber :value="getRoomDetails(room.roomId).players[1].eloteTokens || 0" :duration-ms="800" :animate-on-mount="true" /></span>
+                  <span class="token shame">😳 <AnimatedNumber :value="getRoomDetails(room.roomId).players[1].shameTokens || 0" :duration-ms="800" :animate-on-mount="true" /></span>
                 </div>
               </div>
               <div v-else class="no-data">-</div>
diff --git a/client/src/views/games/AnimatedNumber.vue b/client/src/views/games/AnimatedNumber.vue
index 5bf132d..5b5de7d 100644
--- a/client/src/views/games/AnimatedNumber.vue
+++ b/client/src/views/games/AnimatedNumber.vue
@@ -11,10 +11,10 @@
 <script setup lang="ts">
 import { ref, watch, nextTick, onMounted } from 'vue';
 
-const props = defineProps<{ value: number; durationMs?: number; pulseOnFirst?: boolean }>();
+const props = defineProps<{ value: number; durationMs?: number; pulseOnFirst?: boolean; animateOnMount?: boolean }>();
 
-const prev = ref<number>(props.value ?? 0);
-const display = ref<number>(props.value ?? 0);
+const prev = ref<number>(props.animateOnMount ? 0 : (props.value ?? 0));
+const display = ref<number>(props.animateOnMount ? 0 : (props.value ?? 0));
 const animating = ref(false);
 const running = ref(false);
 const dir = ref<'inc' | 'dec'>('inc');
@@ -22,19 +22,12 @@ const dir = ref<'inc' | 'dec'>('inc');
 const pulse = ref(false);
 const viewportEl = ref<HTMLElement | null>(null);
 
-onMounted(() => {
-  if (props.pulseOnFirst) {
-    pulse.value = true;
-    setTimeout(() => { pulse.value = false; }, 600);
-  }
-});
-
-watch(() => props.value, async (nv, ov) => {
-  if (nv === ov) return;
+async function animateToValue(newValue: number, oldValue: number) {
+  if (newValue === oldValue) return;
   const d = (props.durationMs ?? 1500);
-  dir.value = nv > prev.value ? 'inc' : 'dec';
+  dir.value = newValue > oldValue ? 'inc' : 'dec';
   // Setup animation
-  display.value = nv;
+  display.value = newValue;
   animating.value = true;
   running.value = false;
   await nextTick();
@@ -43,11 +36,32 @@ watch(() => props.value, async (nv, ov) => {
     running.value = true;
     setTimeout(() => {
       // End animation
-      prev.value = nv;
+      prev.value = newValue;
       animating.value = false;
       running.value = false;
     }, d);
   });
+}
+
+onMounted(async () => {
+  if (props.pulseOnFirst) {
+    pulse.value = true;
+    setTimeout(() => { pulse.value = false; }, 600);
+  }
+  
+  // Animate from 0 to initial value if animateOnMount is true
+  if (props.animateOnMount && props.value !== 0) {
+    await nextTick();
+    await animateToValue(props.value, 0);
+  } else if (!props.animateOnMount) {
+    // Set initial values without animation
+    prev.value = props.value ?? 0;
+    display.value = props.value ?? 0;
+  }
+});
+
+watch(() => props.value, async (nv) => {
+  await animateToValue(nv, prev.value);
 });
 </script>