From 064e99d5c06012f0a53c3d83aa5370d19d00b683 Mon Sep 17 00:00:00 2001 From: Stachu Date: Sun, 26 Mar 2023 21:08:58 +0200 Subject: [PATCH] Code refactoring and bug fix --- client/src/components/GetImageAndQuestion.jsx | 545 +++--------------- client/src/style/_Quiz.scss | 43 +- 2 files changed, 88 insertions(+), 500 deletions(-) diff --git a/client/src/components/GetImageAndQuestion.jsx b/client/src/components/GetImageAndQuestion.jsx index 87c765a..113e600 100644 --- a/client/src/components/GetImageAndQuestion.jsx +++ b/client/src/components/GetImageAndQuestion.jsx @@ -7,481 +7,102 @@ import { EndCacheId } from './GetQuestion'; export let buttonQuiz = ""; export let ButtonShowCorrectAnswer = ""; - - -export const QuizDataImageFromDb = [ - { - img: '', - boxStyle: { - name: "", - top: "", - left: "", - height: "", - width: "", - }, - boxStyle1: { - name1: "", - top1: "", - left1: "", - height1: "", - width1: "", - }, - boxStyle2: { - name2: "", - top2: "", - left2: "", - height2: "", - width2: "", - }, - boxStyle3: { - name3: "", - top3: "", - left3: "", - height3: "", - width3: "", - } - }, - { - img: '', - boxStyle: { - name: "", - top: "", - left: "", - height: "", - width: "", - },boxStyle1: { - name1: "", - top1: "", - left1: "", - height1: "", - width1: "", - }, - boxStyle2: { - name2: "", - top2: "", - left2: "", - height2: "", - width2: "", - }, - boxStyle3: { - name3: "", - top3: "", - left3: "", - height3: "", - width3: "", - }, - }, - { - img: '', - boxStyle: { - name: "", - top: "", - left: "", - height: "", - width: "", - }, - boxStyle1: { - name1: "", - top1: "", - left1: "", - height1: "", - width1: "", - }, - boxStyle2: { - name2: "", - top2: "", - left2: "", - height2: "", - width2: "", - }, - boxStyle3: { - top3: "", - left3: "", - height3: "", - width3: "", - }, - - }, - - { - img: '', - boxStyle: { - name: "", - top: "", - left: "", - height: "", - width: "", - }, - boxStyle1: { - name1: "", - top1: "", - left1: "", - height1: "", - width1: "", - }, - boxStyle2: { - name2: "", - top2: "", - left2: "", - height2: "", - width2: "", - }, - boxStyle3: { - name3: "", - top3: "", - left3: "", - height3: "", - width3: "", - }, - } -]; let MAX_POINT = 9; - - - - 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]); + const [data, setData] = useState([]); + const API_URL = `/quiz-pages?fire-truck=${TruckId}`; const navigate = useNavigate(); + + + setButtonState(buttonClick) + buttonQuiz = useRef(); -useEffect(() => { + + + ButtonShowCorrectAnswer = (isClick, setIsClick, score,setScore,navigate) => { + let buttonsElement = document.querySelectorAll('.quiz_button'); + const buttonsElementArray = Array.from(buttonsElement) + setIsClick(!isClick); - if(!TruckId) navigate('/') - - - 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); - 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); - sizeX2ArrayFromDB.push(caches[2].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; - } - - }); - }) - }) - - - - - - - + if(score === MAX_POINT) { + navigate('/result'); + } + if(isClick) { + buttonsElementArray.forEach(button => { - const data = QuizDataImageFromDb.map(({img}, index)=> { - - - - ButtonShowCorrectAnswer = (isClick, setIsClick, score,setScore,navigate) => { - let buttonsElement = document.querySelectorAll('.quiz_button'); - const buttonsElementArray = Array.from(buttonsElement) - setIsClick(!isClick); - - if(score === MAX_POINT) { - navigate('/result'); - } - if(isClick) { - buttonsElementArray.forEach(button => { - - - if(EndCacheId == button.name){ - button.style.color = "yellow"; + if(EndCacheId == button.name){ + button.style.color = "yellow"; + button.style.pointerEvents = "none"; + button.style.display = "block"; + + }else { button.style.pointerEvents = "none"; - button.style.display = "block"; - - }else { - button.style.pointerEvents = "none"; - button.style.display = "none"; - - } - }) - - } - else { - - buttonsElementArray.forEach(button => { - button.style.color = "black"; - button.style.display = "block"; - button.style.pointerEvents = "auto"; - setScore(score + 1); - }) - - } - - - } - - - - - - - - - return ( - <> - - - - - - - - - {buttonClick ? "" : } - -
-
- {`../${myArray[0][index]}` !== "../undefined" - ? track - : track} - - - - - - - - - - + button.style.display = "none"; + } + }) + + } + else { + + buttonsElementArray.forEach(button => { + button.style.color = "black"; + button.style.display = "block"; + button.style.pointerEvents = "auto"; + setScore(score + 1); + }) + + } + } + + + + useEffect(() => { + if(!TruckId) navigate('/') + fetch(API_URL) + .then(res => res.json()) + .then(data => setData(data)); + }, [API_URL]); -
-
- - - - ) - - }); return ( - data - ) + <> + {buttonClick ? "" : } + {!buttonClick && ( + + )} + + + {Object.keys(data).map(key => ( +
+
+ + track + + {data[key].caches.map(({cacheID,cacheName, cacheRectangle}) => ( + + ))} +
+
+ + ))} + + + ); } \ No newline at end of file diff --git a/client/src/style/_Quiz.scss b/client/src/style/_Quiz.scss index 1226e8c..6d054ba 100644 --- a/client/src/style/_Quiz.scss +++ b/client/src/style/_Quiz.scss @@ -8,41 +8,6 @@ align-items: center; -} - -.popup { - display: flex; - justify-content: space-around; - - align-items: center; - flex-direction: column; - width: 70vw; - height: 80vh; - border: 2px solid black; - - - .startQuizText { - font-size: 50px; - text-align: center; - } - - .twoButton { - width: 70vw; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - - .startQuizBtn { - @include quizBtnView(); - } - - .backSiteQuizBtn { - @include quizBtnView(); - } - } - - } @@ -397,13 +362,15 @@ padding: .5em; border: none; background-color: #d42436; - width: 100%; - height: 100%; + width: 100vw; + height: 100%; color: white; position: absolute; top: 0%; - + + + overflow-x: hidden; z-index: 1000000; } \ No newline at end of file