feat(database): add public game data registries

2026-07-26 00:39:09 -04:00
parent ae6013d9d6
commit 317e5b39bd
12 changed files with 702 additions and 20 deletions
@@ -0,0 +1,49 @@
+<script lang="ts">
+	import ItemIcon from './ItemIcon.svelte';
+	import type { DatabaseRelatedItem } from '$lib/database/items';
+
+	let {
+		label,
+		items,
+		emptyLabel = 'NONE ASSIGNED'
+	}: {
+		label: string;
+		items: DatabaseRelatedItem[];
+		emptyLabel?: string;
+	} = $props();
+	let selected = $state<DatabaseRelatedItem | null>(null);
+</script>
+
+<svelte:window onkeydown={(event) => { if (event.key === 'Escape') selected = null; }}/>
+
+<div class="item-icon-rail" aria-label={`${label}: ${items.length ? items.map((item) => item.name).join(', ') : emptyLabel}`}>
+	{#if items.length}
+		{#each items as item}
+			<button type="button" title={`View ${item.name}`} aria-label={`View ${item.name} details`} onclick={() => selected = item}>
+				<ItemIcon src={item.iconUrl} alt=""/>
+			</button>
+		{/each}
+	{:else}
+		<small>{emptyLabel}</small>
+	{/if}
+</div>
+
+{#if selected?.preview}
+	<div class="database-preview-backdrop" role="presentation" onclick={(event) => { if (event.target === event.currentTarget) selected = null; }}>
+		<div class="database-preview-dialog" role="dialog" aria-modal="true" aria-labelledby={`database-preview-${selected.id}`}>
+			<header><div><small>DATABASE QUICK VIEW</small><strong id={`database-preview-${selected.id}`}>{selected.preview.name}</strong></div><button type="button" aria-label="Close details" onclick={() => selected = null}>×</button></header>
+			<article class="database-item-card">
+				<header>
+					<div class="database-item-icon"><ItemIcon src={selected.preview.iconUrl} alt=""/></div>
+					<div><small>{selected.preview.kicker}</small><h2>{selected.preview.name}</h2></div>
+				</header>
+				{#if selected.preview.badges?.length}<div class="database-item-badges">{#each selected.preview.badges as badge}<span class={badge.tone ?? ''}>{badge.label}</span>{/each}</div>{/if}
+				<div class:stacked={selected.preview.factLayout === 'stack'} class="database-item-facts">{#each selected.preview.facts as fact}<div><span>{fact.label}</span><b>{fact.value}</b></div>{/each}</div>
+				{#if selected.preview.lines?.length}<div class="database-item-lines">{#each selected.preview.lines as line}<div><span>{line.label}</span><b>{line.value}</b></div>{/each}</div>{/if}
+				{#if selected.preview.description}<p>{selected.preview.description}</p>{/if}
+				{#if selected.preview.secondaryDescription}<p class="secondary-description">{selected.preview.secondaryDescription}</p>{/if}
+				{#if selected.preview.actions?.length}<footer class="database-item-actions">{#each selected.preview.actions as action}<a href={action.href}>{action.label} →</a>{/each}</footer>{/if}
+			</article>
+		</div>
+	</div>
+{/if}