Nie widzisz swojej jednostki? Napisz do nas!
-
-
-
)
}
diff --git a/client/src/components/GetImageAndQuestion.jsx b/client/src/components/GetImageAndQuestion.jsx
index 13b046d..b375ebe 100644
--- a/client/src/components/GetImageAndQuestion.jsx
+++ b/client/src/components/GetImageAndQuestion.jsx
@@ -1,111 +1,80 @@
-import React, {useRef} from 'react';
-export let EndCorrectAnswer = "";
+import React, {useRef, useEffect, useState} from 'react';
+import { TruckId } from './Truck';
+
+import { EndCacheId } from './GetQuestion';
+
export let buttonQuiz = "";
-
-let buttonsElement = "";
-let EndDrawQuestion = "";
-let ButtonShowCorrectAnswer = "";
-
-export const QuizGetQuestion = ({score,isClick,setScore,setIsClick,navigate}) => {
-
- const QuizDataQuestionFromDb = [
- {
- question: "Pytanie 1",
- coorectAnswer: "Kabina",
- },
-
- {
- question: "Pytanie 2",
- coorectAnswer: "Dach",
- },
- {
- question: "Pytanie 3",
- coorectAnswer: "Dowódca 3",
- },
- {
- question: "Pytanie 4",
- coorectAnswer: "Kierowca 3",
- }
- ];
+export let ButtonShowCorrectAnswer = "";
-
- let DrawQuestion = Math.floor(Math.random() * QuizDataQuestionFromDb.length);
-
- if(isClick === true) {
- EndDrawQuestion = QuizDataQuestionFromDb[DrawQuestion].question;
- }
-
- EndCorrectAnswer = QuizDataQuestionFromDb[DrawQuestion].coorectAnswer;
-
- return (
-
-
-
- )
-}
-
export const QuizDataImageFromDb = [
{
- img: '/img/fire-truck/wozLEFT.webp',
+ img: '',
boxStyle: {
- name: "Kierowca 1",
- top: "48%",
- left: "49%",
- height: "39%",
- width: "15.5%",
+ name: "",
+ top: "",
+ left: "",
+ height: "",
+ width: "",
},
boxStyle1: {
- name1: "Kierowca 3",
- top1: "45%",
- left1: "83%",
- height1: "35%",
- width1: "13%",
+ name1: "",
+ top1: "",
+ left1: "",
+ height1: "",
+ width1: "",
},
boxStyle2: {
- name2: "Kierowca 2",
- top2: "40%",
- left2: "67%",
- height2: "23%",
- width2: "18%",
+ name2: "",
+ top2: "",
+ left2: "",
+ height2: "",
+ width2: "",
},
boxStyle3: {
- name3: "Kabina",
- top3: "38%",
- left3: "30%",
- height3: "35%",
- width3: "13%",
+ name3: "",
+ top3: "",
+ left3: "",
+ height3: "",
+ width3: "",
}
},
{
- img: '/img/fire-truck/wozTOP.webp',
+ img: '',
boxStyle: {
- name: "Dach",
- top: "48%",
- left: "69%",
- height: "35%",
- width: "35%",
+ name: "",
+ top: "",
+ left: "",
+ height: "",
+ width: "",
},boxStyle1: {
- width: 0,
- height: 0,
+ name1: "",
+ top1: "",
+ left1: "",
+ height1: "",
+ width1: "",
},
boxStyle2: {
- width: 0,
- height: 0,
+ name2: "",
+ top2: "",
+ left2: "",
+ height2: "",
+ width2: "",
},
boxStyle3: {
- width: 0,
- height: 0,
+ name3: "",
+ top3: "",
+ left3: "",
+ height3: "",
+ width3: "",
},
},
{
- img: '/img/fire-truck/wozRIGHT.webp',
+ img: '../qweqweqsadqw',
boxStyle: {
- name: "Dowódca 3",
+ name: "",
top: "50%",
left: "15%",
height: "39%",
@@ -135,9 +104,9 @@ export const QuizDataImageFromDb = [
},
{
- img: '/img/fire-truck/wozBACK.webp',
+ img: '',
boxStyle: {
- name: "Tył",
+ name: "",
top: "42%",
left: "50.5%",
height: "41%",
@@ -149,103 +118,339 @@ export const QuizDataImageFromDb = [
}
];
-export const QuizGetImage = ({onPress, isClick}) => {
+
+
+
+
+
+export const QuizGetImage = ({onPress, isClick,setButtonState}) => {
buttonQuiz = useRef();
+ const [buttonClick, setButtonClick] = useState(false);
+ let imageArrayFromDB = [];
+ setButtonState(buttonClick)
+ //Nazwy
+
+
+////////////////////////////////////////////////////////////////////
+/////////////////////////////////////////////////////////////
+////////////////////////////
+// TEN CAŁY KOD JEST DO REFACTORU !!!
+
+
+ let name0ArrayFromDB = [];
+ let name1ArrayFromDB = [];
+ let name2ArrayFromDB = [];
+ let name3ArrayFromDB = [];
+
+ const [name0Array] = useState([name0ArrayFromDB]);
+ const [name1Array] = useState([name1ArrayFromDB]);
+ const [name2Array] = useState([name2ArrayFromDB]);
+ const [name3Array] = useState([name3ArrayFromDB]);
+
+
+ // CACHE ID
+
+
+
+ let cacheID0ArrayFromDB = [];
+ let cacheID1ArrayFromDB = [];
+ let cacheID2ArrayFromDB = [];
+ let cacheID3ArrayFromDB = [];
+
+ const [cacheID0Array] = useState([cacheID0ArrayFromDB]);
+ const [cacheID1Array] = useState([cacheID1ArrayFromDB]);
+ const [cacheID2Array] = useState([cacheID2ArrayFromDB]);
+ const [cacheID3Array] = useState([cacheID3ArrayFromDB]);
+
+ // LEFt position
+
+ let left0ArrayFromDB = [];
+ let left1ArrayFromDB = [];
+ let left2ArrayFromDB = [];
+ let left3ArrayFromDB = [];
+
+ const [left0Array] = useState([left0ArrayFromDB]);
+ const [left1Array] = useState([left1ArrayFromDB]);
+ const [left2Array] = useState([left2ArrayFromDB]);
+ const [left3Array] = useState([left3ArrayFromDB]);
+
+
+ // TOp Postion
+
+ let top0ArrayFromDB = [];
+ let top1ArrayFromDB = [];
+ let top2ArrayFromDB = [];
+ let top3ArrayFromDB = [];
+
+ const [top0Array] = useState([top0ArrayFromDB]);
+ const [top1Array] = useState([top1ArrayFromDB]);
+ const [top2Array] = useState([top2ArrayFromDB]);
+ const [top3Array] = useState([top3ArrayFromDB]);
+
+
+ // Size x
+ let sizeX0ArrayFromDB = [];
+ let sizeX1ArrayFromDB = [];
+ let sizeX2ArrayFromDB = [];
+ let sizeX3ArrayFromDB = [];
+
+ const [sizeX0Array] = useState([sizeX0ArrayFromDB]);
+ const [sizeX1Array] = useState([sizeX1ArrayFromDB]);
+ const [sizeX2Array] = useState([sizeX2ArrayFromDB]);
+ const [sizeX3Array] = useState([sizeX3ArrayFromDB]);
+
+
+ // SIZe y
+
+ let sizeY0ArrayFromDB = [];
+ let sizeY1ArrayFromDB = [];
+ let sizeY2ArrayFromDB = [];
+ let sizeY3ArrayFromDB = [];
+
+ const [sizeY0Array] = useState([sizeY0ArrayFromDB]);
+ const [sizeY1Array] = useState([sizeY1ArrayFromDB]);
+ const [sizeY2Array] = useState([sizeY2ArrayFromDB]);
+ const [sizeY3Array] = useState([sizeY3ArrayFromDB]);
+
+
+ const [myArray] = useState([imageArrayFromDB]);
+
+useEffect(() => {
+
+ fetch(`/quiz-pages?fire-truck=${TruckId}`)
+ .then(res => res.json())
+ .then(data => {
+ const propertValuesObjectFromDb = Object.values(data);
+
+
+
+ propertValuesObjectFromDb.forEach((singleProperty,index) => {
+
+
+
+ const {caches, sideImagePath} =singleProperty;
+ imageArrayFromDB.push(sideImagePath);
+
+ switch(caches.length){
+ case 1:
+ name0ArrayFromDB.push(caches[0].cacheName);
+ cacheID0ArrayFromDB.push(caches[0].cacheID);
+
+
+ left0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.x)
+ top0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.y);
+
+ cacheID0ArrayFromDB.push(caches[0].cacheID);
+
+
+
+ sizeX0ArrayFromDB.push(caches[0].cacheRectangle.size.x)
+ sizeY0ArrayFromDB.push(caches[0].cacheRectangle.size.y)
+
+ break;
+ case 2:
+ name0ArrayFromDB.push(caches[0].cacheName);
+ name1ArrayFromDB.push(caches[1].cacheName);
+
+
+ cacheID0ArrayFromDB.push(caches[0].cacheID);
+ cacheID1ArrayFromDB.push(caches[1].cacheID);
+
+
+ left0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.x)
+ left1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.x)
+
+ top0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.y);
+ top1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.y);
+
+ sizeX0ArrayFromDB.push(caches[0].cacheRectangle.size.x);
+ sizeX1ArrayFromDB.push(caches[1].cacheRectangle.size.x);
+
+ sizeY0ArrayFromDB.push(caches[0].cacheRectangle.size.y)
+ sizeY1ArrayFromDB.push(caches[1].cacheRectangle.size.y)
+
+ break;
+ case 3:
+ name0ArrayFromDB.push(caches[0].cacheName);
+ name1ArrayFromDB.push(caches[1].cacheName);
+ name2ArrayFromDB.push(caches[2].cacheName);
+
+
+ cacheID0ArrayFromDB.push(caches[0].cacheID);
+ cacheID1ArrayFromDB.push(caches[1].cacheID);
+ cacheID2ArrayFromDB.push(caches[2].cacheID);
+
+ left0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.x);
+ left1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.x);
+ left2ArrayFromDB.push(caches[2].cacheRectangle.leftBottomPoint.x);
+
+ top0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.y);
+ top1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.y);
+ top2ArrayFromDB.push(caches[2].cacheRectangle.leftBottomPoint.y);
+
+
+ sizeX0ArrayFromDB.push(caches[0].cacheRectangle.size.x);
+ sizeX1ArrayFromDB.push(caches[1].cacheRectangle.size.x);
+ sizeX2ArrayFromDB.push(caches[2].cacheRectangle.size.x);
+
+ sizeY0ArrayFromDB.push(caches[0].cacheRectangle.size.y)
+ sizeY1ArrayFromDB.push(caches[1].cacheRectangle.size.y)
+ sizeY2ArrayFromDB.push(caches[2].cacheRectangle.size.y)
+ break;
+ case 4:
+ name0ArrayFromDB.push(caches[0].cacheName);
+ name1ArrayFromDB.push(caches[1].cacheName);
+ name2ArrayFromDB.push(caches[2].cacheName);
+ name3ArrayFromDB.push(caches[3].cacheName);
+
+ cacheID0ArrayFromDB.push(caches[0].cacheID);
+ cacheID1ArrayFromDB.push(caches[1].cacheID);
+ cacheID2ArrayFromDB.push(caches[2].cacheID);
+ cacheID3ArrayFromDB.push(caches[3].cacheID);
+
+ left0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.x);
+ left1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.x);
+ left2ArrayFromDB.push(caches[2].cacheRectangle.leftBottomPoint.x);
+ left3ArrayFromDB.push(caches[3].cacheRectangle.leftBottomPoint.x);
+
+ top0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.y);
+ top1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.y);
+ top2ArrayFromDB.push(caches[2].cacheRectangle.leftBottomPoint.y);
+ top3ArrayFromDB.push(caches[3].cacheRectangle.leftBottomPoint.y);
+
+
+ sizeX0ArrayFromDB.push(caches[0].cacheRectangle.size.x);
+ sizeX1ArrayFromDB.push(caches[1].cacheRectangle.size.x);
+ sizeX3ArrayFromDB.push(caches[3].cacheRectangle.size.x);
+
+ sizeY0ArrayFromDB.push(caches[0].cacheRectangle.size.y)
+ sizeY1ArrayFromDB.push(caches[1].cacheRectangle.size.y)
+ sizeY2ArrayFromDB.push(caches[2].cacheRectangle.size.y)
+ sizeY3ArrayFromDB.push(caches[3].cacheRectangle.size.y)
+
+ break;
+ }
+
+ });
+ })
+ })
+
+
+
+
+
+
+
+
+
+ const data = QuizDataImageFromDb.map(({img}, index)=> {
+
- const data = QuizDataImageFromDb.map(({img,boxStyle,boxStyle1,boxStyle2,boxStyle3}, index)=> {
- let {top,width,height,left,name} = boxStyle;
- let {top1,width1,height1,left1, name1} = boxStyle1;
- let {top2,width2,height2,left2, name2} = boxStyle2;
- let {top3,width3,height3,left3, name3} = boxStyle3;
-
-
ButtonShowCorrectAnswer = (isClick, setIsClick, score,setScore,navigate) => {
- buttonsElement = document.querySelectorAll('.quiz_button');
+ let buttonsElement = document.querySelectorAll('.quiz_button');
const buttonsElementArray = Array.from(buttonsElement)
setIsClick(!isClick);
-
if(score === 9) {
navigate('/result');
}
-
if(isClick === true) {
buttonsElementArray.forEach(button => {
-
- if(EndCorrectAnswer === button.name){
+
+
+ if(EndCacheId == button.name){
button.style.color = "yellow";
-
-
button.style.pointerEvents = "none";
button.style.display = "block";
-
+
}else {
-
button.style.pointerEvents = "none";
button.style.display = "none";
-
+
}
})
- }else {
-
+
+ }
+ else {
+
buttonsElementArray.forEach(button => {
button.style.color = "black";
button.style.display = "block";
button.style.pointerEvents = "auto";
setScore(score + 1);
})
-
+
}
+
+
+ }
+
-
- }
+
+
+
+
+ {EndDrawQuestion}
- -
-
- ![track]()
-
-
+ {`../${myArray[0][index]}` !== "../undefined"
+ ? ![track]()
+ : ![track]()
}
-
+
+
+
+ "width": `${sizeX1Array[0][index]* 100}%`,
+ "height": `${sizeY1Array[0][index]* 100}%`,
+ "top": `${left1Array[0][index]* 100}%`,
+ "left": `${top1Array[0][index]* 100}%` !== "undefined%" ? `${top1Array[0][index]* 100}%` : "-300%",
+ }}>{name1Array[0][index]}
-
+ "width": `${sizeX2Array[0][index]* 100}%`,
+ "height": `${sizeY2Array[0][index]* 100}%`,
+ "top": `${left2Array[0][index]* 100}%`,
+ "left": `${top2Array[0][index]* 100}%` !== "undefined%" ? `${top2Array[0][index]* 100}%` : "-300%",
+ }}>{name2Array[0][index]}
-
+ "width": `${sizeX3Array[0][index]* 100}%`,
+ "height": `${sizeY3Array[0][index]* 100}%`,
+ "top": `${left3Array[0][index]* 100}%`,
+ "left": `${top3Array[0][index]* 100}%` !== "undefined%" ? `${top3Array[0][index] * 100}%` : "-300%",
+ }}>{name3Array[0][index]}
-
+
+
+
+ )
+}
+
+
+export const QuizGetQuestion = ({score,isClick,setScore,setIsClick,navigate}) => {
+ return (
+ {test}
+ +
- ![]()
navigate(-1)} id = 'imgArrow' className='imgArrow' src="/img/arrow-turn.png" alt="arrow" />
-
- )
+ if(buttonState) {
+ return (
+
-
-
-
-
-
- {score}/10
-
+ ![]()
navigate(-1)} id = 'imgArrow' className='imgArrow' src="/img/arrow-turn.png" alt="arrow" />
+
+ )
+ }
+
}
@@ -41,22 +49,23 @@ const QuizGame = () => {
const navigate = useNavigate();
const [score,setScore] = useState(0);
const [isClick, setIsClick] = useState(true);
+ const [buttonState, setButtonState] = useState(false);
-
const ButtonNextQuestionClick = (e) => {
setScore(score + 1);
if(score === 9)
navigate("/result");
- else if (e.target.textContent === EndCorrectAnswer)
+ else if (Number(e.target.name) === EndCacheId)
endScore++;
}
+
return (
<>
-
+
+
+
+
+
+ {score}/10
+
@@ -78,7 +87,8 @@ const QuizGame = () => {
ButtonNextQuestionClick(e)}/>
+ onPress={(e) => ButtonNextQuestionClick(e)}
+ setButtonState = {setButtonState}/>
diff --git a/client/src/components/QuizGetData.jsx b/client/src/components/QuizGetData.jsx
new file mode 100644
index 0000000..bad4c3e
--- /dev/null
+++ b/client/src/components/QuizGetData.jsx
@@ -0,0 +1,206 @@
+import React, {useState, useEffect} from 'react';
+
+export const QuizGetData = () => {
+
+
+
+
+
+//////////////////////////////////////////////////////////////
+/////////////////////////////////////////////////////////////////
+/////////////////////////////////////////////////////////////////////
+
+// TEN CAŁY KOD JEST DO REFACTORU
+
+
+ let imageArrayFromDB = [];
+
+ // NAME
+
+ let name0ArrayFromDB = [];
+ let name1ArrayFromDB = [];
+ let name2ArrayFromDB = [];
+ let name3ArrayFromDB = [];
+
+ const [name0Array] = useState([name0ArrayFromDB]);
+ const [name1Array] = useState([name1ArrayFromDB]);
+ const [name2Array] = useState([name2ArrayFromDB]);
+ const [name3Array] = useState([name3ArrayFromDB]);
+
+
+ // CACHE ID
+
+ console.log(name0ArrayFromDB, name0Array)
+
+ let cacheID0ArrayFromDB = [];
+ let cacheID1ArrayFromDB = [];
+ let cacheID2ArrayFromDB = [];
+ let cacheID3ArrayFromDB = [];
+
+ const [cacheID0Array] = useState([cacheID0ArrayFromDB]);
+ const [cacheID1Array] = useState([cacheID1ArrayFromDB]);
+ const [cacheID2Array] = useState([cacheID2ArrayFromDB]);
+ const [cacheID3Array] = useState([cacheID3ArrayFromDB]);
+
+ // LEFt position
+
+ let left0ArrayFromDB = [];
+ let left1ArrayFromDB = [];
+ let left2ArrayFromDB = [];
+ let left3ArrayFromDB = [];
+
+ const [left0Array] = useState([left0ArrayFromDB]);
+ const [left1Array] = useState([left1ArrayFromDB]);
+ const [left2Array] = useState([left2ArrayFromDB]);
+ const [left3Array] = useState([left3ArrayFromDB]);
+
+
+ // TOp Postion
+
+ let top0ArrayFromDB = [];
+ let top1ArrayFromDB = [];
+ let top2ArrayFromDB = [];
+ let top3ArrayFromDB = [];
+
+ const [top0Array] = useState([top0ArrayFromDB]);
+ const [top1Array] = useState([top1ArrayFromDB]);
+ const [top2Array] = useState([top2ArrayFromDB]);
+ const [top3Array] = useState([top3ArrayFromDB]);
+
+
+ // Size x
+ let sizeX0ArrayFromDB = [];
+ let sizeX1ArrayFromDB = [];
+ let sizeX2ArrayFromDB = [];
+ let sizeX3ArrayFromDB = [];
+
+ const [sizeX0Array] = useState([sizeX0ArrayFromDB]);
+ const [sizeX1Array] = useState([sizeX1ArrayFromDB]);
+ const [sizeX2Array] = useState([sizeX2ArrayFromDB]);
+ const [sizeX3Array] = useState([sizeX3ArrayFromDB]);
+
+
+ // SIZe 3
+
+ let sizeY0ArrayFromDB = [];
+ let sizeY1ArrayFromDB = [];
+ let sizeY2ArrayFromDB = [];
+ let sizeY3ArrayFromDB = [];
+
+ const [sizeY0Array] = useState([sizeY0ArrayFromDB]);
+ const [sizeY1Array] = useState([sizeY1ArrayFromDB]);
+ const [sizeY2Array] = useState([sizeY2ArrayFromDB]);
+ const [sizeY3Array] = useState([sizeY3ArrayFromDB]);
+
+
+ const [myArray] = useState([imageArrayFromDB]);
+
+
+useEffect(() => {
+
+ fetch(`/quiz-pages?fire-truck=${TruckId}`)
+ .then(res => res.json())
+ .then(data => {
+ const propertValuesObjectFromDb = Object.values(data);
+
+
+
+ propertValuesObjectFromDb.forEach((singleProperty,index) => {
+
+
+ const {caches, sideImagePath} =singleProperty;
+ imageArrayFromDB.push(sideImagePath);
+
+ switch(caches.length){
+ case 1:
+ cachesLength0();
+
+ break;
+ case 2:
+ name0ArrayFromDB.push(caches[0].cacheName);
+ name1ArrayFromDB.push(caches[1].cacheName);
+
+
+ cacheID0ArrayFromDB.push(caches[0].cacheID);
+ cacheID1ArrayFromDB.push(caches[1].cacheID);
+
+
+ left0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.x)
+ left1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.x)
+
+ top0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.y);
+ top1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.y);
+
+ sizeX0ArrayFromDB.push(caches[0].cacheRectangle.size.x);
+ sizeX1ArrayFromDB.push(caches[1].cacheRectangle.size.x);
+
+ sizeY0ArrayFromDB.push(caches[0].cacheRectangle.size.y)
+ sizeY1ArrayFromDB.push(caches[1].cacheRectangle.size.y)
+
+ break;
+ case 3:
+ name0ArrayFromDB.push(caches[0].cacheName);
+ name1ArrayFromDB.push(caches[1].cacheName);
+ name2ArrayFromDB.push(caches[2].cacheName);
+
+
+ cacheID0ArrayFromDB.push(caches[0].cacheID);
+ cacheID1ArrayFromDB.push(caches[1].cacheID);
+ cacheID2ArrayFromDB.push(caches[2].cacheID);
+
+ left0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.x);
+ left1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.x);
+ left2ArrayFromDB.push(caches[2].cacheRectangle.leftBottomPoint.x);
+
+ top0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.y);
+ top1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.y);
+ top2ArrayFromDB.push(caches[2].cacheRectangle.leftBottomPoint.y);
+
+
+ sizeX0ArrayFromDB.push(caches[0].cacheRectangle.size.x);
+ sizeX1ArrayFromDB.push(caches[1].cacheRectangle.size.x);
+ sizeX2ArrayFromDB.push(caches[2].cacheRectangle.size.x);
+
+ sizeY0ArrayFromDB.push(caches[0].cacheRectangle.size.y)
+ sizeY1ArrayFromDB.push(caches[1].cacheRectangle.size.y)
+ sizeY2ArrayFromDB.push(caches[2].cacheRectangle.size.y)
+ break;
+ case 4:
+ name0ArrayFromDB.push(caches[0].cacheName);
+ name1ArrayFromDB.push(caches[1].cacheName);
+ name2ArrayFromDB.push(caches[2].cacheName);
+ name3ArrayFromDB.push(caches[3].cacheName);
+
+ cacheID0ArrayFromDB.push(caches[0].cacheID);
+ cacheID1ArrayFromDB.push(caches[1].cacheID);
+ cacheID2ArrayFromDB.push(caches[2].cacheID);
+ cacheID3ArrayFromDB.push(caches[3].cacheID);
+
+ left0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.x);
+ left1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.x);
+ left2ArrayFromDB.push(caches[2].cacheRectangle.leftBottomPoint.x);
+ left3ArrayFromDB.push(caches[3].cacheRectangle.leftBottomPoint.x);
+
+ top0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.y);
+ top1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.y);
+ top2ArrayFromDB.push(caches[2].cacheRectangle.leftBottomPoint.y);
+ top3ArrayFromDB.push(caches[3].cacheRectangle.leftBottomPoint.y);
+
+
+ sizeX0ArrayFromDB.push(caches[0].cacheRectangle.size.x);
+ sizeX1ArrayFromDB.push(caches[1].cacheRectangle.size.x);
+ sizeX3ArrayFromDB.push(caches[3].cacheRectangle.size.x);
+
+ sizeY0ArrayFromDB.push(caches[0].cacheRectangle.size.y)
+ sizeY1ArrayFromDB.push(caches[1].cacheRectangle.size.y)
+ sizeY2ArrayFromDB.push(caches[2].cacheRectangle.size.y)
+ sizeY3ArrayFromDB.push(caches[3].cacheRectangle.size.y)
+
+ break;
+ }
+
+ });
+ })
+ })
+
+}
\ No newline at end of file
diff --git a/client/src/components/Result.jsx b/client/src/components/Result.jsx
index 03d5b9a..5616ac0 100644
--- a/client/src/components/Result.jsx
+++ b/client/src/components/Result.jsx
@@ -1,41 +1,84 @@
-import React from 'react';
+import React, { useEffect } from 'react';
import { endScore } from './QuizGame';
import { SecondSeconds } from './Timer';
import { SecondMinutes } from './Timer';
-
+import { TruckId } from './Truck';
import { useNavigate } from 'react-router-dom';
import Conffetti from './Conffetti';
-import Player from './Sound';
-import url from '../style/congratulation.mp3';
-import { link } from './QuizGame';
-import { InformationTrackFromDB } from './Truck';
-const UpdateTrackScore = () => {
- InformationTrackFromDB.forEach(track => {
- if(link === track.img.split(/\.(?=[^\.]+$)/)[0].slice(18)){
- track.progress = endScore * 10
- }
-
- })
-}
+import { CircularProgressbar , buildStyles } from 'react-circular-progressbar' ;
+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();
+ // UpdateTrackScore();
+
+
return (
<>
-
+ );
+};
export default Timer;
\ No newline at end of file
diff --git a/client/src/components/Truck.jsx b/client/src/components/Truck.jsx
index 8ff43b7..835527c 100644
--- a/client/src/components/Truck.jsx
+++ b/client/src/components/Truck.jsx
@@ -1,28 +1,12 @@
-import React, {useRef} from 'react';
+import React, {useRef,useEffect} from 'react';
import { useState } from 'react';
import { useParams } from 'react-router-dom';
import {Link} from 'react-router-dom';
+import { idUnits } from './SelectBox';
+export let TruckId = "";
-export let InformationTrackFromDB = [
- {
- img: '../img/fire-truck/track1.jpg',
- name: "Wóz 1",
- progress: 70,
- },
-
- {
- img: '../img/fire-truck/track2.jpg',
- name: "Wóz 2",
- progress: 20,
- },
- {
- img: '../img/fire-truck/track3.jpg',
- name: "Wóz 3",
- progress: 0,
- }
-];
const Truck = () => {
@@ -32,10 +16,8 @@ const Truck = () => {
const handleImageClick = (e) => {
-
- const imgWithoutExtends = e.target.id.split(/\.(?=[^\.]+$)/);
- const TrackName = imgWithoutExtends[0].slice(18);
- setTrackName(TrackName);
+ let nameofTrack = e.target.getAttribute('name');
+ setTrackName(nameofTrack);
textChooseTrack.current.style.color= 'black';
@@ -51,43 +33,63 @@ const Truck = () => {
-
const BoxComponent = () => {
- const track = InformationTrackFromDB.map(({img,name,progress},index)=> {
-
- return (
- <>
-
-
-
+
@@ -43,5 +86,6 @@ const Result = () => {
)
+
}
export default Result;
\ No newline at end of file
diff --git a/client/src/components/SelectBox.jsx b/client/src/components/SelectBox.jsx
index 3e2027c..6278b93 100644
--- a/client/src/components/SelectBox.jsx
+++ b/client/src/components/SelectBox.jsx
@@ -1,16 +1,36 @@
-import React, {useContext, useState ,useRef} from 'react';
+import React, {useContext, useState ,useRef, useEffect} from 'react';
import { AppContext } from './AppContext';
+export let idUnits = "";
const SearchBox = () => {
- const {unitOsp, isContainerActive, setunitOsp,setIsContainerActive,localization} = useContext(AppContext);
+ const {unitOsp, isContainerActive, setunitOsp,setIsContainerActive,localization,setId} = useContext(AppContext);
const [value, setValue] = useState("");
const inputSearchRef = useRef(true);
+
+
const handleChangeInput = (e) => {
- setIsContainerActive(true);
- const tasks = localization.filter(localization => localization.toLowerCase().includes(e.target.value.toLowerCase()));
- setValue(tasks);
+ if(e.target.value === "") return
+ fetch(`/osp-units?locality=${e.target.value}`)
+ .then(data => data.json())
+ .then(res=> {
+
+ res.map(locality => {
+
+ let localityArray = [];
+
+ localityArray.push(locality.locality);
+ let tasks = localityArray.filter(localization => localization.toLowerCase().includes(e.target.value.toLowerCase()));
+ setIsContainerActive(true);
+ setValue(tasks);
+
+ idUnits = locality.ID
+ })
+ })
+
+
+
}
const OptionJSXTag = () => {
diff --git a/client/src/components/Timer.jsx b/client/src/components/Timer.jsx
index 187309c..4a38fb1 100644
--- a/client/src/components/Timer.jsx
+++ b/client/src/components/Timer.jsx
@@ -1,37 +1,27 @@
-import React, {useState, useEffect} from 'react';
-
-
export let SecondSeconds = 1;
export let SecondMinutes = 0;
-
+import React, { useState, useEffect } from 'react';
const Timer = () => {
+ const [time, setTime] = useState(0);
+ let seconds = Math.floor(time % 60);
+ let minutes = Math.floor(time / 60);
-
- const [seconds, setSeconds] = useState(0);
- const [minutes, setMinutes] = useState(0);
-
useEffect(() => {
- let timer = setInterval(() => {
+ const intervalId = setInterval(() => {
SecondSeconds = seconds;
SecondMinutes = minutes
- setSeconds(seconds + 1);
-
- if(seconds === 59) {
- setMinutes(minutes + 1);
- setSeconds(0);
- }
-
+ setTime(time + 1);
}, 1000);
-
-
- return () => clearInterval(timer);
- });
-
- return (
+ return () => clearInterval(intervalId);
+ }, [time]);
+
+ return (
+
- 
-
-
+
+
+ BRAWO !!!
-
- Twój wynik to: {endScore} / 10
-Czas: {SecondMinutes} minut {SecondSeconds} sekund
- - -Koniec
+W quizie uzyskałeś/aś:
+
+
+
+ {{endScore}/10 < 9 ? "Jesteś szybki.. ale pożar jest szybszy" : "Brawo udało ci się ugasić pożar !!!"}
+ + + + + +Twój czas wyniósł: + + {SecondMinutes}:{SecondSeconds < 10 ? `0${SecondSeconds}` : SecondSeconds}
+ + +Łącznie udało ci się zdobyć: {endScore}/10 pkt
+ + +Roznieć zapał, rozwiązuj quizy, i podziel się wynikiem ze znajomymi
+ +
+
+
+
+
+
+
+ {minutes < 10 ? "0"+minutes: minutes} : {seconds < 10 ? "0"+seconds: seconds}
- ) -} +
- 
-
-
-
+
+ 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);
+ let firstAvgPercent = percent * 10;
+ let SecondAvgPercent = percent * 100;
-
- )
-
- });
return (
<>
- {track}
+
+
+
-
-
- {name}
- + + let [truck, setTruck] = useState(''); + useEffect(()=> { - -
-
-
- {progress / 10}/10
-{progress}%
- handleImageClick(e)} >
+
+
+ 
handleImageClick(e)} />
+
+
+
+
+
+
+
+ )
+ })
+ )}
+
+
+ )
+ },[])
+
+ return (
+ <>
+ {truck}
diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index 68d93ff..284f875 100644
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -4,12 +4,18 @@
@import "./Truck.scss";
@import './Quiz.scss';
@import './Result.scss';
+
+
+
* {
margin: 0;
padding: 0;
box-sizing: border-box;
+
+}
+#root {
+ z-index: 10000000000000000;
}
-
::-webkit-scrollbar {
width: 1.5em;
@@ -36,6 +42,7 @@
min-height: 100vh;
display: flex;
flex-direction: column;
+
}
body {
diff --git a/client/src/style/_Quiz.scss b/client/src/style/_Quiz.scss
index c00d4a1..f664f2a 100644
--- a/client/src/style/_Quiz.scss
+++ b/client/src/style/_Quiz.scss
@@ -7,6 +7,7 @@
justify-content: center;
align-items: center;
+
}
.popup {
@@ -78,6 +79,7 @@
.questionText1 {
color: white;
font-size: 25px;
+ min-width: 200px;
}
}
@@ -221,12 +223,12 @@
}
.patronImg {
- width: $width-footer-icon / 3;
- height: $width-footer-icon / 3;;
+ width: calc($width-footer-icon / 3);
+ height: calc( $width-footer-icon / 3);
}
.patronImg1 {
- width: $width-footer-icon / 2;
+ width: calc($width-footer-icon / 2);
height: 70px;
}
@@ -262,6 +264,18 @@
font-size: 20px;
}
+ #resultButton{
+ font-size: 30px;
+ }
+ #resultButton1{
+ font-size: 30px;
+ }
+ .h2TimeResult{
+ font-size: 20px;
+ }
+ .h2TimeScore {
+ font-size: 20px;
+ }
}
@@ -326,7 +340,7 @@
font-size: 20px;
font-weight: bolder;
color: black;
-
+ display: block;
z-index: 900;
&:hover {
cursor: pointer;
@@ -364,4 +378,20 @@
.skrytka {
display: block;
border: 3px solid yellow;
+}
+
+.popupButton {
+ font-size: 40px;
+ padding: .5em;
+ border: none;
+ background-color: #d42436;
+ width: 100%;
+ height: 100%;
+ color: white;
+
+
+ position: absolute;
+ top: 0%;
+
+ z-index: 1000000;
}
\ No newline at end of file
diff --git a/client/src/style/_Result.scss b/client/src/style/_Result.scss
index 59fa0f1..b749b74 100644
--- a/client/src/style/_Result.scss
+++ b/client/src/style/_Result.scss
@@ -1,23 +1,91 @@
-.trophy {
- min-width: 450px;
- min-height: 450px;
- max-width: 450px;
- max-height: 450px;
-
-}
-.congratulationh2 {
- font-size: 40px;
- letter-spacing: 3px;
- margin-bottom: 0.1em;
+
+.endH1 {
+ font-size: 65px;
+ letter-spacing: 4px;
+ margin-bottom: 0.2em;
}
#resultButton {
- margin-top: 5%;
+ margin-top: 2%;
+ background-color: #d42436;;
+}
+#resultButton1 {
+ margin-top: 2%;
+ background-color: #c6c4c4;
+ color: black;
+}
+#hourglass {
+
+ font-size: 20px;
+ color: black;
+}
+.textDependsEndScore {
+ margin-top: 1em;
+}
+#resultMedia {
+ margin-top: 1em;
+
+
+ font-size: 60px;
+ color: #d42436;
+}
+.fa-brands{
+ margin-left: .5em;
+ margin-right: .5em;
}
.endScoreh2 {
font-size: 40px;
}
+.textEndScreenShare {
+ text-align: center;
+}
+
+@media (max-width: 400px) {
+ .textEndScreenShare {
+ font-size: 8px;
+ }
+}
+
+@media (max-width: 600px) {
+ #resultButton{
+ font-size: 20px;
+ }
+ #resultButton1{
+ font-size: 20px;
+ }
+ #h2TimeResultPage{
+ font-size: 15px;
+ }
+ #h2ScoreResult {
+ font-size: 15px;
+ }
+ .endH1 {
+ font-size: 30px;
+ }
+ .fa-brands{
+ margin-left: .5em;
+ margin-right: .5em;
+ }
+ #resultMedia {
+ font-size: 30px;
+ }
+ #hourglass{
+ font-size: 15px;
+ margin-left: .2em;
+ margin-right: .2em;
+ }
+
+ .scoreYouWin {
+ font-size: 15px;
+ }
+ .textEndScreenShare {
+ font-size: 12px;
+ }
+ .textDependsEndScore {
+ font-size: 15px;
+ }
+}
@media (max-width: 800px) {
.trophy {
diff --git a/client/src/style/congratulation.mp3 b/client/src/style/congratulation.mp3
deleted file mode 100644
index 2fef238..0000000
Binary files a/client/src/style/congratulation.mp3 and /dev/null differ
handleImageClick(e)}>
+
+
+ handleImageClick(e)}>{name}
+ + + + handleImageClick(e)}>
+
+
+