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