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

handling dynamic results content

Browse Source
This commit is contained in:
Antoine M 2024-05-07 11:49:33 +02:00
parent 801b47ccee
commit f92e58c36a
1 changed files with 33 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/results/ResultsModals.jsx
View File

@ -1,6 +1,7 @@
import React, { useState } from "react";
import Lottie from "lottie-react";
import { useNavigate } from "react-router-dom";
import Loading from "../animations/Loading";
import Modal from "../../components/ui/Modal.jsx";
import cup from "../../assets/img/illustrations/cup.svg";
@ -9,11 +10,18 @@ import celebrationConfettis from "../../assets/animations/trophee-confettis.json
import celebrationConfettisFixe from "../../assets/animations/trophee-confettis-fixe.json";
import sucessIcon from "../../assets/img/icons/behaviour-type-success.svg";
import modalBackground from "../../assets/img/shapes-background/modal-background.svg";
import { useUser } from "../../hooks/useUser.jsx";
export default function ResultsModals({ resultsDatas }) {
const navigate = useNavigate();
const { screensTranslations } = useUser();
const [isModalOpen, setIsModalOpen] = useState(true);
if (!screensTranslations || !screensTranslations.game_results) return <Loading />;
const currentScreenTranslations = screensTranslations.game_results;
console.log(currentScreenTranslations);
if (!resultsDatas) return navigate("/home");
const { gameStats, contextGameDatas } = resultsDatas;
@ -22,8 +30,29 @@ export default function ResultsModals({ resultsDatas }) {
setIsModalOpen(false);
navigate("/rating");
}
function getResultsDetails() {
if (isNaN(gameStats.level_score)) return;
if (gameStats.level_score_range === "perfect")
return {
title: currentScreenTranslations.perfect_title,
text: currentScreenTranslations.perfect_text,
motivation_line: currentScreenTranslations.perfect_motivation_line,
};
if (gameStats.level_score_range === "congrats")
return {
title: currentScreenTranslations.congrats_title,
text: currentScreenTranslations.congrats_text,
motivation_line: currentScreenTranslations.congrats_motivation_line,
};
console.log("resultsDatas", resultsDatas);
return {
title: currentScreenTranslations.attention_title,
text: currentScreenTranslations.attention_text,
motivation_line: currentScreenTranslations.attention_motivation_line,
};
}
let resultsDetails = getResultsDetails();
return (
<Modal className='results-modal' open={isModalOpen} onClose={goRating}>
@ -41,7 +70,7 @@ export default function ResultsModals({ resultsDatas }) {
autoplay
/>
<h1 className='titling-construction '>Rapport de sécurité</h1>
<h2>Félicitations !</h2>
<h2>{resultsDetails.title}</h2>
<div className='visual-results'>
<img className='visual-results__cup' src={cup} alt='' />
<div className='visual-results__score'>
@ -49,10 +78,8 @@ export default function ResultsModals({ resultsDatas }) {
<img className='succes-indicator' src={sucessIcon} alt='' />
</div>
</div>
<p className='results-explanation'>
Un accident est vite arrivé si nous n'y prêtons pas attention. N'oublions pas
que ce jeu reflète la réalité de notre environnement de travail.
</p>
<p className='results-explanation'>{resultsDetails.text}</p>
<p className='motivation-line'>{resultsDetails.motivation_line}</p>
<button
className='cta cta--construction cta--round cta--button-icon cta--home'
onClick={goRating}></button>