Make call from the API

.env

@@ -3,3 +3,5 @@ DB_PASS=123
 DB_HOST=localhost
 DB_PORT=5432
 DB_NAME=postgres
+
+SKIP_PREFLIGHT_CHECK=true

.env.example

@@ -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

README.md

@@ -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

client/package.json

@@ -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-router-dom": "^6.8.2",
-    "react-scripts": "5.0.1",
+    "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"
   }
 }

client/src/App.js

@@ -24,7 +24,7 @@ function App() {
 
       </div>
 
-     <footer className='footerFirstSite'><p className='skrytka-date'>Skrytka 2023</p>Affero General Public License v3.0</footer> 
+      <footer className='footerFirstSite'><p className='skrytka-date'>Skrytka 2023</p>Affero General Public License v3.0</footer>
 
     </>
   );

client/src/components/AppContext.js

@@ -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
+
 
 
     }}>

client/src/components/BottomFPage.jsx

@@ -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> 
    
      
      

client/src/components/GetImageAndQuestion.jsx

@@ -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 = "";
-
+export let ButtonShowCorrectAnswer = "";
-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",
-    }
-  ];
 
 
 
-
-   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",
+        name: "",
-        top: "48%",
+        top: "",
-        left: "49%",
+        left: "",
-        height: "39%",
+        height: "",
-        width: "15.5%",
+        width: "",
     },
     boxStyle1: {
-      name1: "Kierowca 3",
+      name1: "",
-      top1: "45%",
+      top1: "",
-      left1: "83%",
+      left1: "",
-      height1: "35%",
+      height1: "",
-      width1: "13%",
+      width1: "",
     },
       boxStyle2: {
-        name2: "Kierowca 2",
+        name2: "",
-        top2: "40%",
+        top2: "",
-        left2: "67%",
+        left2: "",
-        height2: "23%",
+        height2: "",
-        width2: "18%",
+        width2: "",
     },
     boxStyle3: {
-      name3: "Kabina",
+      name3: "",
-      top3: "38%",
+      top3: "",
-      left3: "30%",
+      left3: "",
-      height3: "35%",
+      height3: "",
-      width3: "13%",
+      width3: "",
     }
   },
   {
-    img: '/img/fire-truck/wozTOP.webp',
+    img: '',
     boxStyle: {
-      name: "Dach",
+      name: "",
-      top: "48%",
+      top: "",
-      left: "69%",
+      left: "",
-      height: "35%",
+      height: "",
-      width: "35%",
+      width: "",
   },boxStyle1: {
-    width: 0,
+    name1: "",
-    height: 0,
+    top1: "",
+    left1: "",
+    height1: "",
+    width1: "",
   },
     boxStyle2: {   
-      width: 0,
+      name2: "",
-      height: 0,
+      top2: "",
+      left2: "",
+      height2: "",
+      width2: "",
     },
     boxStyle3: {   
-      width: 0,
+      name3: "",
-      height: 0,
+      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";
@@ -200,46 +385,66 @@ export const QuizGetImage = ({onPress, isClick}) => {
     }
     
     
-  }
+    } 
     
+
+
+
+
+
+      
+    <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= {img} alt="track"/> 
+      ?  <img key = {index}src= {`../${myArray[0][index]}`} alt="track"/> 
-
+      :   <img key = {index}src= {`../${myArray[0][index]}`} 
-        <button ref = {buttonQuiz} name = {name} onClick = {onPress} className="quiz_button"  style = {{
+      style = {{display: "none"}} alt="track"/>}
-          "width": width,
-          "height": height,
-          "top": top,
-          "left": left,
-        }}>{name}</button>
 
 
-        <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,
+          "width": `${sizeX1Array[0][index]* 100}%`,
-          "height": height1,
+          "height": `${sizeY1Array[0][index]* 100}%`,
-          "top": top1,
+          "top": `${left1Array[0][index]* 100}%`,
-          "left": left1,
+          "left": `${top1Array[0][index]* 100}%` !== "undefined%" ?  `${top1Array[0][index]* 100}%` : "-300%",
-        }}>{name1}</button>
+        }}>{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,
+          "width": `${sizeX2Array[0][index]* 100}%`,
-          "height": height2,
+          "height": `${sizeY2Array[0][index]* 100}%`,
-          "top": top2,
+          "top": `${left2Array[0][index]* 100}%`,
-          "left": left2,
+          "left": `${top2Array[0][index]* 100}%` !== "undefined%" ?  `${top2Array[0][index]* 100}%`  : "-300%",
-        }}>{name2}</button>
+        }}>{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,
+          "width": `${sizeX3Array[0][index]* 100}%`,
-          "height": height3,
+          "height": `${sizeY3Array[0][index]* 100}%`,
-          "top": top3,
+          "top": `${left3Array[0][index]* 100}%`,
-          "left": left3,
+          "left": `${top3Array[0][index]* 100}%` !== "undefined%" ?  `${top3Array[0][index] * 100}%` : "-300%",
-        }}>{name3}</button>
+        }}>{name3Array[0][index]}</button>
   
 
       </div>

client/src/components/GetQuestion.jsx

@@ -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}/>
+  )
+
+}
+

client/src/components/QuizGame.jsx

@@ -1,30 +1,40 @@
 import {useNavigate} from 'react-router-dom';
-import React, {useState} from 'react';
+import React, {useState, useContext} from 'react';
-import { QuizGetImage,QuizGetQuestion } from './GetImageAndQuestion';
+import {QuizGetQuestion } from './GetQuestion';
-import AppProvider from './AppContext';
+import { QuizGetImage } from './GetImageAndQuestion';
-import { EndCorrectAnswer } 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>
+      <AppContext.Provider>
+      <Timer/>
+      </AppContext.Provider>
      
-  return (
+      </div>
-    <div id = 'navigationQuiz' className='navigation'>
+        <h1 className = 'score'>{score}/10</h1>
-    <img onClick = {() => navigate(-1)} id = 'imgArrow' className='imgArrow' src="/img/arrow-turn.png" alt="arrow" />
+       </div>
-    <div className="timer">
+    )
-    <i className="fa-regular fa-hourglass"></i>
+  }
-    <AppProvider>
-    <Timer/>
-    </AppProvider>
  
-    </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>
       
      

client/src/components/QuizGetData.jsx

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

client/src/components/Result.jsx

@@ -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  {  CircularProgressbar ,  buildStyles  }  from  'react-circular-progressbar' ;
-import { InformationTrackFromDB } from './Truck';
+import 'react-circular-progressbar/dist/styles.css';
-const UpdateTrackScore = () => {
+export let points = endScore;
-    InformationTrackFromDB.forEach(track => {
-      if(link ===  track.img.split(/\.(?=[^\.]+$)/)[0].slice(18)){ 
-        track.progress = endScore * 10
-      }
-      
-    })
-}
-
-
 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>
+     <h1 className='endH1'>Koniec</h1>
-     <h2>Łącznie udało ci się zdobyć: {endScore}/10</h2>
+     <h2 className='scoreYouWin'>W quizie uzyskałeś/aś: </h2>
-     <h2>Roznieć zapał, rozwiązuj quizy, i podziel się wynikiem ze znajomymi</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;

client/src/components/Timer.jsx

@@ -1,33 +1,34 @@
-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);
 
-  useEffect(() => {
+      useEffect(() => {
-    let timer =   setInterval(() => {
+        let timer =   setInterval(() => {
-      SecondSeconds = seconds;
+          SecondSeconds = seconds;
-      SecondMinutes = minutes
+          SecondMinutes = minutes
-      setSeconds(seconds + 1);
+          setSeconds(seconds + 1);
+
+          if(seconds === 59) {
+                setMinutes(minutes + 1);
+                setSeconds(0);
+          }
+      
+        }, 1000);
+      
+      
+        return () => clearInterval(timer);
+      });
 
-      if(seconds === 59) {
-            setMinutes(minutes + 1);
-            setSeconds(0);
-      }
     
-    }, 1000);
   
 
-    return () => clearInterval(timer);
-  });
 
     return (
        <h1 className='timerTime'>{minutes < 10 ? "0"+minutes: minutes} : {seconds < 10 ? "0"+seconds: seconds}</h1>

client/src/components/Truck.jsx

@@ -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',
+export let TruckId = "";
-    name: "Wóz 2",
+
-    progress: 20,
+
-  },
-  {
-    img: '../img/fire-truck/track3.jpg',
-    name: "Wóz 3",
-    progress: 0,
-  }
-];
 
 const Truck = () => {
 
@@ -52,12 +39,16 @@ const Truck = () => {
 
   const BoxComponent = () => {
     let [truck, setTruck] = useState('');
-  useEffect(() => {
+    useEffect(()=> {
-    fetch(`/fire-trucks?osp-unit=${idUnits}`)
+      fetch(`/fire-trucks?osp-unit=${idUnits}`)
       .then(response => response.json())
       .then(data => {
-     setTruck(data.map(({name,imagePath,avgPercent},index) => {
+     setTruck(data.map(({ID,name,imagePath,avgPercent},index) => {
-        console.log(name)
+          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">
+        <div className="informationAboutTrack" name = {name} onClick={(e) => handleImageClick(e)}>
-          <h3 className= 'TrackName'>{name}</h3>
+          <h3 className= 'TrackName'  name = {name} onClick={(e) => handleImageClick(e)}>{name}</h3>
         
 
-          <progress className="progress" max="100" value={avgPercent}></progress>
+          <progress className="progress" max="100" value={SecondAvgPercent}  name = {name} onClick={(e) => handleImageClick(e)} ></progress>
-          <div className='ScoringValueTrack'>
+          <div className='ScoringValueTrack'  name = {name} onClick={(e) => handleImageClick(e)}>
-          <h4>{avgPercent / 10}/10</h4>
+          <h4 name = {name} onClick={(e) => handleImageClick(e)}>{firstAvgPercent}/10</h4>
-          <h4>{avgPercent}%</h4>
+          <h4 name = {name} onClick={(e) => handleImageClick(e)}>{SecondAvgPercent}%</h4>
           </div>
           
         </div>
@@ -91,7 +82,7 @@ const Truck = () => {
 
    
    )
- }, []);
+    },[])
     
       return (
         <>

client/src/style/App.scss

@@ -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 {

client/src/style/_Quiz.scss

@@ -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;
+  width: calc($width-footer-icon / 3);
-  height:  $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;
+}

client/src/style/_Result.scss

@@ -1,23 +1,91 @@
 
-.congratulationh2 {
+.endH1 {
-  font-size: 40px;
+  font-size: 65px;
-  letter-spacing: 3px;
+  letter-spacing: 4px;
-  margin-bottom: 0.1em;
+  margin-bottom: 0.2em;
 }
 
 #resultButton {
-  margin-top: 5%;
+  margin-top: 2%;
-  background-color: #d42436;
+  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 {

package.json

@@ -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"
   }

skrytka_create_db.sql

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