Improve pet habitat UX with ground-aligned walk, floating rename, and demo points.

Anchor room floors on resize, constrain wandering to a ground zone, add an editable floating name badge on the avatar screen, and let profile demo tools grant 100 test points.
2026-05-24 09:33:08 -06:00
parent cd4f7bc7e0
commit 19b0ece147
9 changed files with 357 additions and 24 deletions
--- a/components/avatar/avatar-page-content.tsx
+++ b/components/avatar/avatar-page-content.tsx
@@ -50,7 +50,16 @@ export function AvatarPageContent() {
  return (
    <div className="flex w-full flex-col">
      <div className="bit-home-pet-stage">
-        <PetHabitat customization={customization} fillViewport />
+        <PetHabitat
+          customization={customization}
+          fillViewport
+          nameEditable
+          onNameChange={(name) =>
+            setCustomization((current) =>
+              current ? { ...current, name } : current,
+            )
+          }
+        />
      </div>

      <section className="grid w-full gap-6 pt-6 lg:grid-cols-2 lg:items-start">
--- a/components/pet/animated-pet-sprite.tsx
+++ b/components/pet/animated-pet-sprite.tsx
@@ -109,9 +109,9 @@ export function AnimatedPetSprite({
      )}
      style={{
        left: `${position.x}%`,
-        top: `${position.y}%`,
-        transform: "translate(-50%, -100%)",
-        transition: "left 1.8s steps(10), top 1.8s steps(10)",
+        bottom: `${position.y}%`,
+        transform: "translateX(-50%)",
+        transition: "left 1.8s steps(10), bottom 1.8s steps(10)",
      }}
      role={interactive ? "button" : undefined}
      tabIndex={interactive ? 0 : undefined}
--- a/components/pet/editable-pet-name.tsx
+++ b/components/pet/editable-pet-name.tsx
@@ -0,0 +1,239 @@
+"use client";
+
+import { Pencil } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Input } from "@/components/ui/input";
+import {
+  DEFAULT_AVATAR_NAME,
+  saveAvatarName,
+} from "@/lib/avatar-customization-storage";
+import { cn } from "@/lib/utils";
+
+type EditablePetNameProps = {
+  name: string;
+  moodLabel?: string;
+  editable?: boolean;
+  onNameChange?: (name: string) => void;
+  /** Frame header above LCD, or floating badge inside the LCD viewport. */
+  variant?: "frame" | "overlay";
+  size?: "default" | "landing";
+  className?: string;
+};
+
+export function EditablePetName({
+  name,
+  moodLabel,
+  editable = true,
+  onNameChange,
+  variant = "frame",
+  size = "default",
+  className,
+}: EditablePetNameProps) {
+  const [displayName, setDisplayName] = useState(name);
+  const [isEditing, setIsEditing] = useState(false);
+  const [draft, setDraft] = useState(name);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isOverlay = variant === "overlay";
+
+  useEffect(() => {
+    setDisplayName(name);
+    if (!isEditing) {
+      setDraft(name);
+    }
+  }, [name, isEditing]);
+
+  useEffect(() => {
+    if (isEditing) {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }
+  }, [isEditing]);
+
+  const beginEdit = () => {
+    if (!editable || isSaving) {
+      return;
+    }
+
+    setDraft(displayName);
+    setError(null);
+    setIsEditing(true);
+  };
+
+  const cancelEdit = () => {
+    setDraft(displayName);
+    setError(null);
+    setIsEditing(false);
+  };
+
+  const saveName = async () => {
+    const trimmed = draft.trim() || DEFAULT_AVATAR_NAME;
+
+    if (trimmed === displayName) {
+      setIsEditing(false);
+      return;
+    }
+
+    setIsSaving(true);
+    setError(null);
+
+    try {
+      const saved = await saveAvatarName(trimmed);
+      setDisplayName(saved);
+      onNameChange?.(saved);
+      setIsEditing(false);
+    } catch (saveError) {
+      setError(
+        saveError instanceof Error
+          ? saveError.message
+          : "Could not save bit name.",
+      );
+      setDraft(displayName);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const overlayNameClass =
+    size === "landing"
+      ? "lcd-readable-name lcd-readable-name-landing"
+      : cn(
+          "lcd-readable-name text-sm sm:text-base md:text-lg",
+        );
+
+  const editInput = (
+    <div className={cn(isOverlay ? "space-y-1" : "space-y-2")}>
+      <Input
+        ref={inputRef}
+        value={draft}
+        maxLength={32}
+        disabled={isSaving}
+        aria-label="Bit name"
+        className={cn(
+          "font-pixel",
+          isOverlay
+            ? cn("h-8 min-w-[6rem] px-2 py-1 text-sm", overlayNameClass)
+            : "h-9 text-base",
+        )}
+        onChange={(event) => setDraft(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            void saveName();
+          }
+
+          if (event.key === "Escape") {
+            event.preventDefault();
+            cancelEdit();
+          }
+        }}
+        onBlur={() => {
+          void saveName();
+        }}
+        onClick={(event) => event.stopPropagation()}
+      />
+      {error ? (
+        <p
+          className={cn(
+            "text-red-500",
+            isOverlay ? "text-[10px]" : "text-xs",
+          )}
+        >
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+
+  const displayRow = editable ? (
+    <div
+      className={cn(
+        "flex items-center gap-1",
+        isOverlay && cn("max-w-full", overlayNameClass),
+        !isOverlay &&
+          "group min-w-0 flex-1 items-center gap-2 border-2 border-border bg-card/80 px-3 py-2 shadow-[var(--retro-shadow-sm)]",
+      )}
+    >
+      {isOverlay ? (
+        <span className="min-w-0 truncate font-pixel leading-snug">
+          {displayName}
+        </span>
+      ) : (
+        <button
+          type="button"
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            beginEdit();
+          }}
+          className={cn(
+            "group flex min-w-0 flex-1 items-center gap-2 text-left transition-colors",
+            "hover:border-primary/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+          aria-label={`Edit name: ${displayName}`}
+        >
+          <span className="min-w-0 flex-1 truncate font-pixel text-base leading-snug text-foreground">
+            {displayName}
+          </span>
+          <Pencil
+            aria-hidden="true"
+            className="size-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground"
+            strokeWidth={2.5}
+          />
+        </button>
+      )}
+      {isOverlay ? (
+        <button
+          type="button"
+          aria-label="Edit bit name"
+          title="Edit bit name"
+          disabled={isSaving}
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            beginEdit();
+          }}
+          className="flex shrink-0 items-center justify-center p-0.5 text-muted-foreground transition-colors hover:text-foreground"
+        >
+          <Pencil aria-hidden="true" className="size-3" strokeWidth={2.5} />
+        </button>
+      ) : null}
+    </div>
+  ) : (
+    <p
+      className={cn(
+        "min-w-0 truncate font-pixel leading-snug text-foreground",
+        !isOverlay && "flex-1 text-base",
+        isOverlay && overlayNameClass,
+      )}
+    >
+      {displayName}
+    </p>
+  );
+
+  return (
+    <div
+      className={cn(
+        isOverlay
+          ? "absolute right-2 top-2 z-20 max-w-[58%]"
+          : "mb-3 shrink-0 border-b-2 border-border/60 pb-3",
+        className,
+      )}
+      onClick={(event) => {
+        if (isEditing) {
+          event.stopPropagation();
+        }
+      }}
+    >
+      {isEditing ? editInput : displayRow}
+
+      {!isOverlay && moodLabel ? (
+        <p className="mt-1.5 text-xs uppercase tracking-[0.2em] text-secondary">
+          {moodLabel}
+        </p>
+      ) : null}
+    </div>
+  );
+}
--- a/components/pet/parallax-room-background.tsx
+++ b/components/pet/parallax-room-background.tsx
@@ -26,7 +26,7 @@ export function ParallaxRoomBackground({
        src={room.sceneImage}
        alt=""
        aria-hidden
-        className="absolute inset-0 size-full object-cover image-pixelated"
+        className="absolute inset-0 size-full object-cover object-bottom image-pixelated"
      />
    </div>
  );
--- a/components/pet/pet-ground-zone.tsx
+++ b/components/pet/pet-ground-zone.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { PET_GROUND_ZONE_HEIGHT_RATIO } from "@/lib/pet-wander-bounds";
+import { cn } from "@/lib/utils";
+
+type PetGroundZoneProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function PetGroundZone({ children, className }: PetGroundZoneProps) {
+  return (
+    <div
+      className={cn("absolute inset-x-0 bottom-0 z-10", className)}
+      style={{ height: `${PET_GROUND_ZONE_HEIGHT_RATIO * 100}%` }}
+    >
+      {children}
+    </div>
+  );
+}
--- a/components/pet/pet-habitat.tsx
+++ b/components/pet/pet-habitat.tsx
@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";

 import { AnimatedPetSprite } from "@/components/pet/animated-pet-sprite";
+import { EditablePetName } from "@/components/pet/editable-pet-name";
+import { PetGroundZone } from "@/components/pet/pet-ground-zone";
 import { PetEmotionCaption } from "@/components/pet/pet-emotion-caption";
 import { ParallaxRoomBackground } from "@/components/pet/parallax-room-background";
 import { PixelGauge } from "@/components/pet/pixel-gauge";
@@ -26,6 +28,8 @@ type PetHabitatProps = {
  fillViewport?: boolean;
  /** Bit name in the LCD top-right (landing preview). */
  nameInLcd?: boolean;
+  nameEditable?: boolean;
+  onNameChange?: (name: string) => void;
  petScale?: number;
  lcdClassName?: string;
  lcdRef?: React.Ref<HTMLDivElement>;
@@ -36,6 +40,8 @@ export function PetHabitat({
  className,
  fillViewport = false,
  nameInLcd = false,
+  nameEditable = false,
+  onNameChange,
  petScale,
  lcdClassName: lcdClassNameOverride,
  lcdRef,
@@ -104,8 +110,10 @@ export function PetHabitat({
  );

  const gaugeOverlaySize = fillViewport ? "responsive" : "md";
-  const showNameAboveShell = !fillViewport && !nameInLcd;
-  const showNameInLcdOverlay = fillViewport || nameInLcd;
+  const showStaticNameAboveShell = !nameEditable && !fillViewport && !nameInLcd;
+  const showFloatingEditableName = nameEditable && (fillViewport || !nameInLcd);
+  const showReadOnlyLcdName =
+    !nameEditable && (fillViewport || nameInLcd);

  if (!isReady) {
    return (
@@ -119,7 +127,7 @@ export function PetHabitat({

  return (
    <div className={shellClassName}>
-      {showNameAboveShell ? (
+      {showStaticNameAboveShell ? (
        <div className="mb-3 shrink-0 border-b-2 border-border/60 pb-3">
          <p className="text-sm text-foreground">{customization.name}</p>
        </div>
@@ -127,14 +135,16 @@ export function PetHabitat({

      <div ref={lcdRef} className={lcdClassName}>
        <ParallaxRoomBackground roomId={roomId as RoomBackgroundId} />
-        <AnimatedPetSprite
-          customization={customization}
-          petScale={petScale}
-          interactive={interactive}
-          emotionVisible={emotionVisible}
-          mood={condition.mood}
-          onInteract={showEmotionBriefly}
-        />
+        <PetGroundZone>
+          <AnimatedPetSprite
+            customization={customization}
+            petScale={petScale}
+            interactive={interactive}
+            emotionVisible={emotionVisible}
+            mood={condition.mood}
+            onInteract={showEmotionBriefly}
+          />
+        </PetGroundZone>
        <PetEmotionCaption mood={condition.mood} visible={emotionVisible} />
        <div className="pointer-events-none absolute left-2 top-2 z-20 grid gap-1 sm:gap-1.5">
          <PixelGauge
@@ -150,7 +160,15 @@ export function PetHabitat({
            overlaySize={gaugeOverlaySize}
          />
        </div>
-        {showNameInLcdOverlay ? (
+        {showFloatingEditableName ? (
+          <EditablePetName
+            name={customization.name}
+            onNameChange={onNameChange}
+            variant="overlay"
+            size={fillViewport ? "default" : "landing"}
+          />
+        ) : null}
+        {showReadOnlyLcdName ? (
          <p
            className={cn(
              "pointer-events-none absolute right-2 top-2 z-20 max-w-[52%] truncate text-right lcd-readable-name",
--- a/components/profile/profile-preferences-form.tsx
+++ b/components/profile/profile-preferences-form.tsx
@@ -24,8 +24,11 @@ import {
  requestNotificationPermission,
 } from "@/lib/daily-reminders";
 import { getDailyReminderStatus } from "@/lib/daily-reminder-status";
-import { getTodayDateKey } from "@/lib/habits-storage";
+import { adjustCoins } from "@/lib/avatar-progression-storage";
+import { notifyHabitPetDataUpdated } from "@/lib/app-events";
+import { DEMO_COINS_GRANT } from "@/lib/coins";
 import { resetTodaysDailyQuiz } from "@/lib/daily-quiz-storage";
+import { getTodayDateKey } from "@/lib/habits-storage";
 import {
  reminderDeliveryOptions,
  usesSystemReminders,
@@ -59,6 +62,8 @@ export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {
  );
  const [quizResetMessage, setQuizResetMessage] = useState<string | null>(null);
  const [isResettingQuiz, setIsResettingQuiz] = useState(false);
+  const [coinsGrantMessage, setCoinsGrantMessage] = useState<string | null>(null);
+  const [isGrantingCoins, setIsGrantingCoins] = useState(false);

  useEffect(() => {
    setNotificationPermission(getNotificationPermissionState());
@@ -212,6 +217,28 @@ export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {
    );
  };

+  const handleGrantDemoCoins = async () => {
+    setCoinsGrantMessage(null);
+    setError(null);
+    setIsGrantingCoins(true);
+
+    try {
+      const nextBalance = await adjustCoins(DEMO_COINS_GRANT);
+      notifyHabitPetDataUpdated();
+      setCoinsGrantMessage(
+        `Added ${DEMO_COINS_GRANT} points. Your balance is now ${nextBalance}.`,
+      );
+    } catch (grantError) {
+      setError(
+        grantError instanceof Error
+          ? grantError.message
+          : "Could not add demo points.",
+      );
+    } finally {
+      setIsGrantingCoins(false);
+    }
+  };
+
  const handleResetDailyQuiz = async () => {
    setQuizResetMessage(null);
    setError(null);
@@ -399,8 +426,22 @@ export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {
        <CardContent className="space-y-4">
          <p className="text-xs text-muted-foreground">
            Reset clears today&apos;s wellness quiz entry so you can complete it
-            again immediately.
+            again immediately. Demo points are for testing the shop only.
          </p>
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full"
+            disabled={isSaving || isGrantingCoins}
+            onClick={() => void handleGrantDemoCoins()}
+          >
+            {isGrantingCoins
+              ? "Adding points..."
+              : `Add ${DEMO_COINS_GRANT} free points`}
+          </Button>
+          {coinsGrantMessage ? (
+            <p className="text-xs text-emerald-600">{coinsGrantMessage}</p>
+          ) : null}
          <Button
            type="button"
            variant="outline"
--- a/lib/coins.ts
+++ b/lib/coins.ts
@@ -1,5 +1,8 @@
 export const DEFAULT_STARTING_COINS = 100;

+/** Demo grant amount from Profile → Demo tools. */
+export const DEMO_COINS_GRANT = 100;
+
 export const COINS_PER_TASK_COMPLETE = 50;
 export const COINS_PER_TASK_UNCHECK = -50;

--- a/lib/pet-wander-bounds.ts
+++ b/lib/pet-wander-bounds.ts
@@ -1,14 +1,17 @@
-/** Percentage bounds for pet wander within the LCD viewport. */
+/** Ground band height as a fraction of the LCD — matches room PNG floor (~bottom 22%). */
+export const PET_GROUND_ZONE_HEIGHT_RATIO = 0.22;
+
+/** Wander bounds inside the ground zone (not the full LCD). */
 export const PET_WANDER_BOUNDS = {
  /** Horizontal inset — keep pet off side walls */
  minX: 15,
  maxX: 85,
-  /** Lower third of LCD — ground where hills/grass/floor render */
-  minY: 66,
-  maxY: 90,
+  /** Vertical offset from floor, as % of ground zone height (0 = feet on floor) */
+  minY: 0,
+  maxY: 65,
 } as const;

 export const PET_WANDER_START = {
  x: 50,
-  y: 78,
+  y: 12,
 } as const;