added leader board

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

@@ -16,14 +16,23 @@
 	async function NewUpdate(question) {
 		if (question[currentQuestion].playersCompelted == Totalplayers) {
 			currentQuestion++;
-			await supabase
-				.from('games')
-				.update({ gameStatus: `${currentQuestion}` })
-				.eq('gamePIN', Number(data.gamePin));
+			
+			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;
-			
 		}
 	}
 

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

@@ -26,10 +26,18 @@
 				},
 				(payload) => {
 					if (payload.new.gameStatus != gameStatus) {
-						gameStatus = payload.new.gameStatus;
-						isWait = false;
-						Selected = null;
-						currentQuestion = Number(gameStatus);
+						if (payload.new.questions == 'completed') {
+							goto(`/results/${gamePin}`, {
+								state: {
+									name
+								}
+							});
+						} else {
+							gameStatus = payload.new.gameStatus;
+							isWait = false;
+							Selected = null;
+							currentQuestion = Number(gameStatus);
+						}
 					}
 				}
 			)

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,71 @@
+<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>