数字桌宠（Desk Pet）实现手册 —— 从站点定位到可复用配方

/* 茶盘一套：底盘 + 茶碟 + 茶杯 + 把手，都画在脸部以下（y>52），
   避免和眼睛(cy=42.5) / 嘴(y=48.5) 撞在一起 —— 这是第一版翻车的原因 */
<path class="desk-pet-robe" d="M16,52 Q32,48.5 48,52 L45,62 Q32,65.5 19,62 Z" />
<path class="desk-pet-robe-collar" d="M16,52 Q32,48.5 48,52" />
<g class="desk-pet-tray">
  <ellipse class="desk-pet-tray-plate" cx="32" cy="61.5" rx="10" ry="2.8" />
  <ellipse class="desk-pet-tray-saucer" cx="32" cy="57.8" rx="4.2" ry="1.4" />
  <path class="desk-pet-tray-cup" d="M28.6,53.5 h6.8 v3.2 a3.4,3 0 0 1 -6.8,0 Z" />
  <path class="desk-pet-tray-cup-handle" d="M35.6,54.4 q2.2,0.4 1.6,2.3 q-0.5,1.5 -2.1,1.3" />
</g>
/* 两侧小凸起放在 tray 之后，动画时才会盖在茶盘上，读作"手伸过去端着" */
<path class="desk-pet-nub desk-pet-nub-l" d="M11,50 C7,54 5,57 6,60 a3.5,3.5 0 1 0 7,-1 C14,55 13,52 11,50 Z" />
<path class="desk-pet-nub desk-pet-nub-r" d="M53,50 C57,54 59,57 58,60 a3.5,3.5 0 1 1 -7,-1 C50,55 51,52 53,50 Z" />

/* 手伸向茶盘 — transform 而非位移 DOM，配合上面 opacity 淡入同时发生 */
.desk-pet-nub {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.desk-pet.is-welcoming .desk-pet-nub-l { transform: translate(15px, 5px) rotate(-8deg); }
.desk-pet.is-welcoming .desk-pet-nub-r { transform: translate(-15px, 5px) rotate(8deg); }

function canWander() {
  return (
    !prefersReducedMotion &&
    !userPositioned &&
    !isDragging &&
    panel.hidden &&
    window.innerWidth >= 640 &&
    !toggle.classList.contains('is-flying') &&
    !toggle.classList.contains('is-casting') &&
    !toggle.classList.contains('is-dancing') &&
    !toggle.classList.contains('is-welcoming') &&
    !toggle.classList.contains('is-farewell')
  );
}

// CSS 默认位置本身就是"静止位"——offsetY 0 永远代表"在原位"，
// 加载时没有任何东西需要计算或补间，自然也就没有跳变。
function computeBounds() {
  const margin = 12;
  const width = widget.offsetWidth;
  const height = widget.offsetHeight;
  const baseLeft = window.innerWidth - 16 - width;
  const anchorBottom = window.innerWidth < 640 ? 16 : window.innerHeight * 0.34;
  const baseTop = window.innerHeight - anchorBottom - height;
  const groundY = window.innerWidth < 640 ? 0 : Math.max(0, anchorBottom - 16);
  return { baseLeft, baseTop, minX: margin - baseLeft, maxX: window.innerWidth - margin - width - baseLeft, minY: margin - baseTop, maxY: groundY };
}

const DANCES = [
  { name: 'swan', duration: 5500 },    // 天鹅湖：双圈 pirouette + 踮脚 + 屈膝礼
  { name: 'kungfu', duration: 5000 },  // 功夫足球：蹲马步 → 蓄力 → 大力踢腿 → 得意站定
  { name: 'rain', duration: 5500 },    // 雨中曲：转圈 + 欢快小跳 + 经典后仰 + 歪礼帽
] as const;

function playDance(onDone: () => void) {
  const dance = DANCES[Math.floor(Math.random() * DANCES.length)];
  const danceClass = `dance-${dance.name}`;
  toggle.classList.add('is-dancing', danceClass);
  window.setTimeout(() => {
    toggle.classList.remove('is-dancing', danceClass, 'is-walking');
    onDone();
  }, dance.duration);
}

function setOpen(open: boolean) {
  toggle.setAttribute('aria-expanded', String(open));
  if (open) {
    panel.hidden = false;
    requestAnimationFrame(() => panel.classList.add('is-open'));
    input.focus();
  } else {
    panel.classList.remove('is-open');
    // playFarewell() 必须等 panel.hidden 真正变成 true 之后再调用 ——
    // canShowBubble() 要求 panel.hidden，而它只在 CSS 关闭过渡结束后才会被设置，
    // 挂在 transitionend 里，不能在 setOpen(false) 里同步调用。
    panel.addEventListener('transitionend', () => {
      panel.hidden = true;
      playFarewell();
    }, { once: true });
  }
}