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

corrected

Browse Source
This commit is contained in:
David Engert 2023-05-18 12:47:56 +02:00
parent f800cf1277
commit ea1f8e399f
16 changed files with 76 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src_folder/FrontEnd/app/public/index.html
View File

@ -5,9 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app"/> <meta name="description" content="Web site created using create-react-app"/>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">
<title>1_2_oder3</title> <title>1_2_oder3</title>
</head> </head>
<body> <body>

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

@ -2,9 +2,7 @@
.PopUpBackground { .PopUpBackground {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(200, 200, 200, 200);
backdrop-filter: blur(10px);
background-size: 100%;
position: absolute; position: absolute;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -16,30 +14,9 @@
.PopUpContainer { .PopUpContainer {
width: 500px; width: 500px;
height: 200px; height: 500px;
border-radius: 20px; border-radius: 20px;
background: linear-gradient(white, white) padding-box, background-color: white;
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;
} }
@ -54,7 +31,7 @@
.HeaderDiv { .HeaderDiv {
margin-left: 50px; margin-left: 50px;
text-align: center; text-align: center;
max-width: 600px; max-width: 1000px;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
box-shadow: 5px 5px black; box-shadow: 5px 5px black;
@ -79,14 +56,15 @@
} }
#TimerPic { #TimerPic {
visibility: hidden;
} }
#Seconds { #Seconds {
visibility: hidden;
border: solid 2px black; border: solid 2px black;
border-radius: 10px; border-radius: 10px;
padding: 2px; padding: 2px;
} }
#QuestionHeaderDiv { #QuestionHeaderDiv {
background-color: white; background-color: white;
border: solid #0C134F 2px; border: solid #0C134F 2px;
@ -98,7 +76,6 @@
#QuestionHeader { #QuestionHeader {
color: #0C134F; color: #0C134F;
} }
#QuestionDiv { #QuestionDiv {
background-color: white; background-color: white;
border: solid #0C134F 2px; border: solid #0C134F 2px;
@ -107,7 +84,6 @@
box-shadow: 2px 2px black; box-shadow: 2px 2px black;
} }
#Question { #Question {
color: black; color: black;
} }
@ -126,50 +102,47 @@
cursor: pointer; cursor: pointer;
} }
#headingimage:hover {
background-color: #F6F6F6;
}
.Body{ .Body{
text-align: center; text-align: center;
} }
.Answers { .Answers {
float: left;
padding: 10px; padding: 10px;
float: left;
width: 100%; width: 100%;
max-width: 600px;; max-width: 1000px;;
height: 300px; height: 500px;
margin-left: 110px; margin-left: 80px;
} }
.AnswerBox { .AnswerBox {
margin-left: 6px; margin-left: 6px;
position: relative; position: relative;
height: 300px; height: 500px;
width: 30%; width: 32%;
float: left; float: left;
border: solid 2px; border: solid 2px;
border-radius: 20px;
box-shadow: 5px 5px black;
background-color: white;;
} }
#firstans { #firstans {
border: solid 5px #a10012; border: solid 2px #a10012;
} }
#secondans { #secondans {
border: solid 5px #fba51b; border: solid 2px #fba51b;
} }
#thirdans { #thirdans {
border: solid 5px #3b5da4; border: solid 2px #3b5da4;
} }
.Buttons { .Buttons {
float: left; float: left;
max-width: 220px; max-width: 250px;
padding-top: 10px; padding-top: 10px;
padding-left: 30px; padding-left: 30px;
} }
@ -186,38 +159,12 @@
cursor: pointer; 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 { .ScoreBoard {
float: left; float: left;
padding: 10px; padding: 10px;
width: 100px; width: 100px;
height: 300px; height: 500px;
margin-left: 50px; margin-left: 40px;
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%, #fba51b 50%, #3b5da4 100%) border-box;
border-style: solid; border-style: solid;
@ -240,4 +187,8 @@
} }
#QuitButton {
visibility: hidden;
}

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

@ -2,53 +2,11 @@ import { useEffect, useState} from "react";
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";
function App() { 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 (<> return (<>
<Header timerRunning={timerRunning} timerContent={formatTime(timeLeft)} questionCount={questionCount}/> <Header/>
<Body startQuestion={startQuestion} timerRunning={timerRunning} stopTimer={stopTimer} setQuestionCount={setQuestionCount} setTeamSize={setTeamSize} teamsize={teamsize}/> <Body/>
</> </>
); );
} }

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

@ -3,9 +3,9 @@ import React from "react";
function Answers() { function Answers() {
return( return(
<div className="Answers"> <div className="Answers">
<div className="AnswerBox" id="firstans">Jemand anderen doppelt ... </div> <div className="AnswerBox" id="firstans">AnswerBox1 </div>
<div className="AnswerBox" id="secondans">Ronaldo >>> Messi</div> <div className="AnswerBox" id="secondans">AnswerBox2</div>
<div className="AnswerBox" id="thirdans">I got right foot ...</div> <div className="AnswerBox" id="thirdans">AnswerBox3</div>
</div> </div>
) )
} }

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

@ -2,12 +2,12 @@ import React from "react";
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() {
return( return(
<div className="Body"> <div className="Body">
<Buttons startQuestion={startQuestion} timerRunning={timerRunning} stopTimer={stopTimer} setQuestionCount={setQuestionCount} setTeamSize={setTeamSize}/> <Buttons/>
<Answers/> <Answers/>
<ScoreBoard teamsize={teamsize}/> <ScoreBoard/>
</div> </div>
) )
} }

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

@ -1,46 +1,12 @@
import React, {useState} from "react"; import React from "react";
import StartButton from "./StartButton"; import StartButton from "./StartButton";
import QuitButton from "./QuitButton"; import QuitButton from "./QuitButton";
import TeamSizePopUp from "./TeamsizePopUp"; function Buttons() {
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( return(
<div className="Buttons"> <div className="Buttons">
<StartButton <StartButton/>
onClick={startClicked} <QuitButton/>
content={(gameStarted) ? "Nächste Frage" : "Spiel Starten" }
/>
{quitvisible && <QuitButton quitGame={quitGame}/>}
{openPopUp && <TeamSizePopUp closeModal={setOpenPopUp}
changeGameState={changeGame}
startQuestion={startQuestion}
setTeamSize={setTeamSize}
/>}
</div> </div>
) )
} }

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

@ -2,12 +2,12 @@ import React from "react";
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() {
return( return(
<header className="Header"> <header className="Header">
<Heading/> <Heading/>
<Question questionCount={questionCount}/> <Question/>
<Timer timerRunning={timerRunning} timerContent={timerContent}/> <Timer/>
</header> </header>
) )
} }

5
src_folder/FrontEnd/app/src/components/Heading.js
View File

@ -1,12 +1,9 @@
import React from "react"; import React from "react";
function Heading() { function Heading() {
const onClick = () => {
window.location.reload();
}
return( return(
<div className="Heading"> <div className="Heading">
<img src={process.env.PUBLIC_URL + "12oder3-logo.png"} alt="1_2_oder_3" id="headingimage" onClick={onClick}/> <img src={process.env.PUBLIC_URL + "12oder3-logo.png"} alt="1_2_oder_3" id="headingimage"/>
</div> </div>
) )

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

@ -1,13 +1,13 @@
import React from "react"; import React from "react";
function Question({questionCount}) { function 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">Frage:</h2>
</div> </div>
<div id="QuestionDiv"> <div id="QuestionDiv">
<h2 id="Question">Warum ist Kerem so schrott ? </h2> <h2 id="Question">?</h2>
</div> </div>
</div> </div>
) )

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

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
function QuitButton({quitGame}) { function QuitButton() {
return( return(
<button className="MyButton" id="QuitButton" onClick={quitGame}> <button className="MyButton" id="QuitButton">
Abbruch Abbruch
</button> </button>
) )

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

@ -1,35 +1,7 @@
import React from "react"; import React from "react";
function ScoreBoard({teamsize}) { function ScoreBoard() {
return( return(<div className={"ScoreBoard"}>ScoreBoard</div>)
<div className={"ScoreBoard"}>
<div>
<p>Spieler pro Team: {teamsize ? teamsize : ""}</p>
</div>
<table>
<thead>
<tr>
<th>Team</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Red</td>
<td id="red-points">0</td>
</tr>
<tr>
<td>Yellow</td>
<td id="yellow-points">0</td>
</tr>
<tr>
<td>Blue</td>
<td id="blue-points">0</td>
</tr>
</tbody>
</table>
</div>)
} }
export default ScoreBoard export default ScoreBoard

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

@ -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( return(
<> <>
<button className="MyButton" id="StartButton" onClick={onClick}> <button className="MyButton" id="StartButton" onClick={startclicked}>
{content} Start Game
</button> </button>
{openPopUp && <TeamSizePopUp closeModal={setOpenPopUp}/>}
</> </>
) )
} }

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

@ -1,51 +1,17 @@
import React, {useState} from "react"; import React from "react";
import {postTeamsize} from "./api"; import setTeamsize from "./data_functions";
function TeamSizePopUp({closeModal, changeGameState, startQuestion, setTeamSize}) { function TeamSizePopUp({closeModal}) {
const [inputValue, setInputValue] = useState(2); function closePopUp() {
const getInput = (event) => {
setInputValue(event.target.value);
}
const closePopUp = () => {
closeModal(false); 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 ( return (
<div className="PopUpBackground"> <div className="PopUpBackground">
<div className="PopUpContainer"> <div className="PopUpContainer">
<div> <h2>Bitte Teamgröße wählen</h2>
<div id="Cancel" onClick={closePopUp}>X</div> <input type="number" id="TeamSizeInput"/>
<h2>Bitte Teamgröße wählen </h2> <button className="MyButton" onClick={closePopUp}>Bestätigen</button>
</div>
<div>
<input type="number" id="TeamSizeInput" min={1} max={2} value={inputValue}
onChange={getInput}/>
</div>
<div>
<button className="MyButton" id="PopUpButton" onClick={TeamSizeButtonClicked}>Bestätigen und Spiel starten</button>
</div>
</div> </div>
</div> </div>
) )

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

@ -1,10 +1,10 @@
import React from "react"; import React from "react";
function Timer({timerRunning, timerContent}) { function Timer() {
return( return(
<div className="TimerDiv"> <div className="TimerDiv">
<img src={process.env.PUBLIC_URL + "icons8-time.gif"} alt="timer" id="TimerPic"/> <img src={process.env.PUBLIC_URL + "icons8-time.gif"} alt="timer" id="TimerPic"/>
<h2 id="Seconds">{timerContent}</h2> <h2 id="Seconds">0:00 s</h2>
</div> </div>
) )
} }

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

@ -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() {
}

6
src_folder/FrontEnd/app/src/components/data_functions.js Normal file
View File

@ -0,0 +1,6 @@
let teamsize
function setTeamsize(_teamsize) {
teamsize = _teamsize;
}
export default setTeamsize