Browse Source

Update. Add game and router

master
David Engert 1 year ago
parent
commit
a83d5f045f

BIN
src_folder/BackEnd/Database/EinsZweiOderDrei.db View File


+ 89
- 0
src_folder/BackEnd/Database/database.py View File

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()


+ 21
- 0
src_folder/BackEnd/Database/question_pool.txt View File

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')

+ 34
- 0
src_folder/BackEnd/game.py View File

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__()




+ 49
- 0
src_folder/BackEnd/router.py View File

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()

+ 1
- 3
src_folder/FrontEnd/app/public/index.html View File

<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app"/> <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> <title>1_2_oder3</title>
</head> </head>
<body> <body>

+ 25
- 74
src_folder/FrontEnd/app/src/App.css View File

.PopUpBackground { .PopUpBackground {
width: 100vw; width: 100vw;
height: 100vh; 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; position: absolute;
display: flex; display: flex;
justify-content: center; justify-content: center;


.PopUpContainer { .PopUpContainer {
width: 500px; width: 500px;
height: 200px;
height: 500px;
border-radius: 20px; 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 { .HeaderDiv {
margin-left: 50px; margin-left: 50px;
text-align: center; text-align: center;
max-width: 600px;
max-width: 1000px;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
box-shadow: 5px 5px black; box-shadow: 5px 5px black;
} }


#TimerPic { #TimerPic {
visibility: hidden;
} }


#Seconds { #Seconds {
visibility: hidden;
border: solid 2px black; border: solid 2px black;
border-radius: 10px; border-radius: 10px;
padding: 2px; padding: 2px;
} }

#QuestionHeaderDiv { #QuestionHeaderDiv {
background-color: white; background-color: white;
border: solid #0C134F 2px; border: solid #0C134F 2px;
#QuestionHeader { #QuestionHeader {
color: #0C134F; color: #0C134F;
} }

#QuestionDiv { #QuestionDiv {
background-color: white; background-color: white;
border: solid #0C134F 2px; border: solid #0C134F 2px;
box-shadow: 2px 2px black; box-shadow: 2px 2px black;


} }

#Question { #Question {
color: black; color: black;
} }
cursor: pointer; cursor: pointer;
} }


#headingimage:hover {
background-color: #F6F6F6;
}


.Body{ .Body{
text-align: center; text-align: center;
} }


.Answers { .Answers {
float: left;
padding: 10px; padding: 10px;
float: left;
width: 100%; width: 100%;
max-width: 600px;;
height: 300px;
margin-left: 110px;


max-width: 1000px;;
height: 500px;
margin-left: 80px;
} }


.AnswerBox { .AnswerBox {
margin-left: 6px; margin-left: 6px;
position: relative; position: relative;
height: 300px;
width: 30%;
height: 500px;
width: 32%;
float: left; float: left;
border: solid 2px; border: solid 2px;
border-radius: 20px;
box-shadow: 5px 5px black;
background-color: white;;

} }


#firstans { #firstans {
border: solid 5px #a10012;
border: solid 2px #a10012;
} }


#secondans { #secondans {
border: solid 5px #fba51b;
border: solid 2px #fba51b;
} }


#thirdans { #thirdans {
border: solid 5px #3b5da4;
border: solid 2px #3b5da4;
} }


.Buttons { .Buttons {
float: left; float: left;
max-width: 220px;
max-width: 250px;
padding-top: 10px; padding-top: 10px;
padding-left: 30px; padding-left: 30px;
} }
cursor: pointer; 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 { .ScoreBoard {
float: left; float: left;
padding: 10px; padding: 10px;
width: 100px; width: 100px;
height: 300px;
margin-left: 50px;
height: 500px;
margin-left: 40px;
background: linear-gradient(white, white) padding-box, 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%, #fba51b 50%, #3b5da4 100%) border-box;
border-style: solid; border-style: solid;
} }




#QuitButton {
visibility: hidden;

}



+ 2
- 44
src_folder/FrontEnd/app/src/App.js View File

import './App.css'; import './App.css';
import Header from "./components/Header"; import Header from "./components/Header";
import Body from "./components/Body"; import Body from "./components/Body";
import question from "./components/Question";


function App() { 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 (<> return (<>
<Header timerRunning={timerRunning} timerContent={formatTime(timeLeft)} questionCount={questionCount}/>
<Body startQuestion={startQuestion} timerRunning={timerRunning} stopTimer={stopTimer} setQuestionCount={setQuestionCount} setTeamSize={setTeamSize} teamsize={teamsize}/>
<Header/>
<Body/>
</> </>
); );
} }

+ 3
- 3
src_folder/FrontEnd/app/src/components/Answers.js View File

function Answers() { function Answers() {
return( return(
<div className="Answers"> <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> </div>
) )
} }

+ 3
- 3
src_folder/FrontEnd/app/src/components/Body.js View File

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

+ 5
- 39
src_folder/FrontEnd/app/src/components/Buttons.js View File

import React, {useState} from "react";
import React from "react";
import StartButton from "./StartButton"; import StartButton from "./StartButton";
import QuitButton from "./QuitButton"; 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( return(
<div className="Buttons"> <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> </div>
) )
} }

+ 3
- 3
src_folder/FrontEnd/app/src/components/Header.js View File

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

+ 1
- 4
src_folder/FrontEnd/app/src/components/Heading.js View File

import React from "react"; import React from "react";


function Heading() { function Heading() {
const onClick = () => {
window.location.reload();
}
return( return(
<div className="Heading"> <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> </div>


) )

+ 3
- 3
src_folder/FrontEnd/app/src/components/Question.js View File

import React from "react"; import React from "react";


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

+ 2
- 2
src_folder/FrontEnd/app/src/components/QuitButton.js View File

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

+ 2
- 30
src_folder/FrontEnd/app/src/components/ScoreBoard.js View File

import React from "react"; 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 export default ScoreBoard

+ 11
- 3
src_folder/FrontEnd/app/src/components/StartButton.js View File

import {useState} from "react";
import TeamSizePopUp from "./TeamsizePopUp";


function StartButton({onClick, content}) {
function StartButton() {
const [openPopUp, setOpenPopUp] = useState(false)

function startclicked() {
setOpenPopUp(true);
}


return( return(
<> <>
<button className="MyButton" id="StartButton" onClick={onClick}>
{content}
<button className="MyButton" id="StartButton" onClick={startclicked}>
Start Game
</button> </button>
{openPopUp && <TeamSizePopUp closeModal={setOpenPopUp}/>}
</> </>
) )
} }

+ 7
- 41
src_folder/FrontEnd/app/src/components/TeamsizePopUp.js View File

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); 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 ( return (
<div className="PopUpBackground"> <div className="PopUpBackground">
<div className="PopUpContainer"> <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>
</div> </div>
) )

+ 2
- 2
src_folder/FrontEnd/app/src/components/Timer.js View File

import React from "react"; import React from "react";


function Timer({timerRunning, timerContent}) {
function Timer() {
return( return(
<div className="TimerDiv"> <div className="TimerDiv">
<img src={process.env.PUBLIC_URL + "icons8-time.gif"} alt="timer" id="TimerPic"/> <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> </div>
) )
} }

+ 0
- 31
src_folder/FrontEnd/app/src/components/api.js View File

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() {

}

+ 6
- 0
src_folder/FrontEnd/app/src/components/data_functions.js View File

let teamsize
function setTeamsize(_teamsize) {
teamsize = _teamsize;
}

export default setTeamsize

Loading…
Cancel
Save