zenno/career/ismdata: start of auto career analysis

2026-08-07 17:01:33 -04:00
parent 5a13519189
commit 1fe397ca81
13 changed files with 794 additions and 36 deletions
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+	const sizes = [128, 64, 32] as const;
+
+	interface Props {
+		icon_id: number | null | undefined;
+		size: (typeof sizes)[number];
+		alt?: string;
+	}
+
+	let { icon_id, size, alt, ...rest }: Props & SvelteHTMLElements['picture'] = $props();
+
+	const icon = $derived(icon_id ?? 0);
+	const avifs = $derived(
+		sizes
+			.filter((sz) => sz >= size)
+			.map((sz) => `/img/support/${icon}/${sz}x${sz}.avif ${sz / size}x`)
+			.join(', '),
+	);
+	const pngs = $derived(
+		sizes
+			.filter((sz) => sz >= size)
+			.map((sz) => `/img/support/${icon}/${sz}x${sz}.png ${sz / size}x`)
+			.join(', '),
+	);
+	const src = $derived(icon !== 0 ? `/img/support/${icon}/${sizes[0]}x${sizes[0]}.png` : `/img/support/10011`);
+	const title = $derived(alt ?? `Support card icon ID ${icon_id}`);
+</script>
+
+{#if icon !== 0}
+	<picture {...rest}>
+		<source srcset={avifs} type="image/avif" />
+		<source srcset={pngs} type="image/png" />
+		<img {src} {title} alt={title} class="inline" width={size} height={size} loading="lazy" />
+	</picture>
+{:else}
+	<div class={`w-[${size}px] h-[${size}px]`}></div>
+{/if}