From 78f36cc2a4d13b63ae9a028a9b0e1ee3117d7486 Mon Sep 17 00:00:00 2001
From: Azalea Colburn <azalea.colburn@autodesk.com>
Date: Tue, 19 Nov 2024 19:29:50 -0800
Subject: [PATCH] fix: bind held items in timeline modification

---
 src/lib/ActionInputStateMachine.svelte.ts     | 14 ++++
 src/lib/components/Action.svelte              |  2 +-
 src/lib/components/Timeline.svelte            | 22 ++++--
 src/lib/types.ts                              |  6 ++
 src/routes/scout/[team_data]/+page.svelte     | 34 +++++++--
 .../scout/[team_data]/AutoActionInputs.svelte | 46 ++++++------
 .../scout/[team_data]/TeleActionInputs.svelte | 72 +++++++++----------
 7 files changed, 121 insertions(+), 75 deletions(-)

diff --git a/src/lib/ActionInputStateMachine.svelte.ts b/src/lib/ActionInputStateMachine.svelte.ts
index ef2ebd6..c06a3c1 100644
--- a/src/lib/ActionInputStateMachine.svelte.ts
+++ b/src/lib/ActionInputStateMachine.svelte.ts
@@ -5,6 +5,20 @@ export class ActionInputVerifier {
 	private held_balloons: number = 0;
 	private held_totes: number = 0;
 
+	public get_held_tele(): { balloons: number; totes: number } {
+		return {
+			balloons: this.held_balloons,
+			totes: this.held_totes
+		};
+	}
+	public get_held_auto(): { bunnies: number; balloons: number; totes: number } {
+		return {
+			bunnies: this.held_bunnies,
+			balloons: this.held_balloons,
+			totes: this.held_totes
+		};
+	}
+
 	public verify_actions(action_data: AutoActionData[]) {
 		action_data
 			.reverse()
diff --git a/src/lib/components/Action.svelte b/src/lib/components/Action.svelte
index cd2caf7..75bac0f 100644
--- a/src/lib/components/Action.svelte
+++ b/src/lib/components/Action.svelte
@@ -10,7 +10,7 @@
 	}: {
 		action_data: AutoActionData;
 		index: number;
-		shift: (index: number, change: number) => void;
+		shift: (index: number, change: -1 | 1) => void;
 		remove: (index: number) => void;
 	} = $props();
 
diff --git a/src/lib/components/Timeline.svelte b/src/lib/components/Timeline.svelte
index 16ef430..2f212c5 100644
--- a/src/lib/components/Timeline.svelte
+++ b/src/lib/components/Timeline.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
 	import { ActionInputVerifier } from '$lib/ActionInputStateMachine.svelte';
-	import type { AutoActionData } from '$lib/types';
+	import type { AutoActionData, AutoHeldItems, TeleHeldItems } from '$lib/types';
 	import Action from './Action.svelte';
 
 	let {
 		actions = $bindable(),
+		held = $bindable(),
 		displaying = $bindable()
-	}: { actions: AutoActionData[]; displaying: boolean } = $props();
+	}: {
+		actions: AutoActionData[];
+		held: AutoHeldItems | TeleHeldItems;
+		displaying: boolean;
+	} = $props();
 
 	/// Determine if currying is the right solution or if we should use a binding
 	function remove(index: number) {
@@ -14,15 +19,18 @@
 		verify();
 	}
 
-	function shift(index: number, change: number) {
-		let item = actions[index];
-		actions.splice(index, 1);
-		actions.splice(index + change, 0, item);
+	function shift(index: number, change: -1 | 1) {
+		[actions[index], actions[index + change]] = [actions[index + change], actions[index]];
 		verify();
 	}
 
 	function verify() {
-		new ActionInputVerifier().verify_actions(actions);
+		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()
+			: action_input_verifier.get_held_tele();
 	}
 	const is_valid_timeline = $derived(actions.filter((action) => !action.ok).length === 0);
 </script>
diff --git a/src/lib/types.ts b/src/lib/types.ts
index bba036e..a4907ba 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -91,6 +91,12 @@ export type BunnyAction =
 	| 'ScoreBunnyLow';
 export type AutoAction = TeleAction | BunnyAction;
 
+export type TeleHeldItems = {
+	balloons: number;
+	totes: number;
+};
+export type AutoHeldItems = TeleHeldItems & { bunnies: number };
+
 // For state machine
 export type ItemInputState = 'Intake' | 'Score' | 'Eject' | 'None';
 export type TeleInputState = TeleAction | ItemInputState;
diff --git a/src/routes/scout/[team_data]/+page.svelte b/src/routes/scout/[team_data]/+page.svelte
index d038bb8..630a5ce 100644
--- a/src/routes/scout/[team_data]/+page.svelte
+++ b/src/routes/scout/[team_data]/+page.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
-	import type { TeamMatch, AutoActionData, TeleActionData } from '$lib/types';
+	import type {
+		TeamMatch,
+		AutoActionData,
+		TeleActionData,
+		AutoHeldItems,
+		TeleHeldItems
+	} from '$lib/types';
 	import Timeline from '$lib/components/Timeline.svelte';
 	import AutoActionInputs from './AutoActionInputs.svelte';
 	import TeleActionInputs from './TeleActionInputs.svelte';
@@ -12,7 +18,17 @@
 	const scout_id = browser ? (localStorage?.getItem('scout_id') ?? '') : '';
 
 	let autoActions: AutoActionData[] = $state([]);
+	let autoHeld: AutoHeldItems = $state({
+		bunnies: 0,
+		balloons: 0,
+		totes: 0
+	});
 	let teleActions: TeleActionData[] = $state([]);
+	let teleHeld: TeleHeldItems = $state({
+		balloons: 0,
+		totes: 0
+	});
+
 	let timelineExtended = $state(false);
 	let gamePhase = $state('Auto') as 'Auto' | 'Tele' | 'Post';
 	let pageName = $state('');
@@ -53,7 +69,7 @@
 	</div>
 
 	{#if gamePhase === 'Auto'}
-		<AutoActionInputs bind:actions={autoActions} bind:pageName />
+		<AutoActionInputs bind:held={autoHeld} bind:actions={autoActions} bind:pageName />
 		<button
 			class="w-full border-t-2 border-white/10 pt-2 text-center font-semibold"
 			onclick={(e: Event) => {
@@ -61,9 +77,13 @@
 				timelineExtended = true;
 			}}>Show Timeline</button
 		>
-		<Timeline bind:actions={autoActions} bind:displaying={timelineExtended} />
+		<Timeline
+			bind:held={autoHeld}
+			bind:actions={autoActions}
+			bind:displaying={timelineExtended}
+		/>
 	{:else if gamePhase === 'Tele'}
-		<TeleActionInputs bind:actions={teleActions} bind:pageName />
+		<TeleActionInputs bind:held={teleHeld} bind:actions={teleActions} bind:pageName />
 		<button
 			class="w-full border-t-2 border-white/10 pt-2 text-center font-semibold"
 			onclick={(e: Event) => {
@@ -71,7 +91,11 @@
 				timelineExtended = true;
 			}}>Show Timeline</button
 		>
-		<Timeline bind:actions={teleActions} bind:displaying={timelineExtended} />
+		<Timeline
+			bind:held={teleHeld}
+			bind:actions={teleActions}
+			bind:displaying={timelineExtended}
+		/>
 	{:else}
 		<div>Postmatch</div>
 	{/if}
diff --git a/src/routes/scout/[team_data]/AutoActionInputs.svelte b/src/routes/scout/[team_data]/AutoActionInputs.svelte
index 1f3150e..4be02f1 100644
--- a/src/routes/scout/[team_data]/AutoActionInputs.svelte
+++ b/src/routes/scout/[team_data]/AutoActionInputs.svelte
@@ -1,19 +1,17 @@
 <script lang="ts">
 	import SuccessFail from '$lib/components/SuccessFail.svelte';
-	import type { AutoAction, AutoInputState, AutoActionData } from '$lib/types';
+	import type { AutoAction, AutoInputState, AutoActionData, AutoHeldItems } from '$lib/types';
 
 	let {
 		actions = $bindable(),
+		held = $bindable(),
 		pageName = $bindable()
-	}: { actions: AutoActionData[]; pageName: string } = $props();
+	}: { actions: AutoActionData[]; held: AutoHeldItems; pageName: string } = $props();
 
 	let actionState: AutoInputState = $state('None') as AutoInputState;
 
-	let held_bunnies: number = $state(0);
-	let held_balloons: number = $state(0);
-	let held_totes: number = $state(0);
-	const held_scorables: number = $derived(held_balloons + held_bunnies);
-	const held_ejectables: number = $derived(held_scorables + held_totes);
+	const held_scorables: number = $derived(held.balloons + held.bunnies);
+	const held_ejectables: number = $derived(held_scorables + held.totes);
 
 	function intake_piece() {
 		actionState = actionState === 'None' ? 'Intake' : actionState;
@@ -34,16 +32,16 @@
 	function complete(success: boolean) {
 		// Assume that a failure means a note remains where it is
 		if (success) {
-			if (actionState.includes('IntakeBalloon')) held_balloons++;
-			else if (actionState.includes('IntakeBunny')) held_bunnies++;
-			else if (actionState.includes('IntakeTote')) held_totes++;
-			else if (actionState.includes('EjectBalloon')) held_balloons--;
-			else if (actionState.includes('EjectBunny')) held_bunnies--;
-			else if (actionState.includes('EjectTote')) held_totes--;
+			if (actionState.includes('IntakeBalloon')) held.balloons++;
+			else if (actionState.includes('IntakeBunny')) held.bunnies++;
+			else if (actionState.includes('IntakeTote')) held.totes++;
+			else if (actionState.includes('EjectBalloon')) held.balloons--;
+			else if (actionState.includes('EjectBunny')) held.bunnies--;
+			else if (actionState.includes('EjectTote')) held.totes--;
 		}
 		// Assume failed scoring is still ejecting
-		if (actionState.includes('ScoreBalloon')) held_balloons--;
-		else if (actionState.includes('ScoreBunny')) held_bunnies--;
+		if (actionState.includes('ScoreBalloon')) held.balloons--;
+		else if (actionState.includes('ScoreBunny')) held.bunnies--;
 
 		const action: AutoActionData = {
 			action: actionState as AutoAction,
@@ -97,7 +95,7 @@
 		>
 	{:else if is_score_state}
 		<div class="flex w-full flex-grow flex-col items-center gap-2 py-2 text-lg font-bold">
-			{#if held_bunnies > 0}
+			{#if held.bunnies > 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">
@@ -109,7 +107,7 @@
 							onclick={() => score_bunny('UncontrolledTote')}
 							>Uncontrolled Tote</button
 						>
-						{#if held_totes > 0}
+						{#if held.totes > 0}
 							<button
 								class="rounded bg-gunmetal p-2"
 								onclick={() => score_bunny('InternalTote')}
@@ -117,13 +115,13 @@
 							>
 						{/if}
 						<button
-							class="rounded bg-gunmetal p-2 {held_totes <= 0 ? 'col-span-2' : ''}"
+							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}
+			{#if held.balloons > 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">
@@ -135,7 +133,7 @@
 							onclick={() => score_balloon('UncontrolledTote')}
 							>Uncontrolled Tote</button
 						>
-						{#if held_totes > 0}
+						{#if held.totes > 0}
 							<button
 								class="rounded bg-gunmetal p-2"
 								onclick={() => score_balloon('InternalTote')}
@@ -143,7 +141,7 @@
 							>
 						{/if}
 						<button
-							class="rounded bg-gunmetal p-2 {held_totes <= 0 ? 'col-span-2' : ''}"
+							class="rounded bg-gunmetal p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
 							onclick={() => score_balloon('ExternalTote')}
 							>External Held Tote
 						</button>
@@ -156,19 +154,19 @@
 		</div>
 	{:else if is_eject_state}
 		<div class="grid w-full flex-grow grid-flow-row gap-2 py-2 font-bold">
-			{#if held_bunnies > 0}
+			{#if held.bunnies > 0}
 				<button
 					class="w-full rounded bg-gunmetal p-2"
 					onclick={() => (actionState = 'EjectBunny')}>Bunny</button
 				>
 			{/if}
-			{#if held_balloons > 0}
+			{#if held.balloons > 0}
 				<button
 					class="w-full rounded bg-gunmetal p-2"
 					onclick={() => (actionState = 'EjectBalloon')}>Ballon</button
 				>
 			{/if}
-			{#if held_totes > 0}
+			{#if held.totes > 0}
 				<button
 					class="w-full rounded bg-gunmetal p-2"
 					onclick={() => (actionState = 'EjectTote')}>Tote</button
diff --git a/src/routes/scout/[team_data]/TeleActionInputs.svelte b/src/routes/scout/[team_data]/TeleActionInputs.svelte
index 5eed401..d6f3e75 100644
--- a/src/routes/scout/[team_data]/TeleActionInputs.svelte
+++ b/src/routes/scout/[team_data]/TeleActionInputs.svelte
@@ -1,17 +1,16 @@
 <script lang="ts">
 	import SuccessFail from '$lib/components/SuccessFail.svelte';
-	import type { TeleAction, TeleInputState, TeleActionData } from '$lib/types';
+	import type { TeleAction, TeleInputState, TeleActionData, TeleHeldItems } from '$lib/types';
 
 	let {
 		actions = $bindable(),
+		held = $bindable(),
 		pageName = $bindable()
-	}: { actions: TeleActionData[]; pageName: string } = $props();
+	}: { actions: TeleActionData[]; held: TeleHeldItems; pageName: string } = $props();
 
 	let actionState: TeleInputState = $state('None') as TeleInputState;
 
-	let held_balloons: number = $state(0);
-	let held_totes: number = $state(0);
-	const held_ejectables: number = $derived(held_balloons + held_totes);
+	const held_ejectables: number = $derived(held.balloons + held.totes);
 
 	function intake_piece() {
 		actionState = actionState === 'None' ? 'Intake' : actionState;
@@ -29,13 +28,13 @@
 	function complete(success: boolean) {
 		// Assume that a failure means a note remains where it is
 		if (success) {
-			if (actionState.includes('IntakeBalloon')) held_balloons++;
-			else if (actionState.includes('IntakeTote')) held_totes++;
-			else if (actionState.includes('EjectBalloon')) held_balloons--;
-			else if (actionState.includes('EjectTote')) held_totes--;
+			if (actionState.includes('IntakeBalloon')) held.balloons++;
+			else if (actionState.includes('IntakeTote')) held.totes++;
+			else if (actionState.includes('EjectBalloon')) held.balloons--;
+			else if (actionState.includes('EjectTote')) held.totes--;
 		}
 		// Assume failed scoring is still ejecting
-		if (actionState.includes('ScoreBalloon')) held_balloons--;
+		if (actionState.includes('ScoreBalloon')) held.balloons--;
 
 		const action: TeleActionData = {
 			action: actionState as TeleAction,
@@ -60,7 +59,7 @@
 	{#if is_none_state}
 		<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_balloons > 0}
+			{#if held.balloons > 0}
 				<button class="rounded bg-gunmetal p-2" onclick={score_piece}>Score</button>
 			{/if}
 			{#if held_ejectables > 0}
@@ -69,8 +68,9 @@
 		</div>
 	{:else if is_intake_state}
 		<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 = 'IntakeTote')}
-				>Tote</button
+			<button
+				class="col-span-2 rounded bg-gunmetal p-2"
+				onclick={() => (actionState = 'IntakeTote')}>Tote</button
 			>
 			<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeBalloon')}
 				>Balloon: Ground</button
@@ -86,46 +86,42 @@
 		>
 	{:else if is_score_state}
 		<div class="flex w-full flex-grow flex-col items-center gap-2 py-2 text-lg font-bold">
-			{#if held_balloons > 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
-						>
+			<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('UncontrolledTote')}>Uncontrolled Tote</button
+					>
+					{#if held.totes > 0}
 						<button
 							class="rounded bg-gunmetal p-2"
-							onclick={() => score_balloon('UncontrolledTote')}
-							>Uncontrolled Tote</button
+							onclick={() => score_balloon('InternalTote')}>Internal 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>
+					{/if}
+					<button
+						class="rounded bg-gunmetal p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
+						onclick={() => score_balloon('ExternalTote')}
+						>External Held Tote
+					</button>
 				</div>
-			{/if}
+			</div>
 			<button class="w-full rounded bg-gunmetal p-2" onclick={() => (actionState = 'None')}
 				>Cancel</button
 			>
 		</div>
 	{:else if is_eject_state}
 		<div class="grid w-full flex-grow grid-flow-row gap-2 py-2 font-bold">
-			{#if held_balloons > 0}
+			{#if held.balloons > 0}
 				<button
 					class="w-full rounded bg-gunmetal p-2"
 					onclick={() => (actionState = 'EjectBalloon')}>Ballon</button
 				>
 			{/if}
-			{#if held_totes > 0}
+			{#if held.totes > 0}
 				<button
 					class="w-full rounded bg-gunmetal p-2"
 					onclick={() => (actionState = 'EjectTote')}>Tote</button