From b04f659fa2562b4494c5301afe3ed47cf5ec463d Mon Sep 17 00:00:00 2001
From: "Nate L." <146988904+NateLydem@users.noreply.github.com>
Date: Tue, 5 Nov 2024 00:04:56 +0000
Subject: [PATCH] moved actions to top of timeline (#2)

---
 src/lib/components/Timeline.svelte |  9 +++++----
 src/routes/scout/+page.svelte      | 14 ++++++--------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/Timeline.svelte b/src/lib/components/Timeline.svelte
index 9d6700a..b9821a8 100644
--- a/src/lib/components/Timeline.svelte
+++ b/src/lib/components/Timeline.svelte
@@ -2,15 +2,16 @@
 	import type { ActionData } from '$lib/types';
 	import Action from './Action.svelte';
 
-	let { actions = $bindable() }: { actions: ActionData[] } = $props();
+	let { actions = $bindable() }: { actions: ActionData[] } = $props()
+	let latestActions: ActionData[] = $derived(actions.toReversed().slice(0, 5))
 </script>
 
 <div class="flex flex-col items-center h-[80vh] bg-btn_grey text-text_white p-1 rounded gap-2 w-80">
-	{#each actions as _, i}
+	{#each latestActions as _, i}
 		<Action
-			bind:action={actions[i]}
+			bind:action={latestActions[i]}
 			deleteself={() => {
-				actions.splice(i, 1);
+				actions.splice(actions.indexOf(latestActions[i]), 1);
 			}}
 		/>
 	{/each}
diff --git a/src/routes/scout/+page.svelte b/src/routes/scout/+page.svelte
index 2de844f..cec9c99 100644
--- a/src/routes/scout/+page.svelte
+++ b/src/routes/scout/+page.svelte
@@ -4,19 +4,17 @@
 
 	function addAction() {
 		//everything here is for testing, as there is no system for this yet
-		latestActions.push({ type: actionType.ScoreAnotherRobotsTote, result: actionResult.success });
-		latestActions.push({ type: actionType.EjectTote, result: actionResult.fail });
-		latestActions.push({ type: actionType.IntakeTote, result: actionResult.success });
+		actions.push({ type: actionType.ScoreAnotherRobotsTote, result: actionResult.success });
+		actions.push({ type: actionType.EjectTote, result: actionResult.fail });
+		actions.push({ type: actionType.IntakeTote, result: actionResult.success });
 	}
 
-	let latestActions: ActionData[] = $state([]);
+	let actions: ActionData[] = $state([]);
 </script>
 
 <main class="flex flex-col items-center gap-2 p-2 justify-center h-screen">
-	<Timeline bind:actions={latestActions} />
+	<Timeline bind:actions={actions} />
 
 	<!--to be changed in the future-->
-	<button class="bg-btn_grey w-80 p-1 rounded border-2 border-outline_gray" onclick={addAction}
-		>Add Action</button
-	>
+	<button class="bg-btn_grey w-80 p-1 rounded border-2 border-outline_gray" onclick={addAction}>Add Action</button>
 </main>