refactoring pages with animatedComponent
This commit is contained in:
parent
5f40fb6b89
commit
009178a9cf
44
src/pages/Country.jsx
Normal file
44
src/pages/Country.jsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import React from "react";
|
||||
import CountrySelect from "../components/ui/CountrySelect";
|
||||
import Menu from "../components/ui/Menu";
|
||||
import { motion } from "framer-motion";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
|
||||
// import screensTranslations from "../data/screensTranslations.json";
|
||||
import { useUser } from "../hooks/useUser";
|
||||
|
||||
export default function Country() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const { language, screensTranslations } = useUser();
|
||||
|
||||
if (!screensTranslations || !screensTranslations.country) return <p>loading</p>;
|
||||
const currentScreenTranslations = screensTranslations.country;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className='page-container page-container--profile page-container-has-screen'
|
||||
initial={{ x: "50%", opacity: 0.7 }}
|
||||
animate={{ x: "0%", opacity: 1 }}
|
||||
exit={{ x: "-100%", opacity: 1 }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}>
|
||||
<div className='screen screen--profile'>
|
||||
<Menu />
|
||||
<section className='screen__content'>
|
||||
<h1 className='titling-construction'>{currentScreenTranslations.profile}</h1>
|
||||
<h2 className='screen-subtitle '>{currentScreenTranslations.iam}...</h2>
|
||||
|
||||
<CountrySelect label={currentScreenTranslations.country_label} />
|
||||
<button
|
||||
className='cta cta--construction cta--round cta--button-icon cta--next '
|
||||
onClick={() => {
|
||||
navigate("/play", {
|
||||
state: { previousUrl: location.pathame, isNext: true },
|
||||
});
|
||||
}}></button>
|
||||
</section>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
|
@ -9,11 +9,12 @@ import GameContainer from "../components/game/GameContainer.jsx";
|
|||
import Tutorial from "../components/game/Tutorial.jsx";
|
||||
import Logo from "../components/ui/Logo.jsx";
|
||||
import GameModal from "../components/game/GameModal.jsx";
|
||||
import AnimatedPage from "../components/AnimatedPage.jsx";
|
||||
|
||||
export default function Game() {
|
||||
return (
|
||||
<>
|
||||
<div className='page-container page-container--play'>
|
||||
<AnimatedPage className='page-container page-container--play'>
|
||||
<GameContextProvider>
|
||||
<div className='screen'>
|
||||
<Logo />
|
||||
|
|
@ -23,7 +24,7 @@ export default function Game() {
|
|||
<GameContainer gameId={"latest"} />
|
||||
</div>
|
||||
</GameContextProvider>
|
||||
</div>
|
||||
</AnimatedPage>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,28 @@ import coverWorker from "../assets/img/cover_worker.svg";
|
|||
import screenWorker1 from "../assets/img/screen_worker_1.svg";
|
||||
import screenWorker2 from "../assets/img/screen_worker_2.svg";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import AnimatedPage from "../components/AnimatedPage";
|
||||
// import screensTranslations from "../data/screensTranslations.json";
|
||||
import { useUser } from "../hooks/useUser";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function Home() {
|
||||
const welcomeScreenDatas = useWordpressCustomData("/screen/welcome");
|
||||
const { language, screensTranslations } = useUser();
|
||||
|
||||
if (!screensTranslations || !screensTranslations.home) return <p>loading</p>;
|
||||
const currentScreenTranslations = screensTranslations.home;
|
||||
|
||||
if (!welcomeScreenDatas) {
|
||||
return <div>Chargement...</div>;
|
||||
}
|
||||
return (
|
||||
<div className='page-container page-container--home'>
|
||||
<AnimatedPage className='page-container page-container--home'>
|
||||
<div className='screen screen--home'>
|
||||
<Menu />
|
||||
<section className='screen__content'>
|
||||
<img className='cover_worker' src={coverWorker} alt='' />
|
||||
<h1 className='application_title'>{welcomeScreenDatas.applicationTitle}</h1>
|
||||
<h2 className='application_subtitle'>
|
||||
{welcomeScreenDatas.applicationSubtitle}
|
||||
</h2>
|
||||
<h1 className='application_title'>stay safe</h1>
|
||||
<h2 className='application_subtitle'>interactive</h2>
|
||||
<p className='application_description'>
|
||||
{welcomeScreenDatas.applicationDescription}
|
||||
{currentScreenTranslations.app_description}
|
||||
</p>
|
||||
<Link
|
||||
to='/select-profile'
|
||||
|
|
@ -33,6 +35,6 @@ export default function Home() {
|
|||
<img className='screen_worker_1' src={screenWorker1} alt='' />
|
||||
<img className='screen_worker_2' src={screenWorker2} alt='' />
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedPage>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,56 +1,93 @@
|
|||
import React from "react";
|
||||
import Menu from "../components/ui/Menu";
|
||||
import CountrySelect from "../components/ui/CountrySelect";
|
||||
import ProfileSelect from "../components/ui/ProfileSelect";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useWordpressCustomData } from "../services/WordpressFetchData";
|
||||
import { motion } from "framer-motion";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import { useUser } from "../hooks/useUser";
|
||||
// import screensTranslations from "../data/screensTranslations.json";
|
||||
|
||||
import lhoistEmployee from "../assets/img/profiles/lhoist-employee.svg";
|
||||
import subcontractorEmployee from "../assets/img/profiles/subcontractor-employee.svg";
|
||||
import driver from "../assets/img/profiles/driver.svg";
|
||||
import civilian from "../assets/img/profiles/civilian.svg";
|
||||
|
||||
import AnimatedPage from "../components/AnimatedPage";
|
||||
export default function Profile() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const profileScreenDatas = useWordpressCustomData("/screen/profile");
|
||||
// const { language } = useUserContext();
|
||||
const { profile, changeProfile } = useUser();
|
||||
|
||||
if (!profileScreenDatas) {
|
||||
return <div>Chargement...</div>;
|
||||
const { language, screensTranslations } = useUser();
|
||||
|
||||
if (!screensTranslations || !screensTranslations.profile) return <p>loading</p>;
|
||||
const currentScreenTranslations = screensTranslations.profile;
|
||||
|
||||
function handleChangeProfile(e) {
|
||||
changeProfile(e.target.getAttribute("value"));
|
||||
}
|
||||
|
||||
const { profileScreenTitle, profileOptions, profileSelectTitle, profileCountrySelectTitle } =
|
||||
profileScreenDatas;
|
||||
// console.log(profileScreenDatas);
|
||||
|
||||
return (
|
||||
<div className='page-container page-container--profile page-container-has-screen'>
|
||||
{/* <button onClick={test}>test</button> */}
|
||||
<div className='screen screen--home'>
|
||||
<AnimatedPage className='page-container page-container--profile page-container-has-screen'>
|
||||
<div className='screen screen--profile'>
|
||||
<Menu />
|
||||
<section className='screen__content'>
|
||||
<h1>{profileScreenTitle}</h1>
|
||||
<div className='profile'>
|
||||
<h2>{profileSelectTitle}</h2>
|
||||
<ProfileSelect options={profileOptions} />
|
||||
</div>
|
||||
<div className='country'>
|
||||
<h2>{profileCountrySelectTitle}</h2>
|
||||
<CountrySelect />
|
||||
</div>
|
||||
<h1 className='titling-construction'>{currentScreenTranslations.profile}</h1>
|
||||
<h2 className='screen-subtitle '>{currentScreenTranslations.iam}...</h2>
|
||||
|
||||
{/* <Link
|
||||
to='/play'
|
||||
className='cta cta--construction cta--round cta--button-icon cta--next '
|
||||
/> */}
|
||||
<ul className='profile-select'>
|
||||
<li
|
||||
className='profile-select__profile-type'
|
||||
value='civilian'
|
||||
is-current={profile === "civilian" ? "true" : ""}
|
||||
onClick={handleChangeProfile}>
|
||||
<img src={civilian} alt='' />
|
||||
<h3 className='titling-construction'>
|
||||
{currentScreenTranslations.profiles.civilian}
|
||||
</h3>
|
||||
</li>
|
||||
<li
|
||||
className='profile-select__profile-type'
|
||||
value='driver'
|
||||
is-current={profile === "driver" ? "true" : ""}
|
||||
onClick={handleChangeProfile}>
|
||||
<img src={driver} alt='' />
|
||||
<h3 className='titling-construction'>
|
||||
{currentScreenTranslations.profiles.driver}
|
||||
</h3>
|
||||
</li>
|
||||
<li
|
||||
className='profile-select__profile-type'
|
||||
value='lhoist_employee'
|
||||
is-current={profile === "lhoist_employee" ? "true" : ""}
|
||||
onClick={handleChangeProfile}>
|
||||
<img src={lhoistEmployee} alt='' />
|
||||
<h3 className='titling-construction'>
|
||||
{currentScreenTranslations.profiles.lhoist_employee}
|
||||
</h3>
|
||||
</li>
|
||||
<li
|
||||
className='profile-select__profile-type'
|
||||
value='subcontractor_employee'
|
||||
is-current={profile === "subcontractor_employee" ? "true" : ""}
|
||||
onClick={handleChangeProfile}>
|
||||
<img src={subcontractorEmployee} alt='' />
|
||||
<h3 className='titling-construction'>
|
||||
{
|
||||
currentScreenTranslations.profiles
|
||||
.subcontractor_employee
|
||||
}
|
||||
</h3>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 1.2 }}
|
||||
<button
|
||||
className='cta cta--construction cta--round cta--button-icon cta--next '
|
||||
onClick={() => {
|
||||
navigate("/play");
|
||||
}}></motion.button>
|
||||
navigate("/select-country");
|
||||
}}></button>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedPage>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,22 +2,25 @@ 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";
|
||||
|
||||
export default function Results() {
|
||||
const { language } = useLanguage();
|
||||
|
||||
const { language, screenTranslations } = useUser();
|
||||
if (!screenTranslations) return <p>loading</p>;
|
||||
|
||||
function addPost(language) {
|
||||
postGameStatisticsData("/statistics/post", "BE");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='page-container page-container--test'>
|
||||
<AnimatedPage className='page-container page-container--test'>
|
||||
<div className='screen screen--test'>
|
||||
<Menu />
|
||||
<div id='screen-container'>
|
||||
<button onClick={() => addPost(language)}>Finish the game</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedPage>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user