Expand website and game trackers

src/lib/game-tracker/WeaponArtwork.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { base } from '$app/paths';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import artwork from '../../../data/cod-art.json';
+	let { game, name, icon }: { game: string; name: string; icon: string | null } = $props();
+	const source = $derived(
+		artwork.find((a) => a.game === game && a.name.toLowerCase() === name.toLowerCase())
+	);
+	const src = $derived(source ? `${base}${source.path}` : icon);
+</script>
+
+{#if src}
+	<Dialog.Root>
+		<Dialog.Trigger
+			class="shrink-0 overflow-hidden rounded-md border focus-visible:outline-2"
+			aria-label={`View ${name} artwork`}
+			><img
+				{src}
+				alt=""
+				loading="lazy"
+				width="112"
+				height="64"
+				class="h-16 w-28 object-contain"
+			/></Dialog.Trigger
+		>
+		<Dialog.Content class="sm:max-w-3xl"
+			><Dialog.Header
+				><Dialog.Title>{name}</Dialog.Title><Dialog.Description
+					>{source?.credit ?? 'Weapon artwork'}</Dialog.Description
+				></Dialog.Header
+			><img
+				{src}
+				alt={`${name} weapon reference for ${game.replaceAll('-', ' ')}`}
+				class="max-h-[65dvh] w-full object-contain"
+			/>{#if source}<!-- Catalog or validated external URL. -->
+				<!-- eslint-disable svelte/no-navigation-without-resolve -->
+				<a
+					href={source.source}
+					target="_blank"
+					rel="noreferrer"
+					class="text-xs text-muted-foreground underline">Image source ↗</a
+				>
+				<!-- eslint-enable svelte/no-navigation-without-resolve -->{/if}</Dialog.Content
+		>
+	</Dialog.Root>
+{/if}