From ded9b9d13f470afaac20c97eaca63e4be8aae025 Mon Sep 17 00:00:00 2001 From: Stachu Date: Sun, 12 Mar 2023 20:39:24 +0100 Subject: [PATCH] delete translate, and temp rediect to hp --- client/src/components/GetImageAndQuestion.jsx | 6 +++- client/src/components/QuizGame.jsx | 7 ++-- client/src/components/Result.jsx | 35 +++++++++++-------- client/src/components/Truck.jsx | 9 +++-- client/src/style/_Quiz.scss | 18 ++++++++-- 5 files changed, 48 insertions(+), 27 deletions(-) diff --git a/client/src/components/GetImageAndQuestion.jsx b/client/src/components/GetImageAndQuestion.jsx index b375ebe..94e4bca 100644 --- a/client/src/components/GetImageAndQuestion.jsx +++ b/client/src/components/GetImageAndQuestion.jsx @@ -1,5 +1,6 @@ import React, {useRef, useEffect, useState} from 'react'; +import { useNavigate } from 'react-router-dom'; import { TruckId } from './Truck'; import { EndCacheId } from './GetQuestion'; @@ -214,10 +215,13 @@ export const QuizGetImage = ({onPress, isClick,setButtonState}) => { const [myArray] = useState([imageArrayFromDB]); - + const navigate = useNavigate(); useEffect(() => { + if(!TruckId) navigate('/') + + fetch(`/quiz-pages?fire-truck=${TruckId}`) .then(res => res.json()) .then(data => { diff --git a/client/src/components/QuizGame.jsx b/client/src/components/QuizGame.jsx index 89e1f52..fe34a4e 100644 --- a/client/src/components/QuizGame.jsx +++ b/client/src/components/QuizGame.jsx @@ -10,12 +10,11 @@ import FooterQuiz from './FooterQuiz'; export let link = ""; -export let endScore = 0; +export let endScore = null; const NavigationQuiz = ({score,buttonState}) => { - - - + + link = /[^/]*$/.exec(`${window.location.href}`)[0]; const navigate = useNavigate(); diff --git a/client/src/components/Result.jsx b/client/src/components/Result.jsx index 5616ac0..f5083da 100644 --- a/client/src/components/Result.jsx +++ b/client/src/components/Result.jsx @@ -10,22 +10,29 @@ import { CircularProgressbar , buildStyles } from 'react-circular-progress import 'react-circular-progressbar/dist/styles.css'; const Result = () => { - - - - fetch('/quiz-results', { - method: 'POST', - headers: { - 'Accept': 'application/json, text/plain, */*', - 'Content-Type': 'application/json' - }, - body: JSON.stringify({fireTruck: TruckId, seconds: SecondSeconds, points: endScore}) -}); - const navigate = useNavigate(); - // UpdateTrackScore(); - + console.log(endScore); + useEffect(() => { + if(!endScore) navigate('/'); + },[]) + + if(endScore) { + useEffect(() => { + + fetch('/quiz-results', { + method: 'POST', + headers: { + 'Accept': 'application/json, text/plain, */*', + 'Content-Type': 'application/json' + }, + body: JSON.stringify({fireTruck: TruckId, seconds: SecondSeconds, points: endScore}) + }); + + }, []) + } + + return ( <>
diff --git a/client/src/components/Truck.jsx b/client/src/components/Truck.jsx index 835527c..ee79954 100644 --- a/client/src/components/Truck.jsx +++ b/client/src/components/Truck.jsx @@ -1,7 +1,7 @@ import React, {useRef,useEffect} from 'react'; import { useState } from 'react'; -import { useParams } from 'react-router-dom'; +import { useParams, useNavigate } from 'react-router-dom'; import {Link} from 'react-router-dom'; import { idUnits } from './SelectBox'; export let TruckId = ""; @@ -9,11 +9,9 @@ export let TruckId = ""; const Truck = () => { - const {id} = useParams(); const [trackName, setTrackName] = useState(''); const textChooseTrack = useRef(true); - const handleImageClick = (e) => { let nameofTrack = e.target.getAttribute('name'); @@ -35,17 +33,18 @@ const Truck = () => { const BoxComponent = () => { - + const navigate = useNavigate(); let [truck, setTruck] = useState(''); useEffect(()=> { - + if(!idUnits) navigate('/') fetch(`/fire-trucks?osp-unit=${idUnits}`) .then(response => response.json()) .then(data => { + setTruck(data.map(({ID,name,imagePath,avgPercent},index) => { TruckId = ID; let percent = avgPercent.toString().slice(0,3); diff --git a/client/src/style/_Quiz.scss b/client/src/style/_Quiz.scss index f664f2a..1226e8c 100644 --- a/client/src/style/_Quiz.scss +++ b/client/src/style/_Quiz.scss @@ -79,8 +79,20 @@ .questionText1 { color: white; font-size: 25px; - min-width: 200px; - + min-width: 40%; + } +} +@media (max-width: 1200px) { + .questionText1 { + font-size: 22px; + min-width: 20%; + } +} + +@media (max-width: 900px) { + .questionText1 { + font-size: 16px; + min-width: 100px; } } @@ -333,7 +345,7 @@ outline: none; background: none; border: greenyellow solid 2px; - transform: translate(-50%, -50%); + } .quiz_button {