Merge branch 'azalea/input-grid' of https://github.com/flamingchicken…

…s1540/inflatedchickens into azalea/input-grid
flamingchickens1540 · Nov 12, 2024 · 9d24e18 · 9d24e18
2 parents c9dc82e + 040d95c
commit 9d24e18
Show file tree

Hide file tree

Showing 14 changed files with 156 additions and 60 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,7 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml
@@ -0,0 +1,22 @@
+name: Format
+
+on:
+    push:
+    pull_request:
+
+jobs:
+    format:
+        runs-on: ubuntu-latest
+        name: Format Files
+        steps:
+            - uses: actions/checkout@v3
+            - uses: oven-sh/setup-bun@v2
+            - run: bun install
+            - name: Prettier
+              run: bun run format ./src
+              env:
+                  GITHUB_TOKEN: ${{ secrets.WORKFLOW_TOKEN }}
+            - uses: stefanzweifel/git-auto-commit-action@v4
+              if: ${{ github.event_name == 'push' || github.event_name == 'workflow_dispatch' }}
+              with:
+                  commit_message: 'style: format files'
diff --git a/.prettierrc b/.prettierrc
@@ -4,6 +4,5 @@
 	"trailingComma": "none",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
 # inflatedchickens
 
 ## usage
+
 ```bash
 # install dependencies
 bun i

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -1,31 +1,34 @@
 {
-  "name": "floatingchickens",
-  "version": "0.0.1",
-  "private": true,
-  "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 ."
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.1.1",
-    "@sveltejs/kit": "^1.30.4",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-svelte": "^2.44.1",
-    "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.1",
-    "svelte": "^5.0.0-next.272",
-    "svelte-check": "^3.8.6",
-    "tslib": "^2.7.0",
-    "typescript": "^5.6.3",
-    "vite": "^4.5.5"
-  },
-  "type": "module"
+	"name": "test",
+	"version": "0.0.1",
+	"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",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@types/eslint": "^9.6.0",
+		"autoprefixer": "^10.4.20",
+		"eslint": "^9.7.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.6",
+		"prettier-plugin-tailwindcss": "^0.6.5",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^3.4.9",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.0.0",
+		"vite": "^5.0.3"
+	}
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,6 @@
 export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};
diff --git a/src/app.html b/src/app.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <link rel="icon" href="flamingChicken.png" />
-        <meta name="viewport" content="width=device-width" />
-        %sveltekit.head%
-    </head>
-    <body data-sveltekit-preload-data="hover">
-        <div style="display: contents">%sveltekit.body%</div>
-    </body>
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="flamingChicken.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
 </html>
diff --git a/src/lib/components/Action.svelte b/src/lib/components/Action.svelte
@@ -1,11 +1,27 @@
 <script lang="ts">
 	import type { ActionData } from '$lib/types';
 
-	let { action = $bindable(), deleteself }: { action: ActionData; deleteself: () => void } = $props()
+	let { action = $bindable(), deleteself }: { action: ActionData; deleteself: () => void } =
+		$props();
 
-	let actionBackgroundColor = $derived(action.result === 'success' ? 'bg-cresc_green' : 'bg-fail_red');
+	let actionBorderColor = $derived(
+		action.result === 'success' ? 'border-cresc_green' : 'border-fail_red'
+	);
+	let actionBackgroundColor = $derived(
+		action.result === 'success' ? 'bg-cresc_green' : 'bg-fail_red'
+	);
 </script>
 
-<button class="{actionBackgroundColor} w-full p-1 rounded border-2 border-outline_gray text-text_white" onclick={deleteself}>
+<!-- <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}
+>
 	{action.type}
 </button>
diff --git a/src/lib/components/SuccessFail.svelte b/src/lib/components/SuccessFail.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	let { complete, cancel }: { complete: (success: boolean) => void; cancel: () => void } = $props();
+	let { complete, cancel }: { complete: (success: boolean) => void; cancel: () => void } =
+		$props();
 </script>
 
 <div

diff --git a/src/lib/components/Timeline.svelte b/src/lib/components/Timeline.svelte
@@ -2,15 +2,33 @@
 	import type { ActionData } from '$lib/types';
 	import Action from './Action.svelte';
 
-	let { actions = $bindable() }: { actions: ActionData[] } = $props()
+	let {
+		actions = $bindable(),
+		displaying = $bindable()
+	}: { actions: ActionData[]; displaying: boolean } = $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">
+<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;
+		}}
+	>
+		Hide Timeline
+	</button>
+
 	{#each actions as _, i}
 		<Action
 			bind:action={actions[i]}
 			deleteself={() => {
-				actions.splice(i, 1);
+				actions.splice(actions.indexOf(actions[i]), 1);
 			}}
 		/>
 	{/each}

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,12 +1,12 @@
 <script>
 	let { children } = $props();
-    import "../app.css";
+	import '../app.css';
 </script>
 
+{@render children()}
+
 <style lang="postcss">
 	:global(body) {
-        @apply bg-zinc-800;
+		@apply bg-zinc-800;
 	}
 </style>
-
-{@render children()}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,3 +1,6 @@
-<h1 class="text-center">hiiii :3</h1>
-
-<a class="text-center" href="/scout">scount</a>
+<div class="flex flex-col items-center justify-evenly h-dvh text-text_white">
+	<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">
+		scout
+	</a>
+</div>
diff --git a/src/routes/scout/+page.svelte b/src/routes/scout/+page.svelte
@@ -8,6 +8,7 @@
 	} from '$lib/types';
 	import SuccessFail from '$lib/components/SuccessFail.svelte';
 	import { goto } from '$app/navigation';
+	import Timeline from '$lib/components/Timeline.svelte';
 	let actionState: AutoInputState = $state('None');
 
 	const intake_piece = () => (actionState = actionState === 'None' ? 'Intake' : actionState);
@@ -36,6 +37,10 @@
 
 	$effect(() => console.log(actionState));
 	const is_input_state = $derived(actionState instanceof ItemInputState);
+
+	let actions: ActionData[] = $state([]);
+	let timelineExtended = $state(false);
+	let latestActions: ActionData[] = $state([]);
 </script>
 
 <main class="text-zinc-50 flex flex-col p-2 h-svh">
@@ -44,7 +49,9 @@
 	{:else if is_input_state}
 		<span class="text-center font-bold pb-2">team {team_key}</span>
 		<div class="grid gap-2 grid-cols-2 flex-grow">
-			<button class="bg-zinc-500 p-2 rounded" onclick={() => score_low('Balloon')}> Score </button>
+			<button class="bg-zinc-500 p-2 rounded" onclick={() => score_low('Balloon')}>
+				Score
+			</button>
 			<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'Intake')}
 				>Intake</button
 			>
@@ -53,4 +60,23 @@
 			</button>
 		</div>
 	{/if}
+	<span class="text-center font-bold pb-2">team {team_key}</span>
+	<div class="grid gap-2 grid-cols-2 flex-grow">
+		<button class="bg-zinc-500 p-2 rounded" onclick={() => score_low('Balloon')}>
+			Score
+		</button>
+		<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'Intake')}
+			>Intake</button
+		>
+		<button class="bg-zinc-500 p-2 rounded col-span-2"> Timeline </button>
+		<button
+			class="bg-btn_grey w-80 p-1 rounded border-2 border-outline_gray static"
+			onclick={() => console.log('todo')}>Add Action</button
+		>
+		<button
+			class="bg-btn_grey w-80 p-1 rounded border-2 border-outline_gray static"
+			onclick={() => (timelineExtended = !timelineExtended)}>Show Timeline</button
+		>
+	</div>
+	<Timeline bind:actions={latestActions} bind:displaying={timelineExtended} />
 </main>