feat: manually scouting + extra timeline safeguard + styling

src/routes/+page.svelte

@@ -3,23 +3,25 @@
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 	let inputname: string = '';
+
 	onMount(() => {
-		let isLoggedIn = browser && window.localStorage.getItem('username');
+		const isLoggedIn = browser && window.localStorage.getItem('username');
 		if (isLoggedIn) {
 			goto('/homepage');
 		}
 	});
+
 	function login() {
 		browser && window.localStorage.setItem('username', inputname);
 		goto('/homepage');
 	}
 </script>
 
-<div class="flex h-dvh flex-col items-center justify-evenly">
-	<h1 class="text-text_red text-center text-5xl font-bold">hiiii :3</h1>
-	<div>
+<div class="m-4 grid grid-cols-1 place-items-center gap-4">
+	<h1 class="text-center text-5xl font-bold">Inflated Chickens :3</h1>
+	<div class="mt-16 grid w-9/12 grid-flow-col grid-cols-1 grid-rows-2 gap-4">
 		<input
-			class="bg-btn_grey rounded border-2 border-solid px-4 py-2 text-black"
+			class="rounded border-2 border-solid px-4 py-2 text-black"
 			type="text"
 			placeholder="Please enter your name here"
 			bind:value={inputname}

src/routes/homepage/+page.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import { onMount } from 'svelte';
-	let name: string = (browser && window.localStorage.getItem('name')) || '';
+	let username: string = (browser && window.localStorage.getItem('username')) || '';
 </script>
 
 <div class="flex h-dvh flex-col items-center justify-evenly">
-	<h1 class="text-text_red text-center text-5xl font-bold">
-		Welcome <br /><span class="text-text_yellow">{name}</span>
+	<h1 class="text-center text-5xl font-bold">
+		Welcome, <br /><span class="text-yellow-400">{username}</span>
 	</h1>
 	<a
-		class="text-text_yellow text-l bg-btn_grey border-text_red rounded border-2 border-solid px-4 py-2 text-center"
+		class="w-9/12 rounded-full border-4 border-solid p-4 pb-16 pt-16 text-center text-2xl"
 		href="/queue"
 	>
 		Scout
 	</a>
+	<a
+		class="w-9/12 rounded-full border-4 border-solid p-4 pb-16 pt-16 text-center text-2xl"
+		href="/manual_scout"
+	>
+		Manual Scout
+	</a>
 </div>

src/routes/manual_scout/+page.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+
+	let match_key: string = '';
+	let team_key: string = '';
+	let color: string = '';
+
+	function scout() {
+		color = color.toLowerCase();
+		if (color !== 'red' && color !== 'blue') {
+			alert('Invalid color, please select red or blue');
+			return;
+		}
+		goto(`/scout/${match_key}-${team_key}-${color}`);
+	}
+</script>
+
+<div class="grid grid-cols-1 grid-rows-4 gap-4 pr-4 pt-4 text-center text-xl">
+	<div class="grid grid-cols-3">
+		<span class="col-span-1 flex items-center justify-center">Match Key</span>
+		<input
+			class="col-span-2 rounded p-4 text-black"
+			bind:value={match_key}
+			type="text"
+			placeholder="2024orbb_qm1"
+		/>
+	</div>
+
+	<div class="grid grid-cols-3">
+		<span class="col-span-1 flex items-center justify-center">Team Key</span>
+		<input
+			class="col-span-2 rounded p-4 text-black"
+			bind:value={team_key}
+			type="text"
+			placeholder="1540"
+		/>
+	</div>
+	<div class="grid grid-cols-3">
+		<span class="col-span-1 flex items-center justify-center">Color</span>
+		<input
+			class="col-span-2 rounded p-4 text-black"
+			bind:value={color}
+			type="text"
+			placeholder="Red"
+		/>
+	</div>
+
+	<button class="ml-4 rounded border p-4" onclick={scout}>Scout</button>
+</div>

src/routes/queue/+page.svelte

@@ -31,10 +31,10 @@
 	};
 </script>
 
-<div
-	class="grid h-full w-full grid-cols-1 grid-rows-2 place-items-center gap-4 align-middle text-4xl text-white"
->
-	<h1 class="p-2 font-heading font-bold">In Queue</h1>
+<div class="grid h-full w-full grid-cols-1 grid-rows-2 place-items-center gap-4 align-middle">
+	<h1 class="p-2 font-heading text-5xl font-bold text-yellow-400">In Queue</h1>
 
-	<button class="rounded border p-4" onclick={leave}>Leave Queue</button>
+	<button class="w-9/12 rounded-full border-4 p-8 pb-16 pt-16 text-2xl text-white" onclick={leave}
+		>Leave Queue</button
+	>
 </div>

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

@@ -29,7 +29,7 @@
 	let died = $state(false);
 	let notes = $state('');
 
-	let timelineExtended = $state(false);
+	let timeline_extended = $state(false);
 	let gamePhase = $state('Auto') as 'Auto' | 'Tele' | 'Post';
 	let pageName = $state('');
 
@@ -87,34 +87,40 @@
 	</div>
 
 	{#if gamePhase === 'Auto'}
-		<AutoActionInputs bind:furthest_auto_index bind:held bind:actions bind:pageName />
+		<AutoActionInputs
+			bind:furthest_auto_index
+			bind:held
+			bind:actions
+			bind:pageName
+			bind:timeline_extended
+		/>
 		<button
 			class="w-full border-t-2 border-white/10 pt-2 text-center font-heading font-semibold"
 			onclick={(e: Event) => {
 				e.stopPropagation();
-				timelineExtended = true;
+				timeline_extended = true;
 			}}>Show Timeline</button
 		>
 		<Timeline
 			bind:furthest_auto_index
 			bind:held
 			bind:actions
-			bind:displaying={timelineExtended}
+			bind:displaying={timeline_extended}
 		/>
 	{:else if gamePhase === 'Tele'}
 		<TeleActionInputs bind:held bind:actions bind:pageName />
 		<button
 			class="w-full border-t-2 border-white/10 pt-2 text-center font-heading font-semibold"
 			onclick={(e: Event) => {
 				e.stopPropagation();
-				timelineExtended = true;
+				timeline_extended = true;
 			}}>Show Timeline</button
 		>
 		<Timeline
 			bind:furthest_auto_index
 			bind:held
 			bind:actions
-			bind:displaying={timelineExtended}
+			bind:displaying={timeline_extended}
 		/>
 	{:else}
 		<Postmatch bind:awareness bind:speed bind:broke bind:died bind:notes />

src/routes/scout/[team_data]/AutoActionInputs.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
+	import { ActionInputVerifier } from '$lib/ActionInputStateMachine.svelte';
 	import SuccessFail from '$lib/components/SuccessFail.svelte';
 	import type { AutoAction, AutoInputState, AutoActionData, AutoHeldItems } from '$lib/types';
 
 	let {
 		actions = $bindable(),
+		timeline_extended = $bindable(),
 		held = $bindable(),
 		furthest_auto_index = $bindable(),
 		pageName = $bindable()
 	}: {
 		actions: AutoActionData[];
+		timeline_extended: boolean;
 		held: AutoHeldItems;
 		furthest_auto_index: number;
 		pageName: string;
@@ -54,10 +57,27 @@
 			success: success,
 			ok: true
 		};
-		actions.push(action);
+		actions.splice(furthest_auto_index, 0, action);
 		furthest_auto_index++;
+
+		/// It's possible for a scout to go back and perform an action in auto that isn't valid, this prevents mistakes
+		/// Ideally, the auto state would be preserved and influence the tele state, but not the other way around
+		/// So while validation goes one way now, it really should go the other
+		verify();
+		let ok = true;
+		actions.forEach((action) => (ok &&= action.ok));
+		timeline_extended = !ok;
+
 		actionState = 'None';
 	}
+	function verify() {
+		const action_input_verifier = new ActionInputVerifier();
+		action_input_verifier.verify_actions(actions);
+		// TODO: Fix this horrible and jank solution
+		held = Object.hasOwn(held, 'bunnies')
+			? (action_input_verifier.get_held_auto() as AutoHeldItems)
+			: (action_input_verifier.get_held_tele() as AutoHeldItems);
+	}
 
 	const is_none_state: boolean = $derived(actionState === 'None');
 	const is_intake_state: boolean = $derived(actionState === 'Intake');