autocomplete on frontend

frontend/package.json

@@ -23,6 +23,7 @@
 		"eslint-plugin-svelte3": "^4.0.0",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
+		"simple-svelte-autocomplete": "^2.5.2",
 		"svelte": "^3.54.0",
 		"svelte-check": "^3.0.1",
 		"typescript": "^5.0.0",

frontend/src/routes/+page.svelte

@@ -1,15 +1,20 @@
 <script>
+	// @ts-nocheck
+
+	import AutoComplete from 'simple-svelte-autocomplete';
+
 	/** @type {import('./$types').PageData} */
 	export let data;
 	const { track } = data;
 
 	const artists = track.artists.map((artist) => artist.name);
 	const year = track.album.release_date.split('-')[0];
 
-	/**
-	 * @type {EventTarget | null}
-	 */
 	let player;
+	let selectedColor;
+	async function searchColor(keyword) {
+		return ['White', 'Red', 'Yellow', 'Green', 'Blue', 'Black', 'Mät bläck', '<i>Jét Black</i>'];
+	}
 
 	let revealed = false;
 	function reveal() {
@@ -25,9 +30,6 @@
 		}
 	}
 
-	/**
-	 * @param {Event} event
-	 */
 	function controlTime(event) {
 		if (!player) {
 			player = event.target;
@@ -37,9 +39,6 @@
 		}
 	}
 
-	/**
-	 * @param {Event} event
-	 */
 	function playCheck(event) {
 		event?.preventDefault();
 		if (player && player.currentTime > endTime) {
@@ -50,9 +49,32 @@
 </script>
 
 <h1>Try it</h1>
-<audio on:play={playCheck} on:timeupdate={controlTime} controls src={track['preview_url']} />
-<button on:click={skip}>Skip ({skipTime}s)</button>
-<button on:click={reveal}>Reveal</button>
 {#if revealed}
 	<p>{artists.toString()} - {track.name} ({year})</p>
+{:else}
+	<div class="footer">
+		<audio on:play={playCheck} on:timeupdate={controlTime} controls src={track['preview_url']} />
+		<AutoComplete
+			placeholder="start typing to guess"
+			delay="200"
+			searchFunction={searchColor}
+			bind:selectedItem={selectedColor}
+		/>
+		<div class="controls">
+			<button on:click={skip}>Skip ({skipTime}s)</button>
+			<button on:click={() => {}}>Guess</button>
+		</div>
+		<button on:click={reveal}>Reveal</button>
+	</div>
 {/if}
+
+<style>
+	.footer {
+		display: flex;
+		flex-direction: column;
+	}
+	.controls {
+		display: flex;
+		justify-content: space-between;
+	}
+</style>