Merge branch 'main' into azalea/input-grid

flamingchickens1540 · Nov 9, 2024 · 6ff4f16 · 6ff4f16
2 parents f515290 + f5f2014
commit 6ff4f16
Show file tree

Hide file tree

Showing 11 changed files with 143 additions and 28 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/README.md b/README.md
@@ -1,6 +1,7 @@
 # inflatedchickens
 
 ## usage
+
 ```bash
 # install dependencies
 bun i

diff --git a/package.json b/package.json
@@ -28,4 +28,40 @@
     "vite": "^4.5.5"
   },
   "type": "module"
+	"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": "^3.3.1",
+		"@sveltejs/kit": "^2.7.4",
+		"@typescript-eslint/eslint-plugin": "^8.13.0",
+		"@typescript-eslint/parser": "^8.13.0",
+		"autoprefixer": "^10.4.20",
+		"eslint": "^9.14.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.46.0",
+		"postcss": "^8.4.47",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.7",
+		"svelte": "^5.1.9",
+		"svelte-check": "^4.0.5",
+		"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"
+	}
 }
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/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;
 	}
 </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
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { AutoInputState, TeamMatch, TeleActionData, TeleAction } from '$lib/types';
 	import SuccessFail from '$lib/components/SuccessFail.svelte';
+    import Timeline from '$lib/components/Timeline.svelte';
 	let actionState: AutoInputState = $state('None');
 
 	const intake_piece = () => (actionState = actionState === 'None' ? 'Intake' : actionState);
@@ -27,7 +28,9 @@
 		tele_actions: []
 	});
 
-	$effect(() => console.log(actionState));
+    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">
@@ -39,5 +42,14 @@
 		<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>