updating ui translations

This commit is contained in:
Antoine M 2024-03-14 11:13:59 +01:00
parent 2381e218bb
commit b19b502a83
7 changed files with 26 additions and 2 deletions

View File

@ -10,6 +10,7 @@ export default function MoveAround({ setNextSlide }) {
if (!screensTranslations || !screensTranslations.tutorial) return <Loading />;
const currentScreenTranslations = screensTranslations.tutorial;
const uiTranslations = screensTranslations.ui;
const animationParameters = {
initial: { x: "100%", opacity: 0 },
@ -31,6 +32,7 @@ export default function MoveAround({ setNextSlide }) {
<p className='explanation'>{currentScreenTranslations.move_around_description}</p>
<div className='tutorial-container__slides-controls'>
<button
title={uiTranslations.next}
className='cta cta--construction cta--round cta--button-icon cta--next'
onClick={setNextSlide}></button>
</div>

View File

@ -14,6 +14,7 @@ export default function PointsAndTime({ setNextSlide, setPreviousSlide, startGam
if (!screensTranslations || !screensTranslations.tutorial) return <Loading />;
const currentScreenTranslations = screensTranslations.tutorial;
const uiTranslations = screensTranslations.ui;
const animationParameters = {
initial: { x: "100%", opacity: 0 },
@ -36,9 +37,11 @@ export default function PointsAndTime({ setNextSlide, setPreviousSlide, startGam
<p className='explanation'>{currentScreenTranslations.points_and_time_description}</p>
<div className='tutorial-container__slides-controls'>
<button
title={uiTranslations.previous}
className='cta cta--construction cta--round cta--button-icon cta--previous'
onClick={setPreviousSlide}></button>
<button
title={uiTranslations.start}
className='cta cta--construction cta--round cta--button-icon cta--play'
onClick={() => {
startGame();

View File

@ -11,6 +11,7 @@ export default function Walkthrough({ setNextSlide, setPreviousSlide }) {
if (!screensTranslations || !screensTranslations.tutorial) return <Loading />;
const currentScreenTranslations = screensTranslations.tutorial;
const uiTranslations = screensTranslations.ui;
const animationParameters = {
initial: { x: "100%", opacity: 0 },
@ -32,9 +33,11 @@ export default function Walkthrough({ setNextSlide, setPreviousSlide }) {
<p className='explanation'>{currentScreenTranslations.walkthrough_description}</p>
<div className='tutorial-container__slides-controls'>
<button
title={uiTranslations.previous}
className='cta cta--construction cta--round cta--button-icon cta--previous'
onClick={setPreviousSlide}></button>
<button
title={uiTranslations.next}
className='cta cta--construction cta--round cta--button-icon cta--next'
onClick={setNextSlide}></button>
</div>

View File

@ -9,7 +9,11 @@ import Logo from "./Logo.jsx";
export default function Nav() {
let location = useLocation();
const { language, changeLanguage } = useUser();
const { language, screensTranslations } = useUser();
const uiTranslations = screensTranslations.ui;
const [isMenuOpen, setIsMenuOpen] = useState(false);
const handleMenuOpen = () => {
@ -34,11 +38,17 @@ export default function Nav() {
animate: { y: "0" },
exit: { y: "-100%" },
};
if (!screensTranslations || !screensTranslations) return <p>loading</p>;
return (
<nav className='main-menu'>
<Logo />
<LanguageSelect />
<button className='nav-menu-toggle cta cta--button cta--button-icon' onClick={handleMenuOpen}>
<button
title={uiTranslations.openMenu}
className='nav-menu-toggle cta cta--button cta--button-icon'
onClick={handleMenuOpen}>
<img className='' src={menuToggleIcon} alt='' />
</button>
{isMenuOpen && (
@ -51,6 +61,7 @@ export default function Nav() {
exit={animationParameters.exit}
transition={{ duration: 0.4, ease: "easeOut" }}>
<button
title={uiTranslations.closeMenu}
className='cta cta--construction cta--button-icon cta--close'
onClick={handleMenuOpen}></button>

View File

@ -15,6 +15,7 @@ export default function Country() {
if (!screensTranslations || !screensTranslations.country) return <p>loading</p>;
const currentScreenTranslations = screensTranslations.country;
const uiTranslations = screensTranslations.ui;
return (
<motion.div
@ -32,6 +33,7 @@ export default function Country() {
<CountrySelect label={currentScreenTranslations.country_label} />
<button
className='cta cta--construction cta--round cta--button-icon cta--next '
title={uiTranslations.next}
onClick={() => {
navigate("/play", {
state: { previousUrl: location.pathame, isNext: true },

View File

@ -20,6 +20,7 @@ export default function Profile() {
if (!screensTranslations || !screensTranslations.profile) return <Loading />;
const currentScreenTranslations = screensTranslations.profile;
const uiTranslations = screensTranslations.ui;
function handleChangeProfile(e) {
changeProfile(e.target.getAttribute("value"));
@ -81,6 +82,7 @@ export default function Profile() {
<button
className='cta cta--construction cta--round cta--button-icon cta--next '
title={uiTranslations.next}
onClick={() => {
navigate("/select-country");
}}></button>

View File

@ -22,6 +22,7 @@ export default function Welcome() {
<LanguageSelect />
<Link
to='/Home'
title={currentScreenTranslations.enter}
className='cta cta--construction cta--lhoist cta--button-icon cta--start'>
<span>{currentScreenTranslations.enter}</span>
</Link>