diff --git a/src_folder/FrontEnd/app/public/index.html b/src_folder/FrontEnd/app/public/index.html index 67bde53..f46ea66 100644 --- a/src_folder/FrontEnd/app/public/index.html +++ b/src_folder/FrontEnd/app/public/index.html @@ -5,7 +5,9 @@ - + + + 1_2_oder3 diff --git a/src_folder/FrontEnd/app/src/App.css b/src_folder/FrontEnd/app/src/App.css index 4f3802b..8c2d057 100644 --- a/src_folder/FrontEnd/app/src/App.css +++ b/src_folder/FrontEnd/app/src/App.css @@ -2,7 +2,9 @@ .PopUpBackground { width: 100vw; height: 100vh; - background-color: rgba(200, 200, 200, 200); + background-color: rgba(255, 255, 255, 0.5); + backdrop-filter: blur(10px); + background-size: 100%; position: absolute; display: flex; justify-content: center; @@ -14,9 +16,30 @@ .PopUpContainer { width: 500px; - height: 500px; + height: 200px; border-radius: 20px; - background-color: white; + 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; } @@ -31,7 +54,7 @@ .HeaderDiv { margin-left: 50px; text-align: center; - max-width: 1000px; + max-width: 600px; width: 100%; padding: 10px; box-shadow: 5px 5px black; @@ -56,15 +79,14 @@ } #TimerPic { - visibility: hidden; } #Seconds { - visibility: hidden; border: solid 2px black; border-radius: 10px; padding: 2px; } + #QuestionHeaderDiv { background-color: white; border: solid #0C134F 2px; @@ -76,6 +98,7 @@ #QuestionHeader { color: #0C134F; } + #QuestionDiv { background-color: white; border: solid #0C134F 2px; @@ -84,6 +107,7 @@ box-shadow: 2px 2px black; } + #Question { color: black; } @@ -102,47 +126,50 @@ cursor: pointer; } -#headingimage:hover { - background-color: #F6F6F6; -} .Body{ text-align: center; } .Answers { - padding: 10px; float: left; + padding: 10px; width: 100%; - max-width: 1000px;; - height: 500px; - margin-left: 80px; + max-width: 600px;; + height: 300px; + margin-left: 110px; + + } .AnswerBox { margin-left: 6px; position: relative; - height: 500px; - width: 32%; + height: 300px; + width: 30%; float: left; border: solid 2px; + border-radius: 20px; + box-shadow: 5px 5px black; + background-color: white;; + } #firstans { - border: solid 2px #a10012; + border: solid 5px #a10012; } #secondans { - border: solid 2px #fba51b; + border: solid 5px #fba51b; } #thirdans { - border: solid 2px #3b5da4; + border: solid 5px #3b5da4; } .Buttons { float: left; - max-width: 250px; + max-width: 220px; padding-top: 10px; padding-left: 30px; } @@ -159,12 +186,38 @@ 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: 500px; - margin-left: 40px; + height: 300px; + margin-left: 50px; background: linear-gradient(white, white) padding-box, linear-gradient(to right, #a10012 0%, #fba51b 50%, #3b5da4 100%) border-box; border-style: solid; @@ -187,8 +240,4 @@ } -#QuitButton { - visibility: hidden; - -} diff --git a/src_folder/FrontEnd/app/src/App.js b/src_folder/FrontEnd/app/src/App.js index fd5566c..170e283 100644 --- a/src_folder/FrontEnd/app/src/App.js +++ b/src_folder/FrontEnd/app/src/App.js @@ -2,11 +2,53 @@ import { useEffect, useState} from "react"; 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 (<> -
- +
+ ); } diff --git a/src_folder/FrontEnd/app/src/components/Answers.js b/src_folder/FrontEnd/app/src/components/Answers.js index 9ba5121..5fce13f 100644 --- a/src_folder/FrontEnd/app/src/components/Answers.js +++ b/src_folder/FrontEnd/app/src/components/Answers.js @@ -3,9 +3,9 @@ import React from "react"; function Answers() { return(
-
AnswerBox1
-
AnswerBox2
-
AnswerBox3
+
Jemand anderen doppelt ...
+
Ronaldo >>> Messi
+
I got right foot ...
) } diff --git a/src_folder/FrontEnd/app/src/components/Body.js b/src_folder/FrontEnd/app/src/components/Body.js index 9d851b4..cca7c7f 100644 --- a/src_folder/FrontEnd/app/src/components/Body.js +++ b/src_folder/FrontEnd/app/src/components/Body.js @@ -2,12 +2,12 @@ import React from "react"; import Buttons from "./Buttons"; import Answers from "./Answers"; import ScoreBoard from "./ScoreBoard"; -function Body() { +function Body({startQuestion, timerRunning, stopTimer, setQuestionCount, setTeamSize, teamsize}) { return(
- + - +
) } diff --git a/src_folder/FrontEnd/app/src/components/Buttons.js b/src_folder/FrontEnd/app/src/components/Buttons.js index dcd3db0..fbe9554 100644 --- a/src_folder/FrontEnd/app/src/components/Buttons.js +++ b/src_folder/FrontEnd/app/src/components/Buttons.js @@ -1,12 +1,46 @@ -import React from "react"; +import React, {useState} from "react"; import StartButton from "./StartButton"; import QuitButton from "./QuitButton"; -function Buttons() { +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); + } + + return(
- - - + + {quitvisible && } + {openPopUp && }
) } diff --git a/src_folder/FrontEnd/app/src/components/Header.js b/src_folder/FrontEnd/app/src/components/Header.js index 140faf0..9cd37a5 100644 --- a/src_folder/FrontEnd/app/src/components/Header.js +++ b/src_folder/FrontEnd/app/src/components/Header.js @@ -2,12 +2,12 @@ import React from "react"; import Heading from "./Heading"; import Timer from "./Timer"; import Question from "./Question"; -function Header() { +function Header({timerRunning, timerContent, questionCount}) { return(
- - + +
) } diff --git a/src_folder/FrontEnd/app/src/components/Heading.js b/src_folder/FrontEnd/app/src/components/Heading.js index 9805b11..559a636 100644 --- a/src_folder/FrontEnd/app/src/components/Heading.js +++ b/src_folder/FrontEnd/app/src/components/Heading.js @@ -1,9 +1,12 @@ import React from "react"; function Heading() { + const onClick = () => { + window.location.reload(); + } return(
- 1_2_oder_3 + 1_2_oder_3
) diff --git a/src_folder/FrontEnd/app/src/components/Question.js b/src_folder/FrontEnd/app/src/components/Question.js index 1f7ba4f..104b856 100644 --- a/src_folder/FrontEnd/app/src/components/Question.js +++ b/src_folder/FrontEnd/app/src/components/Question.js @@ -1,13 +1,13 @@ import React from "react"; -function Question() { +function Question({questionCount}) { return(
-

Frage:

+

{questionCount ? questionCount + ".Frage" : "Fragen"}

-

?

+

Warum ist Kerem so schrott ?

) diff --git a/src_folder/FrontEnd/app/src/components/QuitButton.js b/src_folder/FrontEnd/app/src/components/QuitButton.js index edb3e91..4840db1 100644 --- a/src_folder/FrontEnd/app/src/components/QuitButton.js +++ b/src_folder/FrontEnd/app/src/components/QuitButton.js @@ -1,7 +1,7 @@ import React from "react"; -function QuitButton() { +function QuitButton({quitGame}) { return( - ) diff --git a/src_folder/FrontEnd/app/src/components/ScoreBoard.js b/src_folder/FrontEnd/app/src/components/ScoreBoard.js index df411a8..95f5dbb 100644 --- a/src_folder/FrontEnd/app/src/components/ScoreBoard.js +++ b/src_folder/FrontEnd/app/src/components/ScoreBoard.js @@ -1,7 +1,35 @@ import React from "react"; -function ScoreBoard() { - return(
ScoreBoard
) +function ScoreBoard({teamsize}) { + return( +
+
+

Spieler pro Team: {teamsize ? teamsize : ""}

+
+ + + + + + + + + + + + + + + + + + + + + + +
TeamPoints
Red0
Yellow0
Blue0
+
) } export default ScoreBoard \ No newline at end of file diff --git a/src_folder/FrontEnd/app/src/components/StartButton.js b/src_folder/FrontEnd/app/src/components/StartButton.js index 3392970..94aec4f 100644 --- a/src_folder/FrontEnd/app/src/components/StartButton.js +++ b/src_folder/FrontEnd/app/src/components/StartButton.js @@ -1,19 +1,11 @@ -import {useState} from "react"; -import TeamSizePopUp from "./TeamsizePopUp"; -function StartButton() { - const [openPopUp, setOpenPopUp] = useState(false) - - function startclicked() { - setOpenPopUp(true); - } +function StartButton({onClick, content}) { return( <> - - {openPopUp && } ) } diff --git a/src_folder/FrontEnd/app/src/components/TeamsizePopUp.js b/src_folder/FrontEnd/app/src/components/TeamsizePopUp.js index 0979824..b4c3816 100644 --- a/src_folder/FrontEnd/app/src/components/TeamsizePopUp.js +++ b/src_folder/FrontEnd/app/src/components/TeamsizePopUp.js @@ -1,17 +1,51 @@ -import React from "react"; -import setTeamsize from "./data_functions"; +import React, {useState} from "react"; +import {postTeamsize} from "./api"; -function TeamSizePopUp({closeModal}) { +function TeamSizePopUp({closeModal, changeGameState, startQuestion, setTeamSize}) { - function closePopUp() { + const [inputValue, setInputValue] = useState(2); + + const getInput = (event) => { + setInputValue(event.target.value); + } + + + const 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 (
-

Bitte Teamgröße wählen

- - +
+
X
+

Bitte Teamgröße wählen

+
+
+ +
+
+ +
) diff --git a/src_folder/FrontEnd/app/src/components/Timer.js b/src_folder/FrontEnd/app/src/components/Timer.js index c02f2f8..a98d025 100644 --- a/src_folder/FrontEnd/app/src/components/Timer.js +++ b/src_folder/FrontEnd/app/src/components/Timer.js @@ -1,10 +1,10 @@ import React from "react"; -function Timer() { +function Timer({timerRunning, timerContent}) { return(
timer -

0:00 s

+

{timerContent}

) } diff --git a/src_folder/FrontEnd/app/src/components/api.js b/src_folder/FrontEnd/app/src/components/api.js new file mode 100644 index 0000000..7b4030e --- /dev/null +++ b/src_folder/FrontEnd/app/src/components/api.js @@ -0,0 +1,31 @@ +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() { + +} \ No newline at end of file diff --git a/src_folder/FrontEnd/app/src/components/data_functions.js b/src_folder/FrontEnd/app/src/components/data_functions.js deleted file mode 100644 index 48b481d..0000000 --- a/src_folder/FrontEnd/app/src/components/data_functions.js +++ /dev/null @@ -1,6 +0,0 @@ -let teamsize -function setTeamsize(_teamsize) { - teamsize = _teamsize; -} - -export default setTeamsize