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

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

+

Frage:

-

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

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

-
- - - - - - - - - - - - - - - - - - - - - - -
TeamPoints
Red0
Yellow0
Blue0
-
) +function ScoreBoard() { + return(
ScoreBoard
) } 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 94aec4f..3392970 100644 --- a/src_folder/FrontEnd/app/src/components/StartButton.js +++ b/src_folder/FrontEnd/app/src/components/StartButton.js @@ -1,11 +1,19 @@ +import {useState} from "react"; +import TeamSizePopUp from "./TeamsizePopUp"; -function StartButton({onClick, content}) { +function StartButton() { + const [openPopUp, setOpenPopUp] = useState(false) + + function startclicked() { + setOpenPopUp(true); + } return( <> - + {openPopUp && } ) } diff --git a/src_folder/FrontEnd/app/src/components/TeamsizePopUp.js b/src_folder/FrontEnd/app/src/components/TeamsizePopUp.js index b4c3816..0979824 100644 --- a/src_folder/FrontEnd/app/src/components/TeamsizePopUp.js +++ b/src_folder/FrontEnd/app/src/components/TeamsizePopUp.js @@ -1,51 +1,17 @@ -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); } - - 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 (
-
-
X
-

Bitte Teamgröße wählen

-
-
- -
-
- -
+

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 a98d025..c02f2f8 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({timerRunning, timerContent}) { +function Timer() { return(
timer -

{timerContent}

+

0:00 s

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