blog/public/scripts/oneko.js

// oneko.js — navbar wanderer (based on https://github.com/adryd325/oneko.js)

(function oneko() {
  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

  const SIZE  = 32;
  const SPEED = 10;

  const spriteSets = {
    idle:        [[-3, -3]],
    alert:       [[-7, -3]],
    scratchSelf: [[-5, 0], [-6, 0], [-7, 0]],
    scratchWallE:[[-2, -2], [-2, -3]],
    scratchWallW:[[-4, 0],  [-4, -1]],
    tired:       [[-3, -2]],
    sleeping:    [[-2, 0],  [-2, -1]],
    E:           [[-3, 0],  [-3, -1]],
    W:           [[-4, -2], [-4, -3]],
  };

  const track = document.getElementById("oneko-track");
  if (!track) return;

  const el = document.createElement("div");
  el.id                   = "oneko";
  el.ariaHidden           = "true";
  el.style.width          = `${SIZE}px`;
  el.style.height         = `${SIZE}px`;
  el.style.position       = "absolute";
  el.style.bottom         = "0";
  el.style.pointerEvents  = "none";
  el.style.imageRendering = "pixelated";
  el.style.zIndex         = "2147483647";
  el.style.backgroundImage= "url(/oneko.gif)";
  track.appendChild(el);

  function maxX()         { return track.offsetWidth - SIZE; }
  function clamp(v,lo,hi) { return Math.max(lo, Math.min(hi, v)); }
  function randomTarget() { return Math.random() * maxX(); }

  function setSprite(name, frame) {
    const s = spriteSets[name][frame % spriteSets[name].length];
    el.style.backgroundPosition = `${s[0] * SIZE}px ${s[1] * SIZE}px`;
  }

  let posX          = randomTarget();
  let targetX       = posX;
  el.style.left     = `${posX}px`;

  let frameCount    = 0;
  let idleTime      = 0;
  let idleAnim      = null;
  let idleAnimFrame = 0;
  let lastTs        = null;

  function resetIdle() { idleAnim = null; idleAnimFrame = 0; }

  function idle() {
    idleTime++;

    if (idleTime > 40 && Math.floor(Math.random() * 120) === 0) {
      targetX = randomTarget();
      idleTime = 0;
      resetIdle();
      return;
    }

    if (idleTime > 15 && idleAnim == null && Math.floor(Math.random() * 180) === 0) {
      const opts = ["sleeping", "scratchSelf"];
      if (posX <= SIZE)         opts.push("scratchWallW");
      if (posX >= maxX() - SIZE) opts.push("scratchWallE");
      idleAnim = opts[Math.floor(Math.random() * opts.length)];
    }

    switch (idleAnim) {
      case "sleeping":
        if (idleAnimFrame < 8) { setSprite("tired", 0); break; }
        setSprite("sleeping", Math.floor(idleAnimFrame / 4));
        if (idleAnimFrame > 192) resetIdle();
        break;
      case "scratchWallE":
      case "scratchWallW":
      case "scratchSelf":
        setSprite(idleAnim, idleAnimFrame);
        if (idleAnimFrame > 9) resetIdle();
        break;
      default:
        setSprite("idle", 0);
        return;
    }
    idleAnimFrame++;
  }

  function frame() {
    frameCount++;
    const diff = targetX - posX;
    const dist = Math.abs(diff);

    if (dist < SPEED) {
      posX = targetX;
      idle();
      return;
    }

    resetIdle();

    if (idleTime > 5) {
      setSprite("alert", 0);
      idleTime = Math.min(idleTime, 7) - 1;
      return;
    }
    idleTime = 0;

    setSprite(diff > 0 ? "E" : "W", frameCount);
    posX = clamp(posX + (diff > 0 ? SPEED : -SPEED), 0, maxX());
    el.style.left = `${posX}px`;
  }

  function loop(ts) {
    if (!el.isConnected) return;
    if (!lastTs) lastTs = ts;
    if (ts - lastTs > 100) { lastTs = ts; frame(); }
    window.requestAnimationFrame(loop);
  }

  let lastTrackWidth = track.offsetWidth;
  window.addEventListener("resize", () => {
    const newWidth = track.offsetWidth;
    if (lastTrackWidth > 0) {
      const ratio = newWidth / lastTrackWidth;
      posX    = clamp(posX    * ratio, 0, maxX());
      targetX = clamp(targetX * ratio, 0, maxX());
      el.style.left = `${posX}px`;
    }
    lastTrackWidth = newWidth;
  });

  setTimeout(() => { targetX = randomTarget(); }, 800 + Math.random() * 1500);

  window.requestAnimationFrame(loop);
})();