introducing tutorials

src/components/tutorials/MoveAround.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import Lottie from "lottie-react";
+import { motion } from "framer-motion";
+
+import animationDeplacement from "../../assets/animations/ecran-deplacement.json";
+import { useUser } from "../../hooks/useUser";
+import Loading from "../animations/Loading";
+export default function MoveAround({ setNextSlide }) {
+	const { screensTranslations } = useUser();
+
+	if (!screensTranslations || !screensTranslations.tutorial) return <Loading />;
+	const currentScreenTranslations = screensTranslations.tutorial;
+
+	const animationParameters = {
+		initial: { x: "100%", opacity: 0 },
+		animate: { x: "0%", opacity: 1 },
+		exit: { x: "-100%", opacity: 0 },
+	};
+	return (
+		<motion.div
+			key='tutorial-move'
+			className='modal-content-container tutorial-container'
+			initial={animationParameters.initial}
+			animate={animationParameters.animate}
+			exit={animationParameters.exit}
+			transition={{ duration: 0.4, ease: "easeOut" }}>
+			<div className='modal-content-container__content'>
+				<h3 className='titling-construction '>{currentScreenTranslations.how_to_play}</h3>
+				<h2>{currentScreenTranslations.move_around}</h2>
+
+				<p className='explanation'>{currentScreenTranslations.move_around_description}</p>
+				<div className='tutorial-container__slides-controls'>
+					<button
+						className='cta cta--construction cta--round cta--button-icon cta--next'
+						onClick={setNextSlide}></button>
+				</div>
+			</div>
+			<div className='modal-content-container__cover'>
+				<Lottie
+					className='tutorial-container__animated-cover'
+					animationData={animationDeplacement}
+					loop
+					autoplay
+				/>
+			</div>
+		</motion.div>
+	);
+}

src/components/tutorials/PointsAndTime.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import Lottie from "lottie-react";
+import { motion } from "framer-motion";
+
+import animationPoints from "../../assets/animations/ecran-points.json";
+import { useGame } from "../../hooks/useGame";
+import { useUser } from "../../hooks/useUser";
+import Loading from "../animations/Loading";
+
+export default function PointsAndTime({ setNextSlide, setPreviousSlide, startGame }) {
+	const { setHasCheckedTutorial, hasCheckedTutorial } = useGame();
+
+	const { screensTranslations } = useUser();
+
+	if (!screensTranslations || !screensTranslations.tutorial) return <Loading />;
+	const currentScreenTranslations = screensTranslations.tutorial;
+
+	const animationParameters = {
+		initial: { x: "100%", opacity: 0 },
+		animate: { x: "0%", opacity: 1 },
+		exit: { x: "-100%", opacity: 0 },
+	};
+
+	return (
+		<motion.div
+			key='tutorial-points'
+			className='modal-content-container tutorial-container'
+			initial={animationParameters.initial}
+			animate={animationParameters.animate}
+			exit={animationParameters.exit}
+			transition={{ duration: 0.4, ease: "easeOut" }}>
+			<div className='modal-content-container__content'>
+				<h3 className='titling-construction '>{currentScreenTranslations.how_to_play}</h3>
+				<h2>{currentScreenTranslations.points_and_time}</h2>
+
+				<p className='explanation'>{currentScreenTranslations.points_and_time_description}</p>
+				<div className='tutorial-container__slides-controls'>
+					<button
+						className='cta cta--construction cta--round cta--button-icon cta--previous'
+						onClick={setPreviousSlide}></button>
+					<button
+						className='cta cta--construction cta--round cta--button-icon cta--play'
+						onClick={() => {
+							startGame();
+						}}></button>
+				</div>
+			</div>
+			<div className='modal-content-container__cover'>
+				<Lottie
+					className='tutorial-container__animated-cover'
+					animationData={animationPoints}
+					loop
+					autoplay
+				/>
+			</div>
+		</motion.div>
+	);
+}

src/components/tutorials/Tutorials.jsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from "react";
+import Modal from "../ui/Modal.jsx";
+import { useGame } from "../../hooks/useGame.jsx";
+import MoveAround from "./MoveAround.jsx";
+import PointsAndTime from "./PointsAndTime.jsx";
+import Walkthrough from "./Walkthrough.jsx";
+
+export default function Tutorials() {
+	const { hasCheckedTutorial, setHasCheckedTutorial, setIsTimeRuning } = useGame();
+
+	const [activeSlide, setActiveSlide] = useState(0);
+
+	function setNextSlide() {
+		setActiveSlide(activeSlide + 1);
+	}
+	function setPreviousSlide() {
+		setActiveSlide(activeSlide - 1);
+	}
+	function startGame() {
+		setIsTimeRuning(true);
+		setHasCheckedTutorial(true);
+	}
+
+	return (
+		<div>
+			<Modal open={!hasCheckedTutorial} onClose={startGame}>
+				{activeSlide === 0 && <MoveAround setNextSlide={setNextSlide} />}
+				{activeSlide === 1 && (
+					<Walkthrough setNextSlide={setNextSlide} setPreviousSlide={setPreviousSlide} />
+				)}
+				{activeSlide === 2 && (
+					<PointsAndTime setPreviousSlide={setPreviousSlide} startGame={startGame} />
+				)}
+			</Modal>
+		</div>
+	);
+}

src/components/tutorials/Walkthrough.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import Lottie from "lottie-react";
+import { motion } from "framer-motion";
+
+import animationPoints from "../../assets/animations/ecran-deroulement.json";
+import Loading from "../animations/Loading";
+import { useUser } from "../../hooks/useUser";
+
+export default function Walkthrough({ setNextSlide, setPreviousSlide }) {
+	const { screensTranslations } = useUser();
+
+	if (!screensTranslations || !screensTranslations.tutorial) return <Loading />;
+	const currentScreenTranslations = screensTranslations.tutorial;
+
+	const animationParameters = {
+		initial: { x: "100%", opacity: 0 },
+		animate: { x: "0%", opacity: 1 },
+		exit: { x: "-100%", opacity: 0 },
+	};
+	return (
+		<motion.div
+			key='tutorial-walthrought'
+			className='modal-content-container tutorial-container'
+			initial={animationParameters.initial}
+			animate={animationParameters.animate}
+			exit={animationParameters.exit}
+			transition={{ duration: 0.4, ease: "easeOut" }}>
+			<div className='modal-content-container__content'>
+				<h3 className='titling-construction '>{currentScreenTranslations.how_to_play}</h3>
+				<h2>{currentScreenTranslations.walkthrough}</h2>
+
+				<p className='explanation'>{currentScreenTranslations.walkthrough_description}</p>
+				<div className='tutorial-container__slides-controls'>
+					<button
+						className='cta cta--construction cta--round cta--button-icon cta--previous'
+						onClick={setPreviousSlide}></button>
+					<button
+						className='cta cta--construction cta--round cta--button-icon cta--next'
+						onClick={setNextSlide}></button>
+				</div>
+			</div>
+			<div className='modal-content-container__cover'>
+				<Lottie
+					className='tutorial-container__animated-cover'
+					animationData={animationPoints}
+					loop
+					autoplay
+				/>
+			</div>
+		</motion.div>
+	);
+}