zenno: tooltips on skills

zenno/src/lib/Skill.svelte

@@ -1,5 +1,16 @@
 <script lang="ts">
-	import { skills, ZERO_SKILL, type Skill } from './data/skill';
+	import {
+		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;
@@ -10,6 +21,10 @@
 
 	let { hint, mention, skill, name }: 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!));
@@ -21,8 +36,62 @@
 		}
 		return l[0];
 	});
+	const activationClass = $derived(s.activations.length === 1 ? null : 'm2 border rounded-md');
 
 	const spanClass = $derived(mention ? 'italic' : 'font-bold');
 </script>
 
-<span class={spanClass}>{s.name}</span>
+{#snippet condition(disj: string[])}
+	{#each disj as conj, i (conj)}
+		<div class="font-mono text-sm">{conj}</div>
+		{#if i !== disj.length - 1}
+			<div class="text-xs italic">or</div>
+		{/if}
+	{/each}
+{/snippet}
+
+{#snippet abilities(abils: Ability[])}
+	{#each abils as a (a.type)}
+		<div class="text-sm">
+			{ABILITY_TYPE_FORMAT[a.type](a.value)}
+			{ABILITY_SCALE_NAME[a.value_usage]}
+			{#if a.target && a.target !== Target.Self}
+				{TARGET_FORMAT[a.target](a.target_value)}
+			{/if}
+		</div>
+	{/each}
+{/snippet}
+
+<div class="group relative inline-block">
+	<div
+		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"
+		role="tooltip"
+	>
+		<div class="border-b py-1">
+			{s.description}
+		</div>
+		{#each s.activations as act, i (i)}
+			<div class={activationClass}>
+				{#if act.precondition}
+					<div class="border-b py-1">
+						<div class="text-xs italic">Precondition</div>
+						{@render condition(splitCond(act.precondition))}
+					</div>
+				{/if}
+				<div class="border-b py-1">
+					{@render condition(splitCond(act.condition))}
+				</div>
+				<div class="py-1">
+					{@render abilities(act.abilities)}
+					{#if act.duration}
+						<div class="text-sm">
+							for {tenThousandths(act.duration)}s
+							{DURATION_SCALE_NAME[act.dur_scale]}
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/each}
+	</div>
+	<span class={spanClass}>{s.name}</span>
+</div>