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

app upload

master
caliskanbi 1 year ago
parent
25678bab00
commit
1fdeb051dc
16 changed files with 285 additions and 76 deletions
Unified 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

+ 3
- 1
src_folder/FrontEnd/app/public/index.html View File

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

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

.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;

}



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

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}/>
</> </>
); );
} }

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

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

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

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

+ 39
- 5
src_folder/FrontEnd/app/src/components/Buttons.js View File

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

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

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

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

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>


) )

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

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

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

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

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

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

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

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}/>}
</> </>
) )
} }

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

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

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

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
- 0
src_folder/FrontEnd/app/src/components/api.js View File

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

let teamsize
function setTeamsize(_teamsize) {
teamsize = _teamsize;
}

export default setTeamsize

Write Preview
Loading…
Cancel
Save