feat: params on scout route

src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <div class="flex flex-col items-center justify-evenly h-dvh text-text_white">
 	<h1 class="text-center text-5xl font-bold">hiiii :3</h1>
-	<a class="text-center text-2xl rounded bg-btn_grey px-4 py-2 font-bold" href="/scout">
+	<a class="text-center text-2xl rounded bg-btn_grey px-4 py-2 font-bold" href="/queue">
 		scout
 	</a>
 </div>

src/routes/queue/+page.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { io } from 'socket.io-client';
 
 	const socket = io();
 
-	socket.on('messageFromServer', (message) => {
-		console.log(message);
+	socket.on('connect', () => {
+		console.log(socket.id);
+		socket.emit('join_queue');
+	});
+
+	socket.on('time_to_scout', ([team_key, color]: [string, 'red' | 'blue']) => {
+		goto(`/scout/${team_key}_${color}`);
 	});
 </script>
+
+<h1>In Queue</h1>

src/routes/scout/+page.svelte → src/routes/scout/[team_data]/+page.svelte

@@ -2,21 +2,20 @@
 	import { type TeamMatch, type AutoActionData } from '$lib/types';
 	import Timeline from '$lib/components/Timeline.svelte';
 	import ActionInputs from './ActionInputs.svelte';
+	import { browser } from '$app/environment';
+	import type { PageData } from './$types';
 
-	const {
-		match_key,
-		team_key = '1540',
-		scout_id
-	}: { match_key: string; team_key: string; scout_id: string } = $props();
+	const { data }: { data: PageData } = $props();
+	const scout_id = browser ? localStorage.getItem('scout_id')! : '';
 
 	let actions: AutoActionData[] = $state([]);
 	let timelineExtended = $state(false);
 
 	const match: TeamMatch = $state({
 		id: 0,
-		scout_id,
-		team_key,
-		match_key,
+		scout_id: scout_id,
+		team_key: data.team_key,
+		match_key: data.match_key,
 		skill: 3,
 		notes: '',
 		broke: false,
@@ -27,7 +26,7 @@
 </script>
 
 <div class="grid grid-row-10 text-zinc-50 p-2 h-svh place-items-center">
-	<h1 class="row-span-1 text-center font-bold pb-2 h-5">Team {team_key}</h1>
+	<h1 class="row-span-1 text-center font-bold pb-2 h-5">Team {data.team_key}</h1>
 	{#if timelineExtended}
 		<div class="row-span-8">
 			<Timeline bind:actions />

src/routes/scout/[team_data]/+page.ts

@@ -0,0 +1,16 @@
+import type { PageLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageLoad = ({ params }) => {
+	const [match_key, team_key, color]: [string, string, 'red' | 'blue'] | undefined =
+		params.team_data?.split('_') as [string, string, 'red' | 'blue'];
+
+	// TODO: Check if this does anything
+	if (!team_key) return error(400, 'Bad query parameters');
+	console.log('match_key: ' + color);
+	return {
+		match_key: match_key,
+		team_key: team_key,
+		color: color
+	};
+};

ws.ts

@@ -21,7 +21,7 @@ const webSocketServer = {
 					socket.join('scout_queue');
 					return;
 				}
-				socket.emit('time_to_scout', team_data);
+				socket.emit('time_to_scout', [curr_match_key, ...team_data]);
 			});
 
 			socket.on('leave_queue', (_) => {
@@ -32,12 +32,14 @@ const webSocketServer = {
 				if (!socket.rooms.has('admin_room')) return;
 
 				const scout_queue: Set<string> = io.of('/').adapter.rooms.get('scout_queue')!;
-				scout_queue
-					.values()
-					.forEach((sid) => io.to(sid).emit('time_to_scout', teams.pop()));
+				for (const sid of scout_queue.values()) {
+					const team_data = teams.pop();
+					if (!team_data) break;
+
+					io.to(sid).emit('time_to_scout', [match_key, ...team_data]);
+				}
 				robotQueue.push(...teams);
 
-				// TODO: Decide if we care about this
 				// Update all connected sockets with new match info (for cosmetic purposes)
 				io.emit('new_match', match_key);
 				curr_match_key = match_key;