mirror of
https://github.com/originalmk/skrytka-app.git
synced 2024-10-03 12:26:09 +00:00
fix bug with boxes (width,bottom)
This commit is contained in:
Stachu
parent
53c923581b
commit
0addbf9765
@ -73,33 +73,33 @@ export const QuizDataImageFromDb = [
|
||||
},
|
||||
},
|
||||
{
|
||||
img: '../qweqweqsadqw',
|
||||
img: '',
|
||||
boxStyle: {
|
||||
name: "",
|
||||
top: "50%",
|
||||
left: "15%",
|
||||
height: "39%",
|
||||
width: "15.5%",
|
||||
top: "",
|
||||
left: "",
|
||||
height: "",
|
||||
width: "",
|
||||
},
|
||||
boxStyle1: {
|
||||
name1: "Dowódca 2",
|
||||
top1: "42%",
|
||||
left1: "32%",
|
||||
height1: "24%",
|
||||
width1: "18%",
|
||||
name1: "",
|
||||
top1: "",
|
||||
left1: "",
|
||||
height1: "",
|
||||
width1: "",
|
||||
},
|
||||
boxStyle2: {
|
||||
name2: "Dowódca 1",
|
||||
top2: "52%",
|
||||
left2: "49%",
|
||||
height2: "39%",
|
||||
width2: "14%",
|
||||
name2: "",
|
||||
top2: "",
|
||||
left2: "",
|
||||
height2: "",
|
||||
width2: "",
|
||||
},
|
||||
boxStyle3: {
|
||||
top2: "50%",
|
||||
left2: "49%",
|
||||
height2: "0",
|
||||
width2: "0",
|
||||
top3: "",
|
||||
left3: "",
|
||||
height3: "",
|
||||
width3: "",
|
||||
},
|
||||
|
||||
},
|
||||
@ -108,14 +108,32 @@ export const QuizDataImageFromDb = [
|
||||
img: '',
|
||||
boxStyle: {
|
||||
name: "",
|
||||
top: "42%",
|
||||
left: "50.5%",
|
||||
height: "41%",
|
||||
width: "18%",
|
||||
top: "",
|
||||
left: "",
|
||||
height: "",
|
||||
width: "",
|
||||
},
|
||||
boxStyle1: {
|
||||
name1: "",
|
||||
top1: "",
|
||||
left1: "",
|
||||
height1: "",
|
||||
width1: "",
|
||||
},
|
||||
boxStyle2: {
|
||||
name2: "",
|
||||
top2: "",
|
||||
left2: "",
|
||||
height2: "",
|
||||
width2: "",
|
||||
},
|
||||
boxStyle3: {
|
||||
name3: "",
|
||||
top3: "",
|
||||
left3: "",
|
||||
height3: "",
|
||||
width3: "",
|
||||
},
|
||||
boxStyle1: {},
|
||||
boxStyle2: {},
|
||||
boxStyle3: {},
|
||||
}
|
||||
];
|
||||
|
||||
@ -138,11 +156,17 @@ export const QuizGetImage = ({onPress, isClick,setButtonState}) => {
|
||||
// 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]);
|
||||
@ -233,6 +257,9 @@ useEffect(() => {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const {caches, sideImagePath} =singleProperty;
|
||||
imageArrayFromDB.push(sideImagePath);
|
||||
|
||||
@ -240,15 +267,8 @@ useEffect(() => {
|
||||
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)
|
||||
|
||||
@ -258,8 +278,8 @@ useEffect(() => {
|
||||
name1ArrayFromDB.push(caches[1].cacheName);
|
||||
|
||||
|
||||
cacheID0ArrayFromDB.push(caches[0].cacheID);
|
||||
cacheID1ArrayFromDB.push(caches[1].cacheID);
|
||||
cacheID0ArrayFromDB.push(caches[0].cacheID);
|
||||
cacheID1ArrayFromDB.push(caches[1].cacheID);
|
||||
|
||||
|
||||
left0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.x)
|
||||
@ -276,6 +296,7 @@ useEffect(() => {
|
||||
|
||||
break;
|
||||
case 3:
|
||||
console.log('Wykonało sie 3')
|
||||
name0ArrayFromDB.push(caches[0].cacheName);
|
||||
name1ArrayFromDB.push(caches[1].cacheName);
|
||||
name2ArrayFromDB.push(caches[2].cacheName);
|
||||
@ -326,6 +347,7 @@ useEffect(() => {
|
||||
|
||||
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)
|
||||
@ -421,8 +443,8 @@ useEffect(() => {
|
||||
<button ref = {buttonQuiz} name = {cacheID0Array[0][index]} onClick = {onPress} className="quiz_button" style = {{
|
||||
"width": `${sizeX0Array[0][index] * 100}%`,
|
||||
"height": `${sizeY0Array[0][index] * 100}%`,
|
||||
"top": `${left0Array[0][index] * 100}%`,
|
||||
"left": `${top0Array[0][index] * 100}%` !== "undefined%" ? `${top0Array[0][index] * 100}%` : "-300%",
|
||||
"left": `${left0Array[0][index]* 100}%` !== "undefined%" ? `${left0Array[0][index]* 100}%` : "-500%",
|
||||
"bottom": `${top0Array[0][index] * 100}%`,
|
||||
}}>{name0Array[0][index]}</button>
|
||||
|
||||
|
||||
@ -430,24 +452,24 @@ useEffect(() => {
|
||||
style = {{
|
||||
"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%",
|
||||
"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}%`,
|
||||
"top": `${left2Array[0][index]* 100}%`,
|
||||
"left": `${top2Array[0][index]* 100}%` !== "undefined%" ? `${top2Array[0][index]* 100}%` : "-300%",
|
||||
"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}%`,
|
||||
"top": `${left3Array[0][index]* 100}%`,
|
||||
"left": `${top3Array[0][index]* 100}%` !== "undefined%" ? `${top3Array[0][index] * 100}%` : "-300%",
|
||||
"left": `${left3Array[0][index]* 100}%` !== "undefined%" ? `${left3Array[0][index]* 100}%` : "-500%",
|
||||
"bottom": `${top3Array[0][index]* 100}%`,
|
||||
}}>{name3Array[0][index]}</button>
|
||||
|
||||
|
||||
|
||||
@ -1,206 +0,0 @@
|
||||
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;
|
||||
}
|
||||
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user