made the loby working using the newer rDB and makeing everything to bbe better manageable by using folders and more components!

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

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

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

@@ -0,0 +1,29 @@
+<script>
+	import PlayingDisplay from "./components/DuringGame/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 { onMount } from "svelte";
+
+	export let data;
+	const gamePin = data.gamePin;
+
+	onMount(() => {
+		GetCurrentPlayers(gamePin);
+		AutoUpdatePlayersList(gamePin);
+	});
+</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"
+	>
+		{#if Status.v == "lobby"}
+			<LobbyDisplay {gamePin} />
+		{:else if Status.v == "started"}
+			<PlayingDisplay />
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,13 @@
+<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

@@ -0,0 +1,13 @@
+<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

@@ -0,0 +1,9 @@
+<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/lobby/PlayersGUI/playerBadge.svelte

@@ -0,0 +1,6 @@
+<script>
+	let props = $props();
+	let playerName = props.playerName;
+</script>
+
+<span class="m-[0] rounded-xl bg-gray-700 pt-1 pr-2 pb-0 pl-2 font-mono text-3xl">{playerName}</span>

src/routes/play/[gamePin]/components/lobby/PlayersGUI/players.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { players } from "../../../logic/HostsData.svelte.js";
+	import PlayerBadge from "./playerBadge.svelte";
+</script>
+
+<h1 class="m-[0] mt-10 text-6xl">Players Joined:</h1>
+<h1 class="m-[0] text-4xl text-gray-400">(Total Players: {players.v.length})</h1>
+<div class="mt-2 flex flex-wrap justify-center gap-2">
+	{#each players.v as playerName}
+		<PlayerBadge {playerName} />
+	{/each}
+</div>

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

@@ -0,0 +1,13 @@
+<script>
+	import Players from "./PlayersGUI/players.svelte";
+
+	let props = $props();
+    let gamePin = props.gamePin;
+</script>
+
+<h1 class="m-[0] text-9xl">HOSTING</h1>
+<h1 class="m-[0] text-7xl">Game Pin:</h1>
+<h1 class="m-[0] rounded-2xl bg-gray-700 pt-1.5 pr-2 pb-0 pl-2 font-mono text-5xl">
+	{gamePin}
+</h1>
+<Players />

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

@@ -0,0 +1,18 @@
+import { supabase } from "$lib/supabase.js";
+import { players } from "./HostsData.svelte.js";
+
+export async function GetCurrentPlayers(gamePin) {
+	const { data, error } = await supabase
+		.from("players")
+		.select("playername")
+		.eq("gameid", Number(gamePin));
+
+	console.log("Current players data:", JSON.stringify(data));
+
+	if (error) {
+		console.error("Error fetching players:", error);
+		return;
+	}
+
+	players.v = data ? data.map(player => player.playername) : [];
+}

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

@@ -0,0 +1,9 @@
+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 });

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

@@ -0,0 +1,26 @@
+import { supabase } from "$lib/supabase.js";
+import { players } from "./HostsData.svelte.js";
+
+export let LobbyConnection;
+
+function onNewPlayer(Newplayers) {
+	players.v.push(Newplayers.playername);
+}
+
+export async function AutoUpdatePlayersList(gamePin) {
+	LobbyConnection = supabase
+		.channel("players-realtime")
+		.on(
+			"postgres_changes",
+			{
+				event: "INSERT",
+				schema: "public",
+				table: "players",
+				filter: `gameid=eq.${gamePin}`,
+			},
+			(payload) => {
+				onNewPlayer(payload.new);
+			},
+		)
+		.subscribe();
+}

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

@@ -0,0 +1,25 @@
+import { supabase } from "$lib/supabase.js";
+import { LobbyConnection } from "./UpdatePlayersList.js";
+import { questions, Status, CurrentQuestion, currentQuestion } from "./HostsData.svelte.js";
+
+export async function startGame(gamePin) {
+	await supabase.removeChannel(LobbyConnection);
+
+	Status.v = "started";
+
+	const { data } = await supabase
+		.from("questions")
+		.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);
+
+    
+}