pushing bugged code
This commit is contained in:
parent
71421416c4
commit
c72b9a9fe6
|
|
@ -17,6 +17,7 @@ function App() {
|
|||
const location = useLocation();
|
||||
return (
|
||||
<AnimatePresence mode='wait'>
|
||||
|
||||
<Routes location={location} key={location.pathname}>
|
||||
<Route path='/' element={<Welcome />} />
|
||||
<Route path='/home' element={<Home />} />
|
||||
|
|
|
|||
|
|
@ -1,35 +1,36 @@
|
|||
.answer-explanation {
|
||||
@apply p-8 flex gap-x-8;
|
||||
&__type {
|
||||
@apply text-white text-4xl w-fit px-6 py-1;
|
||||
transform: skew(-2deg) rotate(-2deg);
|
||||
&--success,
|
||||
&--success .success-icon {
|
||||
@apply bg-green-600;
|
||||
}
|
||||
&--error,
|
||||
&--error .success-icon {
|
||||
@apply bg-red-400;
|
||||
.answer-explanation-container {
|
||||
.answer-explanation {
|
||||
@apply p-8 flex gap-x-8;
|
||||
&__type {
|
||||
@apply text-white text-4xl w-fit px-6 py-1;
|
||||
transform: skew(-2deg) rotate(-2deg);
|
||||
&--success,
|
||||
&--success .success-icon {
|
||||
@apply bg-green-600;
|
||||
}
|
||||
&--error,
|
||||
&--error .success-icon {
|
||||
@apply bg-red-400;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
@apply w-6 h-6 object-contain object-center absolute top-0 right-0 rounded-full p-2 border-solid border-white border-4;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
@apply w-6 h-6 object-contain object-center absolute top-0 right-0 rounded-full p-2 border-solid border-white border-4;
|
||||
transform: translate(50%, -50%);
|
||||
&__title {
|
||||
@apply text-5xl py-8;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@apply text-5xl py-8;
|
||||
}
|
||||
|
||||
&__cover {
|
||||
@apply w-1/2;
|
||||
img {
|
||||
@apply h-auto object-contain object-center;
|
||||
&__cover {
|
||||
@apply w-1/2;
|
||||
img {
|
||||
@apply h-auto object-contain object-center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.continue-game {
|
||||
@apply absolute bottom-0 left-1/2;
|
||||
translate: -50% 50%;
|
||||
@apply mt-8;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ dialog {
|
|||
|
||||
.modal-content-container {
|
||||
@apply w-full
|
||||
p-8 grid gap-x-8;
|
||||
p-8 px-24 grid gap-x-8;
|
||||
@apply pt-28 pb-16;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -92,4 +92,8 @@
|
|||
.cta--back {
|
||||
@apply mt-3 mx-auto;
|
||||
}
|
||||
.cta--back[disabled] {
|
||||
@apply bg-slate-300;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
&__celebration-confettis-fixe {
|
||||
@apply absolute top-0 left-0 z-10 w-full;
|
||||
|
||||
pointer-events: none;
|
||||
// svg > g {
|
||||
// @apply bg-purple-900 opacity-100 w-full;
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { motion } from "framer-motion";
|
|||
|
||||
export default function AnimatedPage({ children, className }) {
|
||||
const location = useLocation();
|
||||
|
||||
|
||||
const isNext = location.state && location.state.isNext;
|
||||
const isPrev = location.state && location.state.isPrev;
|
||||
const isGoingNext = location.state && location.state.isGoingNext;
|
||||
|
|
@ -39,6 +39,7 @@ export default function AnimatedPage({ children, className }) {
|
|||
exit={animationParameters.exit}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}>
|
||||
{children}
|
||||
<p>qsqsdds</p>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default function GameAnwerExplanation({ questionId }) {
|
|||
contextGameDatas.gameObjects[questionId].attrs.objectBehaviourDescription ??
|
||||
"Pas d'explication pour cette question";
|
||||
const objectPictureUrl = contextGameDatas.gameObjects[questionId].attrs.objectPictureUrl;
|
||||
console.log(answer);
|
||||
|
||||
return (
|
||||
<div className='modal-content-container answer-explanation-container'>
|
||||
<div className='modal-content-container__content'>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { useState } from "react";
|
|||
import { useUser } from "../../hooks/useUser";
|
||||
|
||||
export default function LanguageSelect() {
|
||||
const { language, setLanguage, screensTranslations } = useUser();
|
||||
const { language, changeUserLanguage, screensTranslations } = useUser();
|
||||
const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
|
||||
|
||||
if (!screensTranslations || !screensTranslations.ui) return <p>loading translations…</p>;
|
||||
|
|
@ -14,7 +14,7 @@ export default function LanguageSelect() {
|
|||
|
||||
function chooseLanguage(lang) {
|
||||
setIsSubmenuOpen(false);
|
||||
setLanguage(lang);
|
||||
changeUserLanguage(lang);
|
||||
}
|
||||
|
||||
const supportedLanguages = ["FR", "EN", "ES", "PT", "DE", "DA", "FI", "PL", "CS", "SK", "MY"];
|
||||
|
|
|
|||
|
|
@ -2,22 +2,23 @@ import { NavLink } from "react-router-dom";
|
|||
import { useLocation } from "react-router-dom";
|
||||
import { useUser } from "../../hooks/useUser";
|
||||
import LanguageSelect from "./LanguageSelect";
|
||||
export default function Menu() {
|
||||
export default function Nav() {
|
||||
let location = useLocation();
|
||||
const { language, changeLanguage } = useUser();
|
||||
|
||||
return (
|
||||
<nav className='main-menu'>
|
||||
<ul className='navlist'>
|
||||
{/* <ul className='navlist'>
|
||||
<NavLink to='/'>Welcome</NavLink>
|
||||
<NavLink to='/Home'>Home</NavLink>
|
||||
<NavLink to='/select-profile'>Profile</NavLink>
|
||||
<NavLink to='/select-country'>Country</NavLink>
|
||||
<NavLink to='/play'>Play</NavLink>
|
||||
<NavLink to='/results'>Results</NavLink>
|
||||
</ul>
|
||||
</ul> */}
|
||||
|
||||
<LanguageSelect />
|
||||
<Nav />
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,17 @@ import CountriesJSON from "../data/countries/countries.json";
|
|||
export const UserContext = createContext();
|
||||
|
||||
export function UserContextProvider({ children }) {
|
||||
const [language, setLanguage] = useState("FR");
|
||||
const [country, setCountry] = useState({ name: "belgique", iso: "BE", label: "Belgique" });
|
||||
const [profile, setProfile] = useState("lhoist_employee");
|
||||
const localLanguage = localStorage.getItem("userLanguage") || "FR";
|
||||
const localCountry = JSON.parse(localStorage.getItem("userCountry")) || {
|
||||
name: "belgique",
|
||||
iso: "BE",
|
||||
label: "Belgique",
|
||||
};
|
||||
const localProfile = localStorage.getItem("userProfile") || "lhoist_employee";
|
||||
|
||||
const [language, setLanguage] = useState(localLanguage);
|
||||
const [country, setCountry] = useState(localCountry);
|
||||
const [profile, setProfile] = useState(localProfile);
|
||||
const [screensTranslations, setScreensTranslations] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -30,27 +38,29 @@ export function UserContextProvider({ children }) {
|
|||
setCountry({ ...country, label: currentCountry[language.toLowerCase()] });
|
||||
}, [language]);
|
||||
|
||||
function changeLanguage() {
|
||||
if (language === "FR") {
|
||||
setLanguage("EN");
|
||||
} else {
|
||||
setLanguage("FR");
|
||||
}
|
||||
function changeUserLanguage(newLanguage) {
|
||||
console.log(`userLanguage`, newLanguage);
|
||||
setLanguage(newLanguage);
|
||||
localStorage.setItem("userLanguage", newLanguage);
|
||||
}
|
||||
|
||||
function changeCountry(newCountry) {
|
||||
console.log(`newCountry`, newCountry);
|
||||
|
||||
setCountry(newCountry);
|
||||
localStorage.setItem("userCountry", JSON.stringify(newCountry));
|
||||
}
|
||||
|
||||
function changeProfile(newProfile) {
|
||||
setProfile(newProfile);
|
||||
localStorage.setItem("userProfile", newProfile);
|
||||
}
|
||||
return (
|
||||
<UserContext.Provider
|
||||
value={{
|
||||
language,
|
||||
screensTranslations,
|
||||
changeLanguage,
|
||||
changeUserLanguage,
|
||||
// changeLanguage,
|
||||
country,
|
||||
setLanguage,
|
||||
changeCountry,
|
||||
|
|
|
|||
|
|
@ -1,69 +1,124 @@
|
|||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import AnimatedPage from "../components/AnimatedPage";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
|
||||
import { postRatingData } from "../services/WordpressFetchData";
|
||||
export default function Rate() {
|
||||
const [rating, setRating] = useState(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
setRating(undefined);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
function returnHome() {
|
||||
navigate("/Home");
|
||||
function handleRatingChange(event) {
|
||||
// setRating({ ...rating, note: event.target.value });
|
||||
setRating({ ...rating, note: 2 });
|
||||
}
|
||||
|
||||
function handleCommentChange(event) {
|
||||
setRating({ ...rating, comment: event.target.value });
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
postRatingData(rating);
|
||||
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 className='rating'>
|
||||
<div className='rating__items'>
|
||||
<input
|
||||
type='radio'
|
||||
name='stars'
|
||||
id='st5'
|
||||
value='5'
|
||||
onChange={handleRatingChange}
|
||||
/>
|
||||
<label htmlFor='st5'>
|
||||
<div className='star-fill'></div>
|
||||
|
||||
<div
|
||||
class='label-description'
|
||||
className='label-description'
|
||||
data-content='Excellent'></div>
|
||||
</label>
|
||||
<input type='radio' name='stars' id='st4' />
|
||||
<label for='st4'>
|
||||
<div class='star-fill'></div>
|
||||
<input
|
||||
type='radio'
|
||||
name='stars'
|
||||
id='st4'
|
||||
value='4'
|
||||
onChange={handleRatingChange}
|
||||
/>
|
||||
<label htmlFor='st4'>
|
||||
<div className='star-fill'></div>
|
||||
|
||||
<div
|
||||
class='label-description'
|
||||
className='label-description'
|
||||
data-content='Good'></div>
|
||||
</label>
|
||||
<input type='radio' name='stars' id='st3' />
|
||||
<label for='st3'>
|
||||
<div class='star-fill'></div>
|
||||
<input
|
||||
type='radio'
|
||||
name='stars'
|
||||
id='st3'
|
||||
value='3'
|
||||
onChange={handleRatingChange}
|
||||
/>
|
||||
<label htmlFor='st3'>
|
||||
<div className='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'
|
||||
className='label-description'
|
||||
data-content='OK'></div>
|
||||
</label>
|
||||
<input
|
||||
type='radio'
|
||||
name='stars'
|
||||
id='st2'
|
||||
value='2'
|
||||
onChange={handleRatingChange}
|
||||
/>
|
||||
<label htmlFor='st2'>
|
||||
<div className='star-fill'></div>
|
||||
|
||||
<div
|
||||
className='label-description'
|
||||
data-content='Bad'></div>
|
||||
</label>
|
||||
<input
|
||||
type='radio'
|
||||
name='stars'
|
||||
id='st1'
|
||||
value='1'
|
||||
onChange={handleRatingChange}
|
||||
/>
|
||||
<label htmlFor='st1'>
|
||||
<div className='star-fill'></div>
|
||||
<div
|
||||
className='label-description'
|
||||
data-content='Terrible'></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
onChange={handleCommentChange}
|
||||
placeholder="Qu'avez-vous pensé de cette expérience ?"
|
||||
name=''
|
||||
id=''
|
||||
cols='10'
|
||||
rows='2'></textarea>
|
||||
<button
|
||||
disabled={!rating}
|
||||
title={!rating ? "Attribuer une note!" : "Retour à l'acceuil!"}
|
||||
className='cta cta--construction cta--round cta--button-icon cta--back'
|
||||
onClick={returnHome}></button>
|
||||
onClick={handleSubmit}></button>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedPage>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
import Menu from "../components/ui/Menu";
|
||||
import { postGameStatisticsData } from "../services/WordpressFetchData";
|
||||
import { postGameStatisticsData, postRatingData } from "../services/WordpressFetchData";
|
||||
import { useLanguage } from "../hooks/useLanguage";
|
||||
import { useEffect } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
|
||||
export default function Test() {
|
||||
const { language } = useLanguage();
|
||||
|
||||
function testPost() {
|
||||
const [randomData, setRandomData] = useState({});
|
||||
|
||||
function postRandomDatas() {
|
||||
const requestDataExample = {
|
||||
user_locale: "DE",
|
||||
user_country: "France",
|
||||
|
|
@ -16,12 +20,23 @@ export default function Test() {
|
|||
postGameStatisticsData(requestDataExample);
|
||||
}
|
||||
|
||||
function postRandomRating() {
|
||||
const requestDataExample = {
|
||||
user_locale: "DE",
|
||||
user_country: "France",
|
||||
rating: 5,
|
||||
};
|
||||
postRatingData(requestDataExample);
|
||||
}
|
||||
|
||||
console.log(randomData);
|
||||
return (
|
||||
<div className='page-container page-container--test'>
|
||||
<div className='screen screen--test'>
|
||||
<Menu />
|
||||
<button onClick={postRandomRating}> Post Random Rating</button>
|
||||
<div id='screen-container'>
|
||||
<button onClick={testPost}>TEEEESt</button>
|
||||
<button onClick={postRandomDatas}>Post Random Datas</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,52 +2,46 @@ import { useEffect, useState } from "react";
|
|||
import axios from "axios";
|
||||
import { useUser } from "../hooks/useUser";
|
||||
|
||||
const BASE_URL = "https://staysafe.deligraph.info/wp-json/wp/v2";
|
||||
const BASE_CUSTOM_URL = "https://staysafe.deligraph.info/wp-json/lhoist-datas";
|
||||
// const WORDPRESS_API_TOKEN = process.env.REACT_APP_WORDPRESS_API_TOKEN;
|
||||
const BASE_URL = process.env.REACT_APP_BASE_URL;
|
||||
const BASE_CUSTOM_URL = process.env.REACT_APP_BASE_CUSTOM_URL;
|
||||
|
||||
// const UMAMI_API_TOKEN = process.env.REACT_APP_UMAMI_API_TOKEN;
|
||||
// const UMAMI_WEBSITE_ID = process.env.REACT_APP_UMAMI_WEBSITE_ID;
|
||||
// const UMAMI_API_BASE_ENDPOINT = process.env.REACT_APP_UMAMI_API_BASE_ENDPOINT;
|
||||
const fetchWordpressData = async (url) => {
|
||||
try {
|
||||
const response = await axios.get(url);
|
||||
|
||||
// const umamiBaseEndpoint = process.env.REACT_APP_UMAMI_API_BASE_ENDPOINT;
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
function useWordpressCustomData(url) {
|
||||
const useWordpressCustomData = (url) => {
|
||||
const [data, setData] = useState();
|
||||
const { language, country } = useUser();
|
||||
const { language } = useUser();
|
||||
|
||||
const fullUrl = `${BASE_CUSTOM_URL}${url}?current-language=${language}`;
|
||||
|
||||
useEffect(() => {
|
||||
const dataFetch = async () => {
|
||||
const data = await (await fetch(fullUrl)).json();
|
||||
|
||||
fetchWordpressData(fullUrl).then((data) => {
|
||||
setData(data);
|
||||
};
|
||||
|
||||
dataFetch();
|
||||
});
|
||||
}, [language, fullUrl]);
|
||||
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
function useWordpressData(url) {
|
||||
const useWordpressData = (url) => {
|
||||
const [data, setData] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
const dataFetch = async () => {
|
||||
const data = await (await fetch(BASE_URL + url)).json();
|
||||
|
||||
fetchWordpressData(url).then((data) => {
|
||||
setData(data);
|
||||
};
|
||||
|
||||
dataFetch();
|
||||
});
|
||||
}, [url]);
|
||||
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
async function postGameStatisticsData(requestDatas) {
|
||||
const postGameStatisticsData = async (requestDatas) => {
|
||||
const options = {
|
||||
method: "POST",
|
||||
url: BASE_CUSTOM_URL + "/statistics/post",
|
||||
|
|
@ -61,88 +55,22 @@ async function postGameStatisticsData(requestDatas) {
|
|||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
|
||||
// function useUmamiDatas() {
|
||||
// const umamiUrl = "https://umami.deligraph.be/api/websites";
|
||||
// const bearerToken =
|
||||
// "Ii96P0XNdBE0gD0l8lX5Qf3+Lt7T0RsEoWUjf8qNaifyPbhi/PXmGygkIHuGbMm6bJ9iHPe9pIzfBJeFvG+ehlQSd4MWuWr3xKEmxtcwDMOlN4aDo3rlSf9phB02sjx0QcBhngfl0p9g/nI30d1XTWvHspw5BCNT7+NRzb5gDa24tbbSS/a/wL9+TN+mCjCUsaMOt9o/t0D3kNtE6qSgK4gAFijbDBXsgjbiPwb3HemrEb19JfY9gtMMpwBVE2KKst0j6kyKUWWDeJiBz3LQHO+FSthwG9tQCovVFgHNzLh+L+6fcmUkEpDC3nA62UCPmVAy3zJgjFWgtVZdXaSeFm7mLF1/Wsqk3g==";
|
||||
|
||||
// const [data, setData] = useState();
|
||||
|
||||
// useEffect(() => {
|
||||
// const dataFetch = async () => {
|
||||
// const data = await (
|
||||
// await fetch(umamiUrl, {
|
||||
// method: "GET",
|
||||
// headers: {
|
||||
// "Content-Type": "application/json",
|
||||
// Authorization: `Bearer ${bearerToken}`,
|
||||
// },
|
||||
// })
|
||||
// ).json();
|
||||
|
||||
// setData(data);
|
||||
// };
|
||||
|
||||
// dataFetch();
|
||||
// }, []);
|
||||
// return data;
|
||||
// }
|
||||
|
||||
// function useUmamiUpdateDatas() {
|
||||
// const [result, setResult] = useState(null); // État local pour stocker le résultat
|
||||
|
||||
// const eventName = "event-name-de-test";
|
||||
|
||||
// const UMAMI_SEND_URL = UMAMI_API_BASE_ENDPOINT + "/send";
|
||||
|
||||
// const dataPayload = {
|
||||
// payload: {
|
||||
// hostname: window.location.hostname,
|
||||
// language: navigator.language,
|
||||
// referrer: document.referrer,
|
||||
// screen: `${window.screen.width}x${window.screen.height}`,
|
||||
// title: document.title,
|
||||
// url: window.location.pathname,
|
||||
// website: UMAMI_WEBSITE_ID,
|
||||
// name: "puzzle-1-complete",
|
||||
// data: {
|
||||
// lang: "fr",
|
||||
// country: "France",
|
||||
// level_post_id: 154,
|
||||
// level_is_completed: 0,
|
||||
// level_completion_time: 20000,
|
||||
// level_score: 12,
|
||||
// },
|
||||
// },
|
||||
// type: "event",
|
||||
// };
|
||||
// useEffect(() => {
|
||||
// const dataFetch = async () => {
|
||||
// try {
|
||||
// await axios.post(UMAMI_SEND_URL, dataPayload, {
|
||||
// headers: {
|
||||
// "User-Agent": navigator.userAgent,
|
||||
// },
|
||||
// });
|
||||
// setResult(`Event '${eventName}' sent successfully to Umami.`);
|
||||
// console.log(`Event '${eventName}' sent successfully to Umami.`);
|
||||
// } catch (error) {
|
||||
// setResult("Error sending Umami event:");
|
||||
// console.error("Error sending Umami event:", error);
|
||||
// }
|
||||
// };
|
||||
|
||||
// dataFetch();
|
||||
// }, []);
|
||||
// return result;
|
||||
// }
|
||||
|
||||
export {
|
||||
useWordpressData,
|
||||
useWordpressCustomData,
|
||||
postGameStatisticsData,
|
||||
// useUmamiDatas,
|
||||
// useUmamiUpdateDatas,
|
||||
};
|
||||
|
||||
const postRatingData = async (requestDatas) => {
|
||||
const options = {
|
||||
method: "POST",
|
||||
url: BASE_CUSTOM_URL + "/rating/post",
|
||||
data: requestDatas,
|
||||
};
|
||||
|
||||
axios.request(options)
|
||||
.then((response) => {
|
||||
console.log(response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
export { useWordpressData, useWordpressCustomData, postGameStatisticsData, postRatingData };
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user