package.json

@@ -5,31 +5,31 @@
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@parcellab/react-use-umami": "^2.0.1",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^16.1.0",
+    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/user-event": "^13.5.0",
-    "@umami/api-client": "^0.76.0",
+    "@umami/api-client": "^0.56.0",
-    "axios": "^1.7.9",
+    "axios": "^1.6.7",
     "cors": "^2.8.5",
-    "dotenv": "^16.4.7",
+    "dotenv": "^16.4.5",
-    "express": "^4.21.2",
+    "express": "^4.18.2",
-    "framer-motion": "^11.16.1",
+    "framer-motion": "^11.0.3",
-    "postcss": "^8.4.49",
+    "lottie-react": "^2.4.0",
+    "postcss": "^8.4.33",
     "postcss-cli": "^11.0.0",
-    "postcss-nested": "^7.0.2",
+    "postcss-nested": "^6.0.1",
-    "react": "^19.0.0",
+    "react": "^18.2.0",
-    "react-dom": "^19.0.0",
+    "react-dom": "^18.2.0",
-    "react-error-boundary": "^5.0.0",
+    "react-error-boundary": "^4.0.13",
-    "react-lottie": "^1.2.10",
+    "react-router-dom": "^6.21.3",
-    "react-router-dom": "^7.1.1",
     "react-scripts": "5.0.1",
     "react-umami": "^1.0.1",
-    "react-zoom-pan-pinch": "^3.6.1",
+    "react-zoom-pan-pinch": "^3.4.2",
-    "sass": "^1.83.1",
+    "sass": "^1.70.0",
-    "swiper": "^11.2.0",
+    "swiper": "^11.0.7",
-    "use-sound": "^4.0.3",
+    "use-sound": "^4.0.1",
-    "uuid": "^11.0.4",
+    "uuid": "^9.0.1",
-    "web-vitals": "^4.2.4"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -58,7 +58,7 @@
     ]
   },
   "devDependencies": {
-    "concurrently": "^9.1.2",
+    "concurrently": "^8.2.2",
-    "tailwindcss": "^3.4.17"
+    "tailwindcss": "^3.4.1"
   }
 }

src/assets/css/components/ui/Loading.scss

@@ -3,24 +3,18 @@
 	width: 100vw;
 	height: 100vh;
 	position: fixed;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	top: 0;
-	// justify-content: center;
-	// align-items: center;
 
 	&__animation {
-		max-width: 50vh;
+		max-width: 100vh;
-		max-height: 50vw;
+		max-height: 100vw;
-		margin: 0 auto;
+		margin: auto;
 		-webkit-transform: scaleX(-1);
 		transform: scaleX(-1);
 		animation: translate 2s infinite linear;
 	}
 
 	&__text {
-		@apply text-7xl tracking-wider text-zuume text-white text-center pt-8;
+		@apply text-7xl tracking-wider text-zuume text-white text-center;
 		transform: translate(0, -50px);
 	}
 }

src/components/animations/Clouds.jsx

@@ -1,20 +1,16 @@
 import React from "react";
 
 import cloudPageTransition from "../../assets/animations/transition-nuages-pages";
-import Lottie from "react-lottie";
+import Lottie from "lottie-react";
 
 export default function Clouds() {
-	const defaultOptions = {
-		loop: true,
-		autoplay: true,
-		animationData: cloudPageTransition,
-		rendererSettings: {
-			preserveAspectRatio: "xMidYMid slice",
-		},
-	};
 	return (
-		<div className='cloud-animation'>
+		<Lottie
-			<Lottie options={defaultOptions} />
+			className='cloud-animation'
-		</div>
+			animationData={cloudPageTransition}
+			speed={21}
+			loop={false}
+			autoplay
+		/>
 	);
 }

src/components/animations/Loading.jsx

@@ -1,7 +1,7 @@
 import React from "react";
-import Lottie from "react-lottie";
+import Lottie from "lottie-react";
-import loadingTruck from "../../assets/animations/chargement-vehicules-boom.json";
 
+import loadingTruck from "../../assets/animations/chargement-vehicules-boom.json";
 import { useUser } from "../../hooks/useUser";
 
 export default function Loading() {
@@ -9,20 +9,9 @@ export default function Loading() {
 
 	if (!screensTranslations || !screensTranslations?.ui?.loading) return;
 
-	const defaultOptions = {
-		loop: true,
-		autoplay: true,
-		animationData: loadingTruck,
-		rendererSettings: {
-			preserveAspectRatio: "xMidYMid slice",
-		},
-	};
-
 	return (
 		<div className='loading'>
-			<div className='loading__animation'>
+			<Lottie className='loading__animation' animationData={loadingTruck} loop autoplay />
-				<Lottie options={defaultOptions} />
-			</div>
 			<p className='loading__text'>{screensTranslations.ui.loading}...</p>
 		</div>
 	);

src/components/animations/test.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Lottie from "lottie-react";
+
+import animationData from "../../assets/animations/test.json";
+
+export default function TestAnimation() {
+	return (
+		<div>
+			<p>salut</p>
+			{/* <Lottie className='renardLoading' animationData={animationData} loop autoplay /> */}
+		</div>
+	);
+}

src/components/results/ResultsModals.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import Lottie from "react-lottie";
+import Lottie from "lottie-react";
 import { useNavigate } from "react-router-dom";
 import Loading from "../animations/Loading";
 
@@ -59,31 +59,18 @@ export default function ResultsModals({ resultsDatas }) {
 	return (
 		<Modal className='results-modal' open={isModalOpen} onClose={goRating}>
 			<div className='modal-content-container game-question-container'>
-				<div className='modal-content-container__celebration'>
 				<Lottie
-						options={{
+					className='modal-content-container__celebration'
-							loop: true,
+					animationData={celebrationConfettis}
-							autoplay: true,
+					loop
-							animationData: celebrationConfettis,
+					autoplay
-							rendererSettings: {
-								preserveAspectRatio: "xMidYMid slice",
-							},
-						}}
 				/>
-				</div>
-				<div className='modal-content-container__celebration-confettis-fixe'>
 				<Lottie
-						options={{
+					className='modal-content-container__celebration-confettis-fixe'
-							loop: false,
+					animationData={celebrationConfettisFixe}
-							autoplay: true,
+					loop={false}
-							animationData: celebrationConfettisFixe,
+					autoplay
-							rendererSettings: {
-								preserveAspectRatio: "xMidYMid slice",
-							},
-						}}
 				/>
-				</div>
-
 				<h1 className='titling-construction '>
 					{currentScreenTranslations.results_screen_title}
 				</h1>

src/components/tutorials/MoveAround.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Lottie from "react-lottie";
+import Lottie from "lottie-react";
 import { motion } from "framer-motion";
 
 import animationDeplacement from "../../assets/animations/ecran-deplacement.json";
@@ -17,12 +17,6 @@ export default function MoveAround({ setNextSlide }) {
 		animate: { x: "0%", opacity: 1 },
 		exit: { x: "-100%", opacity: 0 },
 	};
-
-	const defaultOptions = {
-		loop: true,
-		autoplay: true,
-		animationData: animationDeplacement,
-	};
 	return (
 		<motion.div
 			key='tutorial-move'
@@ -44,9 +38,12 @@ export default function MoveAround({ setNextSlide }) {
 				</div>
 			</div>
 			<div className='modal-content-container__cover'>
-				<div className='tutorial-container__animated-cover'>
+				<Lottie
-					<Lottie options={defaultOptions} />
+					className='tutorial-container__animated-cover'
-				</div>
+					animationData={animationDeplacement}
+					loop
+					autoplay
+				/>
 			</div>
 		</motion.div>
 	);

src/components/tutorials/PointsAndTime.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Lottie from "react-lottie";
+import Lottie from "lottie-react";
 import { motion } from "framer-motion";
 
 import animationPoints from "../../assets/animations/ecran-points.json";
@@ -19,12 +19,6 @@ export default function PointsAndTime({ setNextSlide, setPreviousSlide, startGam
 		exit: { x: "-100%", opacity: 0 },
 	};
 
-	const defaultOptions = {
-		loop: true,
-		autoplay: true,
-		animationData: animationPoints,
-	};
-
 	return (
 		<motion.div
 			key='tutorial-points'
@@ -52,9 +46,12 @@ export default function PointsAndTime({ setNextSlide, setPreviousSlide, startGam
 				</div>
 			</div>
 			<div className='modal-content-container__cover'>
-				<div className='tutorial-container__animated-cover'>
+				<Lottie
-					<Lottie options={defaultOptions} />
+					className='tutorial-container__animated-cover'
-				</div>
+					animationData={animationPoints}
+					loop
+					autoplay
+				/>
 			</div>
 		</motion.div>
 	);

src/components/tutorials/Walkthrough.jsx

@@ -1,8 +1,8 @@
 import React from "react";
-import Lottie from "react-lottie";
+import Lottie from "lottie-react";
 import { motion } from "framer-motion";
 
-import animationDeroulement from "../../assets/animations/ecran-deroulement.json";
+import animationPoints from "../../assets/animations/ecran-deroulement.json";
 import Loading from "../animations/Loading";
 import { useUser } from "../../hooks/useUser";
 
@@ -18,11 +18,6 @@ export default function Walkthrough({ setNextSlide, setPreviousSlide }) {
 		animate: { x: "0%", opacity: 1 },
 		exit: { x: "-100%", opacity: 0 },
 	};
-	const defaultOptions = {
-		loop: true,
-		autoplay: true,
-		animationData: animationDeroulement,
-	};
 	return (
 		<motion.div
 			key='tutorial-walthrought'
@@ -48,9 +43,12 @@ export default function Walkthrough({ setNextSlide, setPreviousSlide }) {
 				</div>
 			</div>
 			<div className='modal-content-container__cover'>
-				<div className='tutorial-container__animated-cover'>
+				<Lottie
-					<Lottie options={defaultOptions} />
+					className='tutorial-container__animated-cover'
-				</div>
+					animationData={animationPoints}
+					loop
+					autoplay
+				/>
 			</div>
 		</motion.div>
 	);

src/pages/About.jsx

@@ -17,6 +17,7 @@ export default function About() {
 			<AnimatedPage className='page-container page-container--about  '>
 				<div className='content-page '>
 					<Nav />
+
 					<Loading />
 				</div>
 			</AnimatedPage>

src/pages/Welcome.jsx

@@ -5,8 +5,7 @@ import { useUser } from "../hooks/useUser";
 import LanguageSelect from "../components/ui/LanguageSelect";
 
 import truckAnimation from "../assets/animations/chargement-vehicules";
-
+import Lottie from "lottie-react";
-import Lottie from "react-lottie";
 import Loading from "../components/animations/Loading";
 
 export default function Welcome() {
@@ -15,21 +14,10 @@ export default function Welcome() {
 	if (!screensTranslations || !screensTranslations.welcome) return <Loading />;
 	const currentScreenTranslations = screensTranslations.welcome;
 
-	const defaultOptions = {
-		loop: true,
-		autoplay: true,
-		animationData: truckAnimation,
-		rendererSettings: {
-			preserveAspectRatio: "xMidYMid slice",
-		},
-	};
-
 	return (
 		<AnimatedPage className='page-container page-container--welcome'>
 			<AppLogoMarkup />
-			<div className='truck-animation'>
+			<Lottie className='truck-animation' animationData={truckAnimation} loop autoplay />
-				<Lottie options={defaultOptions} />
-			</div>
 			<div className='interaction-buttons'>
 				<LanguageSelect />
 				<Link