Merge branch 'main' of https://github.com/flamingchickens1540/inflate…

…dchickens into hanya/timelinestyle
flamingchickens1540 · Nov 5, 2024 · d43785c · d43785c
2 parents 6bf3fb0 + 783123e
commit d43785c
Show file tree

Hide file tree

Showing 13 changed files with 122 additions and 70 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/bun.lockb b/bun.lockb
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 actionBorderColor = $derived(action.result === 'success' ? 'border-cresc_green' : 'border-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="{actionBorderColor} w-full p-1 rounded border-2 text-text_yellow" 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,19 @@
 	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>
+
 <h1 class="text-text_red">Timeline</h1>
-<div class="flex flex-col items-center h-full bg-btn_grey border-solid border-2 border-text_red p-2 rounded gap-2 w-full overflow-auto">
+<div
+	class="flex flex-col items-center h-full bg-btn_grey border-solid border-2 border-text_red p-2 rounded gap-2 w-full overflow-auto"
+>
 	{#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/lib/types.ts b/src/lib/types.ts
@@ -1,19 +1,19 @@
 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'
+	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'
+	success = 'success',
+	fail = 'fail'
 }
 
 export type ActionData = {
-    type: actionType;
-    result: actionResult;
-}
+	type: actionType;
+	result: actionResult;
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,13 +1,14 @@
 <script>
 	let { children } = $props();
-    import "../app.css";
+	import '../app.css';
 </script>
 
+{@render children()}
+
 <style lang="postcss">
 	:global(body) {
-        @apply bg-bg_gray;
+		@apply bg-bg_gray;
 		@apply font-mono;
+		touch-action: manipulation;
 	}
 </style>
-
-{@render children()}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,8 +1,6 @@
-<div class="flex flex-col items-center justify-evenly h-dvh">
-    <h1 class="text-center text-text_red text-5xl font-bold">
-        hiiii :3
-    </h1>
-    <a class="text-center text-text_yellow text-2xl rounded bg-btn_grey px-4 py-2 font-bold border-solid border-2 border-text_red" href="/scout">
-        scout
-    </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
@@ -4,17 +4,20 @@
 
 	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 />
 
-    <!--to be changed in the future-->
-    <button class="bg-btn_grey w-80 p-1 rounded border-2 border-text_red text-text_yellow" onclick={addAction}>Add Action</button>
+	<!--to be changed in the future-->
+	<button
+		class="bg-btn_grey w-80 p-1 rounded border-2 border-text_red text-text_yellow"
+		onclick={addAction}>Add Action</button
+	>
 </main>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,21 +1,21 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-    content: ['./src/**/*.{html,js,svelte,ts}'],
-    theme: {
-        colors: {
-            "navbar_black": "#1c1c1c",
-            "outline_gray": "#ec4899",
-            "cresc_green": "#49A078",
-            "bg_gray": "#020617",
-            "slack_purple": "#4A154B",
-            "robot_blue": "#0083E6",
-            "robot_red": "#ED1C24",
-            "fail_red": "#FF6663",
-            "btn_grey": "#0f172a",
-            "text_red": "#FF4848",
-            "text_yellow": "#F6B14B",
-        },
-        extend: {},
-    },
-    plugins: [],
-}
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+	theme: {
+		colors: {
+			navbar_black: '#1c1c1c',
+			outline_gray: '#ec4899',
+			cresc_green: '#49A078',
+			bg_gray: '#020617',
+			slack_purple: '#4A154B',
+			robot_blue: '#0083E6',
+			robot_red: '#ED1C24',
+			fail_red: '#FF6663',
+			btn_grey: '#0f172a',
+			text_red: '#FF4848',
+			text_yellow: '#F6B14B'
+		},
+		extend: {}
+	},
+	plugins: []
+};