mirror of
https://github.com/originalmk/skrytka-app.git
synced 2024-10-03 12:26:09 +00:00
Code refactoring and bug fix
This commit is contained in:
Stachu
parent
fcca26a5d0
commit
064e99d5c0
@ -7,481 +7,102 @@ 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) => {
|
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";
|
||||||
|
button.style.pointerEvents = "none";
|
||||||
|
button.style.display = "block";
|
||||||
|
|
||||||
|
}else {
|
||||||
|
|
||||||
|
|
||||||
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)=> {
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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";
|
|
||||||
button.style.pointerEvents = "none";
|
button.style.pointerEvents = "none";
|
||||||
button.style.display = "block";
|
button.style.display = "none";
|
||||||
|
|
||||||
}else {
|
}
|
||||||
button.style.pointerEvents = "none";
|
})
|
||||||
button.style.display = "none";
|
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
else {
|
||||||
|
|
||||||
}
|
buttonsElementArray.forEach(button => {
|
||||||
else {
|
button.style.color = "black";
|
||||||
|
button.style.display = "block";
|
||||||
|
button.style.pointerEvents = "auto";
|
||||||
|
setScore(score + 1);
|
||||||
|
})
|
||||||
|
|
||||||
buttonsElementArray.forEach(button => {
|
}
|
||||||
button.style.color = "black";
|
}
|
||||||
button.style.display = "block";
|
<ButtonShowCorrectAnswer/>
|
||||||
button.style.pointerEvents = "auto";
|
|
||||||
setScore(score + 1);
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
useEffect(() => {
|
||||||
|
if(!TruckId) navigate('/')
|
||||||
|
fetch(API_URL)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => setData(data));
|
||||||
|
}, [API_URL]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<ButtonShowCorrectAnswer/>
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{buttonClick ? "" : <button onClick={() => setButtonClick(true)} className='popupButton'>Zacznij Quiz</button>}
|
|
||||||
|
|
||||||
<div className="boxElement">
|
|
||||||
<div className="quiz_container">
|
|
||||||
{`../${myArray[0][index]}` !== "../undefined"
|
|
||||||
? <img key = {index}src= {`../${myArray[0][index]}`} alt="track"/>
|
|
||||||
: <img key = {index}src= {`../${myArray[0][index]}`}
|
|
||||||
style = {{display: "none"}} alt="track"/>}
|
|
||||||
|
|
||||||
|
|
||||||
<button ref = {buttonQuiz} name = {cacheID0Array[0][index]} onClick = {onPress} className="quiz_button" style = {{
|
|
||||||
"width": `${sizeX0Array[0][index] * 100}%`,
|
|
||||||
"height": `${sizeY0Array[0][index] * 100}%`,
|
|
||||||
"left": `${left0Array[0][index]* 100}%` !== "undefined%" ? `${left0Array[0][index]* 100}%` : "-500%",
|
|
||||||
"bottom": `${top0Array[0][index] * 100}%`,
|
|
||||||
}}>{name0Array[0][index]}</button>
|
|
||||||
|
|
||||||
|
|
||||||
<button ref = {buttonQuiz} name = {cacheID1Array[0][index]} className="quiz_button" onClick = {onPress}
|
|
||||||
style = {{
|
|
||||||
"width": `${sizeX1Array[0][index]* 100}%`,
|
|
||||||
"height": `${sizeY1Array[0][index]* 100}%`,
|
|
||||||
"left": `${left1Array[0][index]* 100}%` !== "undefined%" ? `${left1Array[0][index]* 100}%` : "-500%",
|
|
||||||
"bottom": `${top1Array[0][index]* 100}%`,
|
|
||||||
}}>{name1Array[0][index]}</button>
|
|
||||||
|
|
||||||
<button ref = {buttonQuiz} name = {cacheID2Array[0][index]} className="quiz_button" onClick = {onPress}
|
|
||||||
style = {{
|
|
||||||
"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 (
|
return (
|
||||||
data
|
<>
|
||||||
)
|
{buttonClick ? "" : <button onClick={() => setButtonClick(true)} className='popupButton'>Zacznij Quiz</button>}
|
||||||
|
{!buttonClick && (
|
||||||
|
<style>
|
||||||
|
{`
|
||||||
|
html {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
</style>
|
||||||
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
{Object.keys(data).map(key => (
|
||||||
|
<div className="boxElement" key = {key}>
|
||||||
|
<div className="quiz_container">
|
||||||
|
|
||||||
|
<img key = {key}src= {`../${data[key].sideImagePath}`} alt="track"/>
|
||||||
|
|
||||||
|
{data[key].caches.map(({cacheID,cacheName, cacheRectangle}) => (
|
||||||
|
<button ref = {buttonQuiz} name = {cacheID} onClick = {onPress} className="quiz_button" style = {{
|
||||||
|
"width": `${cacheRectangle.size.x* 100}%`,
|
||||||
|
"height": `${cacheRectangle.size.y * 100}%`,
|
||||||
|
"left": `${cacheRectangle.leftBottomPoint.x * 100}%`,
|
||||||
|
"bottom": `${cacheRectangle.leftBottomPoint.y * 100}%`,
|
||||||
|
}}>{cacheName}</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
|
||||||
|
);
|
||||||
}
|
}
|
||||||
@ -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;
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user