feat: add animations

zAlweNy26 · Dec 27, 2024 · 467fc9a · 467fc9a
1 parent 0a0626e
commit 467fc9a
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 9 deletions.
diff --git a/app/pages/board.vue b/app/pages/board.vue
@@ -107,7 +107,7 @@ const extractNumber = () => {
 	<section class="flex max-w-6xl mx-auto gap-8 text-center items-stretch grow flex-col">
 		<GameHeader :remaining />
 		<div class="flex flex-col items-center w-full gap-8 justify-evenly grow md:flex-row">
-			<div class="flex flex-col items-center justify-center gap-8">
+			<div v-auto-animate class="flex flex-col items-center justify-center gap-8">
 				<NuFormField :label="$t('board.prize')" size="xl" :ui="{ label: 'space-x-1' }">
 					<NuInputNumber v-model="totalPrize" :min="0.1" :step="0.1" />
 					<template #label="{ label }">

diff --git a/app/pages/cards.vue b/app/pages/cards.vue
@@ -72,7 +72,7 @@ const checkNumber = (num: number, check = true) => {
 </script>
 
 <template>
-	<section class="flex max-w-6xl mx-auto gap-8 text-center items-stretch grow flex-col">
+	<section v-auto-animate class="flex max-w-6xl mx-auto gap-8 text-center items-stretch grow flex-col">
 		<GameHeader :remaining>
 			<template #title>
 				<i18n-t keypath="cards.quantity" tag="span" :plural="amount">
@@ -82,7 +82,7 @@ const checkNumber = (num: number, check = true) => {
 		</GameHeader>
 		<div v-if="lastExtractions.length > 0" class="space-y-2">
 			<p>{{ $t('board.extractions', [lastExtractions.length]) }}</p>
-			<div class="flex flex-wrap gap-4 items-center justify-center">
+			<div v-auto-animate class="flex flex-wrap gap-4 items-center justify-center">
 				<div v-for="num in lastExtractions" :key="num"
 					class="grid place-content-center size-8 transition-colors border-2 bg-[var(--ui-primary)] border-none text-[var(--ui-bg)] rounded-full sm:size-10 md:size-12">
 					<p class="text-sm font-bold sm:text-lg">

diff --git a/bun.lockb b/bun.lockb
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -9,16 +9,17 @@ export default defineNuxtConfig({
   },
 
   modules: [
-    "@nuxt/ui",
-    "@nuxt/eslint",
-    "@vueuse/nuxt",
     "nuxt-lodash",
+    '@nuxthub/core',
+    '@formkit/auto-animate/nuxt',
+    "@vueuse/nuxt",
+    '@vite-pwa/nuxt',
     "@pinia/nuxt",
+    "@nuxt/ui",
+    "@nuxt/eslint",
+    "@nuxt/image",
     "@nuxtjs/i18n",
     "@nuxtjs/seo",
-    "@nuxt/image",
-    '@vite-pwa/nuxt',
-    '@nuxthub/core'
   ],
 
   css: ['~/assets/main.css'],

diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "lint:fix": "eslint --cache --fix ."
   },
   "dependencies": {
+    "@formkit/auto-animate": "^0.8.2",
     "@iconify-json/lucide": "^1.2.16",
     "@nuxt/image": "1.8.1",
     "@nuxt/ui": "3.0.0-alpha.9",