zenno: show icons on skills

zenno/src/lib/Skill.svelte

@@ -9,6 +9,7 @@
 		type Ability,
 		type Skill,
 	} from './data/skill';
+	import SkillIcon from './SkillIcon.svelte';
 
 	interface Props {
 		skill: Skill | null | undefined;
@@ -63,9 +64,13 @@
 
 <span class="group relative inline-block hyphens-none">
 	<span
-		class="skill-tip invisible absolute bottom-4 -left-1/2 flex w-80 flex-col rounded-lg border px-2 text-center opacity-0 shadow-lg transition-all group-hover:visible group-hover:bottom-6 group-hover:opacity-100"
+		class="skill-tip invisible absolute bottom-4 -left-1/2 flex min-w-80 flex-col rounded-lg border px-2 pt-2 text-center opacity-0 shadow-lg transition-all group-hover:visible group-hover:bottom-6 group-hover:opacity-100"
 		role="tooltip"
 	>
+		<span class="block text-xl">
+			<SkillIcon icon_id={skill?.icon_id} size={32} class="inline" />
+			{s.name}
+		</span>
 		<span class="block border-b py-1 hyphens-auto">
 			{s.description}
 		</span>
@@ -92,5 +97,6 @@
 			</span>
 		{/each}
 	</span>
+	<SkillIcon icon_id={skill?.icon_id} size={16} class="inline max-h-lh align-text-bottom" />
 	<span class={[spanClass, 'cursor-pointer']}>{s.name}</span>
 </span>

zenno/src/lib/SkillIcon.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+	const sizes = [64, 32, 16] as const;
+
+	interface Props {
+		icon_id: number | null | undefined;
+		size: (typeof sizes)[number];
+	}
+
+	let { icon_id, size, ...rest }: Props & SvelteHTMLElements['picture'] = $props();
+
+	const icon = $derived(icon_id ?? 0);
+	const avifs = $derived(
+		sizes
+			.filter((sz) => sz >= size)
+			.map((sz) => `/img/skill/${icon}/${sz}x${sz}.avif ${sz / size}x`)
+			.join(', '),
+	);
+	const pngs = $derived(
+		sizes
+			.filter((sz) => sz >= size)
+			.map((sz) => `/img/skill/${icon}/${sz}x${sz}.png ${sz / size}x`)
+			.join(', '),
+	);
+	const src = $derived(icon !== 0 ? `/img/skill/${icon}/${sizes[0]}x${sizes[0]}.png` : `/img/skill/10011`);
+</script>
+
+{#if icon !== 0}
+	<picture {...rest}>
+		<source srcset={avifs} type="image/avif" />
+		<source srcset={pngs} type="image/png" />
+		<img {src} alt="Skill icon" class="inline" width={size} height={size} loading="lazy" />
+	</picture>
+{:else}
+	<div class={`w-[${size}px] h-[${size}px]`}></div>
+{/if}

zenno/src/routes/doc/tagged-skills/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import * as skill from '$lib/data/skill';
+	import SkillIcon from '$lib/SkillIcon.svelte';
 
 	let rare = $state(false);
 	let unique = $state(false);
@@ -94,7 +95,10 @@
 <div class="grid max-w-7xl grid-cols-1 gap-2 md:grid-cols-3">
 	{#each skills as s (s.skill_id)}
 		<div class="rounded-md border px-2 pt-1 pb-2 text-center shadow-sm transition-shadow hover:shadow-md">
-			<span class="block text-xl">{s.name}</span>
+			<span class="block text-xl">
+				<SkillIcon icon_id={s?.icon_id} size={32} />
+				{s.name}
+			</span>
 			<span class="block italic">{s.description}</span>
 			{#each s.activations as act, i (i)}
 				<span class="my-2 block rounded-md border">

zenno/vite.config.ts

@@ -39,6 +39,9 @@ export default defineConfig({
 			'/api': {
 				target: 'http://localhost:13669',
 			},
+			'/img': {
+				target: 'http://localhost:13669',
+			},
 		},
 	},
 });