Action Input Grid (#6)

* 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

---------

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

.prettierrc

@@ -4,6 +4,5 @@
 	"trailingComma": "none",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

package.json

@@ -1,38 +1,34 @@
 {
-	"name": "floatingchickens",
+	"name": "inflatedchickens",
 	"version": "0.0.1",
-	"private": true,
+	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/kit": "^2.7.4",
-		"@typescript-eslint/eslint-plugin": "^8.13.0",
-		"@typescript-eslint/parser": "^8.13.0",
+		"@sveltejs/kit": "^2.8.1",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@types/eslint": "^9.6.1",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.14.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.0",
-		"postcss": "^8.4.47",
+		"globals": "^15.12.0",
 		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.7",
-		"svelte": "^5.1.9",
-		"svelte-check": "^4.0.5",
+		"prettier-plugin-svelte": "^3.2.8",
+		"prettier-plugin-tailwindcss": "^0.6.8",
+		"svelte": "^5.1.16",
+		"svelte-check": "^4.0.7",
 		"tailwindcss": "^3.4.14",
-		"tslib": "^2.8.1",
 		"typescript": "^5.6.3",
-		"vite": "^5.4.10"
-	},
-	"type": "module",
-	"dependencies": {
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
-		"svelte-kit": "^1.2.0"
+		"typescript-eslint": "^8.14.0",
+		"vite": "^5.4.11"
 	}
 }

src/lib/components/Action.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
-	import type { ActionData } from '$lib/types';
+	import type { AutoActionData } from '$lib/types';
 
-	let { action = $bindable(), deleteself }: { action: ActionData; deleteself: () => void } =
-		$props();
+	let {
+		action_data = $bindable(),
+		deleteself
+	}: { action_data: AutoActionData; deleteself: () => void } = $props();
 
-	let actionBorderColor = $derived(
-		action.result === 'success' ? 'border-cresc_green' : 'border-fail_red'
-	);
-	let actionBackgroundColor = $derived(
-		action.result === 'success' ? 'bg-cresc_green' : 'bg-fail_red'
-	);
+	//let actionBorderColor = $derived(action.success ? 'border-cresc_green' : 'border-fail_red');
+	let actionBackgroundColor = $derived(action_data.success ? 'bg-cresc_green' : 'bg-fail_red');
 </script>
 
 <!-- <button -->
@@ -23,5 +21,5 @@
 	class="{actionBackgroundColor} w-full p-1 rounded border-2 border-outline_gray text-text_white"
 	onclick={deleteself}
 >
-	{action.type}
+	{action_data.action}
 </button>

src/lib/components/SuccessFail.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	let { complete, cancel }: { complete: (success: boolean) => void; cancel: () => void } =
+		$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>

src/lib/components/Timeline.svelte

@@ -1,35 +1,16 @@
 <script lang="ts">
-	import type { ActionData } from '$lib/types';
+	import type { AutoActionData } from '$lib/types';
 	import Action from './Action.svelte';
 
-	let {
-		actions = $bindable(),
-		displaying = $bindable()
-	}: { actions: ActionData[]; displaying: boolean } = $props();
-	// let latestActions: ActionData[] = $derived(actions.toReversed().slice(0, 5));
+	let { actions = $bindable() }: { actions: AutoActionData[] } = $props();
+	// let latestActions: AutoActionData[] = $derived(actions.toReversed().slice(0, 5));
 </script>
 
-<h1 class="text-text_red">Timeline</h1>
-<div
-	class="flex flex-col items-center bg-btn_grey text-text_white p-1 rounded-t-lg transition-transform gap-2 fixed h-[50svh] inset-x-0 bottom-0
-{displaying ? '' : 'translate-y-full'}"
-	id="timeline"
->
-	<button
-		class="bg-btn_grey w-80 p-1 rounded border-2 border-outline_gray fixed bottom-0"
-		onclick={() => {
-			displaying = false;
+{#each actions as _, i}
+	<Action
+		action_data={actions[i]}
+		deleteself={() => {
+			actions.splice(actions.indexOf(actions[i]), 1);
 		}}
-	>
-		Hide Timeline
-	</button>
-
-	{#each actions as _, i}
-		<Action
-			bind:action={actions[i]}
-			deleteself={() => {
-				actions.splice(actions.indexOf(actions[i]), 1);
-			}}
-		/>
-	{/each}
-</div>
+	/>
+{/each}

src/lib/types.ts

@@ -1,19 +1,95 @@
-export enum actionType {
-	IntakeTote = 'Intake Tote',
-	EjectTote = 'Eject Tote',
-	IntakeBalloon = 'Intake Balloon',
-	ScoreLow = 'Score Low',
-	ScoreExternalTote = 'Score External Tote',
-	ScoreInternalTote = 'Score Internal Tote',
-	ScoreAnotherRobotsTote = 'Score Another Robots Tote'
-}
-
-export enum actionResult {
-	success = 'success',
-	fail = 'fail'
-}
-
-export type ActionData = {
-	type: actionType;
-	result: actionResult;
+// For DB
+export type Match = {
+	match_key: string;
+	event_key: string;
 };
+
+export type User = {
+	id: string;
+	name: string;
+	is_admin: boolean;
+	slack_token: string;
+};
+
+/// 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;
+	tote_intake_failure: number;
+	tote_eject_success: number;
+	tote_eject_failure: number;
+	balloon_intake_success: number;
+	bollon_intake_failure: number;
+	score_low_success: number;
+	score_low_failure: number;
+	score_internal_success: number;
+	score_internal_failure: number;
+	score_external_success: number;
+	score_external_failure: number;
+	score_other_robot_success: number;
+	score_other_robot_failure: number;
+};
+
+export type TeamMatch = {
+	id: number;
+	scout_id: string;
+	match_key: string;
+	team_key: string;
+	skill: number;
+	notes: string;
+	broke: boolean;
+	died: boolean;
+	auto_actions: AutoActionData[];
+	tele_actions: TeleActionData[];
+};
+
+export type AutoActionData = {
+	action: AutoAction;
+	success: boolean;
+};
+
+export type TeleActionData = {
+	action: TeleAction;
+	success: boolean;
+};
+
+// Action Types
+// Naming Convention: action_type + game_piece + where
+export type TeleAction =
+	| 'IntakeTote'
+	| 'IntakeBalloon'
+	| 'IntakeBalloonCoral'
+	| 'ScoreBalloonInternalTote' // Held by scorer
+	| 'ScoreBalloonExternalTote' // Held by alliance member
+	| 'ScoreBalloonUncontrolledTote'
+	| 'ScoreBalloonLow'
+	| 'EjectBalloon'
+	| 'EjectBunny' // Could happen in Tele; we could instead move this to BunnyAction and reset held_bunnies to 0 after Auto
+	| 'EjectTote';
+
+export type BunnyAction =
+	| 'IntakeBunny'
+	| 'ScoreBunnyInternalTote'
+	| 'ScoreBunnyExternalTote'
+	| 'ScoreBunnyUncontrolledTote'
+	| 'ScoreBunnyLow';
+export type AutoAction = TeleAction | BunnyAction;
+
+// For state machine
+export type ItemInputState = 'Intake' | 'Score' | 'Eject' | 'None';
+export type TeleInputState = TeleAction | ItemInputState;
+export type AutoInputState = TeleInputState | BunnyAction;

src/routes/+layout.svelte

@@ -7,8 +7,6 @@
 
 <style lang="postcss">
 	:global(body) {
-		@apply bg-bg_gray;
-		@apply font-mono;
-		touch-action: manipulation;
+		@apply bg-zinc-800;
 	}
 </style>

src/routes/scout/+page.svelte

@@ -1,33 +1,49 @@
 <script lang="ts">
-	import { actionResult, actionType, type ActionData } from '$lib/types';
+	import { type TeamMatch, type AutoActionData } from '$lib/types';
 	import Timeline from '$lib/components/Timeline.svelte';
+	import ActionInputs from './ActionInputs.svelte';
 
-	function addAction() {
-		//everything here is for testing, as there is no system for this yet
-		actions.push({ type: actionType.ScoreAnotherRobotsTote, result: actionResult.success });
-		actions.push({ type: actionType.EjectTote, result: actionResult.fail });
-		actions.push({ type: actionType.IntakeTote, result: actionResult.success });
-	}
+	const {
+		match_key,
+		team_key = '1540',
+		scout_id
+	}: { match_key: string; team_key: string; scout_id: string } = $props();
 
+	let actions: AutoActionData[] = $state([]);
 	let timelineExtended = $state(false);
-	function toggleTimeline() {
-		timelineExtended = !timelineExtended;
-	}
 
-	let latestActions: ActionData[] = $state([]);
+	const match: TeamMatch = $state({
+		id: 0,
+		scout_id,
+		team_key,
+		match_key,
+		skill: 3,
+		notes: '',
+		broke: false,
+		died: false,
+		auto_actions: [],
+		tele_actions: []
+	});
 </script>
 
-<main class="flex flex-col items-center gap-2 p-2 justify-center h-screen">
-	<Timeline bind:actions={latestActions} bind:displaying={timelineExtended} />
-	<div class="flex flex-col grow justify-end">
-		<!--this button to be changed in the future (deleted)-->
+<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="bg-btn_grey w-80 p-1 rounded border-2 border-outline_gray static"
-			onclick={addAction}>Add Action</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>
+
 		<button
-			class="bg-btn_grey w-80 p-1 rounded border-2 border-outline_gray static"
-			onclick={toggleTimeline}>Show Timeline</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
 		>
-	</div>
-</main>
+	{/if}
+</div>