Timeline Modification Verification (#11)

* feat(wip): started action input state machine class

* style: format files

* feat: basic timeline warning system

* style: format files

* fix: move action arrows

* feat: user cannot close invalid timeline

---------

Co-authored-by: azaleacolburn <[email protected]>

src/lib/ActionInputStateMachine.svelte.ts

@@ -0,0 +1,32 @@
+import type { AutoActionData } from '$lib/types';
+
+export class ActionInputVerifier {
+	private held_bunnies: number = 0;
+	private held_balloons: number = 0;
+	private held_totes: number = 0;
+
+	public verify_actions(action_data: AutoActionData[]) {
+		action_data
+			.reverse()
+			.forEach((action_data) => (action_data.ok = this.verify_new_action(action_data)));
+	}
+
+	// Takes an action and returns if it's a legal one
+	verify_new_action(action_data: AutoActionData): boolean {
+		const success = action_data.success;
+		const action = action_data.action;
+		if (success) {
+			if (action.includes('IntakeBalloon')) this.held_balloons++;
+			else if (action.includes('IntakeBunny')) this.held_bunnies++;
+			else if (action.includes('IntakeTote')) this.held_totes++;
+			else if (action.includes('EjectBalloon')) this.held_balloons--;
+			else if (action.includes('EjectBunny')) this.held_bunnies--;
+			else if (action.includes('EjectTote')) this.held_totes--;
+		}
+		if (action.includes('ScoreBalloon')) this.held_balloons--;
+		else if (action.includes('ScoreBunny')) this.held_bunnies--;
+
+		if (action.includes('Intake')) return true;
+		return this.held_balloons >= 0 && this.held_bunnies >= 0 && this.held_totes >= 0;
+	}
+}

src/lib/components/Action.svelte

@@ -26,6 +26,9 @@
 >
 	<span class="w-auto shrink text-clip">{action_data.action}</span>
 	<div class="flex shrink-0 flex-row content-center justify-end gap-4">
+		{#if !action_data.ok}
+			<span class="text-yellow-400">Warning</span>
+		{/if}
 		<button
 			class="group-first:pointer-events-none group-first:opacity-30"
 			onclick={() => shift(index, -1)}

src/lib/components/Timeline.svelte

@@ -1,36 +1,51 @@
 <script lang="ts">
+	import { ActionInputVerifier } from '$lib/ActionInputStateMachine.svelte';
 	import type { AutoActionData } from '$lib/types';
 	import Action from './Action.svelte';
 
 	let {
 		actions = $bindable(),
 		displaying = $bindable()
 	}: { actions: AutoActionData[]; displaying: boolean } = $props();
-	// let latestActions: AutoActionData[] = $derived(actions.toReversed().slice(0, 5));
 
-	const remove = (index: number) => {
+	/// Determine if currying is the right solution or if we should use a binding
+	function remove(index: number) {
 		actions.splice(index, 1);
-	};
+		verify();
+	}
 
-	const shift = (index: number, change: number) => {
+	function shift(index: number, change: number) {
 		let item = actions[index];
 		actions.splice(index, 1);
 		actions.splice(index + change, 0, item);
-	};
+		verify();
+	}
+
+	function verify() {
+		new ActionInputVerifier().verify_actions(actions);
+	}
+	const is_valid_timeline = $derived(actions.filter((action) => !action.ok).length === 0);
 </script>
 
 <button
 	class="fixed inset-0 transition-all {displaying ? 'backdrop-blur' : 'translate-y-full'}"
 	onclick={(e: Event) => {
-		if (e.target === e.currentTarget) displaying = false;
+		if (e.target === e.currentTarget && is_valid_timeline) {
+			displaying = false;
+		}
 	}}
 >
 	<div
 		class="absolute inset-x-0 bottom-0 flex h-[50dvh] w-dvw flex-col items-center gap-3 rounded-t-lg bg-gunmetal p-3 text-white"
 		id="timeline"
 	>
 		{#each actions as _, i}
-			<Action action_data={actions[i]} index={i} {remove} {shift} />
+			<Action
+				action_data={actions[actions.length - i - 1]}
+				index={actions.length - i - 1}
+				{remove}
+				{shift}
+			/>
 		{/each}
 		{#if actions.length === 0}
 			<h3 class="m-auto">No actions yet :3</h3>

src/lib/types.ts

@@ -12,20 +12,6 @@ export type User = {
 };
 
 /// Counts
-export type AutoActionsTM = ActionsTM & {
-	bunny_intake_success: number;
-	bunny_intake_failure: number;
-	bunny_tote_success: number;
-	bunny_tote_failure: number;
-	bunny_low_success: number;
-	bunny_low_failure: number;
-	actions: AutoActionData[];
-};
-
-export type TeleActionsTM = ActionsTM & {
-	actions: TeleActionData[];
-};
-
 export type ActionsTM = {
 	id: number;
 	tote_intake_success: number;
@@ -44,6 +30,20 @@ export type ActionsTM = {
 	score_other_robot_failure: number;
 };
 
+export type AutoActionsTM = ActionsTM & {
+	bunny_intake_success: number;
+	bunny_intake_failure: number;
+	bunny_tote_success: number;
+	bunny_tote_failure: number;
+	bunny_low_success: number;
+	bunny_low_failure: number;
+	actions: AutoActionData[];
+};
+
+export type TeleActionsTM = ActionsTM & {
+	actions: TeleActionData[];
+};
+
 export type TeamMatch = {
 	id: number;
 	scout_id: string;
@@ -57,14 +57,16 @@ export type TeamMatch = {
 	tele_actions: TeleActionData[];
 };
 
-export type AutoActionData = {
-	action: AutoAction;
+export type TeleActionData = {
+	action: TeleAction;
 	success: boolean;
+	ok: boolean;
 };
 
-export type TeleActionData = {
-	action: TeleAction;
+export type AutoActionData = {
+	action: AutoAction;
 	success: boolean;
+	ok: boolean;
 };
 
 // Action Types

src/routes/scout/ActionInputs.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import SuccessFail from '$lib/components/SuccessFail.svelte';
 	import type { AutoAction, AutoInputState, AutoActionData } from '$lib/types';
-	import { derived } from 'svelte/store';
 
 	let {
 		actions = $bindable(),
@@ -48,9 +47,10 @@
 
 		const action: AutoActionData = {
 			action: actionState as AutoAction,
-			success: success
+			success: success,
+			ok: true
 		};
-		actions.unshift(action); // TODO: Make sure unshift works
+		actions.push(action);
 		actionState = 'None';
 	}