feat: scout queue on admin dash w/ removing

src/routes/admin/+page.svelte

@@ -1,30 +1,46 @@
 <script lang="ts">
-	import { io } from 'socket.io-client';
+	import { io, Socket } from 'socket.io-client';
 
-	const socket = io({
+	let scout_queue: string[] = $state([]);
+
+	let socket: Socket = io({
 		auth: {
 			token: 'celary'
 		}
 	});
 
-	socket.on('scout_queued', (scout: string) => {
+	socket.on('scout_joined_queue', (scout: string) => {
 		scout_queue.push(scout);
 	});
 
+	socket.on('scout_left_queue', (scout: string) => {
+		const index = scout_queue.indexOf(scout);
+		if (index === -1) return;
+
+		scout_queue.splice(index, 1);
+	});
+
 	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 = ['', '', '', '', '', ''];
 	};
+
+	const remove_scout = (scout_id: string) => {
+		const index = scout_queue.indexOf(scout_id);
+		if (index === -1) return;
+
+		scout_queue.splice(index, 1);
+
+		socket.emit('leave_queue', scout_id);
+	};
 </script>
 
 <div class="grid grid-cols-2 grid-rows-2 gap-6">
@@ -50,11 +66,13 @@
 
 		<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">
+	<div class="mt-4 grid grid-cols-1 grid-rows-10 place-items-center gap-4 text-xl">
+		<h1 class="row-span-2">Queued Scouts</h1>
+		<div class="row-span-8 grid grid-cols-1 grid-rows-8 gap-2">
 			{#each scout_queue as scout}
-				<h1 class="rounded border-white">{scout}</h1>
+				<button onclick={() => remove_scout(scout)} class="rounded border p-2 text-center">
+					{scout}
+				</button>
 			{/each}
 		</div>
 	</div>

src/routes/queue/+page.svelte

@@ -1,19 +1,25 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { io } from 'socket.io-client';
+	import { io, Socket } from 'socket.io-client';
+	import { onMount } from 'svelte';
+	let socket: Socket;
 
-	const socket = io();
+	socket = io();
 
 	socket.on('connect', () => {
-		socket.emit('join_queue');
+		socket.emit('join_queue', 'test_scout');
 	});
 
 	socket.on('time_to_scout', ([match_key, team_key, color]: [string, string, 'red' | 'blue']) => {
 		goto(`/scout/${match_key}-${team_key}-${color}`);
 	});
 
+	socket.on('you_left_queue', () => {
+		goto('/');
+	});
+
 	const leave = () => {
-		socket.emit('leave_queue');
+		socket.emit('leave_queue', 'test_scout');
 		goto('/');
 	};
 </script>

ws.ts

@@ -26,10 +26,16 @@ const webSocketServer = {
 				socket.emit('time_to_scout', [curr_match_key, ...team_data]);
 			});
 
-			socket.on('leave_queue', () => {
-				const scout_id = sid_to_scout.get(socket.id);
-
-				io.in('admin_room').emit('scout_left_queue', scout_id);
+			socket.on('leave_queue', (scout_id: string) => {
+				const scout_sid = sid_to_scout
+					.entries()
+					.filter(([_sid, scout]) => scout === scout_id)
+					.map(([sid, _]) => sid)
+					.toArray()[0];
+				// This event exist in the cast that the scout removed itself from the queue
+				io.to('admin_room').emit('scout_left_queue', scout_id);
+				// This event exists in the case that the admin removed the scout from the queue
+				io.to(scout_sid).emit('you_left_queue');
 				socket.leave('scout_queue');
 			});