Clamp pet wander to lower-third ground zone.
Restrict Y to 66–90% and X to 15–85% with bottom-anchored positioning so the avatar stays on grass instead of sky or walls.
This commit is contained in:
@@ -4,6 +4,10 @@ import { useEffect, useState } from "react";
|
|||||||
|
|
||||||
import { CharacterLayerPreview } from "@/components/character/character-layer-preview";
|
import { CharacterLayerPreview } from "@/components/character/character-layer-preview";
|
||||||
import type { AvatarCustomization } from "@/lib/avatar-customization-storage";
|
import type { AvatarCustomization } from "@/lib/avatar-customization-storage";
|
||||||
|
import {
|
||||||
|
PET_WANDER_BOUNDS,
|
||||||
|
PET_WANDER_START,
|
||||||
|
} from "@/lib/pet-wander-bounds";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
type AnimatedPetSpriteProps = {
|
type AnimatedPetSpriteProps = {
|
||||||
@@ -17,10 +21,8 @@ type WanderPosition = {
|
|||||||
facing: "left" | "right";
|
facing: "left" | "right";
|
||||||
};
|
};
|
||||||
|
|
||||||
const MIN_X = 24;
|
const { minX: MIN_X, maxX: MAX_X, minY: MIN_Y, maxY: MAX_Y } =
|
||||||
const MAX_X = 72;
|
PET_WANDER_BOUNDS;
|
||||||
const MIN_Y = 34;
|
|
||||||
const MAX_Y = 62;
|
|
||||||
|
|
||||||
function randomPosition(current?: WanderPosition): WanderPosition {
|
function randomPosition(current?: WanderPosition): WanderPosition {
|
||||||
let next: WanderPosition = {
|
let next: WanderPosition = {
|
||||||
@@ -52,8 +54,8 @@ export function AnimatedPetSprite({
|
|||||||
className,
|
className,
|
||||||
}: AnimatedPetSpriteProps) {
|
}: AnimatedPetSpriteProps) {
|
||||||
const [position, setPosition] = useState<WanderPosition>({
|
const [position, setPosition] = useState<WanderPosition>({
|
||||||
x: 48,
|
x: PET_WANDER_START.x,
|
||||||
y: 48,
|
y: PET_WANDER_START.y,
|
||||||
facing: "right",
|
facing: "right",
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -82,7 +84,7 @@ export function AnimatedPetSprite({
|
|||||||
style={{
|
style={{
|
||||||
left: `${position.x}%`,
|
left: `${position.x}%`,
|
||||||
top: `${position.y}%`,
|
top: `${position.y}%`,
|
||||||
transform: "translate(-50%, -50%)",
|
transform: "translate(-50%, -100%)",
|
||||||
transition: "left 1.8s steps(10), top 1.8s steps(10)",
|
transition: "left 1.8s steps(10), top 1.8s steps(10)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
14
lib/pet-wander-bounds.ts
Normal file
14
lib/pet-wander-bounds.ts
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
/** Percentage bounds for pet wander within the LCD viewport. */
|
||||||
|
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,
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const PET_WANDER_START = {
|
||||||
|
x: 50,
|
||||||
|
y: 78,
|
||||||
|
} as const;
|
||||||
Reference in New Issue
Block a user