mirror of
https://github.com/originalmk/skrytka-app.git
synced 2025-01-18 16:29:17 +00:00
Make call from the API
This commit is contained in:
parent
f5dff0ffae
commit
299f41ef8d
2
.env
2
.env
@ -3,3 +3,5 @@ DB_PASS=123
|
||||
DB_HOST=localhost
|
||||
DB_PORT=5432
|
||||
DB_NAME=postgres
|
||||
|
||||
SKIP_PREFLIGHT_CHECK=true
|
8
.env.example
Normal file
8
.env.example
Normal file
@ -0,0 +1,8 @@
|
||||
# These variables should be set before running app (for PostgreSQL database)
|
||||
# otherwise app will fail connecting to the database.
|
||||
|
||||
# DB_USER=xyz
|
||||
# DB_PASS=1234
|
||||
DB_HOST=localhost
|
||||
DB_PORT=5432
|
||||
DB_NAME=skrytka
|
13
README.md
Normal file
13
README.md
Normal file
@ -0,0 +1,13 @@
|
||||
# skrytka.app
|
||||
To start this application you need to:
|
||||
1. Configure database
|
||||
- Install PostgreSQL DBMS
|
||||
- Setup some database and user with permissions to it
|
||||
- Create .env file in the main directory and fill it in with fields DB_USER, DB_PASS, DB_HOST, DB_PORT and DB_NAME. In case of confusion you may check exemplary .env file saved as .env.example in the root directory of this repository.
|
||||
2. Run both SQL scripts, which are located in the main directory. For app to be usable it is also recommended to insert some data to the database.
|
||||
3. Run `npm install` in the main directory.
|
||||
4. Run `npm install` in the client directory.
|
||||
5. Run `npm build` in the client directory.
|
||||
6. Run `npm start` in the main directory
|
||||
7. App will run on localhost:5000
|
||||
Note: pm2 or/and nginx may be used to run this app for production
|
3734
client/package-lock.json
generated
3734
client/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -6,18 +6,24 @@
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"crypto-browserify": "^3.12.0",
|
||||
"react": "^18.2.0",
|
||||
"react-circular-progressbar": "^2.1.0",
|
||||
"react-confetti": "^6.1.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-lazy-load-image-component": "^1.5.6",
|
||||
"react-router-dom": "^6.7.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-router-dom": "^6.8.2",
|
||||
"react-scripts": "^5.0.1",
|
||||
"react-use": "^17.4.0",
|
||||
"react-use-window-size": "^1.0.1",
|
||||
"sass": "^1.57.1",
|
||||
"start": "^5.1.0",
|
||||
"stream": "^0.0.2",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"use-sound": "^4.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
"util": "^0.12.5",
|
||||
"web-vitals": "^2.1.4",
|
||||
"webpack": "^5.75.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
@ -25,7 +31,7 @@
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"proxy": "http://localhost:3001",
|
||||
"proxy": "http://localhost:5000",
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
@ -37,5 +43,8 @@
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack-cli": "^5.0.1"
|
||||
}
|
||||
}
|
||||
|
BIN
client/public/img/trucks/test.png
Normal file
BIN
client/public/img/trucks/test.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 926 KiB |
BIN
client/public/img/trucks/woz_jakis_tam11/lewa.png
Normal file
BIN
client/public/img/trucks/woz_jakis_tam11/lewa.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 926 KiB |
BIN
client/public/img/trucks/woz_jakis_tam11/prawa.png
Normal file
BIN
client/public/img/trucks/woz_jakis_tam11/prawa.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 926 KiB |
@ -12,6 +12,9 @@ const AppProvider = ({ children }) => {
|
||||
const [localization, setLocalization] = useState(localizationFromDBArr);
|
||||
const [isPopUpActive, setIsPopUpActive] = useState(true);
|
||||
const [idUnit, setId] = useState(1);
|
||||
const [getImage, setGetImage] = useState('');
|
||||
const [buttonClick, setButtonClick] = useState(false);
|
||||
|
||||
return (
|
||||
<AppContext.Provider value={{
|
||||
unitOsp,
|
||||
@ -24,7 +27,12 @@ const AppProvider = ({ children }) => {
|
||||
isPopUpActive,
|
||||
setIsPopUpActive,
|
||||
idUnit,
|
||||
setId
|
||||
setId,
|
||||
getImage,
|
||||
setGetImage,
|
||||
buttonClick,
|
||||
setButtonClick
|
||||
|
||||
|
||||
|
||||
}}>
|
||||
|
@ -29,8 +29,7 @@ const BottomFPage = () => {
|
||||
|
||||
|
||||
|
||||
<div className='FirstFooter'>Nie widzisz swojej jednostki? <li className='li-write-to-us'><a className='a-write-to-us' href = '/linkdostrony'> Napisz do nas!</a></li></div>
|
||||
<footer className='footerFirstSite'>@Wszelkie prawa zastrzeżone 2023 Skrytka.app<p className='skrytka-date'>Skrytka 2023</p></footer>
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -1,111 +1,80 @@
|
||||
import React, {useRef} from 'react';
|
||||
|
||||
export let EndCorrectAnswer = "";
|
||||
import React, {useRef, useEffect, useState} from 'react';
|
||||
import { TruckId } from './Truck';
|
||||
|
||||
import { EndCacheId } from './GetQuestion';
|
||||
|
||||
export let buttonQuiz = "";
|
||||
|
||||
let buttonsElement = "";
|
||||
let EndDrawQuestion = "";
|
||||
let ButtonShowCorrectAnswer = "";
|
||||
|
||||
export const QuizGetQuestion = ({score,isClick,setScore,setIsClick,navigate}) => {
|
||||
|
||||
const QuizDataQuestionFromDb = [
|
||||
{
|
||||
question: "Pytanie 1",
|
||||
coorectAnswer: "Kabina",
|
||||
},
|
||||
|
||||
{
|
||||
question: "Pytanie 2",
|
||||
coorectAnswer: "Dach",
|
||||
},
|
||||
{
|
||||
question: "Pytanie 3",
|
||||
coorectAnswer: "Dowódca 3",
|
||||
},
|
||||
{
|
||||
question: "Pytanie 4",
|
||||
coorectAnswer: "Kierowca 3",
|
||||
}
|
||||
];
|
||||
export let ButtonShowCorrectAnswer = "";
|
||||
|
||||
|
||||
|
||||
|
||||
let DrawQuestion = Math.floor(Math.random() * QuizDataQuestionFromDb.length);
|
||||
|
||||
if(isClick === true) {
|
||||
EndDrawQuestion = QuizDataQuestionFromDb[DrawQuestion].question;
|
||||
}
|
||||
|
||||
EndCorrectAnswer = QuizDataQuestionFromDb[DrawQuestion].coorectAnswer;
|
||||
|
||||
return (
|
||||
<div className="questionDiv">
|
||||
<h1 className='questionText1'>{EndDrawQuestion}</h1>
|
||||
<button onClick={() => ButtonShowCorrectAnswer(isClick, setIsClick , score , setScore, navigate)} className='NextQuestionButton'>{isClick ? "Pokaż odpowiedź" : "Następne pytanie"}</button>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export const QuizDataImageFromDb = [
|
||||
{
|
||||
img: '/img/fire-truck/wozLEFT.webp',
|
||||
img: '',
|
||||
boxStyle: {
|
||||
name: "Kierowca 1",
|
||||
top: "48%",
|
||||
left: "49%",
|
||||
height: "39%",
|
||||
width: "15.5%",
|
||||
name: "",
|
||||
top: "",
|
||||
left: "",
|
||||
height: "",
|
||||
width: "",
|
||||
},
|
||||
boxStyle1: {
|
||||
name1: "Kierowca 3",
|
||||
top1: "45%",
|
||||
left1: "83%",
|
||||
height1: "35%",
|
||||
width1: "13%",
|
||||
name1: "",
|
||||
top1: "",
|
||||
left1: "",
|
||||
height1: "",
|
||||
width1: "",
|
||||
},
|
||||
boxStyle2: {
|
||||
name2: "Kierowca 2",
|
||||
top2: "40%",
|
||||
left2: "67%",
|
||||
height2: "23%",
|
||||
width2: "18%",
|
||||
name2: "",
|
||||
top2: "",
|
||||
left2: "",
|
||||
height2: "",
|
||||
width2: "",
|
||||
},
|
||||
boxStyle3: {
|
||||
name3: "Kabina",
|
||||
top3: "38%",
|
||||
left3: "30%",
|
||||
height3: "35%",
|
||||
width3: "13%",
|
||||
name3: "",
|
||||
top3: "",
|
||||
left3: "",
|
||||
height3: "",
|
||||
width3: "",
|
||||
}
|
||||
},
|
||||
{
|
||||
img: '/img/fire-truck/wozTOP.webp',
|
||||
img: '',
|
||||
boxStyle: {
|
||||
name: "Dach",
|
||||
top: "48%",
|
||||
left: "69%",
|
||||
height: "35%",
|
||||
width: "35%",
|
||||
name: "",
|
||||
top: "",
|
||||
left: "",
|
||||
height: "",
|
||||
width: "",
|
||||
},boxStyle1: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
name1: "",
|
||||
top1: "",
|
||||
left1: "",
|
||||
height1: "",
|
||||
width1: "",
|
||||
},
|
||||
boxStyle2: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
name2: "",
|
||||
top2: "",
|
||||
left2: "",
|
||||
height2: "",
|
||||
width2: "",
|
||||
},
|
||||
boxStyle3: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
name3: "",
|
||||
top3: "",
|
||||
left3: "",
|
||||
height3: "",
|
||||
width3: "",
|
||||
},
|
||||
},
|
||||
{
|
||||
img: '/img/fire-truck/wozRIGHT.webp',
|
||||
img: '../qweqweqsadqw',
|
||||
boxStyle: {
|
||||
name: "Dowódca 3",
|
||||
name: "",
|
||||
top: "50%",
|
||||
left: "15%",
|
||||
height: "39%",
|
||||
@ -135,9 +104,9 @@ export const QuizDataImageFromDb = [
|
||||
},
|
||||
|
||||
{
|
||||
img: '/img/fire-truck/wozBACK.webp',
|
||||
img: '',
|
||||
boxStyle: {
|
||||
name: "Tył",
|
||||
name: "",
|
||||
top: "42%",
|
||||
left: "50.5%",
|
||||
height: "41%",
|
||||
@ -149,46 +118,262 @@ export const QuizDataImageFromDb = [
|
||||
}
|
||||
];
|
||||
|
||||
export const QuizGetImage = ({onPress, isClick}) => {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export const QuizGetImage = ({onPress, isClick,setButtonState}) => {
|
||||
buttonQuiz = useRef();
|
||||
const [buttonClick, setButtonClick] = useState(false);
|
||||
let imageArrayFromDB = [];
|
||||
setButtonState(buttonClick)
|
||||
//Nazwy
|
||||
|
||||
|
||||
const data = QuizDataImageFromDb.map(({img,boxStyle,boxStyle1,boxStyle2,boxStyle3}, index)=> {
|
||||
////////////////////////////////////////////////////////////////////
|
||||
/////////////////////////////////////////////////////////////
|
||||
////////////////////////////
|
||||
// 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]);
|
||||
|
||||
|
||||
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:
|
||||
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)
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const data = QuizDataImageFromDb.map(({img}, index)=> {
|
||||
|
||||
let {top,width,height,left,name} = boxStyle;
|
||||
let {top1,width1,height1,left1, name1} = boxStyle1;
|
||||
let {top2,width2,height2,left2, name2} = boxStyle2;
|
||||
let {top3,width3,height3,left3, name3} = boxStyle3;
|
||||
|
||||
|
||||
ButtonShowCorrectAnswer = (isClick, setIsClick, score,setScore,navigate) => {
|
||||
buttonsElement = document.querySelectorAll('.quiz_button');
|
||||
let buttonsElement = document.querySelectorAll('.quiz_button');
|
||||
const buttonsElementArray = Array.from(buttonsElement)
|
||||
setIsClick(!isClick);
|
||||
|
||||
|
||||
if(score === 9) {
|
||||
navigate('/result');
|
||||
}
|
||||
|
||||
if(isClick === true) {
|
||||
buttonsElementArray.forEach(button => {
|
||||
|
||||
if(EndCorrectAnswer === button.name){
|
||||
|
||||
if(EndCacheId == button.name){
|
||||
button.style.color = "yellow";
|
||||
|
||||
|
||||
button.style.pointerEvents = "none";
|
||||
button.style.display = "block";
|
||||
|
||||
}else {
|
||||
|
||||
button.style.pointerEvents = "none";
|
||||
button.style.display = "none";
|
||||
|
||||
}
|
||||
})
|
||||
}else {
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
buttonsElementArray.forEach(button => {
|
||||
button.style.color = "black";
|
||||
@ -202,44 +387,64 @@ export const QuizGetImage = ({onPress, isClick}) => {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ButtonShowCorrectAnswer/>
|
||||
return (
|
||||
<>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{buttonClick ? "" : <button onClick={() => setButtonClick(true)} className='popupButton'>Zacznij Quiz</button>}
|
||||
|
||||
<div className="boxElement">
|
||||
<div className="quiz_container">
|
||||
|
||||
<img key = {index}src= {img} alt="track"/>
|
||||
|
||||
<button ref = {buttonQuiz} name = {name} onClick = {onPress} className="quiz_button" style = {{
|
||||
"width": width,
|
||||
"height": height,
|
||||
"top": top,
|
||||
"left": left,
|
||||
}}>{name}</button>
|
||||
{`../${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 = {name1} className="quiz_button" onClick = {onPress}
|
||||
<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%",
|
||||
}}>{name0Array[0][index]}</button>
|
||||
|
||||
|
||||
<button ref = {buttonQuiz} name = {cacheID1Array[0][index]} className="quiz_button" onClick = {onPress}
|
||||
style = {{
|
||||
"width": width1,
|
||||
"height": height1,
|
||||
"top": top1,
|
||||
"left": left1,
|
||||
}}>{name1}</button>
|
||||
"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%",
|
||||
}}>{name1Array[0][index]}</button>
|
||||
|
||||
<button ref = {buttonQuiz} name = {name2} className="quiz_button" onClick = {onPress}
|
||||
<button ref = {buttonQuiz} name = {cacheID2Array[0][index]} className="quiz_button" onClick = {onPress}
|
||||
style = {{
|
||||
"width": width2,
|
||||
"height": height2,
|
||||
"top": top2,
|
||||
"left": left2,
|
||||
}}>{name2}</button>
|
||||
"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%",
|
||||
}}>{name2Array[0][index]}</button>
|
||||
|
||||
<button ref = {buttonQuiz} name = {name3} className="quiz_button" onClick = {onPress}
|
||||
<button ref = {buttonQuiz} name = {cacheID3Array[0][index]} className="quiz_button" onClick = {onPress}
|
||||
style = {{
|
||||
"width": width3,
|
||||
"height": height3,
|
||||
"top": top3,
|
||||
"left": left3,
|
||||
}}>{name3}</button>
|
||||
"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%",
|
||||
}}>{name3Array[0][index]}</button>
|
||||
|
||||
|
||||
</div>
|
||||
|
51
client/src/components/GetQuestion.jsx
Normal file
51
client/src/components/GetQuestion.jsx
Normal file
@ -0,0 +1,51 @@
|
||||
import { TruckId } from "./Truck";
|
||||
import { AppContext } from './AppContext';
|
||||
import React, {useContext, useEffect, useState} from 'react';
|
||||
import { ButtonShowCorrectAnswer } from "./GetImageAndQuestion";
|
||||
export let EndCacheId = "";
|
||||
export let EndCorrectAnswer = "";
|
||||
|
||||
|
||||
const FetchData = ({isClick,score,setIsClick,setScore,navigate}) => {
|
||||
const [test, setTest] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/random-question?fire-truck=${TruckId}`)
|
||||
.then(res => res.json())
|
||||
.then(dataQuestion => {
|
||||
if(isClick === true) {
|
||||
const propertValuesObjectFromDb = Object.values(dataQuestion);
|
||||
EndCorrectAnswer = propertValuesObjectFromDb[1];
|
||||
setTest(propertValuesObjectFromDb[1]);
|
||||
EndCacheId = propertValuesObjectFromDb[0];
|
||||
}
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<div className="questionDiv">
|
||||
<h1 className='questionText1'>{test}</h1>
|
||||
<button onClick={() => ButtonShowCorrectAnswer(isClick, setIsClick , score , setScore, navigate)} className='NextQuestionButton'>{isClick ? "Pokaż odpowiedź" : "Następne pytanie"}</button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export const QuizGetQuestion = ({score,isClick,setScore,setIsClick,navigate}) => {
|
||||
return (
|
||||
<FetchData score = {score} isClick = {isClick} setScore = {setScore} setIsClick = {setIsClick} navigate = {navigate}/>
|
||||
)
|
||||
|
||||
}
|
||||
|
@ -1,30 +1,40 @@
|
||||
import {useNavigate} from 'react-router-dom';
|
||||
import React, {useState} from 'react';
|
||||
import { QuizGetImage,QuizGetQuestion } from './GetImageAndQuestion';
|
||||
import AppProvider from './AppContext';
|
||||
import { EndCorrectAnswer } from './GetImageAndQuestion';
|
||||
import React, {useState, useContext} from 'react';
|
||||
import {QuizGetQuestion } from './GetQuestion';
|
||||
import { QuizGetImage } from './GetImageAndQuestion';
|
||||
import AppProvider, { AppContext } from './AppContext';
|
||||
import { EndCacheId } from './GetQuestion';
|
||||
import Timer from './Timer';
|
||||
import FooterQuiz from './FooterQuiz';
|
||||
export let link = "";
|
||||
export let endScore = 1;
|
||||
|
||||
const NavigationQuiz = ({score}) => {
|
||||
|
||||
|
||||
export let link = "";
|
||||
export let endScore = 0;
|
||||
|
||||
const NavigationQuiz = ({score,buttonState}) => {
|
||||
|
||||
console.log(endScore)
|
||||
|
||||
|
||||
link = /[^/]*$/.exec(`${window.location.href}`)[0];
|
||||
const navigate = useNavigate();
|
||||
|
||||
if(buttonState) {
|
||||
return (
|
||||
<div id = 'navigationQuiz' className='navigation'>
|
||||
<img onClick = {() => navigate(-1)} id = 'imgArrow' className='imgArrow' src="/img/arrow-turn.png" alt="arrow" />
|
||||
<div className="timer">
|
||||
<i className="fa-regular fa-hourglass"></i>
|
||||
<AppProvider>
|
||||
<AppContext.Provider>
|
||||
<Timer/>
|
||||
</AppProvider>
|
||||
</AppContext.Provider>
|
||||
|
||||
</div>
|
||||
<h1 className = 'score'>{score}/10</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -39,22 +49,23 @@ const QuizGame = () => {
|
||||
const navigate = useNavigate();
|
||||
const [score,setScore] = useState(0);
|
||||
const [isClick, setIsClick] = useState(true);
|
||||
|
||||
const [buttonState, setButtonState] = useState(false);
|
||||
|
||||
const ButtonNextQuestionClick = (e) => {
|
||||
setScore(score + 1);
|
||||
|
||||
console.log(Number(e.target.name), EndCacheId)
|
||||
if(score === 9)
|
||||
navigate("/result");
|
||||
else if (e.target.textContent === EndCorrectAnswer)
|
||||
else if (Number(e.target.name) === EndCacheId)
|
||||
endScore++;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
|
||||
<NavigationQuiz score = {score} />
|
||||
<NavigationQuiz score = {score} buttonState = {buttonState} />
|
||||
|
||||
<div className="question">
|
||||
|
||||
@ -76,7 +87,8 @@ const QuizGame = () => {
|
||||
<div className="trackImgBox">
|
||||
<QuizGetImage
|
||||
isClick = {isClick}
|
||||
onPress={(e) => ButtonNextQuestionClick(e)}/>
|
||||
onPress={(e) => ButtonNextQuestionClick(e)}
|
||||
setButtonState = {setButtonState}/>
|
||||
</div>
|
||||
|
||||
|
||||
|
206
client/src/components/QuizGetData.jsx
Normal file
206
client/src/components/QuizGetData.jsx
Normal file
@ -0,0 +1,206 @@
|
||||
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;
|
||||
}
|
||||
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
}
|
@ -1,41 +1,79 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { endScore } from './QuizGame';
|
||||
import { SecondSeconds } from './Timer';
|
||||
import { SecondMinutes } from './Timer';
|
||||
|
||||
import { TruckId } from './Truck';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Conffetti from './Conffetti';
|
||||
|
||||
import { link } from './QuizGame';
|
||||
import { InformationTrackFromDB } from './Truck';
|
||||
const UpdateTrackScore = () => {
|
||||
InformationTrackFromDB.forEach(track => {
|
||||
if(link === track.img.split(/\.(?=[^\.]+$)/)[0].slice(18)){
|
||||
track.progress = endScore * 10
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
import { CircularProgressbar , buildStyles } from 'react-circular-progressbar' ;
|
||||
import 'react-circular-progressbar/dist/styles.css';
|
||||
export let points = endScore;
|
||||
const Result = () => {
|
||||
console.log(TruckId, SecondSeconds, endScore)
|
||||
|
||||
fetch('/quiz-results', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({fireTruck: TruckId, seconds: SecondSeconds, points: endScore})
|
||||
});
|
||||
|
||||
const navigate = useNavigate();
|
||||
UpdateTrackScore();
|
||||
// UpdateTrackScore();
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="container">
|
||||
|
||||
<h1 className='congratulationh2'>Koniec</h1>
|
||||
<h2>W quizie uzyskałeś/aś: </h2>
|
||||
|
||||
<h3>{{endScore}/10 < 9 ? "Jesteś szybki.. ale pożar jest szybszy" : "Brawo udało ci się ugasić pożar"}</h3>
|
||||
<button id = "resultButton" className='NextQuestionButton' onClick = {() => navigate(-1)}>Zagraj jeszcze raz</button>
|
||||
<button id = "resultButton1" className='NextQuestionButton'onClick={() => navigate('/')}>Wróć do strony głównej</button>
|
||||
|
||||
<h2>Twój czas wyniósł: {SecondMinutes}:{SecondSeconds} </h2>
|
||||
<h2>Łącznie udało ci się zdobyć: {endScore}/10</h2>
|
||||
<h2>Roznieć zapał, rozwiązuj quizy, i podziel się wynikiem ze znajomymi</h2>
|
||||
<h1 className='endH1'>Koniec</h1>
|
||||
<h2 className='scoreYouWin'>W quizie uzyskałeś/aś: </h2>
|
||||
<div style = {{width: 180, height: 180}}>
|
||||
<CircularProgressbar
|
||||
value={endScore * 10}
|
||||
text={`${endScore * 10}%`}
|
||||
styles = { buildStyles ( {
|
||||
|
||||
pathColor : `#d42436` ,
|
||||
textColor : 'black' ,
|
||||
trailColor : '#c6c4c4' ,
|
||||
backgroundColor : '#d42436' ,
|
||||
} ) } />;
|
||||
</div>
|
||||
|
||||
<h3 className='textDependsEndScore'>{{endScore}/10 < 9 ? "Jesteś szybki.. ale pożar jest szybszy" : "Brawo udało ci się ugasić pożar !!!"}</h3>
|
||||
|
||||
|
||||
<button id = "resultButton" className='NextQuestionButton' onClick = {() => {
|
||||
endScore = 0;
|
||||
navigate(-1)
|
||||
}}>Zagraj jeszcze raz</button>
|
||||
<button id = "resultButton1" className='NextQuestionButton'onClick={() => {
|
||||
endScore = 0;
|
||||
navigate('/');
|
||||
}}>Wróć do strony głównej</button>
|
||||
|
||||
<h2 id='h2TimeResultPage'>Twój czas wyniósł:
|
||||
<i id = 'hourglass' className="fa-regular fa-hourglass"></i>
|
||||
{SecondMinutes}:{SecondSeconds < 10 ? `0${SecondSeconds}` : SecondSeconds} </h2>
|
||||
|
||||
|
||||
<h2 id='h2ScoreResult'>Łącznie udało ci się zdobyć: {endScore}/10 pkt</h2>
|
||||
|
||||
|
||||
<h4 className='textEndScreenShare'>Roznieć zapał, rozwiązuj quizy, i podziel się wynikiem ze znajomymi</h4>
|
||||
|
||||
<div id = 'resultMedia'>
|
||||
|
||||
<i className="fa-brands fa-facebook"></i>
|
||||
<i className="fa-brands fa-instagram"></i>
|
||||
<i className="fa-brands fa-youtube"></i>
|
||||
</div>
|
||||
|
||||
<Conffetti/>
|
||||
|
||||
@ -47,5 +85,6 @@ const Result = () => {
|
||||
</>
|
||||
|
||||
)
|
||||
|
||||
}
|
||||
export default Result;
|
@ -1,14 +1,11 @@
|
||||
import React, {useState, useEffect} from 'react';
|
||||
import React, {useState, useEffect, useContext} from 'react';
|
||||
|
||||
|
||||
export let SecondSeconds = 1;
|
||||
export let SecondMinutes = 0;
|
||||
|
||||
|
||||
|
||||
const Timer = () => {
|
||||
|
||||
|
||||
const [seconds, setSeconds] = useState(0);
|
||||
const [minutes, setMinutes] = useState(0);
|
||||
|
||||
@ -29,6 +26,10 @@ const Timer = () => {
|
||||
return () => clearInterval(timer);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<h1 className='timerTime'>{minutes < 10 ? "0"+minutes: minutes} : {seconds < 10 ? "0"+seconds: seconds}</h1>
|
||||
)
|
||||
|
@ -5,24 +5,11 @@ import { useParams } from 'react-router-dom';
|
||||
import {Link} from 'react-router-dom';
|
||||
import { AppContext } from './AppContext';
|
||||
import { idUnits } from './SelectBox';
|
||||
export let InformationTrackFromDB = [
|
||||
{
|
||||
img: '../img/fire-truck/track1.jpg',
|
||||
name: "Wóz 1",
|
||||
progress: 70,
|
||||
},
|
||||
|
||||
{
|
||||
img: '../img/fire-truck/track2.jpg',
|
||||
name: "Wóz 2",
|
||||
progress: 20,
|
||||
},
|
||||
{
|
||||
img: '../img/fire-truck/track3.jpg',
|
||||
name: "Wóz 3",
|
||||
progress: 0,
|
||||
}
|
||||
];
|
||||
|
||||
export let TruckId = "";
|
||||
|
||||
|
||||
|
||||
const Truck = () => {
|
||||
|
||||
@ -56,8 +43,12 @@ const Truck = () => {
|
||||
fetch(`/fire-trucks?osp-unit=${idUnits}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setTruck(data.map(({name,imagePath,avgPercent},index) => {
|
||||
console.log(name)
|
||||
setTruck(data.map(({ID,name,imagePath,avgPercent},index) => {
|
||||
TruckId = ID;
|
||||
|
||||
let firstAvgPercent = avgPercent * 10;
|
||||
let SecondAvgPercent = avgPercent * 100;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -65,17 +56,17 @@ const Truck = () => {
|
||||
<div className="boxTrack" key = {index} id = {imagePath} name = {name} onClick={(e) => handleImageClick(e)} >
|
||||
|
||||
|
||||
<img className='imageFireTrack' id = {imagePath} src={`../${imagePath}`} alt="img" />
|
||||
<img className='imageFireTrack' id = {imagePath} src={`../${imagePath}`} alt="img" name = {name} onClick={(e) => handleImageClick(e)} />
|
||||
|
||||
|
||||
<div className="informationAboutTrack">
|
||||
<h3 className= 'TrackName'>{name}</h3>
|
||||
<div className="informationAboutTrack" name = {name} onClick={(e) => handleImageClick(e)}>
|
||||
<h3 className= 'TrackName' name = {name} onClick={(e) => handleImageClick(e)}>{name}</h3>
|
||||
|
||||
|
||||
<progress className="progress" max="100" value={avgPercent}></progress>
|
||||
<div className='ScoringValueTrack'>
|
||||
<h4>{avgPercent / 10}/10</h4>
|
||||
<h4>{avgPercent}%</h4>
|
||||
<progress className="progress" max="100" value={SecondAvgPercent} name = {name} onClick={(e) => handleImageClick(e)} ></progress>
|
||||
<div className='ScoringValueTrack' name = {name} onClick={(e) => handleImageClick(e)}>
|
||||
<h4 name = {name} onClick={(e) => handleImageClick(e)}>{firstAvgPercent}/10</h4>
|
||||
<h4 name = {name} onClick={(e) => handleImageClick(e)}>{SecondAvgPercent}%</h4>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -91,7 +82,7 @@ const Truck = () => {
|
||||
|
||||
|
||||
)
|
||||
}, []);
|
||||
},[])
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -4,12 +4,18 @@
|
||||
@import "./Truck.scss";
|
||||
@import './Quiz.scss';
|
||||
@import './Result.scss';
|
||||
|
||||
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
}
|
||||
#root {
|
||||
z-index: 10000000000000000;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 1.5em;
|
||||
@ -36,6 +42,7 @@
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
|
@ -7,6 +7,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.popup {
|
||||
@ -78,6 +79,7 @@
|
||||
.questionText1 {
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
min-width: 200px;
|
||||
|
||||
}
|
||||
}
|
||||
@ -221,12 +223,12 @@
|
||||
}
|
||||
|
||||
.patronImg {
|
||||
width: $width-footer-icon / 3;
|
||||
height: $width-footer-icon / 3;;
|
||||
width: calc($width-footer-icon / 3);
|
||||
height: calc( $width-footer-icon / 3);
|
||||
|
||||
}
|
||||
.patronImg1 {
|
||||
width: $width-footer-icon / 2;
|
||||
width: calc($width-footer-icon / 2);
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
@ -262,6 +264,18 @@
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
#resultButton{
|
||||
font-size: 30px;
|
||||
}
|
||||
#resultButton1{
|
||||
font-size: 30px;
|
||||
}
|
||||
.h2TimeResult{
|
||||
font-size: 20px;
|
||||
}
|
||||
.h2TimeScore {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -326,7 +340,7 @@
|
||||
font-size: 20px;
|
||||
font-weight: bolder;
|
||||
color: black;
|
||||
|
||||
display: block;
|
||||
z-index: 900;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
@ -365,3 +379,19 @@
|
||||
display: block;
|
||||
border: 3px solid yellow;
|
||||
}
|
||||
|
||||
.popupButton {
|
||||
font-size: 40px;
|
||||
padding: .5em;
|
||||
border: none;
|
||||
background-color: #d42436;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
|
||||
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
|
||||
z-index: 1000000;
|
||||
}
|
@ -1,23 +1,91 @@
|
||||
|
||||
.congratulationh2 {
|
||||
font-size: 40px;
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 0.1em;
|
||||
.endH1 {
|
||||
font-size: 65px;
|
||||
letter-spacing: 4px;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
#resultButton {
|
||||
margin-top: 5%;
|
||||
background-color: #d42436;
|
||||
margin-top: 2%;
|
||||
background-color: #d42436;;
|
||||
}
|
||||
#resultButton1 {
|
||||
margin-top: 5%;
|
||||
margin-top: 2%;
|
||||
background-color: #c6c4c4;
|
||||
color: black;
|
||||
}
|
||||
#hourglass {
|
||||
|
||||
font-size: 20px;
|
||||
color: black;
|
||||
}
|
||||
.textDependsEndScore {
|
||||
margin-top: 1em;
|
||||
}
|
||||
#resultMedia {
|
||||
margin-top: 1em;
|
||||
|
||||
|
||||
font-size: 60px;
|
||||
color: #d42436;
|
||||
}
|
||||
.fa-brands{
|
||||
margin-left: .5em;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.endScoreh2 {
|
||||
font-size: 40px;
|
||||
}
|
||||
.textEndScreenShare {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.textEndScreenShare {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#resultButton{
|
||||
font-size: 20px;
|
||||
}
|
||||
#resultButton1{
|
||||
font-size: 20px;
|
||||
}
|
||||
#h2TimeResultPage{
|
||||
font-size: 15px;
|
||||
}
|
||||
#h2ScoreResult {
|
||||
font-size: 15px;
|
||||
}
|
||||
.endH1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.fa-brands{
|
||||
margin-left: .5em;
|
||||
margin-right: .5em;
|
||||
}
|
||||
#resultMedia {
|
||||
font-size: 30px;
|
||||
}
|
||||
#hourglass{
|
||||
font-size: 15px;
|
||||
margin-left: .2em;
|
||||
margin-right: .2em;
|
||||
}
|
||||
|
||||
.scoreYouWin {
|
||||
font-size: 15px;
|
||||
}
|
||||
.textEndScreenShare {
|
||||
font-size: 12px;
|
||||
}
|
||||
.textDependsEndScore {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.trophy {
|
||||
|
26425
package-lock.json
generated
26425
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -5,7 +5,6 @@
|
||||
"main": "app.js",
|
||||
"scripts": {
|
||||
"start": "node app.js"
|
||||
|
||||
},
|
||||
"author": "Zespół Skrytka.App",
|
||||
"license": "ISC",
|
||||
@ -16,6 +15,7 @@
|
||||
"express-session": "^1.17.3",
|
||||
"pg": "^8.9.0",
|
||||
"pg-promise": "^11.2.0",
|
||||
"react-scripts": "^5.0.1",
|
||||
"response-time": "^2.3.2",
|
||||
"validator": "^13.9.0"
|
||||
}
|
||||
|
@ -102,3 +102,14 @@ WITH (OIDS=FALSE);
|
||||
ALTER TABLE user_session ADD CONSTRAINT "session_pkey" PRIMARY KEY ("sid") NOT DEFERRABLE INITIALLY IMMEDIATE;
|
||||
|
||||
CREATE INDEX "IDX_session_expire" ON user_session ("expire");
|
||||
|
||||
CREATE TABLE user_session (
|
||||
"sid" varchar NOT NULL COLLATE "default",
|
||||
"sess" json NOT NULL,
|
||||
"expire" timestamp(6) NOT NULL
|
||||
)
|
||||
WITH (OIDS=FALSE);
|
||||
|
||||
ALTER TABLE user_session ADD CONSTRAINT "session_pkey" PRIMARY KEY ("sid") NOT DEFERRABLE INITIALLY IMMEDIATE;
|
||||
|
||||
CREATE INDEX "IDX_session_expire" ON user_session ("expire");
|
Loading…
x
Reference in New Issue
Block a user