now people can join and leave the game

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

@@ -0,0 +1,6 @@
+// Example of what your +page.js or +page.server.js might need
+export function load({ params }) {
+	return {
+		gamePin: params.gamePin
+	};
+}

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

@@ -0,0 +1,87 @@
+<script>
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+	import { supabase } from '$lib/supabase';
+
+	export let data;
+	const gamePin = data.gamePin;
+	const name = $page.state?.name;
+
+	let players = [];
+
+	async function addPlayer() {
+		const { data: gameData, error } = await supabase
+			.from('games')
+			.select('players')
+			.eq('gamePIN', Number(gamePin))
+			.maybeSingle();
+
+		let updatedPlayers = gameData.players || [];
+
+		const alreadyExists = updatedPlayers.some((p) => p.name === name);
+		if (!alreadyExists) {
+			updatedPlayers.push({ name: name, score: 0 });
+
+			const { error: updateError } = await supabase
+				.from('games')
+				.update({ players: updatedPlayers })
+				.eq('gamePIN', Number(gamePin));
+		}
+	}
+
+	// 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 () => {
+		await addPlayer();
+
+		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">PLAYING</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>
+	</div>
+</div>