Virtual Pet

/** @jsxImportSource https://esm.sh/react */ import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const SPEED = 6; // pixels per step const FRAME_TIME = 80; // milliseconds per frame const BEHAVIOR_MIN_TIME = 5000; // minimum milliseconds per behavior const SPRITE_SIZE = 96; const ROW_INDEX = { "right-walk": 0, "up-walk": 1, "left-walk": 2, "down-walk": 3, "right-idle": 4, "up-idle": 5, "left-idle": 6, "down-idle": 7, }; type Behavior = "idle" | "wander" | "follow"; type AnimationDirection = "right" | "up" | "left" | "down"; type AnimationCycle = "walk" | "idle"; type AnimationLabel = `${AnimationDirection}-${AnimationCycle}`; interface PetState { behavior: Behavior; animation: AnimationLabel; frameIndex: number; x: number; y: number; behaviorChange: number; goalPos?: { x: number; y: number }; } interface MouseState { x: number; y: number; moveCount: number; moveTime: number; } function parseGoal(x: number, y: number, goalX: number, goalY: number) { const parsed: { x: number; y: number; animation: AnimationLabel } = { x: x, y: y, animation: "down-idle", }; if (goalX > x) { // Goal is somewhere to the right parsed.x = (goalX - x < SPEED) ? goalX : x + SPEED; if (goalY > y) { parsed.animation = (goalY - y > goalX - x) ? "down-walk" : "right-walk"; parsed.y = (goalY - y < SPEED) ? goalY : y + SPEED; } else if (goalY < y) { parsed.animation = (y - goalY > goalX - x) ? "up-walk" : "right-walk"; parsed.y = (y - goalY < SPEED) ? goalY : y - SPEED; } else { parsed.animation = "right-walk"; } } else if (goalX < x) { // Goal is somewhere to the left parsed.x = (x - goalX < SPEED) ? goalX : x - SPEED; if (goalY > y) { parsed.animation = (goalY - y > x - goalX) ? "down-walk" : "left-walk"; parsed.y = (goalY - y < SPEED) ? goalY : y + SPEED; } else if (goalY < y) { parsed.animation = (y - goalY > x - goalX) ? "up-walk" : "left-walk"; parsed.y = (y - goalY < SPEED) ? goalY : y - SPEED; } else { parsed.animation = "left-walk"; } } else { // Goal is somewhere above or below if (goalY > y) { parsed.animation = "down-walk"; parsed.y = (goalY - y < SPEED) ? goalY : y + SPEED; } else if (goalY < y) { parsed.animation = "up-walk"; parsed.y = (y - goalY < SPEED) ? goalY : y - SPEED; } } return parsed; } function VirtualPet({ spriteNum }: { spriteNum: number }) { const [petState, setPetState] = useState({ behavior: "idle", animation: "down-idle", frameIndex: 0, x: window.innerWidth / 2, y: window.innerHeight / 2, behaviorChange: 0, }); const mousePos = useRef({ x: 0, y: 0, moveCount: 0, moveTime: 0 }); const tick = useCallback(() => { const now = Date.now(); setPetState((prev) => { const newState = { ...prev }; newState.frameIndex = (newState.frameIndex + 1) % 8; // Check if it's time to change behavior if (now - mousePos.current.moveTime > 2000) { // User has stopped moving the mouse; idle out the interaction counts mousePos.current = { ...mousePos.current, moveCount: 0, moveTime: 0 }; } if (mousePos.current.moveCount > 5) { // User has been moving the mouse; make a random chance that the MoonCat gets interested in the mouse and follows it if (Math.random() < 0.1) { newState.behavior = "follow"; newState.behaviorChange = now; console.debug("Got interested in the mouse", mousePos.current, now); } } if (now - prev.behaviorChange > BEHAVIOR_MIN_TIME) { newState.behavior = (["idle", "wander", "follow"] as Behavior[])[Math.floor(Math.random() * 3)]; if (newState.behavior == "idle") { newState.animation = "down-idle"; newState.frameIndex = 0; } else if (newState.behavior == "wander") { newState.goalPos = { x: Math.floor(Math.random() * window.innerWidth), y: Math.floor(Math.random() * window.innerHeight), }; } newState.behaviorChange = now; console.debug("new behavior", newState.behavior, newState.x, newState.y, newState.goalPos, mousePos, now); } // Act upon current behavior switch (newState.behavior) { case "wander": { // Compare current position to goal position if (!newState.goalPos || (newState.goalPos.x == newState.x && newState.goalPos.y == newState.y)) { const [dir, cycle] = newState.animation.split("-") as [AnimationDirection, AnimationCycle]; newState.animation = `${dir}-idle`; } else { const parsed = parseGoal(newState.x, newState.y, newState.goalPos.x, newState.goalPos.y); newState.animation = parsed.animation; newState.x = parsed.x; newState.y = parsed.y; } break; } case "follow": { // Compare current position to goal position if (mousePos.current.x == newState.x && mousePos.current.y == newState.y) { const [dir, cycle] = newState.animation.split("-") as [AnimationDirection, AnimationCycle]; newState.animation = `${dir}-idle`; } else { const parsed = parseGoal(newState.x, newState.y, mousePos.current.x, mousePos.current.y); newState.animation = parsed.animation; newState.x = parsed.x; newState.y = parsed.y; } break; } } return newState; }); }, [setPetState]); useEffect(() => { function handleMouseMove(e) { const now = Date.now(); if (now - mousePos.current.moveTime > 2000) { // It's been a pause since the last mouse movement mousePos.current = { x: e.clientX, y: e.clientY, moveCount: 1, moveTime: now, }; } else { // In the midst of a mouse movement mousePos.current = { x: e.clientX, y: e.clientY, moveCount: mousePos.current.moveCount + 1, moveTime: mousePos.current.moveTime, }; } } document.addEventListener("mousemove", handleMouseMove); return () => { document.removeEventListener("mousemove", handleMouseMove); }; }, []); useEffect(() => { let ignore = false; function doTick() { if (ignore) return; tick(); setTimeout(() => requestAnimationFrame(doTick), FRAME_TIME); } doTick(); return () => { ignore = true; }; }, [tick]); return (

setPetState((prev) => ({ ...prev, behavior: "follow", behaviorChange: Date.now() }))} style={{ left: `${petState.x}px`, top: `${petState.y}px`, backgroundImage: `url('https://ipfs.io/ipfs/bafybeib5iedrzr7unbp4zq6rkrab3caik7nw7rfzlcfvu4xqs6bfk7dgje/${spriteNum}.png')`, backgroundPosition: `-${petState.frameIndex * SPRITE_SIZE}px -${ROW_INDEX[petState.animation] * SPRITE_SIZE}px`, }} /> ); } function client() { const root = document.getElementById("root"); if (root) { const spriteNum = parseInt(root.dataset.spriteNum!, 0); createRoot(root).render(); } } if (typeof document !== "undefined") { client(); } export default async function server(req: Request): Promise { const pathSegment = new URL(req.url).pathname.split("/")[1]; const spriteNum = pathSegment && /^\d+$/.test(pathSegment) ? parseInt(pathSegment, 10) : 0; const validatedSpriteNum = (spriteNum >= 0 && spriteNum < 25440) ? spriteNum : 0; return new Response( ` Virtual Pet

`, { headers: { "Content-Type": "text/html", }, }, ); } const css = ` body { margin: 0; min-height: 100vh; overflow: hidden; background: #111; } #pet { --scale: 3; position: absolute; width: calc(var(--scale) * 32px); height: calc(var(--scale) * 32px); background-size: calc(var(--scale) * 512px) calc(var(--scale) * 256px); image-rendering: pixelated; } .source-link { position: fixed; bottom: 10px; right: 10px; font-family: system-ui; opacity: 0.7; } `;

MoonCatWalk

Version 61