caliskanbi83990
/
1_2_oder_3_repos
Watch 3
Star 1
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

new files added

master
caliskanbi 1 year ago
parent
965624ca7a
commit
c3367fad31
17 changed files with 286 additions and 77 deletions
Split View Show Diff Stats
  1. 3
    1
      src_folder/FrontEnd/app/public/index.html
  2. 74
    25
      src_folder/FrontEnd/app/src/App.css
  3. 44
    2
      src_folder/FrontEnd/app/src/App.js
  4. 3
    3
      src_folder/FrontEnd/app/src/components/Answers.js
  5. 3
    3
      src_folder/FrontEnd/app/src/components/Body.js
  6. 39
    5
      src_folder/FrontEnd/app/src/components/Buttons.js
  7. 3
    3
      src_folder/FrontEnd/app/src/components/Header.js
  8. 4
    1
      src_folder/FrontEnd/app/src/components/Heading.js
  9. 3
    3
      src_folder/FrontEnd/app/src/components/Question.js
  10. 2
    2
      src_folder/FrontEnd/app/src/components/QuitButton.js
  11. 30
    2
      src_folder/FrontEnd/app/src/components/ScoreBoard.js
  12. 3
    11
      src_folder/FrontEnd/app/src/components/StartButton.js
  13. 41
    7
      src_folder/FrontEnd/app/src/components/TeamsizePopUp.js
  14. 2
    2
      src_folder/FrontEnd/app/src/components/Timer.js
  15. 31
    0
      src_folder/FrontEnd/app/src/components/api.js
  16. 0
    6
      src_folder/FrontEnd/app/src/components/data_functions.js
  17. 1
    1
      src_folder/FrontEnd/app/src/index.css

+ 3
- 1
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="theme-color" content="#000000" />
<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>
</head>
<body>

+ 74
- 25
src_folder/FrontEnd/app/src/App.css View File

@@ -2,7 +2,9 @@
.PopUpBackground {
width: 100vw;
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;
display: flex;
justify-content: center;
@@ -14,9 +16,30 @@

.PopUpContainer {
width: 500px;
height: 500px;
height: 200px;
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 {
margin-left: 50px;
text-align: center;
max-width: 1000px;
max-width: 600px;
width: 100%;
padding: 10px;
box-shadow: 5px 5px black;
@@ -56,15 +79,14 @@
}

#TimerPic {
visibility: hidden;
}

#Seconds {
visibility: hidden;
border: solid 2px black;
border-radius: 10px;
padding: 2px;
}

#QuestionHeaderDiv {
background-color: white;
border: solid #0C134F 2px;
@@ -76,6 +98,7 @@
#QuestionHeader {
color: #0C134F;
}

#QuestionDiv {
background-color: white;
border: solid #0C134F 2px;
@@ -84,6 +107,7 @@
box-shadow: 2px 2px black;

}

#Question {
color: black;
}
@@ -102,47 +126,50 @@
cursor: pointer;
}

#headingimage:hover {
background-color: #F6F6F6;
}

.Body{
text-align: center;
}

.Answers {
padding: 10px;
float: left;
padding: 10px;
width: 100%;
max-width: 1000px;;
height: 500px;
margin-left: 80px;
max-width: 600px;;
height: 300px;
margin-left: 110px;


}

.AnswerBox {
margin-left: 6px;
position: relative;
height: 500px;
width: 32%;
height: 300px;
width: 30%;
float: left;
border: solid 2px;
border-radius: 20px;
box-shadow: 5px 5px black;
background-color: white;;

}

#firstans {
border: solid 2px #a10012;
border: solid 5px #a10012;
}

#secondans {
border: solid 2px #fba51b;
border: solid 5px #fba51b;
}

#thirdans {
border: solid 2px #3b5da4;
border: solid 5px #3b5da4;
}

.Buttons {
float: left;
max-width: 250px;
max-width: 220px;
padding-top: 10px;
padding-left: 30px;
}
@@ -159,12 +186,38 @@
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: 500px;
margin-left: 40px;
height: 300px;
margin-left: 50px;
background: linear-gradient(white, white) padding-box,
linear-gradient(to right, #a10012 0%, #fba51b 50%, #3b5da4 100%) border-box;
border-style: solid;
@@ -187,8 +240,4 @@
}


#QuitButton {
visibility: hidden;

}


+ 44
- 2
src_folder/FrontEnd/app/src/App.js View File

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

+ 3
- 3
src_folder/FrontEnd/app/src/components/Answers.js View File

@@ -3,9 +3,9 @@ import React from "react";
function Answers() {
return(
<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>
)
}

+ 3
- 3
src_folder/FrontEnd/app/src/components/Body.js View File

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

+ 39
- 5
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 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(
<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>
)
}

+ 3
- 3
src_folder/FrontEnd/app/src/components/Header.js View File

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

+ 4
- 1
src_folder/FrontEnd/app/src/components/Heading.js View File

@@ -1,9 +1,12 @@
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"/>
<img src={process.env.PUBLIC_URL + "12oder3-logo.png"} alt="1_2_oder_3" id="headingimage" onClick={onClick}/>
</div>

)

+ 3
- 3
src_folder/FrontEnd/app/src/components/Question.js View File

@@ -1,13 +1,13 @@
import React from "react";

function Question() {
function Question({questionCount}) {
return(
<div className="HeaderDiv">
<div id="QuestionHeaderDiv">
<h2 id="QuestionHeader">Frage:</h2>
<h2 id="QuestionHeader">{questionCount ? questionCount + ".Frage" : "Fragen"}</h2>
</div>
<div id="QuestionDiv">
<h2 id="Question">?</h2>
<h2 id="Question">Warum ist Kerem so schrott ? </h2>
</div>
</div>
)

+ 2
- 2
src_folder/FrontEnd/app/src/components/QuitButton.js View File

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

+ 30
- 2
src_folder/FrontEnd/app/src/components/ScoreBoard.js View File

@@ -1,7 +1,35 @@
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

+ 3
- 11
src_folder/FrontEnd/app/src/components/StartButton.js View File

@@ -1,19 +1,11 @@
import {useState} from "react";
import TeamSizePopUp from "./TeamsizePopUp";

function StartButton() {
const [openPopUp, setOpenPopUp] = useState(false)

function startclicked() {
setOpenPopUp(true);
}
function StartButton({onClick, content}) {

return(
<>
<button className="MyButton" id="StartButton" onClick={startclicked}>
Start Game
<button className="MyButton" id="StartButton" onClick={onClick}>
{content}
</button>
{openPopUp && <TeamSizePopUp closeModal={setOpenPopUp}/>}
</>
)
}

+ 41
- 7
src_folder/FrontEnd/app/src/components/TeamsizePopUp.js View File

@@ -1,17 +1,51 @@
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);
}

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">
<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>
)

+ 2
- 2
src_folder/FrontEnd/app/src/components/Timer.js View File

@@ -1,10 +1,10 @@
import React from "react";

function Timer() {
function Timer({timerRunning, timerContent}) {
return(
<div className="TimerDiv">
<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>
)
}

+ 31
- 0
src_folder/FrontEnd/app/src/components/api.js 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() {

}

+ 0
- 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

+ 1
- 1
src_folder/FrontEnd/app/src/index.css View File

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

}


Write Preview
Loading…
Cancel
Save