From a7da171b21109fcbc15cc17ab54fb2402d4d73f0 Mon Sep 17 00:00:00 2001
From: Wind-Explorer <windexplorer@outlook.com>
Date: Wed, 17 Dec 2025 20:10:51 +0800
Subject: [PATCH] ONEKO FTW!!!!!!

---
 src/assets/oneko/oneko.gif         | Bin 0 -> 3310 bytes
 src/routes/scene/+page.svelte      |  14 +--
 src/routes/scene/DesktopPet.svelte | 193 +++++++++++++++++++++++++++++
 3 files changed, 200 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/oneko/oneko.gif
 create mode 100644 src/routes/scene/DesktopPet.svelte

diff --git a/src/assets/oneko/oneko.gif b/src/assets/oneko/oneko.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f55a42518672269e44f3ddbf4f711a2c2a6eb063
GIT binary patch
literal 3310
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

literal 0
HcmV?d00001

diff --git a/src/routes/scene/+page.svelte b/src/routes/scene/+page.svelte
index 7097727..c177c8b 100644
--- a/src/routes/scene/+page.svelte
+++ b/src/routes/scene/+page.svelte
@@ -5,6 +5,8 @@
   } from "../../events/cursor";
   import { appData } from "../../events/app-data";
 
+  import DesktopPet from "./DesktopPet.svelte";
+
   function getFriendName(userId: string) {
     const friend = $appData?.friends?.find((f) => f.friend.id === userId);
     return friend ? friend.friend.name : userId.slice(0, 8) + "...";
@@ -56,13 +58,11 @@
   <div class="absolute inset-0 size-full">
     {#if Object.keys($friendsCursorPositions).length > 0}
       {#each Object.entries($friendsCursorPositions) as [userId, position]}
-        <div
-          style:transform="translate({position.raw.x}px, {position.raw.y}px)"
-          class="transition-transform duration-500 flex flex-col gap-1"
-        >
-          <div class="size-4 rounded-full bg-indigo-500"></div>
-          <span class="text-[0.5rem]">{getFriendName(userId)}</span>
-        </div>
+        <DesktopPet
+          targetX={position.raw.x}
+          targetY={position.raw.y}
+          name={getFriendName(userId)}
+        />
       {/each}
     {/if}
   </div>
diff --git a/src/routes/scene/DesktopPet.svelte b/src/routes/scene/DesktopPet.svelte
new file mode 100644
index 0000000..3ccbddc
--- /dev/null
+++ b/src/routes/scene/DesktopPet.svelte
@@ -0,0 +1,193 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import onekoGif from "../../assets/oneko/oneko.gif";
+
+  export let targetX = 0;
+  export let targetY = 0;
+  export let name = "";
+
+  let nekoPosX = 32;
+  let nekoPosY = 32;
+  let frameCount = 0;
+  let idleTime = 0;
+  let currentSprite = { x: -3, y: -3 }; // idle sprite initially
+
+  const nekoSpeed = 10;
+  let animationFrameId: number;
+  let lastFrameTimestamp: number;
+
+  // 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 frame(timestamp: number) {
+    if (!lastFrameTimestamp) {
+      lastFrameTimestamp = timestamp;
+    }
+
+    // 100ms per frame for the animation loop
+    if (timestamp - lastFrameTimestamp > 100) {
+      lastFrameTimestamp = timestamp;
+      updatePosition();
+    }
+
+    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) {
+      setSprite("idle", 0);
+      idleTime += 1;
+      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;
+
+    // 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;
+    nekoPosY = targetY;
+    
+    animationFrameId = requestAnimationFrame(frame);
+  });
+
+  onDestroy(() => {
+    if (animationFrameId) {
+      cancelAnimationFrame(animationFrameId);
+    }
+  });
+</script>
+
+<div
+  class="desktop-pet flex flex-col items-center"
+  style="
+    transform: translate({nekoPosX - 16}px, {nekoPosY - 16}px);
+    z-index: 50;
+  "
+>
+  <div
+    class="pixelated"
+    style="
+      width: 32px; 
+      height: 32px; 
+      background-image: url({onekoGif});
+      background-position: {currentSprite.x}px {currentSprite.y}px;
+    "
+  ></div>
+  <span
+    class="text-[10px] bg-black/50 text-white px-1 rounded backdrop-blur-sm mt-1 whitespace-nowrap"
+  >
+    {name}
+  </span>
+</div>
+
+<style>
+  .desktop-pet {
+    position: fixed; /* Fixed relative to the viewport/container */
+    top: 0;
+    left: 0;
+    pointer-events: none; /* Let clicks pass through */
+    will-change: transform;
+  }
+
+  .pixelated {
+    image-rendering: pixelated;
+  }
+</style>