Improvements to the UI

components/pet/pet-emotion-bubble.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import type { AvatarMood } from "@/lib/avatar-state";
+import { getPetStatusImagePath } from "@/lib/pet-status";
+import { cn } from "@/lib/utils";
+
+type PetEmotionBubbleProps = {
+  mood: AvatarMood;
+  visible: boolean;
+  className?: string;
+};
+
+export function PetEmotionBubble({
+  mood,
+  visible,
+  className,
+}: PetEmotionBubbleProps) {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute bottom-full left-1/2 z-20 mb-1 w-[clamp(3.5rem,18vw,5.5rem)] -translate-x-1/2",
+        className,
+      )}
+      aria-hidden
+    >
+      <div className="animate-emotion-pop">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={getPetStatusImagePath(mood)}
+          alt=""
+          className="h-auto w-full object-contain image-pixelated"
+        />
+      </div>
+    </div>
+  );
+}