trying to get the host game lobby work with the newer rDB

.gitignore

@@ -1,4 +1,5 @@
 node_modules
+package-lock.json
 
 # Output
 .output
@@ -21,3 +22,4 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+

.prettierrc

@@ -1,7 +1,7 @@
 {
 	"useTabs": true,
-	"singleQuote": true,
+	"singleQuote": false,
-	"trailingComma": "none",
+	"trailingComma": "all",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"overrides": [

.vscode/settings.json

@@ -8,7 +8,10 @@
 		"correctanswer",
 		"creationdate",
 		"gameid",
+		"gamepin",
+		"hostgame",
 		"kahoot",
+		"playername",
 		"questionid",
 		"questionstext",
 		"SUPABASE"

eslint.config.js

@@ -1,3 +1,3 @@
 import prettier from 'eslint-config-prettier';
 import svelte from 'eslint-plugin-svelte';
-export default [prettier, ...svelte.configs.prettier];
+export default [prettier, ...svelte.configs.prettier];

jsconfig.json

@@ -4,5 +4,8 @@
 		"allowJs": true,
 		"checkJs": true,
 		"moduleResolution": "bundler"
-	}
+	},
+	"exclude": [
+		"node_modules"
+	]
 }

package.json

@@ -13,7 +13,6 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@tailwindcss/postcss": "^4.1.6",

src/routes/+page.svelte

@@ -15,4 +15,4 @@
 			>
 		</a>
 	</div>
-</div>
+</div>

src/routes/create/logic/InsertGameInDB.js

@@ -2,27 +2,21 @@ 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
+	const { data: gameData, error: gameError } = await supabase.from('games').insert({
-		.from('games')
+		creator: 'anonymous',
-		.insert({
+		creationdate: new Date().toISOString(),
-			creator: 'anonymous', // Replace with actual creator if available
+		status: 'lobby',
-			creationdate: new Date().toISOString(),
+		gamepin: gamePin
-			status: 'lobby',
+	});
-			GamePIN: gamePin
-		})
-		.select('id')
-		.single();
 
 	if (gameError) {
 		alert('Failed to create game: ' + gameError.message + '\n\nPlease try again.');
 		return;
 	}
 
-	const gameid = gameData.id;
-
 	// Prepare questions and answers for batch insertion
 	const questionsData = questions.map((q, index) => ({
-		gameid: gameid,
+		gameid: gamePin,
 		questionstext: q.name,
 		correctanswer: q.correctAnswer
 	}));
@@ -53,6 +47,4 @@ export async function createGame(questions, gamePin) {
 		alert('Failed to insert answers: ' + answersError.message + '\n\nPlease try again.');
 		return;
 	}
-
-	alert('Game created successfully!');
 }

src/routes/create/logic/StartGame.js

@@ -5,13 +5,14 @@ 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)) return alert('Select correct answers');
+	if (questions.v.some((q) => q.correctAnswer === undefined))
+		return alert('Select correct answers');
 
 	const gamePin = Math.floor(Math.random() * 1000000)
 		.toString()
 		.padStart(6, '0');
 
-	createGame($state.snapshot(questions), gamePin);
+	createGame(questions.v, gamePin);
 
 	goto('/host/' + gamePin);
 }

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

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

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

@@ -0,0 +1,82 @@
+<script>
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+	import { supabase } from '$lib/supabase';
+	import { goto } from '$app/navigation';
+
+	export let data;
+	const gamePin = data.gamePin;
+
+
+	let players = [];
+
+	// Subscribe to realtime changes in players
+	function subscribeToPlayers() {
+		const channel = supabase
+			.channel(`game-${gamePin}`)
+			.on(
+				'postgres_changes',
+				{
+					event: 'UPDATE',
+					schema: 'public',
+					table: 'games',
+					filter: `gamePIN=eq.${gamePin}`
+				},
+				(payload) => {
+					players = payload.new.players || [];
+				}
+			)
+			.subscribe();
+	}
+
+	onMount(async () => {
+		const { data: gameData } = await supabase
+			.from('games')
+			.select('players')
+			.eq('gamePIN', Number(gamePin))
+			.maybeSingle();
+
+		if (gameData?.players) {
+			players = gameData.players;
+		}
+
+		subscribeToPlayers();
+	});
+</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="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>
+		<h1 class="m-[0] mt-10 text-6xl">Players Joined:</h1>
+		<h1 class="m-[0] text-4xl text-gray-400">(Total Players: {players.length})</h1>
+		<div class="mt-2 flex flex-wrap justify-center gap-2">
+			{#each players as player}
+				<span class="m-[0] rounded-xl bg-gray-700 pt-1 pr-2 pb-0 pl-2 font-mono text-3xl"
+					>{player.name}</span
+				>
+			{/each}
+		</div>
+		<button
+			class="mt-5 cursor-pointer rounded-2xl bg-green-700 p-2 text-4xl transition-all hover:scale-110 hover:-rotate-10"
+			on:click={async () => {
+				if (players.length > 0) {
+					if (confirm('Are you sure you want to start the game?')) {
+						await supabase
+							.from('games')
+							.update({ gameStatus: 'started' })
+							.eq('gamePIN', Number(data.gamePin));
+						goto(`/hostgame/${gamePin}`);
+					}
+				} else {
+					alert('You need at least one player to start the game.');
+				}
+			}}>Start the game</button
+		>
+	</div>
+</div>

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

@@ -1,109 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import { supabase } from '$lib/supabase';
-
-	export let data;
-	const gamePin = data.gamePin;
-
-	let totalQuetions = 3;
-	let currentQuestion = 0;
-
-	let PeopleAwnseredQ = 2;
-	let Totalplayers = 3;
-
-	let questions = [];
-
-	async function NewUpdate(question) {
-		if (question[currentQuestion].playersCompelted == Totalplayers) {
-			currentQuestion++;
-			
-			if (currentQuestion > questions.length) {
-				await supabase
-					.from('games')
-					.update({ gameStatus: `completed` })
-					.eq('gamePIN', Number(data.gamePin));
-				goto(`/results/${gamePin}`);
-			} else {
-				await supabase
-					.from('games')
-					.update({ gameStatus: `${currentQuestion}` })
-					.eq('gamePIN', Number(data.gamePin));
-			}
-
-			PeopleAwnseredQ = 0;
-		} else {
-			PeopleAwnseredQ = question[currentQuestion].playersCompelted;
-		}
-	}
-
-	onMount(async () => {
-		const channel = supabase
-			.channel(`game-${gamePin}`)
-			.on(
-				'postgres_changes',
-				{
-					event: 'UPDATE',
-					schema: 'public',
-					table: 'games',
-					filter: `gamePIN=eq.${gamePin}`
-				},
-				(payload) => {
-					if (payload.new.questions != questions) {
-						questions = payload.new.questions;
-						currentQuestion = Number(payload.new.gameStatus);
-						NewUpdate(questions);
-					}
-				}
-			)
-			.subscribe();
-
-		const { data, error } = await supabase
-			.from('games')
-			.select('players')
-			.eq('gamePIN', Number(gamePin))
-			.single();
-
-		Totalplayers = data.players.length;
-
-		const { data: data2, error: error2 } = await supabase
-			.from('games')
-			.select('questions')
-			.eq('gamePIN', Number(gamePin))
-			.single();
-
-		questions = data2.questions;
-		totalQuetions = questions.length;
-
-		currentQuestion = 0;
-		await supabase
-			.from('games')
-			.update({ gameStatus: currentQuestion.toString() })
-			.eq('gamePIN', Number(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"
-	>
-		<h1 class="m-[0] text-7xl">HOSTING</h1>
-		<div class="mt-1 mb-3 flex w-full flex-col rounded-2xl border-2 border-green-400 p-2">
-			<h3>Question {currentQuestion + 1} of {totalQuetions} 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-700"
-					style="width: {(currentQuestion / totalQuetions) * 100}%;"
-				></div>
-			</div>
-		</div>
-		<div class="mt-1 mb-3 flex w-full flex-col rounded-2xl border-2 border-green-400 p-2">
-			<h3>{PeopleAwnseredQ} out of {Totalplayers} 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-700"
-					style="width: {(PeopleAwnseredQ / Totalplayers) * 100}%;"
-				></div>
-			</div>
-		</div>
-	</div>
-</div>

src/routes/join/+page.svelte

@@ -0,0 +1,45 @@
+<script>
+	import { joinGame } from './logic/joinGame.js';
+	import { Checking } from './logic/JoinGameData.svelte.js';
+
+	let pin;
+	let name;
+</script>
+
+<div class="bg-grey-900 flex h-full items-center justify-center">
+	<div class="flex flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-7 shadow-lg">
+		<h1 class="m-[0] mb-3 text-5xl">Join a game here</h1>
+
+		<input
+			placeholder="Enter game pin"
+			class="rounded-lg bg-gray-800 p-2 text-center text-white"
+			bind:value={pin}
+		/>
+
+		<input
+			placeholder="Enter your name"
+			bind:value={name}
+			class="rounded-lg bg-gray-800 p-2 text-center text-white"
+		/>
+
+		{#if Checking.v}
+			<button
+				class="mt-2 cursor-pointer rounded-full bg-gray-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
+			>
+				Checking if pin is valid...
+			</button>
+		{:else}
+        <button
+				class="mt-2 cursor-pointer rounded-full bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
+				on:click={() => {
+					if (!pin || !name) {
+						alert('Please fill in the game pin and your name.');
+					} else {
+						joinGame();
+					}
+				}}
+			>
+				Join game
+			</button>{/if}
+	</div>
+</div>

src/routes/join/logic/InsertPlayerInDB.js

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

src/routes/join/logic/JoinGameData.svelte.js

@@ -0,0 +1,3 @@
+export let Checking = $state({
+	v: false,
+});

src/routes/join/logic/joinGame.js

@@ -0,0 +1,20 @@
+import { goto } from '$app/navigation';
+import { addPlayer } from './InsertPlayerInDB.js';
+import { validateGamePin } from './validateGamePin.js';
+import { Checking} from "./JoinGameData.svelte.js"
+
+export async function joinGame(pin, name) {
+	Checking.v = true;
+
+	if (!(await validateGamePin())) {
+		alert('Invalid game pin. Please try again.');
+		Checking.v = false;
+		return;
+	}
+
+	addPlayer(name, pin);
+
+	goto('/play/' + pin, {
+		state: { name }
+	});
+}

src/routes/join/logic/validateGamePin.js

@@ -0,0 +1,11 @@
+import { supabase } from '$lib/supabase';
+
+export async function validateGamePin(pin) {
+	const { data, error } = await supabase
+		.from('games')
+		.select('gamepin')
+		.eq('gamepin', Number(pin))
+		.maybeSingle();
+
+	return data !== null && !error;
+}

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

@@ -1,142 +0,0 @@
-<script>
-	import { supabase } from '$lib/supabase';
-	import { onMount } from 'svelte';
-	export let data;
-	const gamePin = data.gamePin;
-	import { page } from '$app/stores';
-	const name = $page.state?.name;
-
-	let question = [];
-	let Selected = null;
-	let currentQuestion = 0;
-	let isWait = true;
-	let gameStatus = '';
-	let players = [];
-
-	onMount(async () => {
-		const channel = supabase
-			.channel(`game-${gamePin}`)
-			.on(
-				'postgres_changes',
-				{
-					event: 'UPDATE',
-					schema: 'public',
-					table: 'games',
-					filter: `gamePIN=eq.${gamePin}`
-				},
-				(payload) => {
-					if (payload.new.gameStatus != gameStatus) {
-						if (payload.new.questions == 'completed') {
-							goto(`/results/${gamePin}`, {
-								state: {
-									name
-								}
-							});
-						} else {
-							gameStatus = payload.new.gameStatus;
-							isWait = false;
-							Selected = null;
-							currentQuestion = Number(gameStatus);
-						}
-					}
-				}
-			)
-			.subscribe();
-
-		const { data, error } = await supabase
-			.from('games')
-			.select('questions')
-			.eq('gamePIN', Number(gamePin))
-			.single();
-
-		if (!error && data) {
-			question = data.questions || [];
-		}
-	});
-
-	async function SubmitAnswer() {
-		isWait = true;
-
-		const { data, error } = await supabase
-			.from('games')
-			.select('players')
-			.eq('gamePIN', Number(gamePin))
-			.single();
-		players = data.players;
-
-		if (question[currentQuestion].correctAnswer == Selected) {
-			players.forEach((player) => {
-				if (player.name == name) {
-					player.score += 1;
-				}
-			});
-			await supabase.from('games').update({ players: players }).eq('gamePIN', Number(gamePin));
-		}
-
-		const { data: data2 } = await supabase
-			.from('games')
-			.select('questions')
-			.eq('gamePIN', Number(gamePin))
-			.single();
-
-		question = data2.questions;
-
-		question[currentQuestion].playersCompelted++;
-		console.log('Players Completed:', question[currentQuestion].playersCompelted);
-
-		await supabase.from('games').update({ questions: question }).eq('gamePIN', Number(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"
-	>
-		<div class="mb-5 flex w-full items-center justify-center gap-3">
-			<h3>Question {currentQuestion + 1} of {question.length}</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 / question.length) * 100}%;"
-				></div>
-			</div>
-		</div>
-		{#if isWait != true}
-			<h1 class="m-[0] text-center text-5xl">
-				Q{currentQuestion + 1}. {question[currentQuestion].name}
-			</h1>
-			<div class="mt-5 grid grid-cols-2 gap-5 gap-x-3">
-				{#each question[currentQuestion].answers as answer, index}
-					<div class="flex">
-						<input
-							type="radio"
-							id="O{index}"
-							name="question"
-							class="peer sr-only"
-							value={index}
-							bind:group={Selected}
-						/>
-						<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>
-			{#if Selected != null}
-				<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>
-			{:else}
-				<button
-					class="mt-4 cursor-pointer gap-0 rounded-lg bg-gray-700 p-2 text-3xl transition-all hover:scale-110"
-					>select an answer to submit!
-				</button>
-			{/if}
-		{:else}<h1 class="m-[0] text-center text-5xl">
-				Please wait for everyone else to answer the question.
-			</h1>{/if}
-	</div>
-</div>

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

@@ -1,71 +0,0 @@
-<script>
-	import { supabase } from '$lib/supabase';
-	import { onMount } from 'svelte';
-	export let data;
-	const gamePin = data.gamePin;
-	import { page } from '$app/stores';
-	let name = '';
-	name = $page.state?.name;
-
-	let players = [];
-	onMount(async () => {
-		const { data } = await supabase
-			.from('games')
-			.select('players')
-			.eq('gamePIN', Number(gamePin))
-			.single();
-
-		players = data.players;
-
-		players.sort((a, b) => b.score - a.score);
-	});
-</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>
-
-		{#if players}
-			{#each players as player, i}
-				{#if name == player.name}
-					<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.name}</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>{player.score} points</div>
-							</div>
-						</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.name}</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}
-		{/if}
-
-		<button
-			class="mt-4 cursor-pointer rounded-full bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
-			on:click={joinGame}
-		>
-			Go back to the home page!
-		</button>
-	</div>
-</div>

svelte.config.js

@@ -6,16 +6,16 @@ const config = {
 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
-		adapter: adapter({
+		adapter: adapter()
-			// default options are shown. On some platforms
+
-			// these options are set automatically — see below
+
-			pages: 'build',
+
-			assets: 'build',
+
-			fallback: undefined,
+
-			precompress: false,
+
-			strict: true
+
-		})
+
 	}
 };
 
-export default config;
+export default config;