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

new files added

Browse Source
This commit is contained in:
caliskanbi 2023-05-19 18:00:38 +02:00
parent 965624ca7a
commit c3367fad31
17 changed files with 286 additions and 77 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,7 +5,9 @@
<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="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="preconnect" href="https://fonts.googleapis.com">
<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,7 +2,9 @@
.PopUpBackground { .PopUpBackground {
width: 100vw; width: 100vw;
height: 100vh; 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; position: absolute;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -14,9 +16,30 @@
.PopUpContainer { .PopUpContainer {
width: 500px; width: 500px;
height: 500px; height: 200px;
border-radius: 20px; 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 { .HeaderDiv {
margin-left: 50px; margin-left: 50px;
text-align: center; text-align: center;
max-width: 1000px; max-width: 600px;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
box-shadow: 5px 5px black; box-shadow: 5px 5px black;
@ -56,15 +79,14 @@
} }
#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;
@ -76,6 +98,7 @@
#QuestionHeader { #QuestionHeader {
color: #0C134F; color: #0C134F;
} }
#QuestionDiv { #QuestionDiv {
background-color: white; background-color: white;
border: solid #0C134F 2px; border: solid #0C134F 2px;
@ -84,6 +107,7 @@
box-shadow: 2px 2px black; box-shadow: 2px 2px black;
} }
#Question { #Question {
color: black; color: black;
} }
@ -102,47 +126,50 @@
cursor: pointer; cursor: pointer;
} }
#headingimage:hover {
background-color: #F6F6F6;
}
.Body{ .Body{
text-align: center; text-align: center;
} }
.Answers { .Answers {
padding: 10px;
float: left; float: left;
padding: 10px;
width: 100%; width: 100%;
max-width: 1000px;; max-width: 600px;;
height: 500px; height: 300px;
margin-left: 80px; margin-left: 110px;
} }
.AnswerBox { .AnswerBox {
margin-left: 6px; margin-left: 6px;
position: relative; position: relative;
height: 500px; height: 300px;
width: 32%; width: 30%;
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 2px #a10012; border: solid 5px #a10012;
} }
#secondans { #secondans {
border: solid 2px #fba51b; border: solid 5px #fba51b;
} }
#thirdans { #thirdans {
border: solid 2px #3b5da4; border: solid 5px #3b5da4;
} }
.Buttons { .Buttons {
float: left; float: left;
max-width: 250px; max-width: 220px;
padding-top: 10px; padding-top: 10px;
padding-left: 30px; padding-left: 30px;
} }
@ -159,12 +186,38 @@
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: 500px; height: 300px;
margin-left: 40px; 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%, #fba51b 50%, #3b5da4 100%) border-box;
border-style: solid; border-style: solid;
@ -187,8 +240,4 @@
} }
#QuitButton {
visibility: hidden;
}

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

@ -2,11 +2,53 @@ 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/> <Header timerRunning={timerRunning} timerContent={formatTime(timeLeft)} questionCount={questionCount}/>
<Body/> <Body startQuestion={startQuestion} timerRunning={timerRunning} stopTimer={stopTimer} setQuestionCount={setQuestionCount} setTeamSize={setTeamSize} teamsize={teamsize}/>
</> </>
); );
} }

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">AnswerBox1 </div> <div className="AnswerBox" id="firstans">Jemand anderen doppelt ... </div>
<div className="AnswerBox" id="secondans">AnswerBox2</div> <div className="AnswerBox" id="secondans">Ronaldo >>> Messi</div>
<div className="AnswerBox" id="thirdans">AnswerBox3</div> <div className="AnswerBox" id="thirdans">I got right foot ...</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() { function Body({startQuestion, timerRunning, stopTimer, setQuestionCount, setTeamSize, teamsize}) {
return( return(
<div className="Body"> <div className="Body">
<Buttons/> <Buttons startQuestion={startQuestion} timerRunning={timerRunning} stopTimer={stopTimer} setQuestionCount={setQuestionCount} setTeamSize={setTeamSize}/>
<Answers/> <Answers/>
<ScoreBoard/> <ScoreBoard teamsize={teamsize}/>
</div> </div>
) )
} }

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

@ -1,12 +1,46 @@
import React from "react"; import React, {useState} from "react";
import StartButton from "./StartButton"; import StartButton from "./StartButton";
import QuitButton from "./QuitButton"; 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( return(
<div className="Buttons"> <div className="Buttons">
<StartButton/> <StartButton
<QuitButton/> onClick={startClicked}
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() { function Header({timerRunning, timerContent, questionCount}) {
return( return(
<header className="Header"> <header className="Header">
<Heading/> <Heading/>
<Question/> <Question questionCount={questionCount}/>
<Timer/> <Timer timerRunning={timerRunning} timerContent={timerContent}/>
</header> </header>
) )
} }

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

@ -1,9 +1,12 @@
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"/> <img src={process.env.PUBLIC_URL + "12oder3-logo.png"} alt="1_2_oder_3" id="headingimage" onClick={onClick}/>
</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() { function Question({questionCount}) {
return( return(
<div className="HeaderDiv"> <div className="HeaderDiv">
<div id="QuestionHeaderDiv"> <div id="QuestionHeaderDiv">
<h2 id="QuestionHeader">Frage:</h2> <h2 id="QuestionHeader">{questionCount ? questionCount + ".Frage" : "Fragen"}</h2>
</div> </div>
<div id="QuestionDiv"> <div id="QuestionDiv">
<h2 id="Question">?</h2> <h2 id="Question">Warum ist Kerem so schrott ? </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() { function QuitButton({quitGame}) {
return( return(
<button className="MyButton" id="QuitButton"> <button className="MyButton" id="QuitButton" onClick={quitGame}>
Abbruch Abbruch
</button> </button>
) )

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

@ -1,7 +1,35 @@
import React from "react"; import React from "react";
function ScoreBoard() { function ScoreBoard({teamsize}) {
return(<div className={"ScoreBoard"}>ScoreBoard</div>) return(
<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,19 +1,11 @@
import {useState} from "react";
import TeamSizePopUp from "./TeamsizePopUp";
function StartButton() { function StartButton({onClick, content}) {
const [openPopUp, setOpenPopUp] = useState(false)
function startclicked() {
setOpenPopUp(true);
}
return( return(
<> <>
<button className="MyButton" id="StartButton" onClick={startclicked}> <button className="MyButton" id="StartButton" onClick={onClick}>
Start Game {content}
</button> </button>
{openPopUp && <TeamSizePopUp closeModal={setOpenPopUp}/>}
</> </>
) )
} }

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

@ -1,17 +1,51 @@
import React from "react"; import React, {useState} from "react";
import setTeamsize from "./data_functions"; 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); 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">
<h2>Bitte Teamgröße wählen</h2> <div>
<input type="number" id="TeamSizeInput"/> <div id="Cancel" onClick={closePopUp}>X</div>
<button className="MyButton" onClick={closePopUp}>Bestätigen</button> <h2>Bitte Teamgröße wählen </h2>
</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() { function Timer({timerRunning, timerContent}) {
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">0:00 s</h2> <h2 id="Seconds">{timerContent}</h2>
</div> </div>
) )
} }

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

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

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

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

2
src_folder/FrontEnd/app/src/index.css
View File

@ -1,6 +1,6 @@
body { body {
background-image: url("../public/17580.jpg"); background-image: url("../public/17580.jpg");
background-size: 1920px; background-size: cover;
} }