Style Action Input Screen and Timeline (#9)

* feat: type model for scouting system

* chore: update svelte

* feat: add none

* refactor: type state model

* feat: state transforms

* add successfail screen

* theme fixes

* fix: package.json

* fix: formating

* fix: dependencies

* format thingy

* refactor: update types to match new schema

* fix: id after clarifying with Brandon

* update dep

* style: format files

* refactor: action input state machine into component

* feat: make cancel buttons go back one level

* fix: actions display on timeline

* feat: piece specific error prevention

* feat: ejectables!

* fix: name in pkg.json + update dep

* style: format files

* feat: update colorsceme

* feat: timeline popup above contents

* feat: better timeline thingy

* style: format files

* feat: timeline reorder + styling

* format: prettier tailwind reorder thingy

* style: format files

* feat: some small styling tweaks

* fix: make successfail work on all screen sizes

* feat: more updating styling

* fix: success vs. failure logic

* feat: make timeline grow up

* feat: full-size buttons on ActionInput screen

* feat: move page title + styling fixes

* fix: better pageName handling

* style: format files

---------

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

.prettierrc

@@ -3,6 +3,6 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

package.json

@@ -30,5 +30,8 @@
 		"typescript": "^5.6.3",
 		"typescript-eslint": "^8.14.0",
 		"vite": "^5.4.11"
+	},
+	"dependencies": {
+		"lucide-svelte": "^0.456.0"
 	}
 }

src/lib/components/Action.svelte

@@ -1,25 +1,45 @@
 <script lang="ts">
 	import type { AutoActionData } from '$lib/types';
+	import { MoveUp, MoveDown, X } from 'lucide-svelte';
 
 	let {
 		action_data = $bindable(),
-		deleteself
-	}: { action_data: AutoActionData; deleteself: () => void } = $props();
+		index,
+		shift,
+		remove
+	}: {
+		action_data: AutoActionData;
+		index: number;
+		shift: (index: number, change: number) => void;
+		remove: (index: number) => void;
+	} = $props();
 
-	//let actionBorderColor = $derived(action.success ? 'border-cresc_green' : 'border-fail_red');
-	let actionBackgroundColor = $derived(action_data.success ? 'bg-cresc_green' : 'bg-fail_red');
+	let color = $derived(
+		action_data.success
+			? 'bg-jungle_green/50 shadow-jungle_green/10'
+			: 'bg-flaming_red/50 shadow-flaming_red/10'
+	);
 </script>
 
-<!-- <button -->
-<!-- 	class="{actionBorderColor} w-full p-1 rounded border-2 text-text_yellow" -->
-<!-- 	onclick={deleteself} -->
-<!-- > -->
-<!-- 	{action.type} -->
-<!-- </button> -->
-
-<button
-	class="{actionBackgroundColor} w-full p-1 rounded border-2 border-outline_gray text-text_white"
-	onclick={deleteself}
+<div
+	class="group flex flex-row content-center justify-between {color} w-full rounded p-2 text-white shadow-lg"
 >
-	{action_data.action}
-</button>
+	<span class="w-auto shrink text-clip">{action_data.action}</span>
+	<div class="flex shrink-0 flex-row content-center justify-end gap-4">
+		<button
+			class="group-first:pointer-events-none group-first:opacity-30"
+			onclick={() => shift(index, -1)}
+		>
+			<MoveUp />
+		</button>
+		<button
+			class="group-last:pointer-events-none group-last:opacity-30"
+			onclick={() => shift(index, 1)}
+		>
+			<MoveDown />
+		</button>
+		<button onclick={() => remove(index)}>
+			<X />
+		</button>
+	</div>
+</div>

src/lib/components/SuccessFail.svelte

@@ -3,19 +3,21 @@
 		$props();
 </script>
 
-<div
-	class="bg-zinc-800 text-zinc-50 text-xl font-extrabold fixed inset-0 grid grid-cols-2 grid-rows-3 gap-4 p-4"
->
-	<button
-		class="rounded-lg row-span-2 shadow-lg shadow-green-600/50 bg-green-600"
-		onclick={() => complete(true)}>Success</button
-	>
-	<button
-		class="rounded-lg row-span-2 shadow-lg shadow-red-600/50 bg-red-600"
-		onclick={() => complete(false)}>Fail</button
-	>
-	<button
-		class="rounded-lg col-span-2 shadow-lg shadow-zinc-600/50 bg-zinc-600"
-		onclick={() => cancel()}>Cancel</button
+<div class="fixed inset-0 flex items-center justify-center bg-eerie_black">
+	<div
+		class="grid h-dvh max-h-[48rem] w-dvw max-w-96 grid-cols-2 grid-rows-4 gap-4 p-4 text-xl font-extrabold text-white"
 	>
+		<button
+			class="row-span-3 rounded-lg bg-jungle_green shadow-lg shadow-jungle_green/50"
+			onclick={() => complete(true)}>Success</button
+		>
+		<button
+			class="row-span-3 rounded-lg bg-flaming_red shadow-lg shadow-flaming_red/50"
+			onclick={() => complete(false)}>Fail</button
+		>
+		<button
+			class="col-span-2 rounded-lg bg-gunmetal shadow-lg shadow-gunmetal/50"
+			onclick={() => cancel()}>Cancel</button
+		>
+	</div>
 </div>

src/lib/components/Timeline.svelte

@@ -2,15 +2,38 @@
 	import type { AutoActionData } from '$lib/types';
 	import Action from './Action.svelte';
 
-	let { actions = $bindable() }: { actions: AutoActionData[] } = $props();
+	let {
+		actions = $bindable(),
+		displaying = $bindable()
+	}: { actions: AutoActionData[]; displaying: boolean } = $props();
 	// let latestActions: AutoActionData[] = $derived(actions.toReversed().slice(0, 5));
+
+	const remove = (index: number) => {
+		actions.splice(index, 1);
+	};
+
+	const shift = (index: number, change: number) => {
+		let item = actions[index];
+		actions.splice(index, 1);
+		actions.splice(index + change, 0, item);
+	};
 </script>
 
-{#each actions as _, i}
-	<Action
-		action_data={actions[i]}
-		deleteself={() => {
-			actions.splice(actions.indexOf(actions[i]), 1);
-		}}
-	/>
-{/each}
+<button
+	class="fixed inset-0 transition-all {displaying ? 'backdrop-blur' : 'translate-y-full'}"
+	onclick={(e: Event) => {
+		if (e.target === e.currentTarget) 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} />
+		{/each}
+		{#if actions.length === 0}
+			<h3 class="m-auto">No actions yet :3</h3>
+		{/if}
+	</div>
+</button>

src/routes/+layout.svelte

@@ -7,6 +7,6 @@
 
 <style lang="postcss">
 	:global(body) {
-		@apply bg-zinc-800;
+		@apply bg-eerie_black text-white;
 	}
 </style>

src/routes/+page.svelte

@@ -1,6 +1,9 @@
-<div class="flex flex-col items-center justify-evenly h-dvh text-text_white">
+<div class="flex h-dvh flex-col items-center justify-evenly">
 	<h1 class="text-center text-5xl font-bold">hiiii :3</h1>
-	<a class="text-center text-2xl rounded bg-btn_grey px-4 py-2 font-bold" href="/scout">
+	<a
+		class="rounded bg-gunmetal px-4 py-2 text-center text-2xl font-bold text-yolk_yellow"
+		href="/scout"
+	>
 		scout
 	</a>
 </div>

src/routes/scout/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type TeamMatch, type AutoActionData } from '$lib/types';
+	import type { TeamMatch, AutoActionData } from '$lib/types';
 	import Timeline from '$lib/components/Timeline.svelte';
 	import ActionInputs from './ActionInputs.svelte';
 
@@ -11,6 +11,7 @@
 
 	let actions: AutoActionData[] = $state([]);
 	let timelineExtended = $state(false);
+	let pageName = $state('');
 
 	const match: TeamMatch = $state({
 		id: 0,
@@ -26,24 +27,20 @@
 	});
 </script>
 
-<div class="grid grid-row-10 text-zinc-50 p-2 h-svh place-items-center">
-	<h1 class="row-span-1 text-center font-bold pb-2 h-5">Team {team_key}</h1>
-	{#if timelineExtended}
-		<div class="row-span-8">
-			<Timeline bind:actions />
-		</div>
-		<button
-			class="row-span-1 bg-btn_grey h-10 w-80 p-1 rounded border-2 border-outline_gray static"
-			onclick={() => (timelineExtended = false)}>Hide Timeline</button
-		>
-	{:else}
-		<div class="row-span-8">
-			<ActionInputs bind:actions />
-		</div>
+<div class="m-auto flex h-dvh max-w-md flex-col items-center gap-2 p-2">
+	<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>
 
-		<button
-			class="row-span-1 bg-btn_grey h-10 w-80 p-1 rounded border-2 border-outline_gray static"
-			onclick={() => (timelineExtended = true)}>Show Timeline</button
-		>
-	{/if}
+	<ActionInputs bind:actions bind:pageName />
+
+	<button
+		class="w-full border-t-2 border-white/10 pt-2 text-center font-semibold"
+		onclick={(e: Event) => {
+			e.stopPropagation();
+			timelineExtended = true;
+		}}>Show Timeline</button
+	>
+	<Timeline bind:actions bind:displaying={timelineExtended} />
 </div>