From fd12e468c78c82f7e6e7b889e4a3bc25a928c05b Mon Sep 17 00:00:00 2001 From: Joel Berglund Date: Mon, 9 Dec 2024 20:53:50 +0100 Subject: [PATCH 1/4] some stuff --- css/main.css | 66 ++++++++++++++++++++++++++ css/main.css.map | 1 + css/scss/main.scss | 73 ++++++++++++++++++++++++++-- game.html | 32 +++++++++++++ js/DataBase.js | 116 ++++++--------------------------------------- js/main.js | 62 +----------------------- 6 files changed, 184 insertions(+), 166 deletions(-) create mode 100644 css/main.css.map create mode 100644 game.html diff --git a/css/main.css b/css/main.css index e69de29..1734502 100644 --- a/css/main.css +++ b/css/main.css @@ -0,0 +1,66 @@ +.white-bg { + background-color: oklch(100% 0.0483 138.55deg); +} + +.header { + color: oklch(100% 0.0483 138.55deg); + display: flex; + justify-content: center; +} + +.header-h1 { + background-color: oklch(44% 0.0483 138.55deg); + padding: 1em 0 2em 0; + width: 20em; + text-align: center; + border-radius: 0 0 1em 1em; +} + +.marign-none { + margin: 0; +} + +.answer-btn { + background-color: oklch(44% 0.0483 138.55deg); + color: oklch(100% 0.0483 138.55deg); + font-size: 1.5em; + border: 0; + border-radius: 5px; + padding: 1em 3em 1em 3em; +} + +.marigin-big { + margin-top: 50svh; +} + +.question-vh { + min-height: 100vh; +} + +.question-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.5em 1em; + min-height: 15em; + margin-left: 5em; + margin-right: 5em; +} + +button:hover { + cursor: pointer; +} + +@media (width < 45em) { + .question-grid { + margin-left: 1em; + margin-right: 1em; + } +} +@media (width < 35em) { + .question-grid { + margin-left: 0em; + margin-right: 0em; + } +} + +/*# sourceMappingURL=main.css.map */ diff --git a/css/main.css.map b/css/main.css.map new file mode 100644 index 0000000..1dd3567 --- /dev/null +++ b/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["scss/main.scss"],"names":[],"mappings":"AAeA;EACI,kBARI;;;AAWR;EACI,OAZI;EAaJ;EACA;;;AAEJ;EACI,kBAzBY;EA0BZ;EACA;EACA;EACA;;;AAEJ;EACI;;;AAGJ;EACI,kBApCY;EAqCZ,OA7BI;EA8BJ;EACA;EACA;EACA;;;AAEJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;IACI;IACA;;;AAIR;EACI;IACI;IACA","file":"main.css"} \ No newline at end of file diff --git a/css/scss/main.scss b/css/scss/main.scss index ac31644..4409b0e 100644 --- a/css/scss/main.scss +++ b/css/scss/main.scss @@ -1,12 +1,77 @@ $primary-color: oklch(44% 0.0483 138.55); $primary-color1: oklch(60% 0.0483 138.55); $primary-color2: oklch(65% 0.0483 138.55); -$primary-color: oklch(80% 0.0483 138.55); -$primary-color: oklch(95% 0.0483 138.55); +$primary-color3: oklch(80% 0.0483 138.55); +$primary-color4: oklch(95% 0.0483 138.55); $cta: oklch(82% 0.1455 79.31); $cta-hover: oklch(77% 0.1455 79.31); -$white: oklch(99% 0.0483 138.55); +$white: oklch(100% 0.0483 138.55); $black: oklch(10% 0.0483 138.55); $wrong-answer-color: oklch( 60% 0.1825 21.18); -$right-answer-color: oklch( 70% 0.1776 141.88); \ No newline at end of file +$right-answer-color: oklch( 70% 0.1776 141.88); + + + +.white-bg{ + background-color: $white; +} + +.header{ + color: $white; + display: flex; + justify-content: center; +} +.header-h1{ + background-color: $primary-color; + padding: 1em 0 2em 0; + width: 20em; + text-align: center; + border-radius: 0 0 1em 1em; +} +.marign-none{ + margin: 0; +} + +.answer-btn{ + background-color: $primary-color; + color: $white; + font-size: 1.5em; + border: 0; + border-radius: 5px; + padding: 1em 3em 1em 3em; +} +.marigin-big{ + margin-top: 50svh; +} + +.question-vh{ + min-height: 100vh; +} + +.question-grid{ + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.5em 1em; + min-height: 15em; + margin-left: 5em; + margin-right: 5em; +} + +button:hover{ + cursor: pointer; +} + +@media (width < 45em) { + .question-grid{ + margin-left: 1em; + margin-right: 1em; + } +} + +@media (width < 35em){ + .question-grid{ + margin-left: 0em; + margin-right: 0em; + } +} \ No newline at end of file diff --git a/game.html b/game.html new file mode 100644 index 0000000..9d4e998 --- /dev/null +++ b/game.html @@ -0,0 +1,32 @@ + + + + + + Document + + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/js/DataBase.js b/js/DataBase.js index e092eb7..b99ddd7 100644 --- a/js/DataBase.js +++ b/js/DataBase.js @@ -1,105 +1,17 @@ -import { createClient } from "https://esm.sh/@supabase/supabase-js@2"; - -export default class DataBase { - constructor() { - this.supabase = createClient( - "https://unswumzybkmeifdigbfn.supabase.co", - "KEY", - ); - } - - async GetARowFrom(table, idToRow) { - const { data, error } = await this.supabase.from(table).select(); - - if (error) { - console.log("Kunde inte hämta data: ", error); - return; - } - return data; - } - - async SignUpUser(email, password) { - if (password[0] !== password[1]) { - alert("Lösenorden är inte samma"); - return; - } - - const { data, error } = await this.supabase.auth.signInWithOtp({ - email: email, - password: password, +export default class DataBase{ + async GetQuestion(category){ + const response = await fetch("http://127.0.0.1/api/question", { + method: "POST", + headers: { + "accept": "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + category: category + }) }); - if (error) { - console.log("kunde inte skapa konto: ", error); - } - } - - async SignInUser(email, password) { - const { data, error } = await this.supabase.auth.signInWithOtp({ - email: email.value, - password: password.value, - }); - if (error) { - console.log("swqeawd ", error); - } - console.log(this.supabase.auth.getUser()); - console.log(error); - } - - async LogOutUser() { - let { error } = await this.supabase.auth.signOut(); - if (error) { - console.log("kunde inte logga ut: ", error); - } - } - - async GetUser() { - const { - data: { user }, - } = await this.supabase.auth.getUser(); - return user; - } - - async CreateGame() { - const initialPoints = 0; - const user = await this.GetUser(); - - const { data, error } = await this.supabase - .from("activeGames") - .insert([ - { - player1Points: initialPoints, - player2Points: initialPoints, - playerTurn: user.id, - userId1: user.id, - }, - ]) - .select(); - - if (error) { - console.log("Kunde inte spara data: ", error); - } - } - - async GetAllActiveGames() { - const { data, error } = await this.supabase.from("activeGames").select(); - - if (error) { - console.log("Kunde inte hämta data: ", error); - } - } - - async UpdateSpesificActiveGame(activeGameId) { - const user = await this.GetUser(); - - const { data, error } = await this.supabase - .from("activeGames") - .update({ userId2: user.id }) - .eq("id", activeGameId) - .select(); - - if (error) { - console.log("Kunde inte updatera data: ", error); - } + const json = response.json() + sessionStorage.setItem("question", json); } -} +} \ No newline at end of file diff --git a/js/main.js b/js/main.js index 6eeeff6..23ded1a 100644 --- a/js/main.js +++ b/js/main.js @@ -1,24 +1,8 @@ import DataBase from "./DataBase.js"; -import EventManager from "./EventManager.js"; -import GameHandeler from "./GameHandeler.js"; class Main { constructor() { this.dataBase = new DataBase(); - this.eventManager = new EventManager(); - this.gameHandeler = new GameHandeler(); - this.btnDBRequest = document.getElementById("btnDBRequest"); - this.displayData = document.getElementById("dBData"); - this.btnCreateAccount = document.getElementById("createAccount"); - this.email = document.getElementById("email"); - this.password = [ - document.getElementById("password1"), - document.getElementById("password2"), - ]; - this.btnSignIn = document.getElementById("signIn"); - this.btnCreateGame = document.getElementById("createGame"); - - this.tmp = document.getElementById("tmp"); } RegisterServiceWorker() { if ("serviceWorker" in navigator) { @@ -27,54 +11,12 @@ class Main { }); } } - async DisplayQuestion(id) { - const DBData = await this.dataBase.GetARowFrom("quizz", id); - - if (DBData !== null) { - DBData.map((data) => { - this.displayData.innerHTML = data.questions; - }); - } - } - async CreateAccount() { - const { - data: { user }, - } = await this.dataBase.supabase.auth.getUser(); - - console.log(user); - } - - async SignInUser() { - const { - data: { user }, - } = await this.dataBase.supabase.auth.getUser(); - - console.log("HEJJJJJ"); - - console.log(user); - } + Main() { const clickEvent = "click"; this.RegisterServiceWorker(); - this.eventManager.EventListener(this.btnDBRequest, clickEvent, () => - this.DisplayQuestion(1), - ); - - this.eventManager.EventListener(this.btnCreateAccount, clickEvent, () => - this.dataBase.SignUpUser(this.email.value, [ - this.password[0].value, - this.password[1].value, - ]), - ); - - this.eventManager.EventListener(this.btnSignIn, clickEvent, () => - this.dataBase.SignInUser(this.email.value, this.password.value), - ); - - this.eventManager.EventListener(this.btnCreateGame, clickEvent, () => - this.gameHandeler.CreateGame(this.dataBase), - ); + this.dataBase.GetQuestion("geografi"); } } From 3e728be8069e53f1ad9e3da062dcea5ef1008120 Mon Sep 17 00:00:00 2001 From: Joel Berglund Date: Mon, 9 Dec 2024 23:04:55 +0100 Subject: [PATCH 2/4] small buggs left --- css/main.css | 21 ++++++++++++++++++- css/main.css.map | 2 +- css/scss/main.scss | 20 +++++++++++++++++-- game.html | 29 ++++++++++++++++++--------- js/DataBase.js | 2 +- js/GameHandeler.js | 50 ++++++++++++++++++++++++---------------------- js/main.js | 12 +++++++++++ 7 files changed, 98 insertions(+), 38 deletions(-) diff --git a/css/main.css b/css/main.css index 1734502..dcb53de 100644 --- a/css/main.css +++ b/css/main.css @@ -1,14 +1,19 @@ +p, h1, h2, h3, h4, h5, h6 { + color: oklch(10% 0.0483 138.55deg); +} + .white-bg { background-color: oklch(100% 0.0483 138.55deg); } .header { - color: oklch(100% 0.0483 138.55deg); + color: oklch(10% 0.0483 138.55deg); display: flex; justify-content: center; } .header-h1 { + color: oklch(100% 0.0483 138.55deg); background-color: oklch(44% 0.0483 138.55deg); padding: 1em 0 2em 0; width: 20em; @@ -33,6 +38,10 @@ margin-top: 50svh; } +.marigin-medium { + margin-top: 25svh; +} + .question-vh { min-height: 100vh; } @@ -46,6 +55,16 @@ margin-right: 5em; } +.grid-1-col { + display: grid; + grid-template-columns: 10em; + justify-content: center; +} + +.center-text { + text-align: center; +} + button:hover { cursor: pointer; } diff --git a/css/main.css.map b/css/main.css.map index 1dd3567..36d8359 100644 --- a/css/main.css.map +++ b/css/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["scss/main.scss"],"names":[],"mappings":"AAeA;EACI,kBARI;;;AAWR;EACI,OAZI;EAaJ;EACA;;;AAEJ;EACI,kBAzBY;EA0BZ;EACA;EACA;EACA;;;AAEJ;EACI;;;AAGJ;EACI,kBApCY;EAqCZ,OA7BI;EA8BJ;EACA;EACA;EACA;;;AAEJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;IACI;IACA;;;AAIR;EACI;IACI;IACA","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["scss/main.scss"],"names":[],"mappings":"AAaA;EACE,OALM;;;AAQR;EACI,kBAVI;;;AAaR;EACE,OAbM;EAcJ;EACA;;;AAEJ;EACI,OAnBI;EAoBJ,kBA5BY;EA6BZ;EACA;EACA;EACA;;;AAEJ;EACI;;;AAGJ;EACI,kBAvCY;EAwCZ,OAhCI;EAiCJ;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACE;;;AAGF;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACI;;;AAGJ;EACI;IACI;IACA;;;AAIR;EACI;IACI;IACA","file":"main.css"} \ No newline at end of file diff --git a/css/scss/main.scss b/css/scss/main.scss index 4409b0e..06df785 100644 --- a/css/scss/main.scss +++ b/css/scss/main.scss @@ -11,18 +11,21 @@ $black: oklch(10% 0.0483 138.55); $wrong-answer-color: oklch( 60% 0.1825 21.18); $right-answer-color: oklch( 70% 0.1776 141.88); - +p, h1, h2, h3, h4, h5, h6 { + color: $black; +} .white-bg{ background-color: $white; } .header{ - color: $white; + color: $black; display: flex; justify-content: center; } .header-h1{ + color: $white; background-color: $primary-color; padding: 1em 0 2em 0; width: 20em; @@ -44,6 +47,9 @@ $right-answer-color: oklch( 70% 0.1776 141.88); .marigin-big{ margin-top: 50svh; } +.marigin-medium{ + margin-top: 25svh; +} .question-vh{ min-height: 100vh; @@ -58,6 +64,16 @@ $right-answer-color: oklch( 70% 0.1776 141.88); margin-right: 5em; } +.grid-1-col{ + display: grid; + grid-template-columns: 10em; + justify-content: center; +} + +.center-text{ + text-align: center; +} + button:hover{ cursor: pointer; } diff --git a/game.html b/game.html index 9d4e998..a87629f 100644 --- a/game.html +++ b/game.html @@ -9,24 +9,35 @@ + -
- +
+
- - + \ No newline at end of file diff --git a/js/DataBase.js b/js/DataBase.js index b99ddd7..12269a0 100644 --- a/js/DataBase.js +++ b/js/DataBase.js @@ -1,6 +1,6 @@ export default class DataBase{ async GetQuestion(category){ - const response = await fetch("http://127.0.0.1/api/question", { + const response = await fetch("https://eel-simple-highly.ngrok-free.app/api/question", { method: "POST", headers: { "accept": "application/json", diff --git a/js/GameHandeler.js b/js/GameHandeler.js index c5df3cc..fe0cb05 100644 --- a/js/GameHandeler.js +++ b/js/GameHandeler.js @@ -1,31 +1,33 @@ export default class GameHandeler { constructor() {} async CreateGame(dataBase) { - const activeGames = await dataBase.GetAllActiveGames(); - const user = await dataBase.GetUser(); + const categori = ["geografi"]; + const amountsOfCategories = categori.length; + const randomQuestion = Math.random() * amountsOfCategories; + let questionsAnswerd = 0; + let placedAnswers = [0, 1, 2, 3]; + let answer; - let foundEmptyGame = false; - activeGames.forEach(async (emptyId) => { - if ( - emptyId.userId2 === null && - !foundEmptyGame && - emptyId.userId1 !== user.id - ) { - console.log( - "Stämmer detta? ", - emptyId.userId1 !== user.id, - user.id, - emptyId.userId1, - ); - foundEmptyGame = true; - emptyId.userId2 = user.id; - await dataBase.UpdateSpesificActiveGame(emptyId.id); - } - }); + await dataBase.GetQuestion(categori[randomQuestion]); + const json = sessionStorage.getItem("question"); - if (!foundEmptyGame) { - dataBase.CreateGame(); - console.log("yeppi!"); - } + + const template = document.getElementById('answer-form'); + + // Clone it (this is where the magic happens!) + const questionHtml = template.content.cloneNode(true).firstElementChild; + + // Update the content + const question = questionHtml.querySelector('#question'); + const answers = [questionHtml.querySelector('#btn-1'), questionHtml.querySelector('#btn-2'), questionHtml.querySelector('#btn-3'), questionHtml.querySelector('#btn-4')]; + + + question.textContent = json[questionsAnswerd].question; + for (let i = 0; i < 4; i++){ + answer = Math.random() * placedAnswers.length; + placedAnswers.splice(answer, 1); + answer.textContent = json[questionsAnswerd]["answer" + (i + 1)]; + } + return questionHtml; } } diff --git a/js/main.js b/js/main.js index 23ded1a..efb7e7d 100644 --- a/js/main.js +++ b/js/main.js @@ -1,8 +1,11 @@ import DataBase from "./DataBase.js"; +import GameHandeler from "./GameHandeler.js"; class Main { constructor() { this.dataBase = new DataBase(); + this.gameHandeler = new GameHandeler(); + this.gameContainer = document.getElementById("container"); } RegisterServiceWorker() { if ("serviceWorker" in navigator) { @@ -17,6 +20,15 @@ class Main { this.RegisterServiceWorker(); this.dataBase.GetQuestion("geografi"); + + let url = window.location.href; + let ending = url.substring(url.lastIndexOf("/")); + + if (ending === "game.html") { + debugger; + } + this.gameContainer.appendChild(this.gameHandeler.CreateGame(this.dataBase)); + } } From 786aa77089b449deebdebfe5bfa24777555565a7 Mon Sep 17 00:00:00 2001 From: Joel Berglund Date: Tue, 10 Dec 2024 16:12:15 +0100 Subject: [PATCH 3/4] some code --- css/main.css | 8 +++- css/scss/main.scss | 106 ++++++++++++++++++++++++--------------------- game.html | 52 ++++++++++------------ js/DataBase.js | 24 +++++----- js/GameHandeler.js | 42 ++++++++++++------ js/main.js | 4 +- server.js | 26 ----------- 7 files changed, 129 insertions(+), 133 deletions(-) diff --git a/css/main.css b/css/main.css index dcb53de..2bc4cbf 100644 --- a/css/main.css +++ b/css/main.css @@ -1,4 +1,10 @@ -p, h1, h2, h3, h4, h5, h6 { +p, +h1, +h2, +h3, +h4, +h5, +h6 { color: oklch(10% 0.0483 138.55deg); } diff --git a/css/scss/main.scss b/css/scss/main.scss index 06df785..b0d67c0 100644 --- a/css/scss/main.scss +++ b/css/scss/main.scss @@ -8,86 +8,92 @@ $cta-hover: oklch(77% 0.1455 79.31); $white: oklch(100% 0.0483 138.55); $black: oklch(10% 0.0483 138.55); -$wrong-answer-color: oklch( 60% 0.1825 21.18); -$right-answer-color: oklch( 70% 0.1776 141.88); +$wrong-answer-color: oklch(60% 0.1825 21.18); +$right-answer-color: oklch(70% 0.1776 141.88); -p, h1, h2, h3, h4, h5, h6 { +p, +h1, +h2, +h3, +h4, +h5, +h6 { color: $black; } -.white-bg{ - background-color: $white; +.white-bg { + background-color: $white; } -.header{ +.header { color: $black; - display: flex; - justify-content: center; + display: flex; + justify-content: center; } -.header-h1{ - color: $white; - background-color: $primary-color; - padding: 1em 0 2em 0; - width: 20em; - text-align: center; - border-radius: 0 0 1em 1em; +.header-h1 { + color: $white; + background-color: $primary-color; + padding: 1em 0 2em 0; + width: 20em; + text-align: center; + border-radius: 0 0 1em 1em; } -.marign-none{ - margin: 0; +.marign-none { + margin: 0; } -.answer-btn{ - background-color: $primary-color; - color: $white; - font-size: 1.5em; - border: 0; - border-radius: 5px; - padding: 1em 3em 1em 3em; +.answer-btn { + background-color: $primary-color; + color: $white; + font-size: 1.5em; + border: 0; + border-radius: 5px; + padding: 1em 3em 1em 3em; } -.marigin-big{ - margin-top: 50svh; +.marigin-big { + margin-top: 50svh; } -.marigin-medium{ +.marigin-medium { margin-top: 25svh; } -.question-vh{ - min-height: 100vh; +.question-vh { + min-height: 100vh; } -.question-grid{ - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1.5em 1em; - min-height: 15em; - margin-left: 5em; - margin-right: 5em; +.question-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.5em 1em; + min-height: 15em; + margin-left: 5em; + margin-right: 5em; } -.grid-1-col{ +.grid-1-col { display: grid; grid-template-columns: 10em; justify-content: center; } -.center-text{ +.center-text { text-align: center; } -button:hover{ - cursor: pointer; +button:hover { + cursor: pointer; } @media (width < 45em) { - .question-grid{ - margin-left: 1em; - margin-right: 1em; - } + .question-grid { + margin-left: 1em; + margin-right: 1em; + } } -@media (width < 35em){ - .question-grid{ - margin-left: 0em; - margin-right: 0em; - } -} \ No newline at end of file +@media (width < 35em) { + .question-grid { + margin-left: 0em; + margin-right: 0em; + } +} diff --git a/game.html b/game.html index a87629f..2a0abb6 100644 --- a/game.html +++ b/game.html @@ -1,25 +1,25 @@ - + - - - + + + Document - + - - -
- -
+ + +
- - \ No newline at end of file + + diff --git a/js/DataBase.js b/js/DataBase.js index 12269a0..94bb4e6 100644 --- a/js/DataBase.js +++ b/js/DataBase.js @@ -1,17 +1,19 @@ -export default class DataBase{ - async GetQuestion(category){ - const response = await fetch("https://eel-simple-highly.ngrok-free.app/api/question", { +export default class DataBase { + async GetQuestion(category) { + fetch("https://eel-simple-highly.ngrok-free.app/api/question", { method: "POST", headers: { - "accept": "application/json", + accept: "application/json", "Content-Type": "application/json", }, body: JSON.stringify({ - category: category - }) - }); - - const json = response.json() - sessionStorage.setItem("question", json); + category: category, + }), + }) + .then((response) => response.json()) + .then((json) => { + sessionStorage.setItem("question", JSON.stringify(json)); + return JSON.stringify(json); + }); } -} \ No newline at end of file +} diff --git a/js/GameHandeler.js b/js/GameHandeler.js index fe0cb05..8b13646 100644 --- a/js/GameHandeler.js +++ b/js/GameHandeler.js @@ -3,31 +3,45 @@ export default class GameHandeler { async CreateGame(dataBase) { const categori = ["geografi"]; const amountsOfCategories = categori.length; - const randomQuestion = Math.random() * amountsOfCategories; + const minCeiled = Math.ceil(0); + const maxFloored = Math.floor(amountsOfCategories); + const randomQuestion = Math.floor( + Math.random() * (maxFloored - minCeiled) + minCeiled, + ); let questionsAnswerd = 0; let placedAnswers = [0, 1, 2, 3]; let answer; - await dataBase.GetQuestion(categori[randomQuestion]); - const json = sessionStorage.getItem("question"); + const data = await dataBase.GetQuestion(categori[randomQuestion]); + console.log(data); + const json = JSON.parse(sessionStorage.getItem("question")); + + const template = document.getElementById("answer-form"); - const template = document.getElementById('answer-form'); - // Clone it (this is where the magic happens!) const questionHtml = template.content.cloneNode(true).firstElementChild; - + // Update the content - const question = questionHtml.querySelector('#question'); - const answers = [questionHtml.querySelector('#btn-1'), questionHtml.querySelector('#btn-2'), questionHtml.querySelector('#btn-3'), questionHtml.querySelector('#btn-4')]; + const question = questionHtml.querySelector("#question"); + const answers = [ + questionHtml.querySelector("#btn-1"), + questionHtml.querySelector("#btn-2"), + questionHtml.querySelector("#btn-3"), + questionHtml.querySelector("#btn-4"), + ]; - question.textContent = json[questionsAnswerd].question; - for (let i = 0; i < 4; i++){ - answer = Math.random() * placedAnswers.length; + for (let i = 0; i < 4; i++) { + answer = Math.floor( + Math.random() * (placedAnswers.length - minCeiled) + minCeiled, + ); placedAnswers.splice(answer, 1); - answer.textContent = json[questionsAnswerd]["answer" + (i + 1)]; - } - return questionHtml; + answers[i].textContent = json[questionsAnswerd]["answer" + (i + 1)]; + } + + console.log(questionHtml, json); + + return questionHtml; } } diff --git a/js/main.js b/js/main.js index efb7e7d..bc9851d 100644 --- a/js/main.js +++ b/js/main.js @@ -14,7 +14,7 @@ class Main { }); } } - + Main() { const clickEvent = "click"; this.RegisterServiceWorker(); @@ -25,10 +25,8 @@ class Main { let ending = url.substring(url.lastIndexOf("/")); if (ending === "game.html") { - debugger; } this.gameContainer.appendChild(this.gameHandeler.CreateGame(this.dataBase)); - } } diff --git a/server.js b/server.js index 075d8b0..e69de29 100644 --- a/server.js +++ b/server.js @@ -1,26 +0,0 @@ -const express = require("express"); -const path = require("path"); - -const app = express(); - -app.use( - "/css/bootstraps", - express.static(path.join(__dirname, "node_modules/bootstrap/dist/css")), -); -app.use("/js", express.static(path.join(__dirname, "js"))); - -app.get("/", (req, res) => { - res.sendFile(path.join(__dirname, "index.html")); -}); - -app.get("/sign-up", (req, res) => { - res.sendFile(path.join(__dirname, "sign-up.html")); -}); - -app.get("/active-games", (req, res) => { - res.sendFile(path.join(__dirname, "active-games.html")); -}); - -app.listen(5000, () => { - console.log("Listening on port " + 5000); -}); From ac6485c05753dd3456a1935eafc5d399d50ec2d6 Mon Sep 17 00:00:00 2001 From: Joel Berglund Date: Wed, 11 Dec 2024 21:31:10 +0100 Subject: [PATCH 4/4] some stuff --- css/main.css | 23 +++++++- css/main.css.map | 2 +- css/scss/main.scss | 24 ++++++++- game.html | 28 ++++++---- index.html | 11 ++-- js/DataBase.js | 3 +- js/EventManager.js | 5 +- js/GameHandeler.js | 132 +++++++++++++++++++++++++++++++++++---------- js/main.js | 48 ++++++++++++++--- 9 files changed, 222 insertions(+), 54 deletions(-) diff --git a/css/main.css b/css/main.css index 2bc4cbf..8cf35a1 100644 --- a/css/main.css +++ b/css/main.css @@ -12,6 +12,10 @@ h6 { background-color: oklch(100% 0.0483 138.55deg); } +.white-text { + color: oklch(100% 0.0483 138.55deg); +} + .header { color: oklch(10% 0.0483 138.55deg); display: flex; @@ -38,6 +42,7 @@ h6 { border: 0; border-radius: 5px; padding: 1em 3em 1em 3em; + text-decoration: none; } .marigin-big { @@ -63,7 +68,6 @@ h6 { .grid-1-col { display: grid; - grid-template-columns: 10em; justify-content: center; } @@ -71,10 +75,27 @@ h6 { text-align: center; } +.marigin-small { + margin-top: 10em; +} + +.points-card { + padding: 2em; + border-radius: 1em; +} + +.points { + font: 2em bold; +} + button:hover { cursor: pointer; } +.background-primary { + background-color: oklch(44% 0.0483 138.55deg); +} + @media (width < 45em) { .question-grid { margin-left: 1em; diff --git a/css/main.css.map b/css/main.css.map index 36d8359..10aca30 100644 --- a/css/main.css.map +++ b/css/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["scss/main.scss"],"names":[],"mappings":"AAaA;EACE,OALM;;;AAQR;EACI,kBAVI;;;AAaR;EACE,OAbM;EAcJ;EACA;;;AAEJ;EACI,OAnBI;EAoBJ,kBA5BY;EA6BZ;EACA;EACA;EACA;;;AAEJ;EACI;;;AAGJ;EACI,kBAvCY;EAwCZ,OAhCI;EAiCJ;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACE;;;AAGF;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACI;;;AAGJ;EACI;IACI;IACA;;;AAIR;EACI;IACI;IACA","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["scss/main.scss"],"names":[],"mappings":"AAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE,OAXM;;;AAcR;EACE,kBAhBM;;;AAmBR;EACE,OApBM;;;AAuBR;EACE,OAvBM;EAwBN;EACA;;;AAEF;EACE,OA7BM;EA8BN,kBAtCc;EAuCd;EACA;EACA;EACA;;;AAEF;EACE;;;AAGF;EACE,kBAjDc;EAkDd,OA1CM;EA2CN;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE,kBAzGc;;;AA4GhB;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA","file":"main.css"} \ No newline at end of file diff --git a/css/scss/main.scss b/css/scss/main.scss index b0d67c0..60feca8 100644 --- a/css/scss/main.scss +++ b/css/scss/main.scss @@ -25,6 +25,10 @@ h6 { background-color: $white; } +.white-text { + color: $white; +} + .header { color: $black; display: flex; @@ -49,6 +53,7 @@ h6 { border: 0; border-radius: 5px; padding: 1em 3em 1em 3em; + text-decoration: none; } .marigin-big { margin-top: 50svh; @@ -72,7 +77,6 @@ h6 { .grid-1-col { display: grid; - grid-template-columns: 10em; justify-content: center; } @@ -80,10 +84,28 @@ h6 { text-align: center; } +.marigin-small { + margin-top: 10em; +} + +.points-card { + padding: 2em; + border-radius: 1em; +} + +.points { + font: 2em bold; + +} + button:hover { cursor: pointer; } +.background-primary { + background-color: $primary-color; +} + @media (width < 45em) { .question-grid { margin-left: 1em; diff --git a/game.html b/game.html index 2a0abb6..414a315 100644 --- a/game.html +++ b/game.html @@ -12,28 +12,38 @@

-
- - - - -
+
+ + + + +
-
+
+ +
diff --git a/index.html b/index.html index c4d21be..9de4f56 100644 --- a/index.html +++ b/index.html @@ -4,14 +4,15 @@ + Document - -

hej

- -

- + +

Kunskapskampen!

+ diff --git a/js/DataBase.js b/js/DataBase.js index 94bb4e6..4d28808 100644 --- a/js/DataBase.js +++ b/js/DataBase.js @@ -1,6 +1,6 @@ export default class DataBase { async GetQuestion(category) { - fetch("https://eel-simple-highly.ngrok-free.app/api/question", { + await fetch("https://eel-simple-highly.ngrok-free.app/api/question", { method: "POST", headers: { accept: "application/json", @@ -13,7 +13,6 @@ export default class DataBase { .then((response) => response.json()) .then((json) => { sessionStorage.setItem("question", JSON.stringify(json)); - return JSON.stringify(json); }); } } diff --git a/js/EventManager.js b/js/EventManager.js index 063fa55..723dd83 100644 --- a/js/EventManager.js +++ b/js/EventManager.js @@ -1,7 +1,10 @@ export default class EventManager { EventListener(element, eventType, method) { if (element) { - element.addEventListener(eventType, method); + element.addEventListener(eventType, (event) => { + event.preventDefault(); + method(event.target.textContent); + }); } } } diff --git a/js/GameHandeler.js b/js/GameHandeler.js index 8b13646..50b1976 100644 --- a/js/GameHandeler.js +++ b/js/GameHandeler.js @@ -1,47 +1,123 @@ export default class GameHandeler { - constructor() {} - async CreateGame(dataBase) { - const categori = ["geografi"]; - const amountsOfCategories = categori.length; - const minCeiled = Math.ceil(0); - const maxFloored = Math.floor(amountsOfCategories); - const randomQuestion = Math.floor( - Math.random() * (maxFloored - minCeiled) + minCeiled, - ); - let questionsAnswerd = 0; - let placedAnswers = [0, 1, 2, 3]; - let answer; + constructor() { + this.gameContainer = document.getElementById("container"); + this.questionsAnswerd = 0; + this.points = 0; + } + + ShuffleArray(array) { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + const temp = array[i]; + array[i] = array[j]; + array[j] = temp; + } + } + + async CreateGameScreen() { + let answersLeftToPlace = [0, 1, 2, 3]; + this.ShuffleArray(answersLeftToPlace); - const data = await dataBase.GetQuestion(categori[randomQuestion]); - console.log(data); const json = JSON.parse(sessionStorage.getItem("question")); - + this.questionsAnswerd = parseInt( + sessionStorage.getItem("questionsAnswerd") || 0, + ); - const template = document.getElementById("answer-form"); + console.log("Before rendering - questionsAnswerd:", this.questionsAnswerd); + console.log("Total questions in JSON:", json.questions.length); - // Clone it (this is where the magic happens!) - const questionHtml = template.content.cloneNode(true).firstElementChild; + // Get the existing template content or create new if not exists + let questionHtml = this.gameContainer.querySelector(".question-vh"); + if (!questionHtml) { + const template = document.getElementById("answer-form"); + questionHtml = template.content.cloneNode(true).firstElementChild; + this.gameContainer.appendChild(questionHtml); + } - // Update the content + // Update the content directly in the existing elements const question = questionHtml.querySelector("#question"); - const answers = [ + const answersBtn = [ questionHtml.querySelector("#btn-1"), questionHtml.querySelector("#btn-2"), questionHtml.querySelector("#btn-3"), questionHtml.querySelector("#btn-4"), ]; - question.textContent = json[questionsAnswerd].question; + const answer = [ + json.questions[this.questionsAnswerd].answer1, + json.questions[this.questionsAnswerd].answer2, + json.questions[this.questionsAnswerd].answer3, + json.questions[this.questionsAnswerd].answer4, + ]; + + // Update question text + question.textContent = json.questions[this.questionsAnswerd].question; + + // Update answer buttons for (let i = 0; i < 4; i++) { - answer = Math.floor( - Math.random() * (placedAnswers.length - minCeiled) + minCeiled, - ); - placedAnswers.splice(answer, 1); - answers[i].textContent = json[questionsAnswerd]["answer" + (i + 1)]; + answersBtn[i].textContent = answer[answersLeftToPlace[i]]; } - console.log(questionHtml, json); + // Log to verify + console.log( + "Updated question:", + json.questions[this.questionsAnswerd].question, + "questions answerd: ", this.questionsAnswerd, + ); + } + + CreatePointsScreen() { + const gameScreenParentNode = document.getElementById("container"); + const gameScreenNode = gameScreenParentNode.querySelector(".question-vh"); + const deletedChildNode = gameScreenParentNode.removeChild(gameScreenNode); - return questionHtml; + const template = document.getElementById("points"); + + // Clone it (this is where the magic happens!) + const pointsHtml = template.content.cloneNode(true).firstElementChild; + + // Update the content + const heading = pointsHtml.querySelector("#points-header"); + const pointsSetter = pointsHtml.querySelector("#set-points"); + + pointsSetter.textContent = sessionStorage.getItem("points"); + + console.log(pointsHtml); + + sessionStorage.setItem("questionsAnswerd", 0); + sessionStorage.setItem("points", 0); + + this.gameContainer.appendChild(pointsHtml); + } + + ButtonAnswer(answer) { + const json = JSON.parse(sessionStorage.getItem("question")); + this.questionsAnswerd = parseInt( + sessionStorage.getItem("questionsAnswerd") || 0, + ); + + console.log("Current question index:", this.questionsAnswerd); + console.log("Total questions:", json.questions.length); + console.log("Submitted answer:", answer); + console.log("Correct answer:", json.questions[this.questionsAnswerd].answer1); + + console.log(json, "oihqawidj", answer); + + if (json.questions[this.questionsAnswerd].answer1 == answer) { + this.points = sessionStorage.getItem("points"); + this.points++; + sessionStorage.setItem("points", this.points); + } + + // Increment questionsAnswerd before checking + this.questionsAnswerd++; + sessionStorage.setItem("questionsAnswerd", this.questionsAnswerd); + + // Check if we've reached the total number of questions + if (this.questionsAnswerd < json.questions.length) { + this.CreateGameScreen(); + } else { + this.CreatePointsScreen(); + } } } diff --git a/js/main.js b/js/main.js index bc9851d..73cf1dd 100644 --- a/js/main.js +++ b/js/main.js @@ -1,11 +1,15 @@ import DataBase from "./DataBase.js"; import GameHandeler from "./GameHandeler.js"; +import EventManager from "./EventManager.js"; class Main { constructor() { this.dataBase = new DataBase(); this.gameHandeler = new GameHandeler(); - this.gameContainer = document.getElementById("container"); + this.eventManager = new EventManager(); + this.container = document.getElementById("container"); + this.answersBtns = [ + ]; } RegisterServiceWorker() { if ("serviceWorker" in navigator) { @@ -15,18 +19,50 @@ class Main { } } - Main() { + async Main() { const clickEvent = "click"; this.RegisterServiceWorker(); - this.dataBase.GetQuestion("geografi"); - let url = window.location.href; let ending = url.substring(url.lastIndexOf("/")); - if (ending === "game.html") { + const categori = ["geografi"]; + const randomQuestion = Math.floor(Math.random() * categori.length); + + if (ending === "/game.html" || ending === "/game.html?") { + await this.dataBase.GetQuestion(categori[randomQuestion]); + + this.gameHandeler.CreateGameScreen(); + + const container = document.getElementById("container"); + const answersBtns = [ + this.container.querySelector("#btn-1"), + this.container.querySelector("#btn-2"), + this.container.querySelector("#btn-3"), + this.container.querySelector("#btn-4"), + ]; + + answersBtns[0].addEventListener(clickEvent, (event) => { + this.gameHandeler.ButtonAnswer(answersBtns[0].outerText); + }); + answersBtns[1].addEventListener(clickEvent, (event) => { + this.gameHandeler.ButtonAnswer(answersBtns[1].outerText); + }); + answersBtns[2].addEventListener(clickEvent, (event) => { + this.gameHandeler.ButtonAnswer(answersBtns[2].outerText); + }); + answersBtns[3].addEventListener(clickEvent, (event) => { + this.gameHandeler.ButtonAnswer(answersBtns[3].outerText); + }); + + } - this.gameContainer.appendChild(this.gameHandeler.CreateGame(this.dataBase)); + + + + + + } }