From 1fdeb051dc76b8db61894f531cd168ac9b5f0873 Mon Sep 17 00:00:00 2001 From: caliskanbi Date: Wed, 17 May 2023 23:16:27 +0200 Subject: [PATCH 1/2] app upload --- src_folder/FrontEnd/app/public/index.html | 4 +- src_folder/FrontEnd/app/src/App.css | 99 ++++++++++++++----- src_folder/FrontEnd/app/src/App.js | 46 ++++++++- .../FrontEnd/app/src/components/Answers.js | 6 +- .../FrontEnd/app/src/components/Body.js | 6 +- .../FrontEnd/app/src/components/Buttons.js | 44 ++++++++- .../FrontEnd/app/src/components/Header.js | 6 +- .../FrontEnd/app/src/components/Heading.js | 5 +- .../FrontEnd/app/src/components/Question.js | 6 +- .../FrontEnd/app/src/components/QuitButton.js | 4 +- .../FrontEnd/app/src/components/ScoreBoard.js | 32 +++++- .../app/src/components/StartButton.js | 14 +-- .../app/src/components/TeamsizePopUp.js | 48 +++++++-- .../FrontEnd/app/src/components/Timer.js | 4 +- src_folder/FrontEnd/app/src/components/api.js | 31 ++++++ .../app/src/components/data_functions.js | 6 -- 16 files changed, 285 insertions(+), 76 deletions(-) create mode 100644 src_folder/FrontEnd/app/src/components/api.js delete mode 100644 src_folder/FrontEnd/app/src/components/data_functions.js diff --git a/src_folder/FrontEnd/app/public/index.html b/src_folder/FrontEnd/app/public/index.html index 67bde53..f46ea66 100644 --- a/src_folder/FrontEnd/app/public/index.html +++ b/src_folder/FrontEnd/app/public/index.html @@ -5,7 +5,9 @@ - + + + 1_2_oder3 diff --git a/src_folder/FrontEnd/app/src/App.css b/src_folder/FrontEnd/app/src/App.css index 4f3802b..8c2d057 100644 --- a/src_folder/FrontEnd/app/src/App.css +++ b/src_folder/FrontEnd/app/src/App.css @@ -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; - -} diff --git a/src_folder/FrontEnd/app/src/App.js b/src_folder/FrontEnd/app/src/App.js index fd5566c..170e283 100644 --- a/src_folder/FrontEnd/app/src/App.js +++ b/src_folder/FrontEnd/app/src/App.js @@ -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 (<> -
- +
+ ); } diff --git a/src_folder/FrontEnd/app/src/components/Answers.js b/src_folder/FrontEnd/app/src/components/Answers.js index 9ba5121..5fce13f 100644 --- a/src_folder/FrontEnd/app/src/components/Answers.js +++ b/src_folder/FrontEnd/app/src/components/Answers.js @@ -3,9 +3,9 @@ import React from "react"; function Answers() { return(
-
AnswerBox1
-
AnswerBox2
-
AnswerBox3
+
Jemand anderen doppelt ...
+
Ronaldo >>> Messi
+
I got right foot ...
) } diff --git a/src_folder/FrontEnd/app/src/components/Body.js b/src_folder/FrontEnd/app/src/components/Body.js index 9d851b4..cca7c7f 100644 --- a/src_folder/FrontEnd/app/src/components/Body.js +++ b/src_folder/FrontEnd/app/src/components/Body.js @@ -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(
- + - +
) } diff --git a/src_folder/FrontEnd/app/src/components/Buttons.js b/src_folder/FrontEnd/app/src/components/Buttons.js index dcd3db0..fbe9554 100644 --- a/src_folder/FrontEnd/app/src/components/Buttons.js +++ b/src_folder/FrontEnd/app/src/components/Buttons.js @@ -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(
- - - + + {quitvisible && } + {openPopUp && }
) } diff --git a/src_folder/FrontEnd/app/src/components/Header.js b/src_folder/FrontEnd/app/src/components/Header.js index 140faf0..9cd37a5 100644 --- a/src_folder/FrontEnd/app/src/components/Header.js +++ b/src_folder/FrontEnd/app/src/components/Header.js @@ -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(
- - + +
) } diff --git a/src_folder/FrontEnd/app/src/components/Heading.js b/src_folder/FrontEnd/app/src/components/Heading.js index 9805b11..559a636 100644 --- a/src_folder/FrontEnd/app/src/components/Heading.js +++ b/src_folder/FrontEnd/app/src/components/Heading.js @@ -1,9 +1,12 @@ import React from "react"; function Heading() { + const onClick = () => { + window.location.reload(); + } return(
- 1_2_oder_3 + 1_2_oder_3
) diff --git a/src_folder/FrontEnd/app/src/components/Question.js b/src_folder/FrontEnd/app/src/components/Question.js index 1f7ba4f..104b856 100644 --- a/src_folder/FrontEnd/app/src/components/Question.js +++ b/src_folder/FrontEnd/app/src/components/Question.js @@ -1,13 +1,13 @@ import React from "react"; -function Question() { +function Question({questionCount}) { return(
-

Frage:

+

{questionCount ? questionCount + ".Frage" : "Fragen"}

-

?

+

Warum ist Kerem so schrott ?

) diff --git a/src_folder/FrontEnd/app/src/components/QuitButton.js b/src_folder/FrontEnd/app/src/components/QuitButton.js index edb3e91..4840db1 100644 --- a/src_folder/FrontEnd/app/src/components/QuitButton.js +++ b/src_folder/FrontEnd/app/src/components/QuitButton.js @@ -1,7 +1,7 @@ import React from "react"; -function QuitButton() { +function QuitButton({quitGame}) { return( - ) diff --git a/src_folder/FrontEnd/app/src/components/ScoreBoard.js b/src_folder/FrontEnd/app/src/components/ScoreBoard.js index df411a8..95f5dbb 100644 --- a/src_folder/FrontEnd/app/src/components/ScoreBoard.js +++ b/src_folder/FrontEnd/app/src/components/ScoreBoard.js @@ -1,7 +1,35 @@ import React from "react"; -function ScoreBoard() { - return(
ScoreBoard
) +function ScoreBoard({teamsize}) { + return( +
+
+

Spieler pro Team: {teamsize ? teamsize : ""}

+
+ + + + + + + + + + + + + + + + + + + + + + +
TeamPoints
Red0
Yellow0
Blue0
+
) } export default ScoreBoard \ No newline at end of file diff --git a/src_folder/FrontEnd/app/src/components/StartButton.js b/src_folder/FrontEnd/app/src/components/StartButton.js index 3392970..94aec4f 100644 --- a/src_folder/FrontEnd/app/src/components/StartButton.js +++ b/src_folder/FrontEnd/app/src/components/StartButton.js @@ -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( <> - - {openPopUp && } ) } diff --git a/src_folder/FrontEnd/app/src/components/TeamsizePopUp.js b/src_folder/FrontEnd/app/src/components/TeamsizePopUp.js index 0979824..b4c3816 100644 --- a/src_folder/FrontEnd/app/src/components/TeamsizePopUp.js +++ b/src_folder/FrontEnd/app/src/components/TeamsizePopUp.js @@ -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 (
-

Bitte Teamgröße wählen

- - +
+
X
+

Bitte Teamgröße wählen

+
+
+ +
+
+ +
) diff --git a/src_folder/FrontEnd/app/src/components/Timer.js b/src_folder/FrontEnd/app/src/components/Timer.js index c02f2f8..a98d025 100644 --- a/src_folder/FrontEnd/app/src/components/Timer.js +++ b/src_folder/FrontEnd/app/src/components/Timer.js @@ -1,10 +1,10 @@ import React from "react"; -function Timer() { +function Timer({timerRunning, timerContent}) { return(
timer -

0:00 s

+

{timerContent}

) } diff --git a/src_folder/FrontEnd/app/src/components/api.js b/src_folder/FrontEnd/app/src/components/api.js new file mode 100644 index 0000000..7b4030e --- /dev/null +++ b/src_folder/FrontEnd/app/src/components/api.js @@ -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() { + +} \ No newline at end of file diff --git a/src_folder/FrontEnd/app/src/components/data_functions.js b/src_folder/FrontEnd/app/src/components/data_functions.js deleted file mode 100644 index 48b481d..0000000 --- a/src_folder/FrontEnd/app/src/components/data_functions.js +++ /dev/null @@ -1,6 +0,0 @@ -let teamsize -function setTeamsize(_teamsize) { - teamsize = _teamsize; -} - -export default setTeamsize From a8020e8dbe47f633ee87d15daaa4c65e80c95927 Mon Sep 17 00:00:00 2001 From: engertda83421 Date: Thu, 18 May 2023 12:24:13 +0200 Subject: [PATCH 2/2] Create SQLite Database --- .../BackEnd/Database/EinsZweiOderDrei.db | Bin 0 -> 12288 bytes src_folder/BackEnd/Database/database.py | 89 ++++++++++++++++++ src_folder/BackEnd/Database/question_pool.txt | 21 +++++ 3 files changed, 110 insertions(+) create mode 100644 src_folder/BackEnd/Database/EinsZweiOderDrei.db create mode 100644 src_folder/BackEnd/Database/database.py create mode 100644 src_folder/BackEnd/Database/question_pool.txt diff --git a/src_folder/BackEnd/Database/EinsZweiOderDrei.db b/src_folder/BackEnd/Database/EinsZweiOderDrei.db new file mode 100644 index 0000000000000000000000000000000000000000..572db1d4ac81409382f8ed6e5257dc11e42407f5 GIT binary patch literal 12288 zcmeI1&u<&Y6~{@fva%%puwx5?;RqZ>aUE50Y&wnNA}uzQP5%%nLNWz2He#qF@^N>- z-5GjjR;&pGfzo4p>ajrKLvk-r1U~sj1iklf$f?Hy1)5XxW+~FL(o_}-^bpJfBq_9#`8WV`(FHrc#)ccXOg0jZQ9yhBP{^+1ZQ z>1wA)W=xACrPq?%jugIkPvRgXhF(eKb$izL4@ zGD__f$4PUpKV^7k@pEoElgfXUU(cs#W;cIKQ~ipo;85A6PTsFzgQd zkC+;b0wK9nqc_4!UPUwmMZ-ScqCjHj&5qKd-5!dyh&5KCC9OlrPfoiJ zF5=ZdlmW28)1ldA**5Q}GMU3V;G1nA6nNVrA`MBoAA+pH9z)8K#!77hj!bScP!Jw2 zXL*-ixP0ZxeZff&BBC^nA{+s^--c-LW!Qpbgbl$dsWL^qP1Z!h;y&X|G@I;EPHqc7 zr~03NBg}y5Js^k^=1&U zmaYgcX^WIvz-bJ!!NTwfL5lnbRgbc6dGW(bmyCLh3fF0bE^Sb)3COk?f_t~a!Si4j z6$s@JI$9=@;-tZlDMCOO(5TyvC_033cqs#!seNauaK2z>g5L6h>>}i5FyvN6v1-CN z0o|iy55XEYC4wUTSdy}Afp`5XsY53*}GgLL8RB3A{ZnIj*+nhE7Qf9m-aPdpN?9~Tf2(n4zP;841 z6Lk=An51CJZLBP>EH@Bzj}F&FMMM!ALs6rKf2k|NP>^ELtBRN@Qj(FR$bG;Za2PefMP8$t z?SXpH?2hAZEu1eD9>(K|AU(4OqC}-8x6!YO9=wqt?kc3#x`}Foh|1155ll?&XR)UO z4tLO(Bw)Vdt(m&GZREUT3d6@xd@Bi)X$5E9cXL z8&4j%I`ebqLHfu6>PMncr{8sG`qe{AdDA@U`IW*$IpUNPTt61$$$m7s?<5@#PwOX+ z(qxvM#?h(%=lIL)JI None: + self.file_name = file_name + try: + self.connection = sqlite3.connect(database=self.file_name) + print(f'Successfully connected to SQLite (Version: ' + sqlite3.version + ')..\n') + except Error as err: + print(err) + self.cursor = self.connection.cursor() + + def close_connection(self): + try: + self.cursor.close() + print("Close connection to SQLite was successfully.") + except Error as err: + print(err) + + def create_table(self): + table_config = "CREATE TABLE IF NOT EXISTS Questions" \ + "(QuestionNr TEXT PRIMARY KEY," \ + " Answeroption_1 \nTEXT," \ + " Answeroption_2 TEXT," \ + " Answeroption_3 TEXT," \ + " Correct_answeroption TEXT)" + self.cursor.execute(table_config) + print("Successfully create tables.. ") + + + def insert_table(self, questions: list): + self.cursor.executemany("INSERT OR IGNORE INTO Questions VALUES (?, ?, ?, ?, ?)", questions) + print("Successfully insert data into table.") + + def num_rows(self): + self.cursor.execute("SELECT COUNT(*) FROM Questions") + return self.cursor.fetchone()[0] + + + def delete_data(self, table_name): + self.cursor.execute(f"DELETE FROM {table_name}") + + + def read_question_data(self, file_name: str): + try: + data = pd.read_csv(file_name, delimiter=';') + except Error as err: + print('File could not be read..') + print(err) + return data + + ## ToDO: get question, return type(dict) + def get_questions(): + pass + + +if __name__ == "__main__": + + database = QuestionDataBase('Project/BackEnd/Database/EinsZweiOderDrei.db') + insert_table = database.insert_table(questions) + + database.commit() + database.close_connection() + diff --git a/src_folder/BackEnd/Database/question_pool.txt b/src_folder/BackEnd/Database/question_pool.txt new file mode 100644 index 0000000..1d883a4 --- /dev/null +++ b/src_folder/BackEnd/Database/question_pool.txt @@ -0,0 +1,21 @@ +Question, Answer1, Answer2, Answer3, Right Answer +('Wie heißt der längst Fluss auf der Welt?', 'Amazonas', 'Nil', 'Jangtsekiang', 'Nil'), +('Aus welcher englischen Stadt stammt die Musikgruppe die Beatles?', 'London', 'Sheffield', 'Liverpool', 'Liverpool'), +('Zu welchem Land gehört Grönland?', 'Norwegen', 'Island', 'Dänemark', 'Dänemark'), +('Wie heißen die ursprünglichen Bewohner Australiens?', 'Aborigines', 'Eingeborene', 'Australian Natives', 'Aborigines'), +('Mit welchem Korn verglich Jesus das Reich Gottes?', 'Senfkorn', 'Weizenkorn', 'Haferkorn', 'Senfkorn'), +('Wie lange können Kaiserpinguine tauchen?', '5min', '10min', '20min', '20min'), +('Wer war der Kommandant der Apollo 11?', 'Louis Armstrong', 'Neil Armstrong', 'Lance Armstrong', 'Neil Armstrong'), +('Wie heißt die größte Stadt der Welt (nach Einwohnern)?', 'São Paulo', 'Tokio', 'Seoul', 'Tokio',), +('In welchem Land liegt Helsinki?', 'Finnland', 'Norwegen', 'Schweden', 'Finnland'), +('Wie viele Bundesländer hat Deutschland?', '16', '17', '20', '16'), +('Wie heißt der höchste Berg Europas?', 'Zugspitze', 'Matterhorn', 'Montblanc', 'Montblanc'), +('Wie lange braucht das Licht in etwa von der Sonne zur Erde?', '80 Sekunden', '8 Minuten', '7 Tage', '8 Minuten'), +('Was hat James Watt erfunden?', 'Glühbirne', 'Elektrischen Widerstand', 'Dampfmaschine', 'Dampfmaschine'), +('Wie hieß der erste Deutsch Bundeskanzler?', 'Helmut Schmidt', 'Konrad Adenauer', 'Willy Brandt', 'Konrad Adenauer'), +('Von wem stammt das Gemälde der Mona Lisa?', 'Picasso', 'Vincent van Gogh', 'Leonardo da Vinci', 'Leonardo da Vinci'), +('Wie heißt der Erfinder der Jeanshose?', 'Tom Wrangler', 'Levi Strauss', 'Peter Diesel', 'Levi Strauss'), +('Welches Land gewann 2014 die Fußball Weltmeisterschaft?', 'Brasilien', 'Argentien', 'Deutschland', 'Deutschland'), +('Welcher ist der "rote Planet" unseres Sonnensystems?', 'Mars', 'Venus', 'Jupiter', 'Mars'), +('Was bezeichnet die chemische Formel \'NaCl\'?', 'Kochsalz', 'Wasser', 'Stickstoff'), +('Welche Form hat die Narbe auf Harry Potters Stirn?', 'Dreieck', 'Blitz', 'Kreuz', 'Blitz')