Antoine/lhoist-stay-safe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

introducing tutorials

Browse Source
This commit is contained in:
Antoine M 2024-02-21 11:05:01 +01:00
parent 00da8a0ca1
commit e62a07c25e
4 changed files with 195 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/tutorials/MoveAround.jsx Normal file
View File

@ -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>
);
}

58
src/components/tutorials/PointsAndTime.jsx Normal file
View File

@ -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>
);
}

37
src/components/tutorials/Tutorials.jsx Normal file
View File

@ -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>
);
}

52
src/components/tutorials/Walkthrough.jsx Normal file
View File

@ -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>
);
}