added pet name display
This commit is contained in:
@@ -23,6 +23,7 @@
|
||||
let { user, ariaLabel = "Toggle pet actions" }: Props = $props();
|
||||
|
||||
const actions = $derived(user ? createPetActions(user) : []);
|
||||
const dollName = $derived(user?.activeDoll?.name ?? "");
|
||||
|
||||
let rootEl = $state<HTMLDivElement | null>(null);
|
||||
let isOpen = $state(false);
|
||||
@@ -121,6 +122,18 @@
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
{#if dollName}
|
||||
<div
|
||||
class={`absolute left-1/2 top-full z-10 mt-3 w-max max-w-32 -translate-x-1/2 rounded-md border border-base-300/80 bg-base-100/90 px-2 py-1 text-center text-[10px] font-medium leading-tight text-base-content/80 shadow-sm backdrop-blur-sm transition-all duration-200 ease-out ${
|
||||
$sceneInteractive
|
||||
? "translate-y-0 opacity-100"
|
||||
: "pointer-events-none -translate-y-1 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<span class="block truncate">{dollName}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class={`absolute inset-0 z-30 rounded-full transition-all duration-200 ease-out focus:outline-none ${
|
||||
|
||||
Reference in New Issue
Block a user