From 31ae2116acfd78cd722c2630ab5802833a4e81cd Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Wed, 21 Feb 2024 11:04:13 +0100
Subject: [PATCH] introducing component

---
 src/pages/Rating.jsx  | 71 +++++++++++++++++++++++++++++++++++++++++++
 src/pages/Results.jsx | 25 +++++++--------
 src/pages/Welcome.jsx | 33 ++++++++++++++++++++
 3 files changed, 117 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/Rating.jsx
 create mode 100644 src/pages/Welcome.jsx

diff --git a/src/pages/Rating.jsx b/src/pages/Rating.jsx
new file mode 100644
index 0000000..a586374
--- /dev/null
+++ b/src/pages/Rating.jsx
@@ -0,0 +1,71 @@
+import React from "react";
+import AnimatedPage from "../components/AnimatedPage";
+import { Link, useNavigate } from "react-router-dom";
+
+export default function Rate() {
+	const navigate = useNavigate();
+
+	function returnHome() {
+		navigate("/Home");
+	}
+
+	return (
+		<AnimatedPage className='page-container page-container--rating'>
+			<div className='screen '>
+				<div className='screen__content'>
+					<h1 className='titling-construction '>Notes</h1>
+					<h2>merci pour votre participation</h2>
+					<div class='rating'>
+						<div class='rating__items'>
+							<input type='radio' name='stars' id='st5' />
+							<label for='st5'>
+								<div class='star-fill'></div>
+
+								<div
+									class='label-description'
+									data-content='Excellent'></div>
+							</label>
+							<input type='radio' name='stars' id='st4' />
+							<label for='st4'>
+								<div class='star-fill'></div>
+
+								<div
+									class='label-description'
+									data-content='Good'></div>
+							</label>
+							<input type='radio' name='stars' id='st3' />
+							<label for='st3'>
+								<div class='star-fill'></div>
+
+								<div class='label-description' data-content='OK'></div>
+							</label>
+							<input type='radio' name='stars' id='st2' />
+							<label for='st2'>
+								<div class='star-fill'></div>
+
+								<div class='label-description' data-content='Bad'></div>
+							</label>
+							<input type='radio' name='stars' id='st1' />
+							<label for='st1'>
+								<div class='star-fill'></div>
+								<div
+									class='label-description'
+									data-content='Terrible'></div>
+							</label>
+						</div>
+					</div>
+
+					<textarea
+						placeholder="Qu'avez-vous pensé de cette expérience ?"
+						name=''
+						id=''
+						cols='10'
+						rows='2'></textarea>
+					<button
+						className='cta cta--construction cta--round cta--button-icon cta--back'
+						onClick={returnHome}></button>
+				</div>
+			</div>
+		</AnimatedPage>
+	);
+}
diff --git a/src/pages/Results.jsx b/src/pages/Results.jsx
index 03721de..4794586 100644
--- a/src/pages/Results.jsx
+++ b/src/pages/Results.jsx
@@ -1,25 +1,26 @@
 import React from "react";
+
 import Menu from "../components/ui/Menu";
-import { postGameStatisticsData } from "../services/WordpressFetchData";
-import { useLanguage } from "../hooks/useLanguage";
 import AnimatedPage from "../components/AnimatedPage";
 import { useUser } from "../hooks/useUser";
+import { useLocation } from "react-router-dom";
+import ResultsModals from "../components/results/ResultsModals";
 
 export default function Results() {
 	const { language, screenTranslations } = useUser();
-	if (!screenTranslations) return <p>loading</p>;
-	
-	function addPost(language) {
-		postGameStatisticsData("/statistics/post", "BE");
-	}
+	// if (!screenTranslations) return <p>loading</p>;
+
+	let location = useLocation();
+	const { contextGameDatas } = location.state;
 
 	return (
-		<AnimatedPage className='page-container page-container--test'>
-			<div className='screen screen--test'>
+		<AnimatedPage className='page-container page-container--results'>
+			<div
+				className='screen '
+				style={{ backgroundImage: `url("${contextGameDatas.gameBlockDatas.attrs.coverUrl}")` }}>
 				<Menu />
-				<div id='screen-container'>
-					<button onClick={() => addPost(language)}>Finish the game</button>
-				</div>
+				<ResultsModals resultsDatas={location.state} />
+				{/* <div id='screen-container'></div> */}
 			</div>
 		</AnimatedPage>
 	);
diff --git a/src/pages/Welcome.jsx b/src/pages/Welcome.jsx
new file mode 100644
index 0000000..c6092cb
--- /dev/null
+++ b/src/pages/Welcome.jsx
@@ -0,0 +1,33 @@
+import Menu from "../components/ui/Menu";
+
+import { Link } from "react-router-dom";
+import AppLogo from "../components/ui/AppLogo";
+import AnimatedPage from "../components/AnimatedPage";
+import { useUser } from "../hooks/useUser";
+import LanguageSelect from "../components/ui/LanguageSelect";
+
+import truckAnimation from "../assets/animations/chargement-vehicules";
+import Lottie from "lottie-react";
+import Loading from "../components/animations/Loading";
+
+export default function Welcome() {
+	const { language, screensTranslations } = useUser();
+
+	if (!screensTranslations || !screensTranslations.welcome) return <Loading />;
+	const currentScreenTranslations = screensTranslations.welcome;
+
+	return (
+		<AnimatedPage className='page-container page-container--welcome'>
+			<AppLogo />
+			<Lottie className='truck-animation' animationData={truckAnimation} loop autoplay />
+			<div className='interaction-buttons'>
+				<LanguageSelect />
+				<Link
+					to='/Home'
+					className='cta cta--construction cta--lhoist cta--button-icon cta--start'>
+					<span>{currentScreenTranslations.enter}</span>
+				</Link>
+			</div>
+		</AnimatedPage>
+	);
+}