From ad959266a574f24b7f63a67ab7e59d1eba4ee416 Mon Sep 17 00:00:00 2001 From: RezHackXYZ Date: Sat, 24 May 2025 07:26:49 +0530 Subject: [PATCH] added 3 things: min 2 max 8 options in quetion, the quetion and awnser in the host panle too, clour coded and symbol for awnsers. --- src/app.css | 1 - src/lib/config.json | 60 +++++++++++++++++++ src/routes/+layout.svelte | 6 +- .../components/Questions/question.svelte | 33 ++++++++-- .../components/buttons/WaitStartGame.svelte | 18 ++++++ src/routes/create/logic/StartGame.js | 2 + src/routes/host/[gamePin]/+page.svelte | 2 +- .../DuringGame/PeopleAwnsered.svelte | 4 +- .../DuringGame/QuetionsAwnsred.svelte | 13 ---- .../awnseringQuetions/Awnsers.svelte | 23 +++++++ .../awnseringQuetions/ProgressBar.svelte | 13 ++++ .../awnseringQuetions/display.svelte | 9 +++ .../awnseringQuetions/text/Quetion.svelte | 7 +++ .../components/DuringGame/display.svelte | 5 +- .../host/[gamePin]/logic/HostsData.svelte.js | 5 +- .../host/[gamePin]/logic/WaitForAwnser.js | 21 ++++++- src/routes/host/[gamePin]/logic/startGame.js | 23 ++++++- .../awnseringQuetions/Awnsers.svelte | 18 +++++- .../buttons/SelectFirst.svelte | 17 ++++-- .../buttons/submitAwnser.svelte | 4 +- .../lobby/PlayersGUI/players.svelte | 2 +- .../[gamePin]/components/lobby/display.svelte | 9 ++- src/routes/play/[gamePin]/logic/NewStatus.js | 3 + src/routes/play/[gamePin]/logic/startGame.js | 6 +- 24 files changed, 259 insertions(+), 45 deletions(-) delete mode 100644 src/app.css create mode 100644 src/lib/config.json create mode 100644 src/routes/create/components/buttons/WaitStartGame.svelte delete mode 100644 src/routes/host/[gamePin]/components/DuringGame/QuetionsAwnsred.svelte create mode 100644 src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/Awnsers.svelte create mode 100644 src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/ProgressBar.svelte create mode 100644 src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/display.svelte create mode 100644 src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/text/Quetion.svelte diff --git a/src/app.css b/src/app.css deleted file mode 100644 index d4b5078..0000000 --- a/src/app.css +++ /dev/null @@ -1 +0,0 @@ -@import 'tailwindcss'; diff --git a/src/lib/config.json b/src/lib/config.json new file mode 100644 index 0000000..a08017a --- /dev/null +++ b/src/lib/config.json @@ -0,0 +1,60 @@ +{ + "AnswersSymbolAndColor": [ + { + "Color": "#6E0000", + "SelectedColor": "#AA2222", + "HoverBorderColor": "#FF5D5D", + "SelectedBorderColor": "#FF0000", + "Symbol": "nf-md-triangle" + }, + { + "Color": "#00316E", + "SelectedColor": "#2255AA", + "HoverBorderColor": "#5D9CFF", + "SelectedBorderColor": "#0000FF", + "Symbol": "nf-fa-square" + }, + { + "Color": "#6E6E00", + "SelectedColor": "#AAAA22", + "HoverBorderColor": "#FFFF5D", + "SelectedBorderColor": "#DDFF00", + "Symbol": "nf-fa-circle" + }, + { + "Color": "#006E00", + "SelectedColor": "#22AA22", + "HoverBorderColor": "#5DFF5D", + "SelectedBorderColor": "#00ff00", + "Symbol": "nf-fa-diamond" + }, + { + "Color": "#4B0082", + "SelectedColor": "#7F33B5", + "HoverBorderColor": "#B066FF", + "SelectedBorderColor": "#9932CC", + "Symbol": "nf-md-star" + }, + { + "Color": "#FF8C00", + "SelectedColor": "#FFB347", + "HoverBorderColor": "#FFD580", + "SelectedBorderColor": "#FFA500", + "Symbol": "nf-md-hexagon" + }, + { + "Color": "#008B8B", + "SelectedColor": "#33CCCC", + "HoverBorderColor": "#66FFFF", + "SelectedBorderColor": "#00CED1", + "Symbol": "nf-md-octagon" + }, + { + "Color": "#8B4513", + "SelectedColor": "#CD853F", + "HoverBorderColor": "#DEB887", + "SelectedBorderColor": "#A0522D", + "Symbol": "nf-md-heart" + } + ] +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 1fde110..6e6f01f 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -5,9 +5,13 @@
{@render children()}
diff --git a/src/routes/create/components/Questions/question.svelte b/src/routes/create/components/Questions/question.svelte index 33c5db0..272977d 100644 --- a/src/routes/create/components/Questions/question.svelte +++ b/src/routes/create/components/Questions/question.svelte @@ -1,7 +1,7 @@ + + diff --git a/src/routes/create/logic/StartGame.js b/src/routes/create/logic/StartGame.js index d734c7a..3615863 100644 --- a/src/routes/create/logic/StartGame.js +++ b/src/routes/create/logic/StartGame.js @@ -2,6 +2,8 @@ import { createGame } from "./InsertGameInDB.js"; import { questions } from "./GameCreateData.svelte.js"; export async function startGame() { + + if (questions.v.some((q) => q.name === "")) return alert("Please fill all questions"); if (questions.v.some((q) => q.answers.some((a) => a === ""))) return alert("Fill all options"); if (questions.v.some((q) => q.correctAnswer === undefined)) diff --git a/src/routes/host/[gamePin]/+page.svelte b/src/routes/host/[gamePin]/+page.svelte index 2719c2e..a57c47e 100644 --- a/src/routes/host/[gamePin]/+page.svelte +++ b/src/routes/host/[gamePin]/+page.svelte @@ -26,4 +26,4 @@ {/if} - + \ No newline at end of file diff --git a/src/routes/host/[gamePin]/components/DuringGame/PeopleAwnsered.svelte b/src/routes/host/[gamePin]/components/DuringGame/PeopleAwnsered.svelte index 672183b..c94ad33 100644 --- a/src/routes/host/[gamePin]/components/DuringGame/PeopleAwnsered.svelte +++ b/src/routes/host/[gamePin]/components/DuringGame/PeopleAwnsered.svelte @@ -2,8 +2,8 @@ import { PeopleAwnseredQ, Totalplayers } from "./../../logic/HostsData.svelte.js"; -
-

{PeopleAwnseredQ.v} out of {Totalplayers.v} have awnsered the quetion

+
+

{PeopleAwnseredQ.v} out of {Totalplayers.v} have answered the question

- import { currentQuestion, totalQuetions } from "./../../logic/HostsData.svelte.js"; - - -
-

Question {currentQuestion.v + 1} of {totalQuetions.v} is beeing awnsered

-
-
-
-
diff --git a/src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/Awnsers.svelte b/src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/Awnsers.svelte new file mode 100644 index 0000000..0ba2cbe --- /dev/null +++ b/src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/Awnsers.svelte @@ -0,0 +1,23 @@ + + +
+ {#each CurrentQuestionDetails.v.answers as answer, index} +
+ + +
+ {/each} +
diff --git a/src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/ProgressBar.svelte b/src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/ProgressBar.svelte new file mode 100644 index 0000000..c2eed42 --- /dev/null +++ b/src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/ProgressBar.svelte @@ -0,0 +1,13 @@ + + +
+

Question {currentQuestion.v + 1} of {totalQuetions.v}

+
+
+
+
diff --git a/src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/display.svelte b/src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/display.svelte new file mode 100644 index 0000000..b92f42b --- /dev/null +++ b/src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/display.svelte @@ -0,0 +1,9 @@ + + + + + diff --git a/src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/text/Quetion.svelte b/src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/text/Quetion.svelte new file mode 100644 index 0000000..8fd3606 --- /dev/null +++ b/src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/text/Quetion.svelte @@ -0,0 +1,7 @@ + + +

+ Q{currentQuestion.v + 1}. {CurrentQuestionDetails.v.question} +

diff --git a/src/routes/host/[gamePin]/components/DuringGame/display.svelte b/src/routes/host/[gamePin]/components/DuringGame/display.svelte index c6d1a1b..9952173 100644 --- a/src/routes/host/[gamePin]/components/DuringGame/display.svelte +++ b/src/routes/host/[gamePin]/components/DuringGame/display.svelte @@ -1,9 +1,8 @@

HOSTING

- + diff --git a/src/routes/host/[gamePin]/logic/HostsData.svelte.js b/src/routes/host/[gamePin]/logic/HostsData.svelte.js index fae9f0f..f384d09 100644 --- a/src/routes/host/[gamePin]/logic/HostsData.svelte.js +++ b/src/routes/host/[gamePin]/logic/HostsData.svelte.js @@ -1,9 +1,10 @@ export let players = $state({ v: [] }); export let Status = $state({ v: "lobby" }); -export let questions = { v: [] }; -export let CurrentQuestion = $state({ v: -1 }); +export let questions = { v: {} }; export let currentQuestion = $state({ v: 0 }); export let totalQuetions = $state({ v: 3 }); export let PeopleAwnseredQ = $state({ v: 0 }); export let Totalplayers = $state({ v: 3 }); + +export let CurrentQuestionDetails = $state({ v: {} }); diff --git a/src/routes/host/[gamePin]/logic/WaitForAwnser.js b/src/routes/host/[gamePin]/logic/WaitForAwnser.js index 1812132..39f6cce 100644 --- a/src/routes/host/[gamePin]/logic/WaitForAwnser.js +++ b/src/routes/host/[gamePin]/logic/WaitForAwnser.js @@ -1,6 +1,6 @@ import { supabase } from "$lib/supabase.js"; import { onNewPlayerAwnsered } from "./onNewPlayerAwnsered.js"; -import { currentQuestion, questions } from "./HostsData.svelte.js"; +import { currentQuestion, questions, CurrentQuestionDetails } from "./HostsData.svelte.js"; let WaitingForAwnserConection; @@ -29,4 +29,23 @@ export async function WaitForAwnser(questionid, gamePin) { }, ) .subscribe(); + + const { data: questionsData } = await supabase + .from("questions") + .select("id,questionstext,correctanswer") + .eq("gameid", Number(gamePin)) + .order("id", { ascending: true }); + + const { data: answers } = await supabase + .from("answers") + .select("content") + .eq("questionid", Number(questionsData[currentQuestion.v].id)) + .order("id", { ascending: true }); + + CurrentQuestionDetails.v = { + question: questionsData[currentQuestion.v].questionstext, + correctAnswer: questionsData[currentQuestion.v].correctanswer, + answers: answers.map((answer) => answer.content), + questionid: questionsData[currentQuestion.v].id, + }; } diff --git a/src/routes/host/[gamePin]/logic/startGame.js b/src/routes/host/[gamePin]/logic/startGame.js index f0c88b1..cbc2edc 100644 --- a/src/routes/host/[gamePin]/logic/startGame.js +++ b/src/routes/host/[gamePin]/logic/startGame.js @@ -1,9 +1,20 @@ import { supabase } from "$lib/supabase.js"; import { LobbyConnection } from "./UpdatePlayersList.js"; -import { questions, Status, CurrentQuestion, currentQuestion } from "./HostsData.svelte.js"; +import { + questions, + Status, + Totalplayers, + totalQuetions, + players, +} from "./HostsData.svelte.js"; import { WaitForAwnser } from "./WaitForAwnser.js"; export async function startGame(gamePin) { + if (players.v.length == 0) { + alert("you need at least 1 person to start the game!"); + return; + } + await supabase.removeChannel(LobbyConnection); Status.v = "started"; @@ -16,7 +27,15 @@ export async function startGame(gamePin) { questions.v = data; - CurrentQuestion.v = 0; + totalQuetions.v = data.length; + + const { data: playersData } = await supabase + .from("players") + .select("id") + .eq("gameid", Number(gamePin)) + .order("id", { ascending: true }); + + Totalplayers.v = playersData.length; WaitForAwnser(0, gamePin); } diff --git a/src/routes/play/[gamePin]/components/awnseringQuetions/Awnsers.svelte b/src/routes/play/[gamePin]/components/awnseringQuetions/Awnsers.svelte index b8b3e9b..65fb34a 100644 --- a/src/routes/play/[gamePin]/components/awnseringQuetions/Awnsers.svelte +++ b/src/routes/play/[gamePin]/components/awnseringQuetions/Awnsers.svelte @@ -1,5 +1,6 @@
@@ -13,10 +14,23 @@ value={index} bind:group={Selected.v} /> + + + {answer} +
{/each}
diff --git a/src/routes/play/[gamePin]/components/awnseringQuetions/buttons/SelectFirst.svelte b/src/routes/play/[gamePin]/components/awnseringQuetions/buttons/SelectFirst.svelte index 7e6470e..e57ee47 100644 --- a/src/routes/play/[gamePin]/components/awnseringQuetions/buttons/SelectFirst.svelte +++ b/src/routes/play/[gamePin]/components/awnseringQuetions/buttons/SelectFirst.svelte @@ -1,4 +1,13 @@ - +
+ + +
diff --git a/src/routes/play/[gamePin]/components/awnseringQuetions/buttons/submitAwnser.svelte b/src/routes/play/[gamePin]/components/awnseringQuetions/buttons/submitAwnser.svelte index d461b19..51b1633 100644 --- a/src/routes/play/[gamePin]/components/awnseringQuetions/buttons/submitAwnser.svelte +++ b/src/routes/play/[gamePin]/components/awnseringQuetions/buttons/submitAwnser.svelte @@ -5,5 +5,5 @@ + >Submit + \ No newline at end of file diff --git a/src/routes/play/[gamePin]/components/lobby/PlayersGUI/players.svelte b/src/routes/play/[gamePin]/components/lobby/PlayersGUI/players.svelte index de8b651..bcc3e2a 100644 --- a/src/routes/play/[gamePin]/components/lobby/PlayersGUI/players.svelte +++ b/src/routes/play/[gamePin]/components/lobby/PlayersGUI/players.svelte @@ -3,7 +3,7 @@ import PlayerBadge from "./playerBadge.svelte"; -

Players Joined:

+

Players Joined:

(Total Players: {players.v.length})

{#each players.v as playerName} diff --git a/src/routes/play/[gamePin]/components/lobby/display.svelte b/src/routes/play/[gamePin]/components/lobby/display.svelte index aeb8f44..9dcc0db 100644 --- a/src/routes/play/[gamePin]/components/lobby/display.svelte +++ b/src/routes/play/[gamePin]/components/lobby/display.svelte @@ -2,12 +2,17 @@ import Players from "./PlayersGUI/players.svelte"; let props = $props(); - let gamePin = props.gamePin; + let gamePin = props.gamePin;

PLAYING

+ +

Waiting for host to start the game

+ + + diff --git a/src/routes/play/[gamePin]/logic/NewStatus.js b/src/routes/play/[gamePin]/logic/NewStatus.js index 9e427ba..1788e07 100644 --- a/src/routes/play/[gamePin]/logic/NewStatus.js +++ b/src/routes/play/[gamePin]/logic/NewStatus.js @@ -5,6 +5,7 @@ import { isWait, Selected, playerid, + TotalQuestions, } from "./HostsData.svelte.js"; import { supabase } from "$lib/supabase.js"; @@ -23,6 +24,8 @@ export async function NewStatus(NewStatus, gamePin) { .eq("gameid", Number(gamePin)) .order("id", { ascending: true }); + TotalQuestions.v = questionsData.length; + const { data: answers } = await supabase .from("answers") .select("content") diff --git a/src/routes/play/[gamePin]/logic/startGame.js b/src/routes/play/[gamePin]/logic/startGame.js index 8a2fe31..74e752f 100644 --- a/src/routes/play/[gamePin]/logic/startGame.js +++ b/src/routes/play/[gamePin]/logic/startGame.js @@ -1,6 +1,6 @@ import { supabase } from "$lib/supabase.js"; import { LobbyConnection } from "./UpdatePlayersList.js"; -import { questions, Status, CurrentQuestion } from "./HostsData.svelte.js"; +import { questions, Status, CurrentQuestion, TotalQuestions } from "./HostsData.svelte.js"; export async function startGame(gamePin) { await supabase.removeChannel(LobbyConnection); @@ -12,7 +12,7 @@ export async function startGame(gamePin) { .select("*") .eq("gameid", Number(gamePin)) .order("id", { ascending: true }); - questions.v = data; + TotalQuestions.v = data.length; CurrentQuestion.v = 0; @@ -20,6 +20,4 @@ export async function startGame(gamePin) { .from("games") .update({ status: `question-${CurrentQuestion.v}` }) .eq("gamepin", gamePin); - - }