zephyr/horse
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects Releases Wiki Activity

zenno: use spans for skill tooltips

Browse Source
This commit is contained in:
Branden J Brown
2026-05-29 14:57:48 -04:00
parent 2b37c00ed0
commit 0b7201779c
1 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
zenno/src/lib/Skill.svelte
View File

@@ -36,62 +36,62 @@
}
return l[0];
});
const activationClass = $derived(s.activations.length === 1 ? null : 'my-2 border rounded-md');
const activationClass = $derived(s.activations.length === 1 ? null : 'block my-2 border rounded-md');
const spanClass = $derived(mention ? 'italic' : 'font-bold');
</script>
{#snippet condition(disj: string[])}
{#each disj as conj, i (conj)}
<div class="font-mono text-sm">{conj}</div>
<span class="-mb-1 block font-mono text-sm">{conj}</span>
{#if i !== disj.length - 1}
<div class="text-xs italic">or</div>
<span class="text-xs italic">or</span>
{/if}
{/each}
{/snippet}
{#snippet abilities(abils: Ability[])}
{#each abils as a, i (i)}
<div class="text-sm">
<span class="block 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>
</span>
{/each}
{/snippet}
<span class="group relative inline-block">
<div
<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"
role="tooltip"
>
<div class="border-b py-1">
<span class="block border-b py-1 hyphens-auto">
{s.description}
</div>
</span>
{#each s.activations as act, i (i)}
<div class={activationClass}>
<span class={activationClass}>
{#if act.precondition}
<div class="border-b py-1">
<div class="text-xs italic">Precondition</div>
<span class="block border-b py-1">
<span class="text-xs italic">Precondition</span>
{@render condition(splitCond(act.precondition))}
</div>
</span>
{/if}
<div class="border-b py-1">
<span class="block border-b py-1">
{@render condition(splitCond(act.condition))}
</div>
<div class="py-1">
</span>
<span class="block py-1">
{@render abilities(act.abilities)}
{#if act.duration != null && act.duration > 0}
<div class="text-sm">
<span class="block text-sm">
for {tenThousandths(act.duration)}s
{DURATION_SCALE_NAME[act.dur_scale]}
</div>
</span>
{/if}
</div>
</div>
</span>
</span>
{/each}
</div>
<span class={spanClass}>{s.name}</span>
</span>
<span class={[spanClass, 'cursor-pointer']}>{s.name}</span>
</span>