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.
This commit is contained in:
@@ -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}
|
||||
|
||||
239
components/pet/editable-pet-name.tsx
Normal file
239
components/pet/editable-pet-name.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
20
components/pet/pet-ground-zone.tsx
Normal file
20
components/pet/pet-ground-zone.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user