wip: start scout queue display

src/routes/admin/+page.svelte

@@ -7,39 +7,55 @@
 		}
 	});
 
+	socket.on('scout_queued', (scout: string) => {
+		scout_queue.push(scout);
+	});
+
 	let match_key: string = $state('');
 	const colors = ['red', 'red', 'red', 'blue', 'blue', 'blue'] as const;
 	let teams: string[] = $state(['', '', '', '', '', '']);
 	const team_color = $derived(
 		teams.map((team, i) => [team, colors[i]] as [string, 'red' | 'blue'])
 	);
 
+	let scout_queue: string[] = $state([]);
+
 	const queue_match = () => {
 		socket.emit('send_match', [match_key, team_color]);
 		match_key = '';
 		teams = ['', '', '', '', '', ''];
 	};
 </script>
 
-<div class="m-4 grid place-items-center gap-4 text-white">
-	<input
-		bind:value={match_key}
-		placeholder="Match Key"
-		type="text"
-		class="rounded p-2 text-black"
-	/>
-
-	<div class="grid grid-flow-col grid-rows-4 gap-2">
-		<div class="grid grid-cols-2 grid-rows-1 gap-4 text-xl">
-			<h1>Red</h1>
-			<h1>Blue</h1>
+<div class="grid grid-cols-2 grid-rows-2 gap-6">
+	<div class="m-4 grid place-items-center gap-4 text-white">
+		<input
+			bind:value={match_key}
+			placeholder="Match Key"
+			type="text"
+			class="rounded p-2 text-black"
+		/>
+
+		<div class="grid grid-flow-col grid-rows-4 gap-2">
+			<div class="grid grid-cols-2 grid-rows-1 gap-4 text-xl">
+				<h1>Red</h1>
+				<h1>Blue</h1>
+			</div>
+			<div class="row-span-3 grid grid-flow-col grid-cols-2 grid-rows-3 gap-4 text-black">
+				{#each teams as _, i}
+					<input bind:value={teams[i]} type="text" class="rounded p-1" />
+				{/each}
+			</div>
 		</div>
-		<div class="row-span-3 grid grid-flow-col grid-cols-2 grid-rows-3 gap-4 text-black">
-			{#each teams as _, i}
-				<input bind:value={teams[i]} type="text" class="rounded p-1" />
+
+		<button onclick={queue_match} class="rounded border p-2">Queue Match</button>
+	</div>
+	<div class="m-4 grid place-items-center gap-4 text-white">
+		<span>Queued Scouts</span>
+		<div class="grid grid-flow-col grid-cols-1 gap-4">
+			{#each scout_queue as scout}
+				<h1 class="rounded border-white">{scout}</h1>
 			{/each}
 		</div>
 	</div>
-
-	<button onclick={queue_match} class="rounded border p-2">Queue Match</button>
 </div>

ws.ts

@@ -1,6 +1,7 @@
 import { Server } from 'socket.io';
 import { type ViteDevServer } from 'vite';
 
+const sid_to_scout: Map<string, string> = new Map();
 const robotQueue: [string, 'red' | 'blue'][] = [];
 let curr_match_key: string = '';
 
@@ -13,16 +14,22 @@ const webSocketServer = {
 		io.on('connect', (socket) => {
 			if (socket.handshake.auth.token === 'celary') socket.join('admin_room');
 
-			socket.on('join_queue', (_) => {
+			socket.on('join_queue', (scout_id) => {
+				sid_to_scout.set(socket.id, scout_id);
+
 				const team_data = robotQueue.pop();
 				if (!team_data) {
+					io.to('admin_room').emit('scout_joined_queue', scout_id);
 					socket.join('scout_queue');
 					return;
 				}
 				socket.emit('time_to_scout', [curr_match_key, ...team_data]);
 			});
 
-			socket.on('leave_queue', (_) => {
+			socket.on('leave_queue', () => {
+				const scout_id = sid_to_scout.get(socket.id);
+
+				io.in('admin_room').emit('scout_left_queue', scout_id);
 				socket.leave('scout_queue');
 			});
 
@@ -37,7 +44,10 @@ const webSocketServer = {
 						const team_data = teams.pop();
 						if (!team_data) break;
 
+						const scout_id = sid_to_scout.get(sid);
+
 						socket.leave('scout_queue');
+						io.to('admin_room').emit('scout_left_queue', scout_id);
 						io.to(sid).emit('time_to_scout', [match_key, ...team_data]);
 					}
 				}