caliskanbi83990/1_2_oder_3_repos
3
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[FrontEnd new files added]

Browse Source
This commit is contained in:
caliskan 2023-05-29 23:52:08 +02:00
parent f1759641d1
commit bea98333d8
11 changed files with 128 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src_folder/FrontEnd/app/public/12oder3-logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 24 KiB

27
src_folder/FrontEnd/app/src/App.css
View File

@ -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;
@ -138,10 +138,11 @@
max-width: 600px;;
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 {
background-color: #3E8E41; /* darker shade of green */
#StartButton:hover {
background-color: #ae572e; /* darker shade of green */
}

37
src_folder/FrontEnd/app/src/App.js
View File

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

14
src_folder/FrontEnd/app/src/components/Answers.js
View File

@ -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="secondans">Ronaldo >>> Messi</div>
<div className="AnswerBox" id="thirdans">I got right foot ...</div>
<div className="AnswerBox" id="firstans">
<div className="Answer">{ans1}</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>
)
}

12
src_folder/FrontEnd/app/src/components/Body.js
View File

@ -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}/>
<Answers/>
<ScoreBoard teamsize={teamsize}/>
<Buttons startQuestion={startQuestion} timerRunning={timerRunning} stopTimer={stopTimer} setQuestionCount={setQuestionCount} setTeamSize={setTeamSize}
setScoreGreen={setScoreGreen} setScoreRed={setScoreRed} setScoreBlue={setScoreBlue}
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>
)
}

7
src_folder/FrontEnd/app/src/components/Buttons.js
View File

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

4
src_folder/FrontEnd/app/src/components/Header.js
View File

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

4
src_folder/FrontEnd/app/src/components/Question.js
View File

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

10
src_folder/FrontEnd/app/src/components/ScoreBoard.js
View File

@ -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 id="yellow-points">0</td>
<td>Green</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>

19
src_folder/FrontEnd/app/src/components/TeamsizePopUp.js
View File

@ -15,19 +15,20 @@ function TeamSizePopUp({closeModal, changeGameState, startQuestion, setTeamSize}
}
const TeamSizeButtonClicked = () => {
if(inputValue <= 2 && inputValue > 0){
/*
postTeamsize({
"Teamsize": inputValue
}).then(data => console.log("Received answer" + data))
*/
setTeamSize(inputValue)
if(inputValue <= 3 && inputValue > 0){
try {
console.log(typeof inputValue)
postTeamsize(inputValue).then(r => { if (r.ok) {console.log("OK")} });
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>

52
src_folder/FrontEnd/app/src/components/api.js
View File

@ -1,31 +1,53 @@
import {createContext} from "react";
export function postTeamsize(data) {
return fetch("URL:PORT/TEAMSIZE",{
methods: 'POST',
const requestOptions = {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(response => response.json())
'Accept': 'application/json',
'Content-Type': 'application/json'},
body: JSON.stringify({ teamsize: data})
}
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")
}