Browse Source

[FrontEnd new files added]

master
caliskan 1 year ago
parent
commit
bea98333d8

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


+ 14
- 13
src_folder/FrontEnd/app/src/App.css View File

height: 200px; height: 200px;
border-radius: 20px; border-radius: 20px;
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%, #72FF50 50%, #3b5da4 100%) border-box;
border-style: solid; border-style: solid;
border-width: 5px; border-width: 5px;
border-color: transparent; border-color: transparent;
margin-top: -15px; margin-top: -15px;
border-radius: 5px; border-radius: 5px;
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%, #72FF50 50%, #3b5da4 100%) border-box;
border-style: solid; border-style: solid;
border-width: 2px; border-width: 2px;
box-shadow: 1px 1px black; box-shadow: 1px 1px black;
padding: 10px; padding: 10px;
box-shadow: 5px 5px black; box-shadow: 5px 5px black;
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%, #72FF50 50%, #3b5da4 100%) border-box;
border-style: solid; border-style: solid;
border-width: 5px; border-width: 5px;
border-radius: 20px; border-radius: 20px;


.TimerDiv { .TimerDiv {
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%, #72FF50 50%, #3b5da4 100%) border-box;
border-style: solid; border-style: solid;
border-width: 5px; border-width: 5px;
border-radius: 20px; border-radius: 20px;
height: auto; height: auto;
padding: 10px ; padding: 10px ;
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%, #72FF50 50%, #3b5da4 100%) border-box;
border-style: solid; border-style: solid;
border-width: 5px; border-width: 5px;
border-radius: 20px; border-radius: 20px;
max-width: 600px;; max-width: 600px;;
height: 300px; height: 300px;
margin-left: 110px; margin-left: 110px;


} }


.Answer {
}
.AnswerBox { .AnswerBox {
margin-left: 6px; margin-left: 6px;
position: relative; position: relative;
border: solid 2px; border: solid 2px;
border-radius: 20px; border-radius: 20px;
box-shadow: 5px 5px black; box-shadow: 5px 5px black;
background-color: white;;
background-color: white;


} }


} }


#secondans { #secondans {
border: solid 5px #fba51b;
border: solid 5px #72FF50;
} }


#thirdans { #thirdans {
height: 300px; height: 300px;
margin-left: 50px; margin-left: 50px;
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%, #72FF50 50%, #3b5da4 100%) border-box;
border-style: solid; border-style: solid;
border-width: 5px; border-width: 5px;
border-radius: 20px; border-radius: 20px;
} }


#StartButton { #StartButton {
background-color: #4CAF50;
background-color: #ff863d;
} }


#QuitButton { #QuitButton {
background-color: red; background-color: red;
} }
.MyButton:hover {
background-color: #3E8E41; /* darker shade of green */
#StartButton:hover {
background-color: #ae572e; /* darker shade of green */
} }





+ 34
- 3
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";
import {getQuestion, getScoreboard, getReset} from "./components/api";


function App() { function App() {
const [timeLeft, setTimeLeft] = useState(10*1000); 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 [timerRunning, setTimerRunning] = useState(false);
const [questionCount, setQuestionCount] = useState(0); const [questionCount, setQuestionCount] = useState(0);
const [teamsize, setTeamSize] = 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(() => { useEffect(() => {
let timer; let timer;
if (timerRunning && timeLeft > 0) { if (timerRunning && timeLeft > 0) {
}, 10);} }, 10);}
else if (timeLeft === 0) { else if (timeLeft === 0) {
alert("Zeit ist um !"); alert("Zeit ist um !");
showcorrect();
getScoreboard(setScoreBlue, setScoreGreen, setScoreRed);
setTimerRunning(false); setTimerRunning(false);
setTimeLeft(10); setTimeLeft(10);
} }
return `${seconds} s`; return `${seconds} s`;
} }


const showcorrect = () => {
alert("Richtiges Feld: " + correctfield + "\nRichtige Antwort: " + correctans)
}

const startQuestion = () => { const startQuestion = () => {
if (questionCount <= 5){ if (questionCount <= 5){
setQuestionCount(questionCount+1) setQuestionCount(questionCount+1)
getQuestion(setAns1, setAns2, setAns3, setQuestion, setCorrectField, setCorrectAns).then(r => console.log(r))
setTimeLeft(10*1000); setTimeLeft(10*1000);
setTimerRunning(true); setTimerRunning(true);
} }
else { else {
alert("Spiel vorbei !"); alert("Spiel vorbei !");
getReset(setAns1, setAns2, setAns3, setQuestion);
} }
} }


} }


return (<> 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}
/>
</> </>
); );
} }

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

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


function Answers() {
function Answers({ans1, ans2, ans3}) {
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">
<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> </div>
) )
} }

+ 8
- 4
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({startQuestion, timerRunning, stopTimer, setQuestionCount, setTeamSize, teamsize, ans1, ans2, ans3, scoreblue,
scoregreen, scorered, setScoreBlue, setScoreGreen, setScoreRed,
setAns1, setAns2, setAns3, setQuestion}) {
return( return(
<div className="Body"> <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> </div>
) )
} }

+ 6
- 1
src_folder/FrontEnd/app/src/components/Buttons.js View File

import StartButton from "./StartButton"; import StartButton from "./StartButton";
import QuitButton from "./QuitButton"; import QuitButton from "./QuitButton";
import TeamSizePopUp from "./TeamsizePopUp"; 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 [gameStarted, setGameStarted] = useState(false)
const [openPopUp, setOpenPopUp] = useState(false) const [openPopUp, setOpenPopUp] = useState(false)
const [quitvisible, setQuitvisible] = useState(false) const [quitvisible, setQuitvisible] = useState(false)
changeGame(false); changeGame(false);
stopTimer(); stopTimer();
setQuestionCount(0); setQuestionCount(0);
getReset(setAns1, setAns2, setAns3, setQuestion);
alert("Spiel abgebrochen !");
getScoreboard(setScoreBlue, setScoreGreen, setScoreRed);
} }





+ 2
- 2
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({timerRunning, timerContent, questionCount, question}) {
return( return(
<header className="Header"> <header className="Header">
<Heading/> <Heading/>
<Question questionCount={questionCount}/>
<Question questionCount={questionCount} question={question}/>
<Timer timerRunning={timerRunning} timerContent={timerContent}/> <Timer timerRunning={timerRunning} timerContent={timerContent}/>
</header> </header>
) )

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

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


function Question({questionCount}) {
function Question({questionCount, 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">{questionCount ? questionCount + ".Frage" : "Fragen"}</h2>
</div> </div>
<div id="QuestionDiv"> <div id="QuestionDiv">
<h2 id="Question">Warum ist Kerem so schrott ? </h2>
<h2 id="Question">{question}</h2>
</div> </div>
</div> </div>
) )

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

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


function ScoreBoard({teamsize}) {
function ScoreBoard({teamsize, scoreblue, scoregreen, scorered}) {
return( return(
<div className={"ScoreBoard"}> <div className={"ScoreBoard"}>
<div> <div>
<tbody> <tbody>
<tr> <tr>
<td>Red</td> <td>Red</td>
<td id="red-points">0</td>
<td id="red-points">{scorered}</td>
</tr> </tr>
<tr> <tr>
<td>Yellow</td>
<td id="yellow-points">0</td>
<td>Green</td>
<td id="yellow-points">{scoregreen}</td>
</tr> </tr>
<tr> <tr>
<td>Blue</td> <td>Blue</td>
<td id="blue-points">0</td>
<td id="blue-points">{scoreblue}</td>
</tr> </tr>


</tbody> </tbody>

+ 10
- 9
src_folder/FrontEnd/app/src/components/TeamsizePopUp.js View File

} }


const TeamSizeButtonClicked = () => { 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); changeGameState(true);
closePopUp(); closePopUp();
startQuestion(); startQuestion();
} catch (error) {
console.error(error)
}
} }
else { else {
alert("Bitte Zahl zwischen 1 und 2 eingeben ! ")
alert("Bitte Zahl zwischen 1 und 3 eingeben ! ")
} }


} }
<h2>Bitte Teamgröße wählen </h2> <h2>Bitte Teamgröße wählen </h2>
</div> </div>
<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}/> onChange={getInput}/>
</div> </div>
<div> <div>

+ 37
- 15
src_folder/FrontEnd/app/src/components/api.js View File

import {createContext} from "react";


export function postTeamsize(data) { export function postTeamsize(data) {
return fetch("URL:PORT/TEAMSIZE",{
methods: 'POST',
const requestOptions = {
method: 'POST',
headers: { 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() { 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 getCheck() {


} }


export function getReset() {

export function getReset(setAns1, setAns2, setAns3, setQuestion) {
setAns1('?');
setAns2('?');
setAns3('?');
setQuestion('?');
return fetch("http://192.168.0.94:5555/reset")
} }

Loading…
Cancel
Save