rBD IS WORKING!!!! at least for now!

jsconfig.json

@@ -7,6 +7,5 @@
 		"module": "es2015",
 		"types": ["svelte"]
 	},
-	"include": ["src/**/*"],
-	"exclude": ["node_modules/*"],
+	"exclude": ["**/node_modules/**", "**/build/**", "**/.svelte-kit/**", "**/out/**", "!src/**"],
 }

package.json

@@ -4,7 +4,7 @@
 	"version": "0.0.1",
 	"type": "module",
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --host",
 		"build": "vite build",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",

src/routes/create/logic/InsertGameInDB.js

@@ -1,7 +1,7 @@
 import { supabase } from '$lib/supabase';
 
 export async function createGame(questions, gamePin) {
-	// Insert the game into the GAMES table
+
 	const { data: gameData, error: gameError } = await supabase.from('games').insert({
 		creator: 'anonymous',
 		creationdate: new Date().toISOString(),

src/routes/create/logic/StartGame.js

@@ -1,18 +1,17 @@
-import { goto } from '$app/navigation';
-import { createGame } from './InsertGameInDB.js';
-import { questions } from './GameCreateData.svelte.js';
+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.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))
-		return alert('Select correct answers');
+		return alert("Select correct answers");
 
 	const gamePin = Math.floor(Math.random() * 1000000)
 		.toString()
-		.padStart(6, '0');
+		.padStart(6, "0");
 
-	createGame(questions.v, gamePin);
+	await createGame(questions.v, gamePin);
 
-	goto('/host/' + gamePin);
+	window.location.href = "/host/" + gamePin;
 }

src/routes/host/[gamePin]/components/DuringGame/QuetionsAwnsred.svelte

@@ -7,7 +7,7 @@
 	<div class="flex-1 rounded-full border-2 border-gray-600">
 		<div
 			class="h-4 rounded-full bg-green-600 transition-all duration-500"
-			style="width: {(currentQuestion.v + 1 / totalQuetions.v) * 100}%;"
+			style="width: {(currentQuestion.v / totalQuetions.v) * 100}%;"
 		></div>
 	</div>
 </div>

src/routes/host/[gamePin]/logic/GameOver.js

@@ -0,0 +1,7 @@
+import { supabase } from "$lib/supabase.js";
+
+export async function GameOver(GamePin) {
+	await supabase.from("games").update({ status: `completed` }).eq("gamepin", GamePin);
+
+	window.location.replace("/results/" + GamePin + "?playerID=host-null");
+}

src/routes/host/[gamePin]/logic/HostsData.svelte.js

@@ -1,6 +1,6 @@
 export let players = $state({ v: [] });
 export let Status = $state({ v: "lobby" });
-export let questions = $state({ v: [] });
+export let questions = { v: [] };
 export let CurrentQuestion = $state({ v: -1 });
 
 export let currentQuestion = $state({ v: 0 });

src/routes/host/[gamePin]/logic/WaitForAwnser.js

@@ -0,0 +1,32 @@
+import { supabase } from "$lib/supabase.js";
+import { onNewPlayerAwnsered } from "./onNewPlayerAwnsered.js";
+import { currentQuestion, questions } from "./HostsData.svelte.js";
+
+let WaitingForAwnserConection;
+
+export async function WaitForAwnser(questionid, gamePin) {
+	if (questionid != 0) {
+		await supabase.removeChannel(WaitingForAwnserConection);
+	}
+
+	await supabase
+		.from("games")
+		.update({ status: `question-${currentQuestion.v}` })
+		.eq("gamepin", gamePin);
+
+	WaitingForAwnserConection = supabase
+		.channel("answeredby-realtime")
+		.on(
+			"postgres_changes",
+			{
+				event: "INSERT",
+				schema: "public",
+				table: "answeredby",
+				filter: `questionid=eq.${questions.v[questionid].id}`,
+			},
+			(payload) => {
+				onNewPlayerAwnsered(gamePin);
+			},
+		)
+		.subscribe();
+}

src/routes/host/[gamePin]/logic/onNewPlayerAwnsered.js

@@ -0,0 +1,23 @@
+import {
+	Totalplayers,
+	PeopleAwnseredQ,
+	currentQuestion,
+	totalQuetions,
+} from "./HostsData.svelte.js";
+import { GameOver } from "./GameOver.js";
+import { WaitForAwnser } from "./WaitForAwnser.js";
+
+export async function onNewPlayerAwnsered(GamePin) {
+	PeopleAwnseredQ.v++;
+
+	if (PeopleAwnseredQ.v == Totalplayers.v) {
+		currentQuestion.v++;
+		if (currentQuestion.v == totalQuetions.v) {
+			GameOver(GamePin);
+			return;
+		}
+		PeopleAwnseredQ.v = 0;
+
+		WaitForAwnser(currentQuestion.v, GamePin);
+	}
+}

src/routes/host/[gamePin]/logic/startGame.js

@@ -1,6 +1,7 @@
 import { supabase } from "$lib/supabase.js";
 import { LobbyConnection } from "./UpdatePlayersList.js";
 import { questions, Status, CurrentQuestion, currentQuestion } from "./HostsData.svelte.js";
+import { WaitForAwnser } from "./WaitForAwnser.js";
 
 export async function startGame(gamePin) {
 	await supabase.removeChannel(LobbyConnection);
@@ -12,14 +13,10 @@ export async function startGame(gamePin) {
 		.select("*")
 		.eq("gameid", Number(gamePin))
 		.order("id", { ascending: true });
+
 	questions.v = data;
 
 	CurrentQuestion.v = 0;
 
-	await supabase
-		.from("games")
-		.update({ status: `question-${currentQuestion.v}` })
-		.eq("gamepin", gamePin);
-
-    
+	WaitForAwnser(0, gamePin);
 }

src/routes/join/logic/InsertPlayerInDB.js

@@ -1,14 +1,19 @@
 import { supabase } from "$lib/supabase";
 
 export async function addPlayer(name, gamePin) {
-	const { error } = await supabase.from("players").insert({
-		gameid: gamePin,
-		score: 0,
-		playername: name,
-	});
+	const { data, error } = await supabase
+		.from("players")
+		.insert({
+			gameid: gamePin,
+			score: 0,
+			playername: name,
+		})
+		.select("id");
 
 	if (error) {
 		alert("Failed to join game: " + error.message + "\n\nPlease try again.");
 		return;
 	}
+
+	return data[0].id;
 }

src/routes/join/logic/joinGame.js

@@ -1,4 +1,3 @@
-import { goto } from "$app/navigation";
 import { addPlayer } from "./InsertPlayerInDB.js";
 import { validateGamePin } from "./validateGamePin.js";
 import { Checking } from "./JoinGameData.svelte.js";
@@ -12,11 +11,9 @@ export async function joinGame(pin, name) {
 		return;
 	}
 
-	addPlayer(name, pin);
+	let id = await addPlayer(name, pin);
 
 	Checking.v = false;
 
-	goto("/play/" + pin, {
-		state: { name },
-	});
+	window.location.href = `./play/${pin}?name=${name}&playerid=${id}`;
 }

src/routes/play/[gamePin]/+page.svelte

@@ -1,11 +1,12 @@
 <script>
-	import PlayingDisplay from "./components/DuringGame/display.svelte";
-
+	import AwnserQuetion from "./components/awnseringQuetions/display.svelte";
 	import LobbyDisplay from "./components/lobby/display.svelte";
 	import { Status } from "./logic/HostsData.svelte.js";
 	import { AutoUpdatePlayersList } from "./logic/UpdatePlayersList.js";
 	import { GetCurrentPlayers } from "./logic/GetCurrentPlayers.js";
+	import { IntializeGameStart } from "./logic/IntializeGameStart.js";
 	import { onMount } from "svelte";
+	import { name,playerid } from "./logic/HostsData.svelte.js";
 
 	export let data;
 	const gamePin = data.gamePin;
@@ -13,6 +14,10 @@
 	onMount(() => {
 		GetCurrentPlayers(gamePin);
 		AutoUpdatePlayersList(gamePin);
+		IntializeGameStart(gamePin);
+
+		name.v = new URLSearchParams(new URL(window.location.href).search).get("name");
+		playerid.v = new URLSearchParams(new URL(window.location.href).search).get("playerid");
 	});
 </script>
 
@@ -23,7 +28,7 @@
 		{#if Status.v == "lobby"}
 			<LobbyDisplay {gamePin} />
 		{:else if Status.v == "started"}
-			<PlayingDisplay />
+			<AwnserQuetion />
 		{/if}
 	</div>
 </div>

src/routes/play/[gamePin]/components/DuringGame/PeopleAwnsered.svelte

@@ -1,13 +0,0 @@
-<script>
-	import { PeopleAwnseredQ, Totalplayers } from "./../../logic/HostsData.svelte.js";
-</script>
-
-<div class="mt-1 mb-3 flex w-full flex-col rounded-2xl border-2 border-green-400 p-2">
-	<h3>{PeopleAwnseredQ.v} out of {Totalplayers.v} have awnsered the quetion</h3>
-	<div class="flex-1 rounded-full border-2 border-gray-600">
-		<div
-			class="h-4 rounded-full bg-green-600 transition-all duration-500"
-			style="width: {(PeopleAwnseredQ.v / Totalplayers.v) * 100}%;"
-		></div>
-	</div>
-</div>

src/routes/play/[gamePin]/components/DuringGame/QuetionsAwnsred.svelte

@@ -1,13 +0,0 @@
-<script>
-	import { currentQuestion, totalQuetions } from "./../../logic/HostsData.svelte.js";
-</script>
-
-<div class="mt-1 mb-3 flex w-full flex-col rounded-2xl border-2 border-green-400 p-2">
-	<h3>Question {currentQuestion.v + 1} of {totalQuetions.v} is beeing awnsered</h3>
-	<div class="flex-1 rounded-full border-2 border-gray-600">
-		<div
-			class="h-4 rounded-full bg-green-600 transition-all duration-500"
-			style="width: {(currentQuestion.v + 1 / totalQuetions.v) * 100}%;"
-		></div>
-	</div>
-</div>

src/routes/play/[gamePin]/components/DuringGame/display.svelte

@@ -1,9 +0,0 @@
-<script>
-	
-	import PeopleAwnsered from "./PeopleAwnsered.svelte";
-	import QuetionsAwnsred from "./QuetionsAwnsred.svelte";
-</script>
-
-<h1 class="m-[0] text-7xl">HOSTING</h1>
-<QuetionsAwnsred />
-<PeopleAwnsered />

src/routes/play/[gamePin]/components/awnseringQuetions/Awnsers.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { questions, Selected } from "../../logic/HostsData.svelte.js";
+</script>
+
+<div class="mt-5 grid grid-cols-2 gap-5 gap-x-3">
+	{#each questions.v.answers as answer, index}
+		<div class="flex">
+			<input
+				type="radio"
+				id="O{index}"
+				name="question"
+				class="peer sr-only"
+				value={index}
+				bind:group={Selected.v}
+			/>
+			<label
+				class="w-full cursor-pointer rounded-lg border-3 border-gray-600 bg-gray-600 pt-1 pr-2 pb-1 pl-2 text-center text-3xl transition-all peer-checked:border-blue-600 peer-checked:bg-blue-600 hover:border-blue-600"
+				for="O{index}">{answer}</label
+			>
+		</div>
+	{/each}
+</div>

src/routes/play/[gamePin]/components/awnseringQuetions/ProgressBar.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { CurrentQuestion, TotalQuestions } from "../../logic/HostsData.svelte.js";
+</script>
+
+<div class="mb-5 flex w-full items-center justify-center gap-3">
+	<h3>Question {CurrentQuestion.v + 1} of {TotalQuestions.v}</h3>
+	<div class="flex-1 rounded-full border-2 border-gray-600">
+		<div
+			class="h-4 rounded-full bg-green-600 transition-all duration-700"
+			style="width: {(CurrentQuestion.v / TotalQuestions.v) * 100}%;"
+		></div>
+	</div>
+</div>

src/routes/play/[gamePin]/components/awnseringQuetions/buttons/SelectFirst.svelte

@@ -0,0 +1,4 @@
+<button
+	class="mt-4 cursor-pointer gap-0 rounded-lg bg-gray-700 p-2 text-3xl transition-all hover:scale-110"
+	>select a answer
+</button>

src/routes/play/[gamePin]/components/awnseringQuetions/buttons/submitAwnser.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { SubmitAnswer } from "../../../logic/SubmitAnswer.js";
+</script>
+
+<button
+	class="mt-4 cursor-pointer gap-0 rounded-lg bg-green-700 p-2 text-3xl transition-all hover:scale-110 hover:-rotate-10"
+	onclick={SubmitAnswer}
+	>submit answer
+</button>

src/routes/play/[gamePin]/components/awnseringQuetions/display.svelte

@@ -0,0 +1,28 @@
+<script>
+	import Question from "./text/Quetion.svelte";
+	import Awnsers from "./Awnsers.svelte";
+	import ProgressBar from "./ProgressBar.svelte";
+	import SelectFirst from "./buttons/SelectFirst.svelte";
+	import Wait from "./text/wait.svelte";
+	import SubmitAwnser from "./buttons/submitAwnser.svelte";
+	import { CurrentQuestion, Selected } from "../../logic/HostsData.svelte.js";
+</script>
+
+<div class="bg-grey-900 flex h-full items-center justify-center">
+	<div
+		class="flex max-w-[700px] flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg"
+	>
+		<ProgressBar />
+		{#if CurrentQuestion.v != null}
+			<Question />
+			<Awnsers />
+			{#if Selected.v != null}
+				<SubmitAwnser />
+			{:else}
+				<SelectFirst />
+			{/if}
+		{:else}
+			<Wait />
+		{/if}
+	</div>
+</div>

src/routes/play/[gamePin]/components/awnseringQuetions/text/Quetion.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { CurrentQuestion, questions } from "../../../logic/HostsData.svelte.js";
+</script>
+
+<h1 class="m-[0] text-center text-5xl">
+	Q{CurrentQuestion.v + 1}. {questions.v.question}
+</h1>

src/routes/play/[gamePin]/components/awnseringQuetions/text/wait.svelte

@@ -0,0 +1 @@
+<h1 class="m-[0] text-center text-5xl">Please wait for everyone else to answer the question.</h1>

src/routes/play/[gamePin]/logic/HostsData.svelte.js

@@ -1,9 +1,9 @@
-export let players = $state({ v: [] });
+export let players = $state({ v: {} });
 export let Status = $state({ v: "lobby" });
-export let questions = $state({ v: [] });
-export let CurrentQuestion = $state({ v: -1 });
-
-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 questions = $state({ v: {} });
+export let CurrentQuestion = $state({ v: null });
+export let TotalQuestions = $state({ v: 0 });
+export let Selected = $state({ v: null });
+export let isWait = $state({ v: true });
+export let name = $state({ v: "" });
+export let playerid = $state({ v: null });

src/routes/play/[gamePin]/logic/IntializeGameStart.js

@@ -0,0 +1,22 @@
+import { supabase } from "$lib/supabase.js";
+import { NewStatus } from "./NewStatus.js";
+
+export async function IntializeGameStart(gamepin) {
+	supabase
+		.channel(`game_status_${gamepin}`)
+		.on(
+			"postgres_changes",
+			{
+				event: "UPDATE",
+				schema: "public",
+				table: "games",
+				filter: `gamepin=eq.${gamepin}`,
+			},
+			(payload) => {
+				if (payload.new.status) {
+					NewStatus(payload.new.status, gamepin);
+				}
+			},
+		)
+		.subscribe();
+}

src/routes/play/[gamePin]/logic/NewStatus.js

@@ -0,0 +1,41 @@
+import {
+	CurrentQuestion,
+	Status,
+	questions,
+	isWait,
+	Selected,
+	playerid,
+} from "./HostsData.svelte.js";
+import { supabase } from "$lib/supabase.js";
+
+export async function NewStatus(NewStatus, gamePin) {
+	if (NewStatus == "completed") {
+		window.location.replace("/results/" + gamePin + "?playerID=" + playerid.v);
+		return;
+	}
+
+	Status.v = "started";
+	CurrentQuestion.v = Number(NewStatus.replace("question-", ""));
+
+	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 });
+
+	questions.v = {
+		question: questionsData[CurrentQuestion.v].questionstext,
+		correctAnswer: questionsData[CurrentQuestion.v].correctanswer,
+		answers: answers.map((answer) => answer.content),
+		questionid: questionsData[CurrentQuestion.v].id,
+	};
+
+	isWait.v = false;
+	Selected.v = null;
+}

src/routes/play/[gamePin]/logic/SubmitAnswer.js

@@ -0,0 +1,31 @@
+import { CurrentQuestion, Selected, questions, playerid } from "./HostsData.svelte.js";
+import { supabase } from "$lib/supabase.js";
+
+export async function SubmitAnswer() {
+	CurrentQuestion.v = null;
+
+	if (Selected.v == questions.v.correctAnswer) {
+		await supabase
+			.from("answeredby")
+			.insert([
+				{ questionid: questions.v.questionid, nameofanswerer: playerid.v, correct: true },
+			])
+			.select();
+
+		let { data: score } = await supabase.from("players").select("score").eq("id", playerid.v);
+
+		await supabase
+			.from("players")
+			.update({ score: score[0].score + 1 })
+			.eq("id", playerid.v)
+			.select();
+        
+	} else {
+		await supabase
+			.from("answeredby")
+			.insert([
+				{ questionid: questions.v.questionid, nameofanswerer: playerid.v, correct: false },
+			])
+			.select();
+	}
+}

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, currentQuestion } from "./HostsData.svelte.js";
+import { questions, Status, CurrentQuestion } from "./HostsData.svelte.js";
 
 export async function startGame(gamePin) {
 	await supabase.removeChannel(LobbyConnection);
@@ -18,7 +18,7 @@ export async function startGame(gamePin) {
 
 	await supabase
 		.from("games")
-		.update({ status: `question-${currentQuestion.v}` })
+		.update({ status: `question-${CurrentQuestion.v}` })
 		.eq("gamepin", gamePin);
 
     

src/routes/results/[gamePin]/+page.js

@@ -0,0 +1,5 @@
+export function load({ params }) {
+	return {
+		gamePin: params.gamePin
+	};
+}

src/routes/results/[gamePin]/+page.svelte

@@ -0,0 +1,81 @@
+<script>
+	import { supabase } from "$lib/supabase";
+	import { onMount } from "svelte";
+
+	export let data;
+	const gamePin = data.gamePin;
+
+	let playerID;
+	let players = [];
+
+	onMount(async () => {
+		playerID = new URLSearchParams(new URL(window.location.href).search).get("playerID");
+
+		let { data: fetchedPlayers } = await supabase
+			.from("players")
+			.select("*")
+			.eq("gameid", gamePin);
+
+		players = fetchedPlayers.sort((a, b) => b.score - a.score);
+
+		console.log(players);
+	});
+</script>
+
+<div class="bg-grey-900 flex h-full items-center justify-center">
+	<div
+		class="flex max-w-[700px] flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg"
+	>
+		<h1 class="mb-3 text-7xl font-bold text-white">Leaderboard</h1>
+
+		{#each players as player, i}
+			{#if player.id == playerID}
+				<div class="flex w-full items-center justify-between rounded-lg bg-green-950 p-2">
+					<div
+						class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-gray-500"
+					>
+						{i + 1}
+					</div>
+
+					<div class="w-20 text-white">{player.playername}</div>
+
+					<div class="flex-1 rounded-full border-2 border-gray-600">
+						<div
+							class="flex h-6 items-center justify-center rounded-full bg-green-600 transition-all duration-700"
+							style="width: {(player.score / players[0].score) * 100}%;"
+						></div>
+					</div>
+
+					<div class="flex w-17 justify-end">{player.score} points</div>
+				</div>
+			{:else}
+				<div class="flex w-full items-center justify-between rounded-lg bg-gray-800 p-2">
+					<div
+						class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-gray-500"
+					>
+						{i + 1}
+					</div>
+
+					<div class="w-20 text-white">{player.playername}</div>
+
+					<div class="flex-1 rounded-full border-2 border-gray-600">
+						<div
+							class="flex h-6 items-center justify-center rounded-full bg-green-600 transition-all duration-700"
+							style="width: {(player.score / players[0].score) * 100}%;"
+						></div>
+					</div>
+
+					<div class="flex w-17 justify-end">{player.score} points</div>
+				</div>
+			{/if}
+		{/each}
+
+		<a href="/"
+			><button
+				class="mt-4 cursor-pointer rounded-full bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
+			>
+				Go back to the home page!
+			</button></a
+		>
+	</div>
+</div>