Implementation of API calls

Implementation of API calls on the client side (React).

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 .env
+media/

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-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",
@@ -37,5 +43,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "webpack-cli": "^5.0.1"
   }
 }

client/public/img/arrow-down.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#f5f6fa" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>

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/AppRoutes.js

@@ -1,5 +1,6 @@
-import Truck from './components/Truck';
+import React from 'react';
 import { Route, Routes } from 'react-router-dom';
+import Truck from './components/Truck';
 import App from './App';
 import NotFound from './components/NotFound'
 import QuizGame from './components/QuizGame';
@@ -8,9 +9,6 @@ import AppProvider from './components/AppContext';
 
 
 const AppRoutes = () => {
-
-
-
   return (
     <Routes>
       <Route path='/' element={<App />} />

client/src/components/AppContext.js

@@ -11,6 +11,9 @@ const AppProvider = ({ children }) => {
   const [isContainerActive, setIsContainerActive] = useState(true);
   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={{
@@ -23,6 +26,13 @@ const AppProvider = ({ children }) => {
       localizationFromDBArr,
       isPopUpActive,
       setIsPopUpActive,
+      idUnit,
+      setId,
+      getImage,
+      setGetImage,
+      buttonClick,
+      setButtonClick
+
 
 
     }}>

client/src/components/BottomFPage.jsx

@@ -3,29 +3,9 @@ import React, {useContext} from 'react';
 import { AppContext } from './AppContext';
 
 import {Link} from 'react-router-dom';
-import {useState, useEffect} from 'react';
-import FooterQuiz from './FooterQuiz';
 
 const BottomFPage = () => {
 
-  const [data, setData] = useState(null);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(null);
-  const url = '/osp-units?prefix=Gdańsk';
- useEffect(() => {
-  fetch(url)
-   .then((response) => {
-      if(!response.ok){
-        throw new Error(
-          `PROBLEM ${response.status}`
-        )
-      }
-      return response;
-   })
-   .then(data => console.log(data))
-   .catch(err => console.log(err.message))
- }, []);
-
   const {unitOsp} = useContext(AppContext);
 
 
@@ -37,17 +17,10 @@ const BottomFPage = () => {
  </Link>
  </div> 
    : "";
-
  return (
   <>
       {buttonShow}
 
-      
-    
-      <div className='FirstFooter'>Nie widzisz swojej jednostki? <li className='li-write-to-us'><a className='a-write-to-us' href = 'mailto:kontakt@janilowski.pl'> Napisz do nas!</a></li></div>   
-     
-     
- 
   </>
  ) 
 }

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

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,32 +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 {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 = "";
-console.log(link)
+export let endScore = 0;
+
+const NavigationQuiz = ({score,buttonState}) => {
+  
+
 
-export let endScore = 1;
  
-const NavigationQuiz = ({score}) => {
   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 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>
-    <Timer/>
-    </AppProvider>
+      </div>
+        <h1 className = 'score'>{score}/10</h1>
+       </div>
+    )
+  }
  
-    </div>
-      <h1 className = 'score'>{score}/10</h1>
-     </div>
-  )
   
 }
 
@@ -41,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);
 
     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">
    
@@ -78,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,84 @@
-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 Player from './Sound';
-import url from '../style/congratulation.mp3';
-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';
 
 const Result = () => {
   
+
+
+    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">
+      <div className="container">
      
-      <h2 className='congratulationh2'>BRAWO !!!</h2>
-      <img className='trophy' src="\img\trophy.webp" alt="" />
-      <h2 className='endScoreh2'>Twój wynik to: {endScore} / 10</h2>
-      <h3>Czas: {SecondMinutes} minut {SecondSeconds} sekund</h3>
-      <button id = "resultButton" className='NextQuestionButton' onClick = {() => navigate(-1)}>Zagraj jeszcze raz</button>
-      <button id = "resultButton" className='NextQuestionButton'onClick={() => navigate('/')}>Wróć do strony głównej</button>
-      <Conffetti/>
-      <Player url = {url}/>
-    </div>
+
+
+     <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/>
+     
+   </div>
 
 
  
@@ -43,5 +86,6 @@ const Result = () => {
     </>
  
   )
+
 }
 export default Result;

client/src/components/SelectBox.jsx

@@ -1,16 +1,36 @@
-import React, {useContext, useState ,useRef} from 'react';
+import React, {useContext, useState ,useRef, useEffect} from 'react';
 import { AppContext } from './AppContext';
+export let idUnits = "";
 const SearchBox = () => {
 
  
-  const {unitOsp, isContainerActive, setunitOsp,setIsContainerActive,localization} = useContext(AppContext);
+  const {unitOsp, isContainerActive, setunitOsp,setIsContainerActive,localization,setId} = useContext(AppContext);
   const [value, setValue] = useState("");
   const inputSearchRef = useRef(true);
 
+
+  
   const handleChangeInput = (e) => {
-    setIsContainerActive(true);
-    const tasks = localization.filter(localization => localization.toLowerCase().includes(e.target.value.toLowerCase()));
-      setValue(tasks); 
+    if(e.target.value === "") return
+      fetch(`/osp-units?locality=${e.target.value}`)
+        .then(data => data.json())
+        .then(res=> {
+
+          res.map(locality => {
+            
+              let localityArray = []; 
+
+              localityArray.push(locality.locality);
+              let tasks = localityArray.filter(localization => localization.toLowerCase().includes(e.target.value.toLowerCase()));
+              setIsContainerActive(true);
+              setValue(tasks); 
+
+             idUnits = locality.ID
+          })
+        })
+    
+
+      
   }
 
   const OptionJSXTag = () => {

client/src/components/Timer.jsx

@@ -1,37 +1,27 @@
-import React, {useState, useEffect} from 'react';
-
-
 export let SecondSeconds = 1;
 export let SecondMinutes = 0;
 
-
+import React, { useState, useEffect } from 'react';
 
 const Timer = () => {
-
-
-  const [seconds, setSeconds] = useState(0);
-  const [minutes, setMinutes] = useState(0);
+  const [time, setTime] = useState(0);
+  let seconds = Math.floor(time % 60);
+  let minutes = Math.floor(time / 60);
 
   useEffect(() => {
-    let timer =   setInterval(() => {
+    const intervalId = setInterval(() => {
       SecondSeconds = seconds;
       SecondMinutes = minutes
-      setSeconds(seconds + 1);
-
-      if(seconds === 59) {
-            setMinutes(minutes + 1);
-            setSeconds(0);
-      }
-   
+      setTime(time + 1);
     }, 1000);
+    return () => clearInterval(intervalId);
+  }, [time]);
 
-  
-    return () => clearInterval(timer);
-  });
-  
-    return (
+  return (
+    <div>
        <h1 className='timerTime'>{minutes < 10 ? "0"+minutes: minutes} : {seconds < 10 ? "0"+seconds: seconds}</h1>
-    )
-}
+    </div>
+  );
+};
 
 export default Timer;

client/src/components/Truck.jsx

@@ -1,28 +1,12 @@
 
-import React, {useRef} from 'react';
+import React, {useRef,useEffect} from 'react';
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {Link} from 'react-router-dom';
+import { idUnits } from './SelectBox';
+export let TruckId = "";
 
 
-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,
-  }
-];
 
 const Truck = () => {
 
@@ -32,10 +16,8 @@ const Truck = () => {
   
 
   const handleImageClick = (e) => {
-
-    const imgWithoutExtends = e.target.id.split(/\.(?=[^\.]+$)/);
-    const TrackName = imgWithoutExtends[0].slice(18);
-    setTrackName(TrackName);
+    let nameofTrack = e.target.getAttribute('name');
+    setTrackName(nameofTrack);
 
     textChooseTrack.current.style.color= 'black';
   
@@ -51,43 +33,63 @@ const Truck = () => {
 
 
 
-
   const BoxComponent = () => {
-    const track = InformationTrackFromDB.map(({img,name,progress},index)=> {
-
-        return (
-          <>
 
 
-          <div className="boxTrack" key = {index} id = {img} onClick={handleImageClick} >
 
 
-          <img className='imageFireTrack' id = {img}  src={img} alt="img" />
+    
+    let [truck, setTruck] = useState('');
+    useEffect(()=> {
 
       
-          <div className="informationAboutTrack">
-            <h3 className= 'TrackName'>{name}</h3>
+      fetch(`/fire-trucks?osp-unit=${idUnits}`)
+      .then(response => response.json())
+      .then(data => {
+     setTruck(data.map(({ID,name,imagePath,avgPercent},index) => {
+          TruckId = ID;
+          let percent = avgPercent.toString().slice(0,3);
+          let firstAvgPercent = percent  * 10;
+          let SecondAvgPercent = percent * 100;
 
-
-            <progress className="progress" max="100" value={progress}></progress>
-            <div className='ScoringValueTrack'>
-            <h4>{progress / 10}/10</h4>
-            <h4>{progress}%</h4>
-            </div>
-            
-          </div>
-          
-          </div>
-          
-        </>
-
-
-        )
-        
-      });
       return (
         <>
-           {track}
+              
+
+        <div className="boxTrack" key = {index} id = {imagePath} name = {name} onClick={(e) => handleImageClick(e)} >
+
+
+        <img className='imageFireTrack' id = {imagePath}  src={`../${imagePath}`} alt="img" name = {name} onClick={(e) => handleImageClick(e)} />
+
+ 
+        <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={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>
+        
+        </div>
+        
+      </>
+
+
+      )
+     })
+      )}
+
+   
+   )
+    },[])
+    
+      return (
+        <>
+           {truck}
            <Link to = {trackName} style={{ textDecoration: 'none', color: 'black'}}>
             <i onClick={handleArrowQuizClick}  className="fa-solid fa-arrow-right"></i>
             </Link>

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

client/src/style/_Result.scss

@@ -1,23 +1,91 @@
-.trophy {
-  min-width: 450px;
-  min-height: 450px;
-  max-width: 450px;
-  max-height: 450px;
 
-}
-.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%;
+  margin-top: 2%;
+  background-color: #d42436;;
+}
+#resultButton1 {
+  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 {