updatesP

src/lib/ScanCapture.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Haptics, ImpactStyle } from '@capacitor/haptics';
+	import { Haptics, ImpactStyle } from '@capacitor/haptics';
 
 	let {
 		focused = $bindable(false),
@@ -41,15 +41,17 @@
 			charArray.push(event.key);
 		}
 
-		// Send the key to onscan
-		if ((event.key == 'Tab' || event.key == 'Enter')) {
-			// Prevent tab or enter from doing anything
-			event.preventDefault();
+		if (scanning) {
+			// Send the key to onscan
+			if (event.key == 'Tab' || event.key == 'Enter') {
+				// Prevent tab or enter from doing anything
+				event.preventDefault();
 
-			// Send key as text
-			onscan(charArray.join(''));
-			charArray = [];
-			return;
+				// Send key as text
+				onscan(charArray.join(''));
+				charArray = [];
+				return;
+			}
 		}
 
 		lastPressed = Date.now();
@@ -65,14 +67,14 @@
 		if (e.target?.nodeName == 'INPUT') {
 			focused = true;
 			inputElement = e.target;
-            Haptics.selectionStart();
+			Haptics.selectionStart();
 		}
 	}
 
 	function focusOut() {
 		focused = false;
 		inputElement = null;
-        Haptics.selectionEnd();
+		Haptics.selectionEnd();
 	}
 </script>
 

src/routes/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import Button from '$lib/components/ui/button/button.svelte';
 	import ScanCapture from '$lib/ScanCapture.svelte';
-	import { Haptics, ImpactStyle } from '@capacitor/haptics';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { fade } from 'svelte/transition';
 
@@ -11,7 +10,6 @@
 	function onscan(value: string) {
 		if (!list.has(value)) {
 			list.add(value);
-			Haptics.impact({ style: ImpactStyle.Light });
 		}
 	}
 </script>
@@ -19,15 +17,24 @@
 <ScanCapture {onscan} />
 
 <div class="flex h-screen">
-	<div class="m-auto flex flex-col gap-8 p-4">
+	<div class="m-auto flex flex-col justify-center items-center gap-8 p-4">
 		{#key count}
-			<h1
-				in:fade
-				class="decoration-sky text-9xl font-bold text-center underline-offset-4"
-			>
+			<h1 in:fade class="decoration-sky text-9xl font-bold text-center underline-offset-4">
 				{count}
 			</h1>
 		{/key}
-		<Button class="w-28 cursor-pointer">Submit</Button>
+
+		<div class="flex flex-wrap gap-2">
+			{#each list as value (value)}
+				<span>{value}</span>
+			{/each}
+		</div>
+
+		<Button
+			class="w-28 cursor-pointer"
+			onclick={() => {
+				list.clear();
+			}}>Reset</Button
+		>
 	</div>
 </div>