<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> |
.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; | ||||
.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; | |||||
} | } | ||||
.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; | ||||
} | } | ||||
#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; | ||||
#QuestionHeader { | #QuestionHeader { | ||||
color: #0C134F; | color: #0C134F; | ||||
} | } | ||||
#QuestionDiv { | #QuestionDiv { | ||||
background-color: white; | background-color: white; | ||||
border: solid #0C134F 2px; | border: solid #0C134F 2px; | ||||
box-shadow: 2px 2px black; | box-shadow: 2px 2px black; | ||||
} | } | ||||
#Question { | #Question { | ||||
color: black; | color: black; | ||||
} | } | ||||
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;; | |||||
height: 500px; | |||||
margin-left: 80px; | |||||
max-width: 600px;; | |||||
height: 300px; | |||||
margin-left: 110px; | |||||
} | } | ||||
.AnswerBox { | .AnswerBox { | ||||
margin-left: 6px; | margin-left: 6px; | ||||
position: relative; | position: relative; | ||||
height: 500px; | |||||
width: 32%; | |||||
height: 300px; | |||||
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; | ||||
} | } | ||||
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; | |||||
margin-left: 40px; | |||||
height: 300px; | |||||
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; | ||||
} | } | ||||
#QuitButton { | |||||
visibility: hidden; | |||||
} | |||||
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/> | |||||
<Body/> | |||||
<Header timerRunning={timerRunning} timerContent={formatTime(timeLeft)} questionCount={questionCount}/> | |||||
<Body startQuestion={startQuestion} timerRunning={timerRunning} stopTimer={stopTimer} setQuestionCount={setQuestionCount} setTeamSize={setTeamSize} teamsize={teamsize}/> | |||||
</> | </> | ||||
); | ); | ||||
} | } |
function Answers() { | function Answers() { | ||||
return( | return( | ||||
<div className="Answers"> | <div className="Answers"> | ||||
<div className="AnswerBox" id="firstans">AnswerBox1 </div> | |||||
<div className="AnswerBox" id="secondans">AnswerBox2</div> | |||||
<div className="AnswerBox" id="thirdans">AnswerBox3</div> | |||||
<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> | </div> | ||||
) | ) | ||||
} | } |
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> | ||||
) | ) | ||||
} | } |
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/> | |||||
<QuitButton/> | |||||
<StartButton | |||||
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> | ||||
) | ) | ||||
} | } |
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/> | |||||
<Timer/> | |||||
<Question questionCount={questionCount}/> | |||||
<Timer timerRunning={timerRunning} timerContent={timerContent}/> | |||||
</header> | </header> | ||||
) | ) | ||||
} | } |
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> | ||||
) | ) |
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> | ||||
) | ) |
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> | ||||
) | ) |
import React from "react"; | import React from "react"; | ||||
function ScoreBoard() { | |||||
return(<div className={"ScoreBoard"}>ScoreBoard</div>) | |||||
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>) | |||||
} | } | ||||
export default ScoreBoard | export default ScoreBoard |
import {useState} from "react"; | |||||
import TeamSizePopUp from "./TeamsizePopUp"; | |||||
function StartButton() { | |||||
const [openPopUp, setOpenPopUp] = useState(false) | |||||
function startclicked() { | |||||
setOpenPopUp(true); | |||||
} | |||||
function StartButton({onClick, content}) { | |||||
return( | return( | ||||
<> | <> | ||||
<button className="MyButton" id="StartButton" onClick={startclicked}> | |||||
Start Game | |||||
<button className="MyButton" id="StartButton" onClick={onClick}> | |||||
{content} | |||||
</button> | </button> | ||||
{openPopUp && <TeamSizePopUp closeModal={setOpenPopUp}/>} | |||||
</> | </> | ||||
) | ) | ||||
} | } |
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); | 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> | |||||
<input type="number" id="TeamSizeInput"/> | |||||
<button className="MyButton" onClick={closePopUp}>Bestätigen</button> | |||||
<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> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
) | ) |
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> | ||||
) | ) | ||||
} | } |
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() { | |||||
} |
let teamsize | |||||
function setTeamsize(_teamsize) { | |||||
teamsize = _teamsize; | |||||
} | |||||
export default setTeamsize |
body { | body { | ||||
background-image: url("../public/17580.jpg"); | background-image: url("../public/17580.jpg"); | ||||
background-size: 1920px; | |||||
background-size: cover; | |||||
} | } | ||||