Code refactoring and bug fix

This commit is contained in:
Stachu 2023-03-26 21:08:58 +02:00
parent fcca26a5d0
commit 064e99d5c0
2 changed files with 88 additions and 500 deletions

View File

@ -7,368 +7,18 @@ import { EndCacheId } from './GetQuestion';
export let buttonQuiz = ""; export let buttonQuiz = "";
export let ButtonShowCorrectAnswer = ""; 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; let MAX_POINT = 9;
export const QuizGetImage = ({onPress, isClick,setButtonState}) => { export const QuizGetImage = ({onPress, isClick,setButtonState}) => {
buttonQuiz = useRef();
const [buttonClick, setButtonClick] = useState(false); const [buttonClick, setButtonClick] = useState(false);
let imageArrayFromDB = []; const [data, setData] = useState([]);
setButtonState(buttonClick) const API_URL = `/quiz-pages?fire-truck=${TruckId}`;
//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 navigate = useNavigate(); const navigate = useNavigate();
useEffect(() => {
if(!TruckId) navigate('/') setButtonState(buttonClick)
buttonQuiz = useRef();
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;
}
});
})
})
const data = QuizDataImageFromDb.map(({img}, index)=> {
@ -407,81 +57,52 @@ useEffect(() => {
}) })
} }
} }
<ButtonShowCorrectAnswer/> <ButtonShowCorrectAnswer/>
useEffect(() => {
if(!TruckId) navigate('/')
fetch(API_URL)
.then(res => res.json())
.then(data => setData(data));
}, [API_URL]);
return ( return (
<> <>
{buttonClick ? "" : <button onClick={() => setButtonClick(true)} className='popupButton'>Zacznij Quiz</button>} {buttonClick ? "" : <button onClick={() => setButtonClick(true)} className='popupButton'>Zacznij Quiz</button>}
{!buttonClick && (
<div className="boxElement"> <style>
<div className="quiz_container"> {`
{`../${myArray[0][index]}` !== "../undefined" html {
? <img key = {index}src= {`../${myArray[0][index]}`} alt="track"/> overflow: hidden;
: <img key = {index}src= {`../${myArray[0][index]}`} }
style = {{display: "none"}} alt="track"/>} `}
</style>
)}
<button ref = {buttonQuiz} name = {cacheID0Array[0][index]} onClick = {onPress} className="quiz_button" style = {{
"width": `${sizeX0Array[0][index] * 100}%`,
"height": `${sizeY0Array[0][index] * 100}%`, {Object.keys(data).map(key => (
"left": `${left0Array[0][index]* 100}%` !== "undefined%" ? `${left0Array[0][index]* 100}%` : "-500%", <div className="boxElement" key = {key}>
"bottom": `${top0Array[0][index] * 100}%`, <div className="quiz_container">
}}>{name0Array[0][index]}</button>
<img key = {key}src= {`../${data[key].sideImagePath}`} alt="track"/>
<button ref = {buttonQuiz} name = {cacheID1Array[0][index]} className="quiz_button" onClick = {onPress} {data[key].caches.map(({cacheID,cacheName, cacheRectangle}) => (
style = {{ <button ref = {buttonQuiz} name = {cacheID} onClick = {onPress} className="quiz_button" style = {{
"width": `${sizeX1Array[0][index]* 100}%`, "width": `${cacheRectangle.size.x* 100}%`,
"height": `${sizeY1Array[0][index]* 100}%`, "height": `${cacheRectangle.size.y * 100}%`,
"left": `${left1Array[0][index]* 100}%` !== "undefined%" ? `${left1Array[0][index]* 100}%` : "-500%", "left": `${cacheRectangle.leftBottomPoint.x * 100}%`,
"bottom": `${top1Array[0][index]* 100}%`, "bottom": `${cacheRectangle.leftBottomPoint.y * 100}%`,
}}>{name1Array[0][index]}</button> }}>{cacheName}</button>
))}
<button ref = {buttonQuiz} name = {cacheID2Array[0][index]} className="quiz_button" onClick = {onPress} </div>
style = {{ </div>
"width": `${sizeX2Array[0][index]* 100}%`,
"height": `${sizeY2Array[0][index]* 100}%`, ))}
"left": `${left2Array[0][index]* 100}%` !== "undefined%" ? `${left2Array[0][index]* 100}%` : "-500%", </>
"bottom": `${top2Array[0][index]* 100}%`,
}}>{name2Array[0][index]}</button> );
<button ref = {buttonQuiz} name = {cacheID3Array[0][index]} className="quiz_button" onClick = {onPress}
style = {{
"width": `${sizeX3Array[0][index]* 100}%`,
"height": `${sizeY3Array[0][index]* 100}%`,
"left": `${left3Array[0][index]* 100}%` !== "undefined%" ? `${left3Array[0][index]* 100}%` : "-500%",
"bottom": `${top3Array[0][index]* 100}%`,
}}>{name3Array[0][index]}</button>
</div>
</div>
</>
)
});
return (
data
)
} }

View File

@ -8,41 +8,6 @@
align-items: center; 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,7 +362,7 @@
padding: .5em; padding: .5em;
border: none; border: none;
background-color: #d42436; background-color: #d42436;
width: 100%; width: 100vw;
height: 100%; height: 100%;
color: white; color: white;
@ -405,5 +370,7 @@
position: absolute; position: absolute;
top: 0%; top: 0%;
overflow-x: hidden;
z-index: 1000000; z-index: 1000000;
} }