[FrontEnd new files added]

src_folder/FrontEnd/app/src/App.css

@@ -19,7 +19,7 @@
   height: 200px;
   border-radius: 20px;
   background: linear-gradient(white, white) padding-box,
-  linear-gradient(to right,  #a10012 0%,  #fba51b 50%, #3b5da4 100%) border-box;
+  linear-gradient(to right,  #a10012 0%,  #72FF50 50%, #3b5da4 100%) border-box;
   border-style: solid;
   border-width: 5px;
   border-color: transparent;
@@ -33,7 +33,7 @@
   margin-top: -15px;
   border-radius: 5px;
   background: linear-gradient(white, white) padding-box,
-  linear-gradient(to right,  #a10012 0%,  #fba51b 50%, #3b5da4 100%) border-box;
+  linear-gradient(to right,  #a10012 0%, #72FF50 50%, #3b5da4 100%) border-box;
   border-style: solid;
   border-width: 2px;
   box-shadow: 1px 1px black;
@@ -59,7 +59,7 @@
   padding: 10px;
   box-shadow: 5px 5px black;
   background: linear-gradient(white, white) padding-box,
-  linear-gradient(to right,  #a10012 0%,  #fba51b 50%, #3b5da4 100%) border-box;
+  linear-gradient(to right,  #a10012 0%, #72FF50 50%, #3b5da4 100%) border-box;
   border-style: solid;
   border-width: 5px;
   border-radius: 20px;
@@ -68,7 +68,7 @@
 
 .TimerDiv {
   background: linear-gradient(white, white) padding-box,
-  linear-gradient(to right,  #a10012 0%,  #fba51b 50%, #3b5da4 100%) border-box;
+  linear-gradient(to right,  #a10012 0%, #72FF50 50%, #3b5da4 100%) border-box;
   border-style: solid;
   border-width: 5px;
   border-radius: 20px;
@@ -117,7 +117,7 @@
   height: auto;
   padding: 10px ;
   background: linear-gradient(white, white) padding-box,
-  linear-gradient(to right,  #a10012 0%,  #fba51b 50%, #3b5da4 100%) border-box;
+  linear-gradient(to right,  #a10012 0%,  #72FF50 50%, #3b5da4 100%) border-box;
   border-style: solid;
   border-width: 5px;
   border-radius: 20px;
@@ -139,9 +139,10 @@
   height: 300px;
   margin-left: 110px;
   
-
 }
 
+.Answer {
+}
 .AnswerBox {
   margin-left: 6px;
   position: relative;
@@ -151,7 +152,7 @@
   border: solid 2px;
   border-radius: 20px;
   box-shadow: 5px 5px black;
-  background-color: white;;
+  background-color: white;
 
 }
 
@@ -160,7 +161,7 @@
 }
 
 #secondans {
-  border: solid 5px #fba51b;
+  border: solid 5px #72FF50;
 }
 
 #thirdans {
@@ -219,7 +220,7 @@
   height: 300px;
   margin-left: 50px;
   background: linear-gradient(white, white) padding-box,
-  linear-gradient(to right,  #a10012 0%,  #fba51b 50%, #3b5da4 100%) border-box;
+  linear-gradient(to right,  #a10012 0%, #72FF50 50%, #3b5da4 100%) border-box;
   border-style: solid;
   border-width: 5px;
   border-radius: 20px;
@@ -229,14 +230,14 @@
 }
 
 #StartButton {
-  background-color: #4CAF50;
+  background-color: #ff863d;
 }
 
 #QuitButton {
   background-color: red;
 }
-.MyButton:hover {
+#StartButton:hover {
-  background-color: #3E8E41; /* darker shade of green */
+  background-color: #ae572e; /* darker shade of green */
 }
 
 

src_folder/FrontEnd/app/src/App.js

@@ -2,14 +2,31 @@ import { useEffect, useState} from "react";
 import './App.css';
 import Header from "./components/Header";
 import Body from "./components/Body";
-import question from "./components/Question";
+import {getQuestion, getScoreboard, getReset} from "./components/api";
 
 function App()  {
   const [timeLeft, setTimeLeft] = useState(10*1000);
+  const [question, setQuestion] = useState('?')
+  const [ans1, setAns1] = useState('?')
+  const [ans2, setAns2] = useState('?')
+  const [ans3, setAns3] = useState('?')
+  const [correctans, setCorrectAns] = useState()
+  const [correctfield, setCorrectField] = useState()
+  const [scoreblue, setScoreBlue] = useState()
+  const [scoregreen, setScoreGreen] = useState()
+  const [scorered, setScoreRed] = useState()
+
+
   const [timerRunning, setTimerRunning] = useState(false);
   const [questionCount, setQuestionCount] = useState(0);
   const [teamsize, setTeamSize] = useState(0);
 
+  useEffect(() => {
+    // This function will be executed when the component is loaded
+    getReset(setAns1, setAns2, setAns3, setQuestion);
+    getScoreboard(setScoreBlue, setScoreGreen, setScoreRed);
+  }, []);
+
   useEffect(() => {
     let timer;
     if (timerRunning && timeLeft > 0) {
@@ -18,6 +35,8 @@ function App()  {
       }, 10);}
     else if (timeLeft === 0) {
       alert("Zeit ist um !");
+      showcorrect();
+      getScoreboard(setScoreBlue, setScoreGreen, setScoreRed);
       setTimerRunning(false);
       setTimeLeft(10);
     }
@@ -30,14 +49,20 @@ function App()  {
     return `${seconds} s`;
   }
 
+  const showcorrect = () => {
+    alert("Richtiges Feld: " + correctfield + "\nRichtige Antwort: " + correctans)
+  }
+
   const startQuestion = () => {
     if (questionCount <= 5){
       setQuestionCount(questionCount+1)
+      getQuestion(setAns1, setAns2, setAns3, setQuestion, setCorrectField, setCorrectAns).then(r => console.log(r))
       setTimeLeft(10*1000);
       setTimerRunning(true);
     }
     else {
       alert("Spiel vorbei !");
+      getReset(setAns1, setAns2, setAns3, setQuestion);
     }
   }
 
@@ -47,8 +72,14 @@ function App()  {
   }
 
   return (<>
-    <Header timerRunning={timerRunning} timerContent={formatTime(timeLeft)} questionCount={questionCount}/>
+    <Header timerRunning={timerRunning} timerContent={formatTime(timeLeft)} questionCount={questionCount} question={question}/>
-    <Body startQuestion={startQuestion} timerRunning={timerRunning} stopTimer={stopTimer} setQuestionCount={setQuestionCount} setTeamSize={setTeamSize} teamsize={teamsize}/>
+    <Body startQuestion={startQuestion} timerRunning={timerRunning} stopTimer={stopTimer} setQuestionCount={setQuestionCount}
+          setTeamSize={setTeamSize} teamsize={teamsize}
+        ans2={ans2} ans3={ans3} ans1={ans1}
+        scoreblue={scoreblue} scorered={scorered} scoregreen={scoregreen}
+          setScoreGreen={setScoreGreen} setScoreRed={setScoreRed} setScoreBlue={setScoreBlue}
+          setAns3={setAns3} setAns1={setAns1} setAns2={setAns2} setQuestion={setQuestion}
+    />
     </>
   );
 }

src_folder/FrontEnd/app/src/components/Answers.js

@@ -1,11 +1,17 @@
 import React from "react";
 
-function Answers() {
+function Answers({ans1, ans2, ans3}) {
     return(
         <div className="Answers">
-            <div className="AnswerBox" id="firstans">Jemand anderen doppelt ... </div>
+            <div className="AnswerBox" id="firstans">
-            <div className="AnswerBox" id="secondans">Ronaldo >>> Messi</div>
+                <div className="Answer">{ans1}</div>
-            <div className="AnswerBox" id="thirdans">I got right foot ...</div>
+            </div>
+            <div className="AnswerBox" id="secondans">
+                <div className="Answer">{ans2}</div>
+            </div>
+            <div className="AnswerBox" id="thirdans">
+                <div className="Answer">{ans3}</div>
+            </div>
         </div>
     )
 }

src_folder/FrontEnd/app/src/components/Body.js

@@ -2,12 +2,16 @@ import React from "react";
 import Buttons from "./Buttons";
 import Answers from "./Answers";
 import ScoreBoard from "./ScoreBoard";
-function Body({startQuestion, timerRunning, stopTimer, setQuestionCount, setTeamSize, teamsize}) {
+function Body({startQuestion, timerRunning, stopTimer, setQuestionCount, setTeamSize, teamsize, ans1, ans2, ans3, scoreblue,
+                  scoregreen, scorered, setScoreBlue, setScoreGreen, setScoreRed,
+              setAns1, setAns2, setAns3, setQuestion}) {
     return(
         <div className="Body">
-            <Buttons startQuestion={startQuestion} timerRunning={timerRunning} stopTimer={stopTimer} setQuestionCount={setQuestionCount} setTeamSize={setTeamSize}/>
+            <Buttons startQuestion={startQuestion} timerRunning={timerRunning} stopTimer={stopTimer} setQuestionCount={setQuestionCount} setTeamSize={setTeamSize}
-            <Answers/>
+            setScoreGreen={setScoreGreen} setScoreRed={setScoreRed} setScoreBlue={setScoreBlue}
-            <ScoreBoard teamsize={teamsize}/>
+            setAns1={setAns1} setAns2={setAns2} setAns3={setAns3} setQuestion={setQuestion}/>
+            <Answers ans3={ans3} ans2={ans2} ans1={ans1}/>
+            <ScoreBoard teamsize={teamsize} scoreblue={scoreblue} scorered={scorered} scoregreen={scoregreen}/>
         </div>
     )
 }

src_folder/FrontEnd/app/src/components/Buttons.js

@@ -2,8 +2,10 @@ import React, {useState} from "react";
 import StartButton from "./StartButton";
 import QuitButton from "./QuitButton";
 import TeamSizePopUp from "./TeamsizePopUp";
+import {getReset, getScoreboard} from "./api";
 
-function Buttons({startQuestion, timerRunning, stopTimer, setQuestionCount, setTeamSize}) {
+function Buttons({startQuestion, timerRunning, stopTimer, setQuestionCount, setTeamSize, setScoreBlue, setScoreGreen, setScoreRed,
+                 setAns1, setAns2, setAns3, setQuestion}) {
     const [gameStarted, setGameStarted] = useState(false)
     const [openPopUp, setOpenPopUp] = useState(false)
     const [quitvisible, setQuitvisible] = useState(false)
@@ -26,6 +28,9 @@ function Buttons({startQuestion, timerRunning, stopTimer, setQuestionCount, setT
         changeGame(false);
         stopTimer();
         setQuestionCount(0);
+        getReset(setAns1, setAns2, setAns3, setQuestion);
+        alert("Spiel abgebrochen !");
+        getScoreboard(setScoreBlue, setScoreGreen, setScoreRed);
     }
 
 

src_folder/FrontEnd/app/src/components/Header.js

@@ -2,11 +2,11 @@ import React from "react";
 import Heading from "./Heading";
 import Timer from "./Timer";
 import Question from "./Question";
-function Header({timerRunning, timerContent, questionCount}) {
+function Header({timerRunning, timerContent, questionCount, question}) {
     return(
         <header className="Header">
             <Heading/>
-            <Question questionCount={questionCount}/>
+            <Question questionCount={questionCount} question={question}/>
             <Timer timerRunning={timerRunning} timerContent={timerContent}/>
         </header>
     )

src_folder/FrontEnd/app/src/components/Question.js

@@ -1,13 +1,13 @@
 import React from "react";
 
-function Question({questionCount}) {
+function Question({questionCount, question}) {
     return(
         <div className="HeaderDiv">
             <div id="QuestionHeaderDiv">
                 <h2 id="QuestionHeader">{questionCount ? questionCount + ".Frage" : "Fragen"}</h2>
             </div>
             <div id="QuestionDiv">
-                <h2 id="Question">Warum ist Kerem so schrott ? </h2>
+                <h2 id="Question">{question}</h2>
             </div>
         </div>
     )

src_folder/FrontEnd/app/src/components/ScoreBoard.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-function ScoreBoard({teamsize}) {
+function ScoreBoard({teamsize, scoreblue, scoregreen, scorered}) {
     return(
         <div className={"ScoreBoard"}>
             <div>
@@ -16,15 +16,15 @@ function ScoreBoard({teamsize}) {
                 <tbody>
                 <tr>
                     <td>Red</td>
-                    <td id="red-points">0</td>
+                    <td id="red-points">{scorered}</td>
                 </tr>
                 <tr>
-                    <td>Yellow</td>
+                    <td>Green</td>
-                    <td id="yellow-points">0</td>
+                    <td id="yellow-points">{scoregreen}</td>
                 </tr>
                 <tr>
                     <td>Blue</td>
-                    <td id="blue-points">0</td>
+                    <td id="blue-points">{scoreblue}</td>
                 </tr>
 
                 </tbody>

src_folder/FrontEnd/app/src/components/TeamsizePopUp.js

@@ -15,19 +15,20 @@ function TeamSizePopUp({closeModal, changeGameState, startQuestion, setTeamSize}
     }
 
     const TeamSizeButtonClicked = () => {
-        if(inputValue <= 2 && inputValue > 0){
+        if(inputValue <= 3 && inputValue > 0){
-        /*
+        try {
-            postTeamsize({
+            console.log(typeof inputValue)
-                "Teamsize": inputValue
+            postTeamsize(inputValue).then(r => { if (r.ok) {console.log("OK")} });
-            }).then(data => console.log("Received answer" + data))
+            setTeamSize(inputValue);
-        */
-            setTeamSize(inputValue)
             changeGameState(true);
             closePopUp();
             startQuestion();
+        } catch (error) {
+            console.error(error)
+        }
         }
         else {
-            alert("Bitte Zahl zwischen 1 und 2 eingeben ! ")
+            alert("Bitte Zahl zwischen 1 und 3 eingeben ! ")
         }
 
     }
@@ -40,7 +41,7 @@ function TeamSizePopUp({closeModal, changeGameState, startQuestion, setTeamSize}
                     <h2>Bitte Teamgröße wählen </h2>
                 </div>
                 <div>
-                    <input type="number" id="TeamSizeInput" min={1} max={2} value={inputValue}
+                    <input type="number" id="TeamSizeInput" min={1} max={3} value={inputValue}
                     onChange={getInput}/>
                 </div>
                 <div>

src_folder/FrontEnd/app/src/components/api.js

@@ -1,31 +1,53 @@
-import {createContext} from "react";
 
 export  function postTeamsize(data) {
-    return fetch("URL:PORT/TEAMSIZE",{
+    const requestOptions = {
-        methods: 'POST',
+        method: 'POST',
         headers: {
-            "Content-Type": "application/json"
+            'Accept': 'application/json',
-        },
+            'Content-Type': 'application/json'},
-        body: JSON.stringify(data)
+        body: JSON.stringify({ teamsize: data})
-        })
+    }
-        .then(response => response.json())
+    return fetch("http://192.168.0.94:5555/teamsize", requestOptions)
+
 }
 
 export function getConnection() {
-
+    return 0
 }
-export function getQuestionandPrint() {
+export function getQuestion(setAns1, setAns2, setAns3, setQuestion, setCorrectField, setCorrectAnsw) {
-
+    return fetch("http://192.168.0.94:5555/question")
+        .then(response => response.json())
+        .then(data => {
+            setQuestion(data.QuestionNr)
+            setAns1(data.Answeroption_1)
+            setAns2(data.Answeroption_2)
+            setAns3(data.Answeroption_3)
+            setCorrectField(data.Correct_field)
+            setCorrectAnsw(data.Correct_answeroption)
+            console.log(data)
+        })
+        .catch(error => console.error(error));
 }
 
-export function getScoreboard() {
+export function getScoreboard(setScoreBlue, setScoreGreen, setScoreRed) {
-
+    return fetch("http://192.168.0.94:5555/scoreboard")
+        .then(response => response.json())
+        .then(data => {
+            setScoreBlue(data.score_blue)
+            setScoreRed(data.score_red)
+            setScoreGreen(data.score_green)
+        })
+        .catch(error => console.error(error))
 }
 
 export function getCheck() {
 
 }
 
-export function getReset() {
+export function getReset(setAns1, setAns2, setAns3, setQuestion) {
-
+    setAns1('?');
+    setAns2('?');
+    setAns3('?');
+    setQuestion('?');
+    return fetch("http://192.168.0.94:5555/reset")
 }