nucleo000/snatchgame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

se animan desde el primer momento

Browse Source
This commit is contained in:
josedario87
2025-08-12 10:50:47 -06:00
parent 93661a8e8b
commit 75b114d66d
2 changed files with 35 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/components/RoomsTable.vue
View File

@@ -57,9 +57,9 @@
{{ getRoomDetails(room.roomId).players[0].name }} {{ getRoomDetails(room.roomId).players[0].name }}
</div> </div>
<div class="token-summary"> <div class="token-summary">
<span class="token pavo">🦃 <AnimatedNumber :value="getRoomDetails(room.roomId).players[0].pavoTokens || 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" /></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" /></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> </div>
<div v-else class="no-data">-</div> <div v-else class="no-data">-</div>
@@ -73,9 +73,9 @@
{{ getRoomDetails(room.roomId).players[1].name }} {{ getRoomDetails(room.roomId).players[1].name }}
</div> </div>
<div class="token-summary"> <div class="token-summary">
<span class="token pavo">🦃 <AnimatedNumber :value="getRoomDetails(room.roomId).players[1].pavoTokens || 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" /></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" /></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> </div>
<div v-else class="no-data">-</div> <div v-else class="no-data">-</div>

44
client/src/views/games/AnimatedNumber.vue
View File

@@ -11,10 +11,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, nextTick, onMounted } from 'vue'; 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 prev = ref<number>(props.animateOnMount ? 0 : (props.value ?? 0));
const display = ref<number>(props.value ?? 0); const display = ref<number>(props.animateOnMount ? 0 : (props.value ?? 0));
const animating = ref(false); const animating = ref(false);
const running = ref(false); const running = ref(false);
const dir = ref<'inc' | 'dec'>('inc'); const dir = ref<'inc' | 'dec'>('inc');
@@ -22,19 +22,12 @@ const dir = ref<'inc' | 'dec'>('inc');
const pulse = ref(false); const pulse = ref(false);
const viewportEl = ref<HTMLElement | null>(null); const viewportEl = ref<HTMLElement | null>(null);
onMounted(() => { async function animateToValue(newValue: number, oldValue: number) {
if (props.pulseOnFirst) { if (newValue === oldValue) return;
pulse.value = true;
setTimeout(() => { pulse.value = false; }, 600);
}
});
watch(() => props.value, async (nv, ov) => {
if (nv === ov) return;
const d = (props.durationMs ?? 1500); const d = (props.durationMs ?? 1500);
dir.value = nv > prev.value ? 'inc' : 'dec'; dir.value = newValue > oldValue ? 'inc' : 'dec';
// Setup animation // Setup animation
display.value = nv; display.value = newValue;
animating.value = true; animating.value = true;
running.value = false; running.value = false;
await nextTick(); await nextTick();
@@ -43,11 +36,32 @@ watch(() => props.value, async (nv, ov) => {
running.value = true; running.value = true;
setTimeout(() => { setTimeout(() => {
// End animation // End animation
prev.value = nv; prev.value = newValue;
animating.value = false; animating.value = false;
running.value = false; running.value = false;
}, d); }, 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> </script>