corrected
This commit is contained in:
parent
f800cf1277
commit
ea1f8e399f
@ -5,9 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Web site created using create-react-app"/>
|
||||
<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">
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<title>1_2_oder3</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -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;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -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 (<>
|
||||
<Header timerRunning={timerRunning} timerContent={formatTime(timeLeft)} questionCount={questionCount}/>
|
||||
<Body startQuestion={startQuestion} timerRunning={timerRunning} stopTimer={stopTimer} setQuestionCount={setQuestionCount} setTeamSize={setTeamSize} teamsize={teamsize}/>
|
||||
<Header/>
|
||||
<Body/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,9 +3,9 @@ import React from "react";
|
||||
function Answers() {
|
||||
return(
|
||||
<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">AnswerBox1 </div>
|
||||
<div className="AnswerBox" id="secondans">AnswerBox2</div>
|
||||
<div className="AnswerBox" id="thirdans">AnswerBox3</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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(
|
||||
<div className="Body">
|
||||
<Buttons startQuestion={startQuestion} timerRunning={timerRunning} stopTimer={stopTimer} setQuestionCount={setQuestionCount} setTeamSize={setTeamSize}/>
|
||||
<Buttons/>
|
||||
<Answers/>
|
||||
<ScoreBoard teamsize={teamsize}/>
|
||||
<ScoreBoard/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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(
|
||||
<div className="Buttons">
|
||||
<StartButton
|
||||
onClick={startClicked}
|
||||
content={(gameStarted) ? "Nächste Frage" : "Spiel Starten" }
|
||||
/>
|
||||
{quitvisible && <QuitButton quitGame={quitGame}/>}
|
||||
{openPopUp && <TeamSizePopUp closeModal={setOpenPopUp}
|
||||
changeGameState={changeGame}
|
||||
startQuestion={startQuestion}
|
||||
setTeamSize={setTeamSize}
|
||||
/>}
|
||||
<StartButton/>
|
||||
<QuitButton/>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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(
|
||||
<header className="Header">
|
||||
<Heading/>
|
||||
<Question questionCount={questionCount}/>
|
||||
<Timer timerRunning={timerRunning} timerContent={timerContent}/>
|
||||
<Question/>
|
||||
<Timer/>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
import React from "react";
|
||||
|
||||
function Heading() {
|
||||
const onClick = () => {
|
||||
window.location.reload();
|
||||
}
|
||||
return(
|
||||
<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>
|
||||
|
||||
)
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import React from "react";
|
||||
|
||||
function Question({questionCount}) {
|
||||
function Question() {
|
||||
return(
|
||||
<div className="HeaderDiv">
|
||||
<div id="QuestionHeaderDiv">
|
||||
<h2 id="QuestionHeader">{questionCount ? questionCount + ".Frage" : "Fragen"}</h2>
|
||||
<h2 id="QuestionHeader">Frage:</h2>
|
||||
</div>
|
||||
<div id="QuestionDiv">
|
||||
<h2 id="Question">Warum ist Kerem so schrott ? </h2>
|
||||
<h2 id="Question">?</h2>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
function QuitButton({quitGame}) {
|
||||
function QuitButton() {
|
||||
return(
|
||||
<button className="MyButton" id="QuitButton" onClick={quitGame}>
|
||||
<button className="MyButton" id="QuitButton">
|
||||
Abbruch
|
||||
</button>
|
||||
)
|
||||
|
||||
@ -1,35 +1,7 @@
|
||||
import React from "react";
|
||||
|
||||
function ScoreBoard({teamsize}) {
|
||||
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>)
|
||||
function ScoreBoard() {
|
||||
return(<div className={"ScoreBoard"}>ScoreBoard</div>)
|
||||
}
|
||||
|
||||
export default ScoreBoard
|
||||
@ -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(
|
||||
<>
|
||||
<button className="MyButton" id="StartButton" onClick={onClick}>
|
||||
{content}
|
||||
<button className="MyButton" id="StartButton" onClick={startclicked}>
|
||||
Start Game
|
||||
</button>
|
||||
{openPopUp && <TeamSizePopUp closeModal={setOpenPopUp}/>}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<div className="PopUpBackground">
|
||||
<div className="PopUpContainer">
|
||||
<div>
|
||||
<div id="Cancel" onClick={closePopUp}>X</div>
|
||||
<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>
|
||||
<input type="number" id="TeamSizeInput"/>
|
||||
<button className="MyButton" onClick={closePopUp}>Bestätigen</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React from "react";
|
||||
|
||||
function Timer({timerRunning, timerContent}) {
|
||||
function Timer() {
|
||||
return(
|
||||
<div className="TimerDiv">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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
6
src_folder/FrontEnd/app/src/components/data_functions.js
Normal file
@ -0,0 +1,6 @@
|
||||
let teamsize
|
||||
function setTeamsize(_teamsize) {
|
||||
teamsize = _teamsize;
|
||||
}
|
||||
|
||||
export default setTeamsize
|
||||
Loading…
x
Reference in New Issue
Block a user