zenno: use data from api

zenno/src/lib/Skill.svelte

@@ -3,39 +3,37 @@
 		ABILITY_SCALE_NAME,
 		ABILITY_TYPE_FORMAT,
 		DURATION_SCALE_NAME,
-		skills,
 		Target,
 		TARGET_FORMAT,
 		tenThousandths,
-		ZERO_SKILL,
 		type Ability,
 		type Skill,
 	} from './data/skill';
 
-	interface CommonProps {
-		hint?: string;
+	interface Props {
+		skill: Skill | null | undefined;
 		mention?: boolean;
 	}
 
-	type Props = CommonProps & ({ skill: number; name?: never } | { name: string; skill?: never });
+	const ZERO_SKILL: Skill = {
+		skill_id: 0,
+		name: 'Skill data is loading...',
+		description: 'Skill data is still loading, or else something went wrong.',
+		group: 0,
+		rarity: 1,
+		group_rate: 1,
+		wit_check: false,
+		activations: [],
+		icon_id: 0,
+	};
 
-	let { hint, mention, skill, name }: Props = $props();
+	let { mention, skill }: Props = $props();
 
 	function splitCond(c: string): string[] {
 		return c.replaceAll('&', ' & ').split('@');
 	}
 
-	const s: Readonly<Skill> = $derived.by(() => {
-		const l =
-			skill != null ? skills.global.filter((s) => s.skill_id === skill) : skills.global.filter((s) => s.name.includes(name!));
-		if (name != null) {
-			console.warn(`skills specified as ${name} (${hint}):`, l);
-		}
-		if (l.length === 0) {
-			return ZERO_SKILL;
-		}
-		return l[0];
-	});
+	const s = $derived(skill ?? ZERO_SKILL);
 	const activationClass = $derived(s.activations.length === 1 ? null : 'block my-2 border rounded-md');
 
 	const spanClass = $derived(mention ? 'italic' : 'font-bold');