From 1056057293f2b29eb9bebe7615bdb2a0717fbc58 Mon Sep 17 00:00:00 2001
From: awwpotato <awwpotato@voidq.com>
Date: Tue, 19 Nov 2024 10:54:28 -1000
Subject: [PATCH] feat: move page title + styling fixes

---
 src/routes/scout/+page.svelte        |   8 +-
 src/routes/scout/ActionInputs.svelte | 184 ++++++++++++++-------------
 2 files changed, 105 insertions(+), 87 deletions(-)

diff --git a/src/routes/scout/+page.svelte b/src/routes/scout/+page.svelte
index 7491f7b..7e480ec 100644
--- a/src/routes/scout/+page.svelte
+++ b/src/routes/scout/+page.svelte
@@ -11,6 +11,7 @@
 
 	let actions: AutoActionData[] = $state([]);
 	let timelineExtended = $state(false);
+	let pageName = $state('');
 
 	const match: TeamMatch = $state({
 		id: 0,
@@ -27,9 +28,12 @@
 </script>
 
 <div class="m-auto flex h-dvh max-w-md flex-col items-center gap-2 p-2">
-	<span class="w-full border-b-2 border-white/10 pb-2 font-semibold">Team {team_key}</span>
+	<div class="flex w-full justify-between border-b-2 border-white/10 pb-2 font-semibold">
+		<span class="flex-grow">Team {team_key}</span>
+		<span class="flex-grow text-right">{pageName}</span>
+	</div>
 
-	<ActionInputs bind:actions />
+	<ActionInputs bind:actions bind:pageName />
 
 	<button
 		class="w-full border-t-2 border-white/10 pt-2 text-center font-semibold"
diff --git a/src/routes/scout/ActionInputs.svelte b/src/routes/scout/ActionInputs.svelte
index d92d6c3..2ebe4e1 100644
--- a/src/routes/scout/ActionInputs.svelte
+++ b/src/routes/scout/ActionInputs.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import SuccessFail from '$lib/components/SuccessFail.svelte';
 	import type { AutoAction, AutoInputState, AutoActionData } from '$lib/types';
+	import { derived } from 'svelte/store';
 
-	const { actions = $bindable() }: { actions: AutoActionData[] } = $props();
+	let {
+		actions = $bindable(),
+		pageName = $bindable()
+	}: { actions: AutoActionData[]; pageName: string } = $props();
 
 	let actionState: AutoInputState = $state('None') as AutoInputState;
 
@@ -54,13 +58,23 @@
 	const is_intake_state: boolean = $derived(actionState === 'Intake');
 	const is_score_state: boolean = $derived(actionState === 'Score');
 	const is_eject_state = $derived(actionState === 'Eject');
+
+	$effect(() => {
+		pageName = is_none_state
+			? 'Home'
+			: is_intake_state
+				? 'Intake'
+				: is_score_state
+					? 'Score'
+					: is_eject_state
+						? 'Eject'
+						: '';
+	});
 </script>
 
-<div class="align-center flex min-w-[60%] flex-grow flex-col">
+<div class="align-center flex w-full max-w-md flex-grow flex-col px-2">
 	{#if is_none_state}
-		<div
-			class="-ml-12 -mr-12 mb-2 mt-2 grid flex-grow grid-cols-1 grid-rows-3 gap-2 text-2xl font-bold"
-		>
+		<div class="grid flex-grow grid-cols-1 grid-rows-3 gap-2 py-2 text-2xl font-bold">
 			<button class="rounded bg-gunmetal p-2" onclick={intake_piece}>Intake</button>
 			{#if held_scorables > 0}
 				<button class="rounded bg-gunmetal p-2" onclick={score_piece}>Score</button>
@@ -70,75 +84,78 @@
 			{/if}
 		</div>
 	{:else if is_intake_state}
-		<div class="flex flex-grow flex-col items-center gap-4">
-			<h1 class="text-xl font-bold">Intake</h1>
-			<div class="-mt-2 grid flex-grow grid-cols-2 grid-rows-2 gap-2 text-xl">
-				<button
-					class="rounded bg-gunmetal p-2"
-					onclick={() => (actionState = 'IntakeBunny')}>Bunny</button
-				>
-				<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeTote')}
-					>Tote</button
-				>
-				<button
-					class="rounded bg-gunmetal p-2"
-					onclick={() => (actionState = 'IntakeBalloon')}>Balloon: Ground</button
-				>
-				<button
-					class="rounded bg-gunmetal p-2"
-					onclick={() => (actionState = 'IntakeBalloonCoral')}>Ballon: Coral</button
-				>
-			</div>
+		<div class="grid w-full flex-grow grid-cols-2 grid-rows-2 gap-2 py-2 text-xl font-bold">
+			<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeBunny')}
+				>Bunny</button
+			>
+			<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeTote')}
+				>Tote</button
+			>
+			<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeBalloon')}
+				>Balloon: Ground</button
+			>
 			<button
-				class="w-full rounded bg-gunmetal p-2 text-xl"
-				onclick={() => (actionState = 'None')}>Cancel</button
+				class="rounded bg-gunmetal p-2"
+				onclick={() => (actionState = 'IntakeBalloonCoral')}>Ballon: Coral</button
 			>
 		</div>
+		<button
+			class="w-full rounded bg-gunmetal p-2 text-xl"
+			onclick={() => (actionState = 'None')}>Cancel</button
+		>
 	{:else if is_score_state}
-		<div class="flex flex-grow flex-col items-center gap-4 text-lg">
+		<div class="flex w-full flex-grow flex-col items-center gap-2 py-2 text-lg font-bold">
 			{#if held_bunnies > 0}
-				<h1 class="font-bold">Score Bunny</h1>
-				<div class="-mt-2 grid flex-grow grid-cols-2 grid-rows-2 gap-2">
-					<button class="rounded bg-gunmetal p-2" onclick={() => score_bunny('Low')}
-						>Low Zone</button
-					>
-					<button
-						class="rounded bg-gunmetal p-2"
-						onclick={() => score_bunny('UncontrolledTote')}>Uncontrolled Tote</button
-					>
-					{#if held_totes > 0}
+				<div class="flex w-full flex-grow flex-col items-center gap-2 text-lg">
+					<h1>Bunny</h1>
+					<div class="grid w-full flex-grow grid-cols-2 grid-rows-2 gap-2">
+						<button class="rounded bg-gunmetal p-2" onclick={() => score_bunny('Low')}
+							>Low Zone</button
+						>
 						<button
 							class="rounded bg-gunmetal p-2"
-							onclick={() => score_bunny('InternalTote')}>Internal Held Tote</button
+							onclick={() => score_bunny('UncontrolledTote')}
+							>Uncontrolled Tote</button
+						>
+						{#if held_totes > 0}
+							<button
+								class="rounded bg-gunmetal p-2"
+								onclick={() => score_bunny('InternalTote')}
+								>Internal Held Tote</button
+							>
+						{/if}
+						<button
+							class="rounded bg-gunmetal p-2 {held_totes <= 0 ? 'col-span-2' : ''}"
+							onclick={() => score_bunny('ExternalTote')}>External Held Tote</button
 						>
-					{/if}
-					<button
-						class="rounded bg-gunmetal p-2 {held_totes <= 0 ? 'col-span-2' : ''}"
-						onclick={() => score_bunny('ExternalTote')}>External Held Tote</button
-					>
+					</div>
 				</div>
 			{/if}
 			{#if held_balloons > 0}
-				<h1 class="font-bold">Score Ballon</h1>
-				<div class="-mt-2 grid flex-grow grid-cols-2 grid-rows-2 gap-2">
-					<button class="rounded bg-gunmetal p-2" onclick={() => score_balloon('Low')}
-						>Low Zone</button
-					>
-					<button
-						class="rounded bg-gunmetal p-2"
-						onclick={() => score_balloon('UncontrolledTote')}>Uncontrolled Tote</button
-					>
-					{#if held_totes > 0}
+				<div class="flex w-full flex-grow flex-col items-center gap-2 py-2 text-lg">
+					<h1>Ballon</h1>
+					<div class="grid w-full flex-grow grid-cols-2 grid-rows-2 gap-2">
+						<button class="rounded bg-gunmetal p-2" onclick={() => score_balloon('Low')}
+							>Low Zone</button
+						>
 						<button
 							class="rounded bg-gunmetal p-2"
-							onclick={() => score_balloon('InternalTote')}>Internal Held Tote</button
+							onclick={() => score_balloon('UncontrolledTote')}
+							>Uncontrolled Tote</button
 						>
-					{/if}
-					<button
-						class="rounded bg-gunmetal p-2 {held_totes <= 0 ? 'col-span-2' : ''}"
-						onclick={() => score_balloon('ExternalTote')}
-						>External Held Tote
-					</button>
+						{#if held_totes > 0}
+							<button
+								class="rounded bg-gunmetal p-2"
+								onclick={() => score_balloon('InternalTote')}
+								>Internal Held Tote</button
+							>
+						{/if}
+						<button
+							class="rounded bg-gunmetal p-2 {held_totes <= 0 ? 'col-span-2' : ''}"
+							onclick={() => score_balloon('ExternalTote')}
+							>External Held Tote
+						</button>
+					</div>
 				</div>
 			{/if}
 			<button class="w-full rounded bg-gunmetal p-2" onclick={() => (actionState = 'None')}
@@ -146,32 +163,29 @@
 			>
 		</div>
 	{:else if is_eject_state}
-		<div class="-ml-12 -mr-12 flex flex-grow flex-col items-center gap-4 text-xl">
-			<h2 class="font-bold">Eject</h2>
-			<div class="mb-2 mt-2 grid w-full flex-grow grid-flow-row gap-2">
-				{#if held_bunnies > 0}
-					<button
-						class="w-full rounded bg-gunmetal p-2"
-						onclick={() => (actionState = 'EjectBunny')}>Bunny</button
-					>
-				{/if}
-				{#if held_balloons > 0}
-					<button
-						class="w-full rounded bg-gunmetal p-2"
-						onclick={() => (actionState = 'EjectBalloon')}>Ballon</button
-					>
-				{/if}
-				{#if held_totes > 0}
-					<button
-						class="w-full rounded bg-gunmetal p-2"
-						onclick={() => (actionState = 'EjectTote')}>Tote</button
-					>
-				{/if}
-			</div>
-			<button class="w-full rounded bg-gunmetal p-2" onclick={() => (actionState = 'None')}
-				>Cancel</button
-			>
+		<div class="grid w-full flex-grow grid-flow-row gap-2 py-2 font-bold">
+			{#if held_bunnies > 0}
+				<button
+					class="w-full rounded bg-gunmetal p-2"
+					onclick={() => (actionState = 'EjectBunny')}>Bunny</button
+				>
+			{/if}
+			{#if held_balloons > 0}
+				<button
+					class="w-full rounded bg-gunmetal p-2"
+					onclick={() => (actionState = 'EjectBalloon')}>Ballon</button
+				>
+			{/if}
+			{#if held_totes > 0}
+				<button
+					class="w-full rounded bg-gunmetal p-2"
+					onclick={() => (actionState = 'EjectTote')}>Tote</button
+				>
+			{/if}
 		</div>
+		<button class="w-full rounded bg-gunmetal p-2" onclick={() => (actionState = 'None')}
+			>Cancel</button
+		>
 	{:else}
 		<SuccessFail
 			{complete}