refactored desktop pet component

src/lib/components/PetSprite.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  export let spriteSheetUrl: string;
+  export let spriteX: number;
+  export let spriteY: number;
+  export let size = 32;
+</script>
+
+<div
+  class="pixelated"
+  style="
+    width: {size}px;
+    height: {size}px;
+    background-image: url('{spriteSheetUrl}');
+    background-position: {spriteX}px {spriteY}px;
+  "
+></div>

src/lib/composables/usePetState.ts

@@ -0,0 +1,148 @@
+import { writable, get } from "svelte/store";
+import { SPRITE_SETS, SPRITE_SIZE, PET_SPEED } from "../constants/pet-sprites";
+
+export function usePetState(initialX = 32, initialY = 32) {
+  const position = writable({ x: initialX, y: initialY });
+  const currentSprite = writable({ x: -3, y: -3 });
+
+  // Internal state not exposed directly
+  let frameCount = 0;
+  let idleTime = 0;
+  let idleAnimation: string | null = null;
+  let idleAnimationFrame = 0;
+
+  function setSprite(name: string, frame: number) {
+    const sprites = SPRITE_SETS[name];
+    if (!sprites) return;
+    const sprite = sprites[frame % sprites.length];
+    currentSprite.set({
+      x: sprite[0] * SPRITE_SIZE,
+      y: sprite[1] * SPRITE_SIZE,
+    });
+  }
+
+  function resetIdleAnimation() {
+    idleAnimation = null;
+    idleAnimationFrame = 0;
+  }
+
+  function handleIdle(windowWidth: number, windowHeight: number) {
+    idleTime += 1;
+    const currentPos = get(position);
+
+    // every ~ 20 seconds (idleTime increments every frame, with ~10 frames/second, so ~200 frames)
+    if (
+      idleTime > 10 &&
+      Math.floor(Math.random() * 200) == 0 &&
+      idleAnimation == null
+    ) {
+      let availableIdleAnimations = ["sleeping", "scratchSelf"];
+      if (currentPos.x < 32) {
+        availableIdleAnimations.push("scratchWallW");
+      }
+      if (currentPos.y < 32) {
+        availableIdleAnimations.push("scratchWallN");
+      }
+      if (currentPos.x > windowWidth - 32) {
+        availableIdleAnimations.push("scratchWallE");
+      }
+      if (currentPos.y > windowHeight - 32) {
+        availableIdleAnimations.push("scratchWallS");
+      }
+      idleAnimation =
+        availableIdleAnimations[
+          Math.floor(Math.random() * availableIdleAnimations.length)
+        ];
+    }
+
+    if (!idleAnimation) {
+      setSprite("idle", 0);
+      return;
+    }
+
+    switch (idleAnimation) {
+      case "sleeping":
+        if (idleAnimationFrame < 8) {
+          setSprite("tired", 0);
+          break;
+        }
+        setSprite("sleeping", Math.floor(idleAnimationFrame / 4));
+        if (idleAnimationFrame > 192) {
+          resetIdleAnimation();
+        }
+        break;
+      case "scratchWallN":
+      case "scratchWallS":
+      case "scratchWallE":
+      case "scratchWallW":
+      case "scratchSelf":
+        setSprite(idleAnimation, idleAnimationFrame);
+        if (idleAnimationFrame > 9) {
+          resetIdleAnimation();
+        }
+        break;
+      default:
+        setSprite("idle", 0);
+        return;
+    }
+    idleAnimationFrame += 1;
+  }
+
+  function updatePosition(
+    targetX: number,
+    targetY: number,
+    windowWidth: number,
+    windowHeight: number,
+  ) {
+    frameCount += 1;
+    const currentPos = get(position);
+
+    const diffX = currentPos.x - targetX;
+    const diffY = currentPos.y - targetY;
+    const distance = Math.sqrt(diffX ** 2 + diffY ** 2);
+
+    // If close enough, stop moving and idle
+    if (distance < PET_SPEED || distance < 48) {
+      handleIdle(windowWidth, windowHeight);
+      return;
+    }
+
+    // Alert behavior: pause briefly before moving if we were idling
+    if (idleTime > 1) {
+      setSprite("alert", 0);
+      idleTime = Math.min(idleTime, 7);
+      idleTime -= 1;
+      return;
+    }
+
+    idleTime = 0;
+    idleAnimation = null;
+    idleAnimationFrame = 0;
+
+    // Calculate direction
+    let direction = "";
+    direction = diffY / distance > 0.5 ? "N" : "";
+    direction += diffY / distance < -0.5 ? "S" : "";
+    direction += diffX / distance > 0.5 ? "W" : "";
+    direction += diffX / distance < -0.5 ? "E" : "";
+
+    // Fallback if direction is empty
+    if (direction === "") direction = "idle";
+
+    setSprite(direction, frameCount);
+
+    // Move towards target
+    position.update((p) => ({
+      x: p.x - (diffX / distance) * PET_SPEED,
+      y: p.y - (diffY / distance) * PET_SPEED,
+    }));
+  }
+
+  return {
+    position,
+    currentSprite,
+    updatePosition,
+    // Helper to force position if needed (e.g. on mount)
+    setPosition: (x: number, y: number) => position.set({ x, y }),
+  };
+}

src/lib/constants/pet-sprites.ts

@@ -0,0 +1,69 @@
+export type SpriteCoordinates = [number, number];
+export type SpriteSet = Record<string, SpriteCoordinates[]>;
+
+export const SPRITE_SETS: SpriteSet = {
+  idle: [[-3, -3]],
+  alert: [[-7, -3]],
+  scratchSelf: [
+    [-5, 0],
+    [-6, 0],
+    [-7, 0],
+  ],
+  scratchWallN: [
+    [0, 0],
+    [0, -1],
+  ],
+  scratchWallS: [
+    [-7, -1],
+    [-6, -2],
+  ],
+  scratchWallE: [
+    [-2, -2],
+    [-2, -3],
+  ],
+  scratchWallW: [
+    [-4, 0],
+    [-4, -1],
+  ],
+  tired: [[-3, -2]],
+  sleeping: [
+    [-2, 0],
+    [-2, -1],
+  ],
+  N: [
+    [-1, -2],
+    [-1, -3],
+  ],
+  NE: [
+    [0, -2],
+    [0, -3],
+  ],
+  E: [
+    [-3, 0],
+    [-3, -1],
+  ],
+  SE: [
+    [-5, -1],
+    [-5, -2],
+  ],
+  S: [
+    [-6, -3],
+    [-7, -2],
+  ],
+  SW: [
+    [-5, -3],
+    [-6, -1],
+  ],
+  W: [
+    [-4, -2],
+    [-4, -3],
+  ],
+  NW: [
+    [-1, 0],
+    [-1, -1],
+  ],
+};
+
+export const SPRITE_SIZE = 32;
+export const PET_SPEED = 10;
+export const ANIMATION_FRAME_RATE = 100; // ms

src/lib/utils/sprite-utils.ts

@@ -0,0 +1,28 @@
+import { invoke } from "@tauri-apps/api/core";
+import onekoGif from "../../assets/oneko/oneko.gif";
+
+export interface RecolorOptions {
+  bodyColor: string;
+  outlineColor: string;
+  applyTexture?: boolean;
+}
+
+export async function getSpriteSheetUrl(
+  options?: RecolorOptions,
+): Promise<string> {
+  if (!options || !options.bodyColor || !options.outlineColor) {
+    return onekoGif;
+  }
+
+  try {
+    const result = await invoke<string>("recolor_gif_base64", {
+      whiteColorHex: options.bodyColor,
+      blackColorHex: options.outlineColor,
+      applyTexture: options.applyTexture ?? true,
+    });
+    return `data:image/gif;base64,${result}`;
+  } catch (e) {
+    console.error("Failed to recolor sprite:", e);
+    return onekoGif;
+  }
+}

src/routes/app-menu/components/doll-preview.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { onMount, onDestroy } from "svelte";
-  import { invoke } from "@tauri-apps/api/core";
+  import { SPRITE_SETS, SPRITE_SIZE } from "$lib/constants/pet-sprites";
+  import { getSpriteSheetUrl } from "$lib/utils/sprite-utils";
+  import PetSprite from "$lib/components/PetSprite.svelte";
 
   export let bodyColor: string;
   export let outlineColor: string;
@@ -15,91 +17,22 @@
   let frameTimer: number;
   let switchTimeout: number;
 
-  // Sprite constants from DesktopPet.svelte
+  const setNames = Object.keys(SPRITE_SETS);
-  const spriteSets: Record<string, [number, number][]> = {
-    idle: [[-3, -3]],
-    alert: [[-7, -3]],
-    scratchSelf: [
-      [-5, 0],
-      [-6, 0],
-      [-7, 0],
-    ],
-    scratchWallN: [
-      [0, 0],
-      [0, -1],
-    ],
-    scratchWallS: [
-      [-7, -1],
-      [-6, -2],
-    ],
-    scratchWallE: [
-      [-2, -2],
-      [-2, -3],
-    ],
-    scratchWallW: [
-      [-4, 0],
-      [-4, -1],
-    ],
-    tired: [[-3, -2]],
-    sleeping: [
-      [-2, 0],
-      [-2, -1],
-    ],
-    N: [
-      [-1, -2],
-      [-1, -3],
-    ],
-    NE: [
-      [0, -2],
-      [0, -3],
-    ],
-    E: [
-      [-3, 0],
-      [-3, -1],
-    ],
-    SE: [
-      [-5, -1],
-      [-5, -2],
-    ],
-    S: [
-      [-6, -3],
-      [-7, -2],
-    ],
-    SW: [
-      [-5, -3],
-      [-6, -1],
-    ],
-    W: [
-      [-4, -2],
-      [-4, -3],
-    ],
-    NW: [
-      [-1, 0],
-      [-1, -1],
-    ],
-  };
-
-  const setNames = Object.keys(spriteSets);
 
   function generatePreview() {
     error = null;
-    try {
+    getSpriteSheetUrl({
-      invoke<string>("recolor_gif_base64", {
+      bodyColor,
-        whiteColorHex: bodyColor,
+      outlineColor,
-        blackColorHex: outlineColor,
       applyTexture,
     })
-        .then((result) => {
+      .then((url: string) => {
-          previewBase64 = result;
+        previewBase64 = url;
       })
-        .catch((e) => {
+      .catch((e: unknown) => {
         error = (e as Error)?.message ?? String(e);
         console.error(e);
       });
-    } catch (e) {
-      error = (e as Error)?.message ?? String(e);
-      console.error(e);
-    }
   }
 
   function debouncedGeneratePreview() {
@@ -111,9 +44,9 @@
 
   function updateFrame() {
     const setName = setNames[currentSetIndex];
-    const frames = spriteSets[setName];
+    const frames = SPRITE_SETS[setName];
     const sprite = frames[frameIndex % frames.length];
-    currentSprite = { x: sprite[0] * 32, y: sprite[1] * 32 };
+    currentSprite = { x: sprite[0] * SPRITE_SIZE, y: sprite[1] * SPRITE_SIZE };
   }
 
   function switchSet() {
@@ -123,7 +56,7 @@
 
   function startSet() {
     const setName = setNames[currentSetIndex];
-    const frames = spriteSets[setName];
+    const frames = SPRITE_SETS[setName];
     frameIndex = 0;
     updateFrame();
     const frameDuration = frames.length > 0 ? 1000 / frames.length : 1000;
@@ -161,15 +94,14 @@
         Error
       </div>
     {:else if previewBase64}
-      <div
+      <div class="hover:scale-110 active:scale-95 transition-transform">
-        class="pixelated"
+        <PetSprite
-        style="
+          spriteSheetUrl={previewBase64}
-          width: 32px;
+          spriteX={currentSprite.x}
-          height: 32px;
+          spriteY={currentSprite.y}
-          background-image: url('data:image/gif;base64,{previewBase64}');
+          size={32}
-          background-position: {currentSprite.x}px {currentSprite.y}px;
+        />
-        "
+      </div>
-      ></div>
     {:else}
       <div class="size-full skeleton" style:background-color={bodyColor}></div>
     {/if}

src/routes/scene/DesktopPet.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { onMount, onDestroy } from "svelte";
-  import { invoke } from "@tauri-apps/api/core";
+  import { usePetState } from "$lib/composables/usePetState";
+  import { getSpriteSheetUrl } from "$lib/utils/sprite-utils";
+  import PetSprite from "$lib/components/PetSprite.svelte";
   import onekoGif from "../../assets/oneko/oneko.gif";
 
   export let targetX = 0;
@@ -10,176 +12,30 @@
   export let outlineColor: string | undefined = undefined;
   export let isInteractive = false;
 
-  let nekoPosX = 32;
+  const { position, currentSprite, updatePosition, setPosition } = usePetState(
-  let nekoPosY = 32;
+    32,
-  let frameCount = 0;
+    32,
-  let idleTime = 0;
+  );
-  let idleAnimation: string | null = null;
-  let idleAnimationFrame = 0;
-  let currentSprite = { x: -3, y: -3 }; // idle sprite initially
 
-  const nekoSpeed = 10;
   let animationFrameId: number;
   let lastFrameTimestamp: number;
-
+  let spriteSheetUrl = onekoGif;
-  let spriteSheetUrl = onekoGif; // Default to standard GIF
-  let isCustomSprite = false;
 
   // Watch for color changes to regenerate sprite
-  $: if (bodyColor && outlineColor) {
+  $: updateSprite(bodyColor, outlineColor);
-    updateSpriteSheet(bodyColor, outlineColor);
-  } else {
-    // Revert to default if colors are missing
-    spriteSheetUrl = onekoGif;
-    isCustomSprite = false;
-  }
 
-  async function updateSpriteSheet(body: string, outline: string) {
+  async function updateSprite(
-    try {
+    body: string | undefined,
-      const result = await invoke<string>("recolor_gif_base64", {
+    outline: string | undefined,
-        whiteColorHex: body,
-        blackColorHex: outline,
-        applyTexture: true,
-      });
-      spriteSheetUrl = `data:image/gif;base64,${result}`;
-      isCustomSprite = true;
-    } catch (e) {
-      console.error("Failed to recolor sprite:", e);
-      // Fallback
-      spriteSheetUrl = onekoGif;
-      isCustomSprite = false;
-    }
-  }
-
-  // Sprite constants from oneko.js
-  const spriteSets: Record<string, [number, number][]> = {
-    idle: [[-3, -3]],
-    alert: [[-7, -3]],
-    scratchSelf: [
-      [-5, 0],
-      [-6, 0],
-      [-7, 0],
-    ],
-    scratchWallN: [
-      [0, 0],
-      [0, -1],
-    ],
-    scratchWallS: [
-      [-7, -1],
-      [-6, -2],
-    ],
-    scratchWallE: [
-      [-2, -2],
-      [-2, -3],
-    ],
-    scratchWallW: [
-      [-4, 0],
-      [-4, -1],
-    ],
-    tired: [[-3, -2]],
-    sleeping: [
-      [-2, 0],
-      [-2, -1],
-    ],
-    N: [
-      [-1, -2],
-      [-1, -3],
-    ],
-    NE: [
-      [0, -2],
-      [0, -3],
-    ],
-    E: [
-      [-3, 0],
-      [-3, -1],
-    ],
-    SE: [
-      [-5, -1],
-      [-5, -2],
-    ],
-    S: [
-      [-6, -3],
-      [-7, -2],
-    ],
-    SW: [
-      [-5, -3],
-      [-6, -1],
-    ],
-    W: [
-      [-4, -2],
-      [-4, -3],
-    ],
-    NW: [
-      [-1, 0],
-      [-1, -1],
-    ],
-  };
-
-  function setSprite(name: string, frame: number) {
-    const sprites = spriteSets[name];
-    const sprite = sprites[frame % sprites.length];
-    currentSprite = { x: sprite[0] * 32, y: sprite[1] * 32 };
-  }
-
-  function resetIdleAnimation() {
-    idleAnimation = null;
-    idleAnimationFrame = 0;
-  }
-
-  function idle() {
-    idleTime += 1;
-
-    // every ~ 20 seconds (idleTime increments every frame, with ~10 frames/second, so ~200 frames)
-    if (
-      idleTime > 10 &&
-      Math.floor(Math.random() * 200) == 0 &&
-      idleAnimation == null
   ) {
-      let availableIdleAnimations = ["sleeping", "scratchSelf"];
+    if (body && outline) {
-      if (nekoPosX < 32) {
+      spriteSheetUrl = await getSpriteSheetUrl({
-        availableIdleAnimations.push("scratchWallW");
+        bodyColor: body,
+        outlineColor: outline,
+      });
+    } else {
+      spriteSheetUrl = onekoGif;
     }
-      if (nekoPosY < 32) {
-        availableIdleAnimations.push("scratchWallN");
-      }
-      if (nekoPosX > window.innerWidth - 32) {
-        availableIdleAnimations.push("scratchWallE");
-      }
-      if (nekoPosY > window.innerHeight - 32) {
-        availableIdleAnimations.push("scratchWallS");
-      }
-      idleAnimation =
-        availableIdleAnimations[
-          Math.floor(Math.random() * availableIdleAnimations.length)
-        ];
-    }
-
-    switch (idleAnimation) {
-      case "sleeping":
-        if (idleAnimationFrame < 8) {
-          setSprite("tired", 0);
-          break;
-        }
-        setSprite("sleeping", Math.floor(idleAnimationFrame / 4));
-        if (idleAnimationFrame > 192) {
-          resetIdleAnimation();
-        }
-        break;
-      case "scratchWallN":
-      case "scratchWallS":
-      case "scratchWallE":
-      case "scratchWallW":
-      case "scratchSelf":
-        setSprite(idleAnimation, idleAnimationFrame);
-        if (idleAnimationFrame > 9) {
-          resetIdleAnimation();
-        }
-        break;
-      default:
-        setSprite("idle", 0);
-        return;
-    }
-    idleAnimationFrame += 1;
   }
 
   function frame(timestamp: number) {
@@ -190,58 +46,15 @@
     // 100ms per frame for the animation loop
     if (timestamp - lastFrameTimestamp > 100) {
       lastFrameTimestamp = timestamp;
-      updatePosition();
+      updatePosition(targetX, targetY, window.innerWidth, window.innerHeight);
     }
 
     animationFrameId = requestAnimationFrame(frame);
   }
 
-  function updatePosition() {
-    frameCount += 1;
-    const diffX = nekoPosX - targetX;
-    const diffY = nekoPosY - targetY;
-    const distance = Math.sqrt(diffX ** 2 + diffY ** 2);
-
-    // If close enough, stop moving and idle
-    if (distance < nekoSpeed || distance < 48) {
-      idle();
-      return;
-    }
-
-    // Alert behavior: pause briefly before moving if we were idling
-    if (idleTime > 1) {
-      setSprite("alert", 0);
-      idleTime = Math.min(idleTime, 7);
-      idleTime -= 1;
-      return;
-    }
-
-    idleTime = 0;
-    idleAnimation = null;
-    idleAnimationFrame = 0;
-
-    // Calculate direction
-    let direction = "";
-    direction = diffY / distance > 0.5 ? "N" : "";
-    direction += diffY / distance < -0.5 ? "S" : "";
-    direction += diffX / distance > 0.5 ? "W" : "";
-    direction += diffX / distance < -0.5 ? "E" : "";
-
-    // Fallback if direction is empty (shouldn't happen with logic above but good safety)
-    if (direction === "") direction = "idle";
-
-    setSprite(direction, frameCount);
-
-    // Move towards target
-    nekoPosX -= (diffX / distance) * nekoSpeed;
-    nekoPosY -= (diffY / distance) * nekoSpeed;
-  }
-
   onMount(() => {
     // Initialize position to target so it doesn't fly in from 32,32 every time
-    nekoPosX = targetX;
+    setPosition(targetX, targetY);
-    nekoPosY = targetY;
-
     animationFrameId = requestAnimationFrame(frame);
   });
 
@@ -258,19 +71,18 @@
   }}
   class="desktop-pet flex flex-col items-center relative"
   style="
-    transform: translate({nekoPosX - 16}px, {nekoPosY - 16}px);
+    transform: translate({$position.x - 16}px, {$position.y - 16}px);
     z-index: 50;
   "
 >
-  <div
+  <div class="hover:scale-110 active:scale-95 transition-transform">
-    class="pixelated hover:scale-110 active:scale-95"
+    <PetSprite
-    style="
+      {spriteSheetUrl}
-      width: 32px;
+      spriteX={$currentSprite.x}
-      height: 32px;
+      spriteY={$currentSprite.y}
-      background-image: url('{spriteSheetUrl}');
+    />
-      background-position: {currentSprite.x}px {currentSprite.y}px;
+  </div>
-    "
+
-  ></div>
   <span
     class="absolute -bottom-5 width-full text-[10px] bg-black/50 text-white px-1 rounded backdrop-blur-sm mt-1 whitespace-nowrap opacity-0 transition-opacity"
     class:opacity-100={isInteractive}

src/types/images.d.ts

@@ -0,0 +1,4 @@
+declare module "*.gif" {
+  const content: string;
+  export default content;
+}