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 */ | |||||
} | } | ||||
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} | |||||
/> | |||||
</> | </> | ||||
); | ); | ||||
} | } |
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> | ||||
) | ) | ||||
} | } |
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> | ||||
) | ) | ||||
} | } |
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); | |||||
} | } | ||||
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> | ||||
) | ) |
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> | ||||
) | ) |
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> |
} | } | ||||
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> |
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") | |||||
} | } |