originalmk/skrytka-app
1
0
Fork 0
mirror of https://github.com/originalmk/skrytka-app.git synced 2024-10-03 12:26:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix bug with boxes (width,bottom)

Browse Source
This commit is contained in:
Stachu 2023-03-13 23:12:16 +01:00
parent 53c923581b
commit 0addbf9765
2 changed files with 67 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
client/src/components/GetImageAndQuestion.jsx
View File

@ -73,33 +73,33 @@ export const QuizDataImageFromDb = [
}, },
}, },
{ {
img: '../qweqweqsadqw', img: '',
boxStyle: { boxStyle: {
name: "", name: "",
top: "50%", top: "",
left: "15%", left: "",
height: "39%", height: "",
width: "15.5%", width: "",
}, },
boxStyle1: { boxStyle1: {
name1: "Dowódca 2", name1: "",
top1: "42%", top1: "",
left1: "32%", left1: "",
height1: "24%", height1: "",
width1: "18%", width1: "",
}, },
boxStyle2: { boxStyle2: {
name2: "Dowódca 1", name2: "",
top2: "52%", top2: "",
left2: "49%", left2: "",
height2: "39%", height2: "",
width2: "14%", width2: "",
}, },
boxStyle3: { boxStyle3: {
top2: "50%", top3: "",
left2: "49%", left3: "",
height2: "0", height3: "",
width2: "0", width3: "",
}, },
}, },
@ -108,14 +108,32 @@ export const QuizDataImageFromDb = [
img: '', img: '',
boxStyle: { boxStyle: {
name: "", name: "",
top: "42%", top: "",
left: "50.5%", left: "",
height: "41%", height: "",
width: "18%", 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 !!! // TEN CAŁY KOD JEST DO REFACTORU !!!
let name0ArrayFromDB = []; let name0ArrayFromDB = [];
let name1ArrayFromDB = []; let name1ArrayFromDB = [];
let name2ArrayFromDB = []; let name2ArrayFromDB = [];
let name3ArrayFromDB = []; let name3ArrayFromDB = [];
const [name0Array] = useState([name0ArrayFromDB]); const [name0Array] = useState([name0ArrayFromDB]);
const [name1Array] = useState([name1ArrayFromDB]); const [name1Array] = useState([name1ArrayFromDB]);
const [name2Array] = useState([name2ArrayFromDB]); const [name2Array] = useState([name2ArrayFromDB]);
@ -233,6 +257,9 @@ useEffect(() => {
const {caches, sideImagePath} =singleProperty; const {caches, sideImagePath} =singleProperty;
imageArrayFromDB.push(sideImagePath); imageArrayFromDB.push(sideImagePath);
@ -240,15 +267,8 @@ useEffect(() => {
case 1: case 1:
name0ArrayFromDB.push(caches[0].cacheName); name0ArrayFromDB.push(caches[0].cacheName);
cacheID0ArrayFromDB.push(caches[0].cacheID); cacheID0ArrayFromDB.push(caches[0].cacheID);
left0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.x) left0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.x)
top0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.y); top0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.y);
cacheID0ArrayFromDB.push(caches[0].cacheID);
sizeX0ArrayFromDB.push(caches[0].cacheRectangle.size.x) sizeX0ArrayFromDB.push(caches[0].cacheRectangle.size.x)
sizeY0ArrayFromDB.push(caches[0].cacheRectangle.size.y) sizeY0ArrayFromDB.push(caches[0].cacheRectangle.size.y)
@ -276,6 +296,7 @@ useEffect(() => {
break; break;
case 3: case 3:
console.log('Wykonało sie 3')
name0ArrayFromDB.push(caches[0].cacheName); name0ArrayFromDB.push(caches[0].cacheName);
name1ArrayFromDB.push(caches[1].cacheName); name1ArrayFromDB.push(caches[1].cacheName);
name2ArrayFromDB.push(caches[2].cacheName); name2ArrayFromDB.push(caches[2].cacheName);
@ -326,6 +347,7 @@ useEffect(() => {
sizeX0ArrayFromDB.push(caches[0].cacheRectangle.size.x); sizeX0ArrayFromDB.push(caches[0].cacheRectangle.size.x);
sizeX1ArrayFromDB.push(caches[1].cacheRectangle.size.x); sizeX1ArrayFromDB.push(caches[1].cacheRectangle.size.x);
sizeX2ArrayFromDB.push(caches[2].cacheRectangle.size.x);
sizeX3ArrayFromDB.push(caches[3].cacheRectangle.size.x); sizeX3ArrayFromDB.push(caches[3].cacheRectangle.size.x);
sizeY0ArrayFromDB.push(caches[0].cacheRectangle.size.y) 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 = {{ <button ref = {buttonQuiz} name = {cacheID0Array[0][index]} onClick = {onPress} className="quiz_button" style = {{
"width": `${sizeX0Array[0][index] * 100}%`, "width": `${sizeX0Array[0][index] * 100}%`,
"height": `${sizeY0Array[0][index] * 100}%`, "height": `${sizeY0Array[0][index] * 100}%`,
"top": `${left0Array[0][index] * 100}%`, "left": `${left0Array[0][index]* 100}%` !== "undefined%" ? `${left0Array[0][index]* 100}%` : "-500%",
"left": `${top0Array[0][index] * 100}%` !== "undefined%" ? `${top0Array[0][index] * 100}%` : "-300%", "bottom": `${top0Array[0][index] * 100}%`,
}}>{name0Array[0][index]}</button> }}>{name0Array[0][index]}</button>
@ -430,24 +452,24 @@ useEffect(() => {
style = {{ style = {{
"width": `${sizeX1Array[0][index]* 100}%`, "width": `${sizeX1Array[0][index]* 100}%`,
"height": `${sizeY1Array[0][index]* 100}%`, "height": `${sizeY1Array[0][index]* 100}%`,
"top": `${left1Array[0][index]* 100}%`, "left": `${left1Array[0][index]* 100}%` !== "undefined%" ? `${left1Array[0][index]* 100}%` : "-500%",
"left": `${top1Array[0][index]* 100}%` !== "undefined%" ? `${top1Array[0][index]* 100}%` : "-300%", "bottom": `${top1Array[0][index]* 100}%`,
}}>{name1Array[0][index]}</button> }}>{name1Array[0][index]}</button>
<button ref = {buttonQuiz} name = {cacheID2Array[0][index]} className="quiz_button" onClick = {onPress} <button ref = {buttonQuiz} name = {cacheID2Array[0][index]} className="quiz_button" onClick = {onPress}
style = {{ style = {{
"width": `${sizeX2Array[0][index]* 100}%`, "width": `${sizeX2Array[0][index]* 100}%`,
"height": `${sizeY2Array[0][index]* 100}%`, "height": `${sizeY2Array[0][index]* 100}%`,
"top": `${left2Array[0][index]* 100}%`, "left": `${left2Array[0][index]* 100}%` !== "undefined%" ? `${left2Array[0][index]* 100}%` : "-500%",
"left": `${top2Array[0][index]* 100}%` !== "undefined%" ? `${top2Array[0][index]* 100}%` : "-300%", "bottom": `${top2Array[0][index]* 100}%`,
}}>{name2Array[0][index]}</button> }}>{name2Array[0][index]}</button>
<button ref = {buttonQuiz} name = {cacheID3Array[0][index]} className="quiz_button" onClick = {onPress} <button ref = {buttonQuiz} name = {cacheID3Array[0][index]} className="quiz_button" onClick = {onPress}
style = {{ style = {{
"width": `${sizeX3Array[0][index]* 100}%`, "width": `${sizeX3Array[0][index]* 100}%`,
"height": `${sizeY3Array[0][index]* 100}%`, "height": `${sizeY3Array[0][index]* 100}%`,
"top": `${left3Array[0][index]* 100}%`, "left": `${left3Array[0][index]* 100}%` !== "undefined%" ? `${left3Array[0][index]* 100}%` : "-500%",
"left": `${top3Array[0][index]* 100}%` !== "undefined%" ? `${top3Array[0][index] * 100}%` : "-300%", "bottom": `${top3Array[0][index]* 100}%`,
}}>{name3Array[0][index]}</button> }}>{name3Array[0][index]}</button>

206
client/src/components/QuizGetData.jsx
View File

@ -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;
}
});
})
})
}