Update. Add game and router

src_folder/BackEnd/Database/database.py

+import sqlite3
+import pandas as pd
+from sqlite3 import Error
+
+
+questions = [('Wie heißt der längst Fluss auf der Welt?', 'Amazonas', 'Nil', 'Jangtsekiang', 'Nil'),
+            ('Aus welcher englischen Stadt stammt die Musikgruppe die Beatles?', 'London', 'Sheffield', 'Liverpool', 'Liverpool'),
+            ('Zu welchem Land gehört Grönland?',  'Norwegen', 'Island', 'Dänemark', 'Dänemark'),
+            ('Wie heißen die ursprünglichen Bewohner Australiens?', 'Aborigines', 'Eingeborene', 'Australian Natives', 'Aborigines'),
+            ('Mit welchem Korn verglich Jesus das Reich Gottes?', 'Senfkorn', 'Weizenkorn', 'Haferkorn', 'Senfkorn'),
+            ('Wie lange können Kaiserpinguine tauchen?', '5min', '10min', '20min', '20min'),
+            ('Wer war der Kommandant der Apollo 11?', 'Louis Armstrong', 'Neil Armstrong', 'Lance Armstrong', 'Neil Armstrong'),
+            ('Wie heißt die größte Stadt der Welt (nach Einwohnern)?',  'São Paulo', 'Tokio', 'Seoul', 'Tokio',), 
+            ('In welchem Land liegt Helsinki?', 'Finnland', 'Norwegen', 'Schweden', 'Finnland'),
+            ('Wie viele Bundesländer hat Deutschland?', '16', '17', '20', '16'),
+            ('Wie heißt der höchste Berg Europas?', 'Zugspitze', 'Matterhorn', 'Montblanc', 'Montblanc'),
+            ('Wie lange braucht das Licht in etwa von der Sonne zur Erde?', '80 Sekunden', '8 Minuten', '7 Tage', '8 Minuten'),
+            ('Was hat James Watt erfunden?', 'Glühbirne', 'Elektrischen Widerstand', 'Dampfmaschine', 'Dampfmaschine'),
+            ('Wie hieß der erste Deutsch Bundeskanzler?', 'Helmut Schmidt', 'Konrad Adenauer', 'Willy Brandt', 'Konrad Adenauer'),
+            ('Von wem stammt das Gemälde der Mona Lisa?', 'Picasso', 'Vincent van Gogh', 'Leonardo da Vinci', 'Leonardo da Vinci'),
+            ('Wie heißt der Erfinder der Jeanshose?', 'Tom Wrangler', 'Levi Strauss', 'Peter Diesel', 'Levi Strauss'),
+            ('Welches Land gewann 2014 die Fußball Weltmeisterschaft?', 'Brasilien', 'Argentien', 'Deutschland', 'Deutschland'),
+            ('Welcher ist der "rote Planet" unseres Sonnensystems?', 'Mars', 'Venus', 'Jupiter', 'Mars'),
+            ('Was bezeichnet die chemische Formel \'NaCl\'?', 'Kochsalz', 'Wasser', 'Stickstoff', 'Kochsalz'),
+            ('Welche Form hat die Narbe auf Harry Potters Stirn?', 'Dreieck', 'Blitz', 'Kreuz', 'Blitz')]
+
+
+class QuestionDataBase:
+    def __init__(self, file_name) -> None:
+        self.file_name = file_name
+        try:
+            self.connection = sqlite3.connect(database=self.file_name)
+            print(f'Successfully connected to SQLite (Version: ' + sqlite3.version + ')..\n')
+        except Error as err:
+            print(err)
+        self.cursor = self.connection.cursor()
+
+    def close_connection(self):
+        try:
+            self.cursor.close()
+            print("Close connection to SQLite was successfully.")
+        except Error as err:
+            print(err)
+        
+    def create_table(self):
+        table_config = "CREATE TABLE IF NOT EXISTS Questions" \
+                       "(QuestionNr TEXT PRIMARY KEY," \
+                       " Answeroption_1 \nTEXT," \
+                       " Answeroption_2 TEXT," \
+                       " Answeroption_3 TEXT," \
+                       " Correct_answeroption TEXT)"
+        self.cursor.execute(table_config)
+        print("Successfully create tables.. ")
+        
+
+    def insert_table(self, questions: list):
+        self.cursor.executemany("INSERT OR IGNORE INTO Questions VALUES (?, ?, ?, ?, ?)", questions)
+        print("Successfully insert data into table.")
+
+    def num_rows(self):
+        self.cursor.execute("SELECT COUNT(*) FROM Questions")
+        return self.cursor.fetchone()[0]
+        
+
+    def delete_data(self, table_name):
+        self.cursor.execute(f"DELETE FROM {table_name}")
+
+
+    def read_question_data(self, file_name: str):
+        try:
+            data = pd.read_csv(file_name, delimiter=';')
+        except Error as err:
+            print('File could not be read..')
+            print(err)
+        return data
+    
+    ## ToDO: get question, return type(dict)
+    def get_questions():
+        pass
+
+
+if __name__ == "__main__":
+     
+    database = QuestionDataBase('Project/BackEnd/Database/EinsZweiOderDrei.db')
+    insert_table = database.insert_table(questions)
+    
+    database.commit()
+    database.close_connection() 
+

src_folder/BackEnd/Database/question_pool.txt

+Question, Answer1, Answer2, Answer3, Right Answer
+('Wie heißt der längst Fluss auf der Welt?', 'Amazonas', 'Nil', 'Jangtsekiang', 'Nil'),
+('Aus welcher englischen Stadt stammt die Musikgruppe die Beatles?', 'London', 'Sheffield', 'Liverpool', 'Liverpool'),
+('Zu welchem Land gehört Grönland?',  'Norwegen', 'Island', 'Dänemark', 'Dänemark'),
+('Wie heißen die ursprünglichen Bewohner Australiens?', 'Aborigines', 'Eingeborene', 'Australian Natives', 'Aborigines'),
+('Mit welchem Korn verglich Jesus das Reich Gottes?', 'Senfkorn', 'Weizenkorn', 'Haferkorn', 'Senfkorn'),
+('Wie lange können Kaiserpinguine tauchen?', '5min', '10min', '20min', '20min'),
+('Wer war der Kommandant der Apollo 11?', 'Louis Armstrong', 'Neil Armstrong', 'Lance Armstrong', 'Neil Armstrong'),
+('Wie heißt die größte Stadt der Welt (nach Einwohnern)?',  'São Paulo', 'Tokio', 'Seoul', 'Tokio',), 
+('In welchem Land liegt Helsinki?', 'Finnland', 'Norwegen', 'Schweden', 'Finnland'),
+('Wie viele Bundesländer hat Deutschland?', '16', '17', '20', '16'),
+('Wie heißt der höchste Berg Europas?', 'Zugspitze', 'Matterhorn', 'Montblanc', 'Montblanc'),
+('Wie lange braucht das Licht in etwa von der Sonne zur Erde?', '80 Sekunden', '8 Minuten', '7 Tage', '8 Minuten'),
+('Was hat James Watt erfunden?', 'Glühbirne', 'Elektrischen Widerstand', 'Dampfmaschine', 'Dampfmaschine'),
+('Wie hieß der erste Deutsch Bundeskanzler?', 'Helmut Schmidt', 'Konrad Adenauer', 'Willy Brandt', 'Konrad Adenauer'),
+('Von wem stammt das Gemälde der Mona Lisa?', 'Picasso', 'Vincent van Gogh', 'Leonardo da Vinci', 'Leonardo da Vinci'),
+('Wie heißt der Erfinder der Jeanshose?', 'Tom Wrangler', 'Levi Strauss', 'Peter Diesel', 'Levi Strauss'),
+('Welches Land gewann 2014 die Fußball Weltmeisterschaft?', 'Brasilien', 'Argentien', 'Deutschland', 'Deutschland'),
+('Welcher ist der "rote Planet" unseres Sonnensystems?', 'Mars', 'Venus', 'Jupiter', 'Mars'),
+('Was bezeichnet die chemische Formel \'NaCl\'?', 'Kochsalz', 'Wasser', 'Stickstoff'),
+('Welche Form hat die Narbe auf Harry Potters Stirn?', 'Dreieck', 'Blitz', 'Kreuz', 'Blitz')

src_folder/BackEnd/game.py

+from Database.database import QuestionDataBase
+
+
+class Game:
+    def __init__(self, teamsize=0):
+        self.teamsize = teamsize
+        self.scoreboard = {'score_red': 0,
+                           'score_blue': 0,
+                           'score_yellow': 0}
+
+        self.questions = QuestionDataBase('src_folder/BackEnd/Database/EinsZweiOderDrei.db')
+        self.available_questions = list(range(1, self.questions.num_rows()))
+
+    def set_teamsize(self, teamsize: int):
+        self.teamsize = teamsize
+    
+    def add_score(self, current_score: dict):
+        for key in self.scoreboard.keys():
+            if key in current_score.keys():
+                self.scoreboard[key] = self.scoreboard[key] + current_score[key]
+            else:
+                pass
+        return self.scoreboard
+
+    def random_question():
+        pass
+        ## ToDo: select question and remove selected question from list
+
+    def reset_game(self):
+        self.__init__()
+
+
+    
+

src_folder/BackEnd/router.py

+from flask import Flask, jsonify, Response, request
+
+
+app = Flask(__name__)
+
+
+@app.route('/GETQUESTION', methods=['GET'])
+def test():
+    test_dict = {'TEST': 'Dies ist eine Testfrage',
+                'firstanswer': 'erste Antwort',
+                'secondanswer': 'zweite Antwort',
+                'thirdanswer': 'dritte Antwort'}
+    return jsonify(test_dict)
+
+@app.route('/connection', methods=['GET'])
+def connection():
+    return Response(status=200)
+
+@app.route('/teamsize', methods=['POST'])
+def teamsize():
+    team_size = request.json
+    print(team_size)
+    print(type(team_size))
+    return Response(status=200)
+
+@app.route('/scoreboard', methods=['GET'])
+def scoreboard():
+    pass
+
+@app.route('/check', methods=['GET'])
+def check():
+    pass
+
+@app.route('/reset', methods=['GET'])
+def reset():
+    return Response(status=200)
+
+
+def main():
+    ## ASUS Router
+    # app.run(host='192.168.50.79', port=5555, debug=True)
+
+    ## Postman
+    app.run(host='127.0.0.1', port=5555, debug=True)
+
+if __name__ == '__main__':
+    main()
+        
+        

src_folder/FrontEnd/app/public/index.html

     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app"/>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>1_2_oder3</title>
   </head>
   <body>

src_folder/FrontEnd/app/src/App.css

 .PopUpBackground {
   width: 100vw;
   height: 100vh;
-  background-color: rgba(255, 255, 255, 0.5);
-  backdrop-filter: blur(10px);
-  background-size: 100%;
+  background-color: rgba(200, 200, 200, 200);
   position: absolute;
   display: flex;
   justify-content: center;
 
 .PopUpContainer {
   width: 500px;
-  height: 200px;
+  height: 500px;
   border-radius: 20px;
-  background: linear-gradient(white, white) padding-box,
-  linear-gradient(to right,  #a10012 0%,  #fba51b 50%, #3b5da4 100%) border-box;
-  border-style: solid;
-  border-width: 5px;
-  border-color: transparent;
-  box-shadow: 5px 5px black;
-}
-
-#Cancel {
-  margin-left: 470px;
-  padding-left: 5px;
-  padding-right: 5px;
-  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;
-  border-style: solid;
-  border-width: 2px;
-  box-shadow: 1px 1px black;
-  border-color: transparent;
-  position: fixed;
-  cursor: pointer;
+  background-color: white;
 }
 
 
 .HeaderDiv {
   margin-left: 50px;
   text-align: center;
-  max-width: 600px;
+  max-width: 1000px;
   width: 100%;
   padding: 10px;
   box-shadow: 5px 5px black;
 }
 
 #TimerPic {
+  visibility: hidden;
 }
 
 #Seconds {
+  visibility: hidden;
   border: solid 2px black;
   border-radius: 10px;
   padding: 2px;
 }
-
 #QuestionHeaderDiv {
   background-color: white;
   border: solid #0C134F 2px;
 #QuestionHeader {
   color: #0C134F;
 }
-
 #QuestionDiv {
   background-color: white;
   border: solid #0C134F 2px;
   box-shadow: 2px 2px black;
 
 }
-
 #Question {
   color: black;
 }
   cursor: pointer;
 }
 
+#headingimage:hover {
+  background-color: #F6F6F6;
+}
 
 .Body{
   text-align: center;
 }
 
 .Answers {
-  float: left;
   padding: 10px;
+  float: left;
   width: 100%;
-  max-width: 600px;;
-  height: 300px;
-  margin-left: 110px;
-
-
+  max-width: 1000px;;
+  height: 500px;
+  margin-left: 80px;
 }
 
 .AnswerBox {
   margin-left: 6px;
   position: relative;
-  height: 300px;
-  width: 30%;
+  height: 500px;
+  width: 32%;
   float: left;
   border: solid 2px;
-  border-radius: 20px;
-  box-shadow: 5px 5px black;
-  background-color: white;;
-
 }
 
 #firstans {
-  border: solid 5px #a10012;
+  border: solid 2px #a10012;
 }
 
 #secondans {
-  border: solid 5px #fba51b;
+  border: solid 2px #fba51b;
 }
 
 #thirdans {
-  border: solid 5px #3b5da4;
+  border: solid 2px #3b5da4;
 }
 
 .Buttons {
   float: left;
-  max-width: 220px;
+  max-width: 250px;
   padding-top: 10px;
   padding-left: 30px;
 }
   cursor: pointer;
 }
 
-#TeamSizeInput {
-  margin-left: 70px;
-  float: left;
-  margin-right: -50px;
-  padding: 7px;
-  border-radius: 6px;
-  font-size: 16px;
-  background: #fbfbfb;
-  border: 2px solid transparent;
-  height: 36px;
-  box-shadow: 0 0 0 1px #dddddd, 0 2px 4px 0 rgb(0 0 0 / 7%), 0 1px 2px 0 rgb(0 0 0 / 5%);
-}
-
-#TeamSizeInput:focus {
-  border: 2px solid #000;
-  border-radius: 4px;
-
-}
-
-#PopUpButton {
-  position: relative;
-  margin-top: 5px;
-  font-size: 16px;
-  background-color: #4CAF50;
-}
-
 .ScoreBoard {
   float: left;
   padding: 10px;
   width: 100px;
-  height: 300px;
-  margin-left: 50px;
+  height: 500px;
+  margin-left: 40px;
   background: linear-gradient(white, white) padding-box,
   linear-gradient(to right,  #a10012 0%,  #fba51b 50%, #3b5da4 100%) border-box;
   border-style: solid;
 }
 
 
+#QuitButton {
+  visibility: hidden;
+
+}
 

src_folder/FrontEnd/app/src/App.js

 import './App.css';
 import Header from "./components/Header";
 import Body from "./components/Body";
-import question from "./components/Question";
 
 function App()  {
-  const [timeLeft, setTimeLeft] = useState(10*1000);
-  const [timerRunning, setTimerRunning] = useState(false);
-  const [questionCount, setQuestionCount] = useState(0);
-  const [teamsize, setTeamSize] = useState(0);
-
-  useEffect(() => {
-    let timer;
-    if (timerRunning && timeLeft > 0) {
-      timer = setTimeout(() => {
-        setTimeLeft(timeLeft-10);
-      }, 10);}
-    else if (timeLeft === 0) {
-      alert("Zeit ist um !");
-      setTimerRunning(false);
-      setTimeLeft(10);
-    }
-    return () => clearTimeout(timer);
-
-  }, [timeLeft, timerRunning]);
-
-  function formatTime(time) {
-    const seconds = Math.floor((time / 1000) % 60).toString().padStart(2, '0');
-    return `${seconds} s`;
-  }
-
-  const startQuestion = () => {
-    if (questionCount <= 5){
-      setQuestionCount(questionCount+1)
-      setTimeLeft(10*1000);
-      setTimerRunning(true);
-    }
-    else {
-      alert("Spiel vorbei !");
-    }
-  }
-
-  const stopTimer = () => {
-    setTimerRunning(false)
-    setTimeLeft(10*1000);
-  }
-
   return (<>
-    <Header timerRunning={timerRunning} timerContent={formatTime(timeLeft)} questionCount={questionCount}/>
-    <Body startQuestion={startQuestion} timerRunning={timerRunning} stopTimer={stopTimer} setQuestionCount={setQuestionCount} setTeamSize={setTeamSize} teamsize={teamsize}/>
+    <Header/>
+    <Body/>
     </>
   );
 }

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

 function Answers() {
     return(
         <div className="Answers">
-            <div className="AnswerBox" id="firstans">Jemand anderen doppelt ... </div>
-            <div className="AnswerBox" id="secondans">Ronaldo >>> Messi</div>
-            <div className="AnswerBox" id="thirdans">I got right foot ...</div>
+            <div className="AnswerBox" id="firstans">AnswerBox1 </div>
+            <div className="AnswerBox" id="secondans">AnswerBox2</div>
+            <div className="AnswerBox" id="thirdans">AnswerBox3</div>
         </div>
     )
 }

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

 import Buttons from "./Buttons";
 import Answers from "./Answers";
 import ScoreBoard from "./ScoreBoard";
-function Body({startQuestion, timerRunning, stopTimer, setQuestionCount, setTeamSize, teamsize}) {
+function Body() {
     return(
         <div className="Body">
-            <Buttons startQuestion={startQuestion} timerRunning={timerRunning} stopTimer={stopTimer} setQuestionCount={setQuestionCount} setTeamSize={setTeamSize}/>
+            <Buttons/>
             <Answers/>
-            <ScoreBoard teamsize={teamsize}/>
+            <ScoreBoard/>
         </div>
     )
 }

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

-import React, {useState} from "react";
+import React from "react";
 import StartButton from "./StartButton";
 import QuitButton from "./QuitButton";
-import TeamSizePopUp from "./TeamsizePopUp";
-
-function Buttons({startQuestion, timerRunning, stopTimer, setQuestionCount, setTeamSize}) {
-    const [gameStarted, setGameStarted] = useState(false)
-    const [openPopUp, setOpenPopUp] = useState(false)
-    const [quitvisible, setQuitvisible] = useState(false)
-
-    const changeGame = (bool) => {
-        setGameStarted(bool)
-        setQuitvisible(bool)
-    }
-
-    const startClicked = () => {
-        if(!timerRunning && !gameStarted) {
-            setOpenPopUp(true);
-        }
-        else if (!timerRunning && gameStarted) {
-            startQuestion();
-        }
-    }
-
-    const  quitGame = () => {
-        changeGame(false);
-        stopTimer();
-        setQuestionCount(0);
-    }
-
-
+function Buttons() {
     return(
         <div className="Buttons">
-            <StartButton
-                onClick={startClicked}
-                content={(gameStarted) ? "Nächste Frage" : "Spiel Starten" }
-            />
-            {quitvisible && <QuitButton quitGame={quitGame}/>}
-            {openPopUp && <TeamSizePopUp closeModal={setOpenPopUp}
-                                         changeGameState={changeGame}
-                                         startQuestion={startQuestion}
-                                         setTeamSize={setTeamSize}
-            />}
+            <StartButton/>
+            <QuitButton/>
+
         </div>
     )
 }

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

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

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

 import React from "react";
 
 function Heading() {
-    const onClick = () => {
-        window.location.reload();
-    }
     return(
         <div className="Heading">
-            <img src={process.env.PUBLIC_URL + "12oder3-logo.png"} alt="1_2_oder_3" id="headingimage" onClick={onClick}/>
+            <img src={process.env.PUBLIC_URL + "12oder3-logo.png"} alt="1_2_oder_3" id="headingimage"/>
         </div>
 
     )

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

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

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

 import React from "react";
-function QuitButton({quitGame}) {
+function QuitButton() {
     return(
-        <button className="MyButton" id="QuitButton" onClick={quitGame}>
+        <button className="MyButton" id="QuitButton">
             Abbruch
         </button>
     )

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

 import React from "react";
 
-function ScoreBoard({teamsize}) {
-    return(
-        <div className={"ScoreBoard"}>
-            <div>
-                <p>Spieler pro Team: {teamsize ? teamsize : ""}</p>
-            </div>
-            <table>
-                <thead>
-                <tr>
-                    <th>Team</th>
-                    <th>Points</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr>
-                    <td>Red</td>
-                    <td id="red-points">0</td>
-                </tr>
-                <tr>
-                    <td>Yellow</td>
-                    <td id="yellow-points">0</td>
-                </tr>
-                <tr>
-                    <td>Blue</td>
-                    <td id="blue-points">0</td>
-                </tr>
-
-                </tbody>
-            </table>
-        </div>)
+function ScoreBoard() {
+    return(<div className={"ScoreBoard"}>ScoreBoard</div>)
 }
 
 export default ScoreBoard

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

+import {useState} from "react";
+import TeamSizePopUp from "./TeamsizePopUp";
 
-function StartButton({onClick, content}) {
+function StartButton() {
+    const [openPopUp, setOpenPopUp] = useState(false)
+
+    function startclicked() {
+        setOpenPopUp(true);
+    }
 
     return(
         <>
-            <button className="MyButton" id="StartButton" onClick={onClick}>
-                {content}
+            <button className="MyButton" id="StartButton" onClick={startclicked}>
+                Start Game
             </button>
+            {openPopUp && <TeamSizePopUp closeModal={setOpenPopUp}/>}
         </>
     )
 }

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

-import React, {useState} from "react";
-import {postTeamsize} from "./api";
+import React from "react";
+import setTeamsize from "./data_functions";
 
-function TeamSizePopUp({closeModal, changeGameState, startQuestion, setTeamSize}) {
+function TeamSizePopUp({closeModal}) {
 
-    const [inputValue, setInputValue] = useState(2);
-
-    const getInput = (event) => {
-        setInputValue(event.target.value);
-    }
-
-
-    const closePopUp = () => {
+    function closePopUp() {
         closeModal(false);
     }
-
-    const TeamSizeButtonClicked = () => {
-        if(inputValue <= 2 && inputValue > 0){
-        /*
-            postTeamsize({
-                "Teamsize": inputValue
-            }).then(data => console.log("Received answer" + data))
-        */
-            setTeamSize(inputValue)
-            changeGameState(true);
-            closePopUp();
-            startQuestion();
-        }
-        else {
-            alert("Bitte Zahl zwischen 1 und 2 eingeben ! ")
-        }
-
-    }
-
     return (
         <div className="PopUpBackground">
             <div className="PopUpContainer">
-                <div>
-                    <div id="Cancel" onClick={closePopUp}>X</div>
-                    <h2>Bitte Teamgröße wählen </h2>
-                </div>
-                <div>
-                    <input type="number" id="TeamSizeInput" min={1} max={2} value={inputValue}
-                    onChange={getInput}/>
-                </div>
-                <div>
-                    <button className="MyButton" id="PopUpButton" onClick={TeamSizeButtonClicked}>Bestätigen und Spiel starten</button>
-                </div>
+                <h2>Bitte Teamgröße wählen</h2>
+                <input type="number" id="TeamSizeInput"/>
+                <button className="MyButton" onClick={closePopUp}>Bestätigen</button>
             </div>
         </div>
     )

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

 import React from "react";
 
-function Timer({timerRunning, timerContent}) {
+function Timer() {
     return(
         <div className="TimerDiv">
             <img src={process.env.PUBLIC_URL + "icons8-time.gif"} alt="timer" id="TimerPic"/>
-            <h2 id="Seconds">{timerContent}</h2>
+            <h2 id="Seconds">0:00 s</h2>
         </div>
     )
 }

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

-import {createContext} from "react";
-
-export  function postTeamsize(data) {
-    return fetch("URL:PORT/TEAMSIZE",{
-        methods: 'POST',
-        headers: {
-            "Content-Type": "application/json"
-        },
-        body: JSON.stringify(data)
-        })
-        .then(response => response.json())
-}
-
-export function getConnection() {
-
-}
-export function getQuestionandPrint() {
-
-}
-
-export function getScoreboard() {
-
-}
-
-export function getCheck() {
-
-}
-
-export function getReset() {
-
-}

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

+let teamsize
+function setTeamsize(_teamsize) {
+    teamsize = _teamsize;
+}
+
+export default setTeamsize