zenno: include character icons in character picks

zenno/src/lib/CharaIcon.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+	const sizes = [256, 64, 32, 16] as const;
+
+	interface Props {
+		chara_id: number | null | undefined;
+		size: (typeof sizes)[number];
+	}
+
+	let { chara_id, size, ...rest }: Props & SvelteHTMLElements['picture'] = $props();
+
+	const icon = $derived(chara_id ?? 0);
+	const avifs = $derived(
+		sizes
+			.filter((sz) => sz >= size)
+			.map((sz) => `/img/chara/${icon}/${sz}x${sz}.avif ${sz / size}x`)
+			.join(', '),
+	);
+	const pngs = $derived(
+		sizes
+			.filter((sz) => sz >= size)
+			.map((sz) => `/img/chara/${icon}/${sz}x${sz}.png ${sz / size}x`)
+			.join(', '),
+	);
+	const src = $derived(icon !== 0 ? `/img/chara/${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={`Icon for character ID ${chara_id}`} class="inline" width={size} height={size} loading="lazy" />
+	</picture>
+{:else}
+	<div class={`w-[${size}px] h-[${size}px]`}></div>
+{/if}

zenno/src/lib/CharaPick.svelte

@@ -1,23 +1,29 @@
 <script lang="ts">
 	import type { Character } from '$lib/data/character';
-	import type { Snippet } from 'svelte';
 	import type { ClassValue } from 'svelte/elements';
 	import Pick from './Pick.svelte';
+	import CharaIcon from './CharaIcon.svelte';
 
 	interface Props {
 		id: string;
 		characters: Character[] | null;
 		value: Character | undefined;
 		class?: ClassValue | null;
-		option?: Snippet<[Character]>;
 		required?: boolean;
 	}
 
-	let { id, characters, value = $bindable(), class: className, option, required = false }: Props = $props();
+	let { id, characters, value = $bindable(), class: className, required = false }: Props = $props();
 
 	const charas = $derived(characters ?? []);
 
 	const key = (v: Character) => ({ id: v.chara_id, name: v.name });
 </script>
 
-<Pick {id} items={charas} {key} bind:value {option} class={className} {required} />
+<Pick {id} items={charas} {key} bind:value class={className} {required}>
+	{#snippet option(c: Character)}
+		<span>
+			<CharaIcon chara_id={c.chara_id} size={32} />
+			{c.name}
+		</span>
+	{/snippet}
+</Pick>

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 ID ${icon_id}`} 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',
+			},
 		},
 	},
 });