feat(database): refine weapon registry cards

src/lib/components/DatabaseFacts.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import GameIcon from './GameIcon.svelte';
+	import type { DatabaseFact } from '$lib/database/items';
+
+	let {
+		facts,
+		layout = 'grid'
+	}: {
+		facts: DatabaseFact[];
+		layout?: 'grid' | 'stack';
+	} = $props();
+
+	const meterValue = (value: number) => Math.max(0, Math.min(100, value));
+</script>
+
+<div class:stacked={layout === 'stack'} class="database-item-facts">
+	{#each facts as fact}
+		<div class:primary={fact.emphasis === 'primary'}>
+			<span>{fact.label}</span>
+			<div class="database-fact-value">
+				{#if fact.gameIcon}<GameIcon name={fact.gameIcon}/>{/if}
+				<b>{fact.value}</b>
+				{#if fact.note}<small>{fact.note}</small>{/if}
+			</div>
+			{#if fact.meters?.length}
+				<div class="database-stat-meters">
+					{#each fact.meters as meter}
+						<div>
+							<i>{meter.label}</i>
+							<progress max="100" value={meterValue(meter.value)} aria-label={`${meter.label}: ${meterValue(meter.value)} out of 100`}></progress>
+							<output aria-label={`${meter.label} exact value`}>{meterValue(meter.value)}</output>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/each}
+</div>

src/lib/components/DatabaseItemCard.svelte

@@ -2,6 +2,7 @@
 	import GameIcon from './GameIcon.svelte';
 	import ItemIcon from './ItemIcon.svelte';
 	import ItemIconRail from './ItemIconRail.svelte';
+	import DatabaseFacts from './DatabaseFacts.svelte';
 	import type { GameIconName } from '$lib/game-icons';
 	import type { DatabaseItem } from '$lib/database/items';
 
@@ -17,12 +18,19 @@
 		<div class="database-item-icon">
 			{#if item.gameIcon}<GameIcon name={item.gameIcon} decorative/>{:else}<ItemIcon src={item.iconUrl} alt=""/>{/if}
 		</div>
-		<div><small>{item.kicker}</small><h2>{item.name}</h2></div>
+		<div class="database-item-identity">
+			<small>{item.kicker}</small>
+			<h2>{item.name}</h2>
+		</div>
+		{#if item.headerBadge || item.headerMetaIcon}
+			<div class="database-header-status">
+				{#if item.headerMetaIcon}<GameIcon name={item.headerMetaIcon}/>{/if}
+				{#if item.headerBadge}<span class="database-header-badge">{item.headerBadge}</span>{/if}
+			</div>
+		{/if}
 	</header>
 	{#if item.badges?.length}<div class="database-item-badges">{#each item.badges as badge}<span class={badge.tone ?? ''}>{badge.label}</span>{/each}</div>{/if}
-	<div class:stacked={item.factLayout === 'stack'} class="database-item-facts">
-		{#each item.facts as fact}<div><span>{fact.label}</span><b>{fact.value}</b></div>{/each}
-	</div>
+	<DatabaseFacts facts={item.facts} layout={item.factLayout}/>
 	{#if item.lines?.length}
 		<div class="database-item-lines">{#each item.lines as line}<div><span>{line.label}</span><b>{line.value}</b></div>{/each}</div>
 	{/if}

src/lib/components/ItemIconRail.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import ItemIcon from './ItemIcon.svelte';
+	import DatabaseFacts from './DatabaseFacts.svelte';
 	import type { DatabaseRelatedItem } from '$lib/database/items';
 
 	let {
@@ -38,7 +39,7 @@
 					<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>
+				<DatabaseFacts facts={selected.preview.facts} layout={selected.preview.factLayout}/>
 				{#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}