Build catalog-backed loadout workbench

2026-07-25 16:56:27 -04:00
parent 095b697b08
commit e5f0414a8e
6 changed files with 462 additions and 22 deletions
@@ -0,0 +1,44 @@
+<script lang="ts">
+	let {
+		items,
+		value = $bindable(''),
+		label,
+		placeholder = 'Search available items…',
+		disabledIds = [],
+		onchange
+	}: {
+		items: Array<{ id: string; name: string; iconUrl?: string; category?: string; pending?: boolean }>;
+		value?: string;
+		label: string;
+		placeholder?: string;
+		disabledIds?: string[];
+		onchange?: (id: string) => void;
+	} = $props();
+	let open = $state(false);
+	let query = $state('');
+	const selected = $derived(items.find((item) => item.id === value));
+	const results = $derived(items.filter((item) => item.name.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase())).slice(0, 40));
+	const choose = (id: string) => { value = id; onchange?.(id); open = false; query = ''; };
+</script>
+
+<div class="builder-picker">
+	<span>{label}</span>
+	<button type="button" class="builder-picker-current" aria-expanded={open} onclick={() => open = !open}>
+		{#if selected?.iconUrl}<img src={selected.iconUrl} alt=""/>{:else}<i>◇</i>{/if}
+		<b>{selected?.name ?? 'SELECT ITEM'}</b><small>{selected?.category ?? (selected ? 'EQUIPPED' : 'UNASSIGNED')}</small><em>{open ? '×' : '＋'}</em>
+	</button>
+	{#if open}
+		<div class="builder-picker-panel">
+			<input type="search" bind:value={query} {placeholder} aria-label={placeholder}/>
+			<div>
+				{#if selected}<button type="button" class="builder-picker-clear" onclick={() => choose('')}><i>×</i><span><b>CLEAR SLOT</b><small>REMOVE CURRENT SELECTION</small></span><em>CLEAR</em></button>{/if}
+				{#each results as item}
+					<button type="button" class:selected={item.id === value} disabled={disabledIds.includes(item.id)} onclick={() => choose(item.id)}>
+						{#if item.iconUrl}<img src={item.iconUrl} alt=""/>{:else}<i>◇</i>{/if}
+						<span><b>{item.name}</b><small>{item.category ?? 'AVAILABLE'}</small></span><em>{item.id === value ? 'EQUIPPED' : disabledIds.includes(item.id) ? 'CONFLICT' : 'SELECT'}</em>
+					</button>
+				{:else}<p>NO MATCHING ITEMS</p>{/each}
+			</div>
+		</div>
+	{/if}
+</div>