@mingxy/opencode-mascot 0.7.7 → 0.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mingxy/opencode-mascot",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "description": "OpenCode TUI mascot plugin framework - customizable ASCII mascots for your terminal",
   "author": "mingxy",
   "license": "MIT",

package/src/builtins/props/pad.ts

@@ -1,19 +1,6 @@
 import type { PropPack } from "../../core/types";
 
-/**
- * Pad 道具 — busy 状态变体道具
- *
- * 尺寸: 18 宽 × 9 高（双层框+.•摄像头+底部◉Home键）
- * 屏幕区: 12 宽 × 4 高
- * 叙事: 月儿小人玩游戏，又菜又爱玩
- *   贪吃蛇 6帧: 开局→走→撞墙→哭→不服→重开
- *   俄罗斯方块 4帧: 开局→堆积→满→over
- *   2048 4帧: 开局→合并→128→over
- *   切换 1帧: next!
- * 月儿小人: ☆ 呆毛 + (^-^) 圆脸 + ┃█┃ 身体（迷你版）
- */
-
-const W = 12; // 屏幕内容区宽
+const W = 12;
 
 const OUTER_TOP = "╭.•" + "─".repeat(14) + "╮";
 const INNER_TOP = "│ ┌" + "─".repeat(W) + "┐ │";
@@ -25,24 +12,20 @@ const scr = (rows: string[]) =>
   rows.map((r) => "│ │" + r.padEnd(W) + "│ │");
 
 const games: string[][] = [
-  // 贪吃蛇 6帧
   ["  ☆  ᵇᵉᵍⁱⁿ ", "(^-^) ◯→  ●", " ┃█┃  ˢ:0  ", "           "],
   ["  ☆       ", "(^-^) ◯◯→ ●", " ┃█┃  ˢ:1  ", "           "],
   ["  ☆       ", "(×_×) ◯◯💥 ", " ┃█┃  ᵍᵍ!  ", "           "],
   ["  ☆       ", "(╥_╥) ᵒᵛᵉʳ ", " ┃█┃  ˢ:1  ", "           "],
   ["  ☆       ", "(¬_¬) ᵃᵍᵃⁱⁿ", " ┃█┃       ", "           "],
   ["  ☆  ᵍᵒ!  ", "(^-^) ◯→  ●", " ┃█┃  ˢ:0  ", "           "],
-  // 俄罗斯方块 4帧
   ["  ☆  ᵇᵉᵍⁱⁿ ", "(^-^)  ▣   ", " ┃█┃       ", "           "],
   ["  ☆       ", "(^-^) ▣▣   ", " ┃█┃ ▣▣▣▣  ", "           "],
   ["  ☆       ", "(×_×)      ", " ┃█┃ ▣▣▣▣▣▣", "  ᶠᵘˡˡ!    "],
   ["  ☆       ", "(╥_╥) ᵒᵛᵉʳ ", " ┃█┃       ", "           "],
-  // 2048 4帧
   ["  ☆  ᵇᵉᵍⁱⁿ ", "(^-^) [ 2 ]", " ┃█┃       ", "           "],
   ["  ☆       ", "(^-^) [ 4 ]", " ┃█┃  ᵒᵒⁿ  ", "           "],
   ["  ☆       ", "(⊙_⊙) [128]", " ┃█┃  ʷᵒʷ  ", "           "],
   ["  ☆       ", "(╥_╥) ᵒᵛᵉʳ ", " ┃█┃       ", "           "],
-  // 切换
   ["  ☆       ", "(^-^) ⁿᵉˣᵗ!", " ┃█┃       ", "           "],
 ];
 

package/src/components/home-mascot.tsx

@@ -157,7 +157,19 @@ export function HomeMascot(props: HomeMascotProps): JSX.Element {
       onMouseUp={() => { stopDrag(); }}
       onMouseDragEnd={() => { stopDrag(); }}
     >
-      {renderers[currentName()]?.element() ?? null}
+      {renderers[currentName()]?.propElement() ? (
+        <box
+          position="absolute"
+          zIndex={50}
+          left={renderers[currentName()].getPropPosition() === "side-left" ? -16 : renderers[currentName()].getPropPosition() === "side-right" ? 12 : 0}
+          top={0}
+        >
+          {renderers[currentName()].propElement()}
+        </box>
+      ) : null}
+      <box zIndex={100}>
+        {renderers[currentName()]?.element() ?? null}
+      </box>
     </box>
   );
 }

package/src/components/sidebar-mascot.tsx

@@ -159,16 +159,8 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
     if (statusType === "busy" || statusType === "retry") {
       if (hideSide) returnToView();
       renderers[currentName()].setState("busy");
-      // 先显示箱子"打开"动画300ms，再切换到 busy 道具（道具从箱子里掉出来）
       const busyProp = pickPropByTrigger("busy");
-      if (busyProp) {
-        renderers[currentName()].setProp(getProp("box") ?? null);
-        setTimeout(() => {
-          renderers[currentName()].setProp(busyProp);
-        }, 300);
-      } else {
-        renderers[currentName()].setProp(null);
-      }
+      renderers[currentName()].setProp(busyProp);
     } else {
       setStateWithSwitch("idle");
       renderers[currentName()].setProp(null);
@@ -209,7 +201,7 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
     setTimeout(() => setZBoost(false), 3500);
   });
 
-  let scattered = true;
+  let scattered = false;
 
   onScatter(() => {
     if (scattered) return;
@@ -217,45 +209,11 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
     renderers[currentName()].scatterIn();
   });
 
-  renderers[currentName()].setCharacterHidden(true);
-  renderers[currentName()].setProp(getProp("box") ?? null);
-
-  const finalY = posY();
-  const finalX = posX();
-  const fallStartY = finalY - 15;
-  const fallDuration = 500;
-  const fallStartTime = Date.now();
-  setPosY(fallStartY);
-
-  const fallInterval = setInterval(() => {
-    const elapsed = Date.now() - fallStartTime;
-    const t = Math.min(elapsed / fallDuration, 1);
-    const eased = t * t;
-    setPosY(Math.round(fallStartY + (finalY - fallStartY) * eased));
-    if (t >= 1) {
-      clearInterval(fallInterval);
-      setPosY(finalY);
-
-      setTimeout(() => {
-        const shakeSeq = [1, -1, 1, -1, 0];
-        let shakeIdx = 0;
-        const shakeInterval = setInterval(() => {
-          if (shakeIdx >= shakeSeq.length) {
-            clearInterval(shakeInterval);
-            setPosX(finalX);
-            return;
-          }
-          setPosX(finalX + shakeSeq[shakeIdx]);
-          shakeIdx++;
-        }, 60);
-      }, 2000);
-    }
-  }, 16);
-
   setTimeout(() => {
-    renderers[currentName()].setProp(null);
-    renderers[currentName()].setCharacterHidden(false);
-  }, 6000);
+    if (scattered) return;
+    scattered = true;
+    renderers[currentName()].scatterIn();
+  }, 2000);
 
   return (
     <box
@@ -313,7 +271,19 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
         checkEdge();
       }}
     >
-      {renderers[currentName()]?.element() ?? null}
+      {renderers[currentName()]?.propElement() ? (
+        <box
+          position="absolute"
+          zIndex={50}
+          left={renderers[currentName()].getPropPosition() === "side-left" ? -16 : renderers[currentName()].getPropPosition() === "side-right" ? 12 : 0}
+          top={0}
+        >
+          {renderers[currentName()].propElement()}
+        </box>
+      ) : null}
+      <box zIndex={100}>
+        {renderers[currentName()]?.element() ?? null}
+      </box>
     </box>
   );
 }

package/src/core/ascii-renderer.tsx

@@ -46,6 +46,8 @@ function getFrameLines(pack: MascotPack, frameName: string): string[] {
 
 export function createAnimatedRenderer(pack: MascotPack): {
   element: () => JSX.Element;
+  propElement: () => JSX.Element | null;
+  getPropPosition: () => PropPosition | null;
   getState: () => MascotState;
   setState: (s: MascotState) => void;
   toggleWalk: () => void;
@@ -331,9 +333,6 @@ export function createAnimatedRenderer(pack: MascotPack): {
     scatter();
     bomb();
     versionMsg();
-    activeProp();
-    propFrameIdx();
-    propPosition();
 
     for (const [, [get]] of extraSignals) {
       get();
@@ -368,47 +367,6 @@ export function createAnimatedRenderer(pack: MascotPack): {
       lines = effects.render(lines, renderCtx);
     }
 
-    // ─── Prop overlay ───
-    const prop = activeProp();
-    if (prop) {
-      const propFramesRaw = Array.isArray(prop.frames[0])
-        ? (prop.frames as string[][])
-        : [prop.frames as string[]];
-      const propLines = propFramesRaw[propFrameIdx() % propFramesRaw.length] ?? propFramesRaw[0];
-
-      if (propLines.length > 0) {
-        const pos = propPosition();
-        if (pos === 'front') {
-          const overlayCount = Math.min(propLines.length, lines.length);
-          const startRow = Math.floor((lines.length - overlayCount) / 2);
-          for (let i = 0; i < overlayCount; i++) {
-            lines[startRow + i] = propLines[i];
-          }
-        } else {
-          const charWidth = lines[0]?.length ?? 0;
-          const propWidth = propLines[0]?.length ?? 0;
-          const charHeight = lines.length;
-          const propHeight = propLines.length;
-          const maxLines = Math.max(charHeight, propHeight);
-          const charPad = Math.floor((maxLines - charHeight) / 2);
-          const propPad = Math.floor((maxLines - propHeight) / 2);
-          const sep = "  ";
-
-          const merged: string[] = [];
-          for (let i = 0; i < maxLines; i++) {
-            const cLine = (i >= charPad && i < charPad + charHeight)
-              ? lines[i - charPad]
-              : " ".repeat(charWidth);
-            const pLine = (i >= propPad && i < propPad + propHeight)
-              ? propLines[i - propPad]
-              : " ".repeat(propWidth);
-            merged.push(pos === 'side-right' ? cLine + sep + pLine : pLine + sep + cLine);
-          }
-          lines = merged;
-        }
-      }
-    }
-
     const top = jumpOffset();
     const left = offset > 0 ? offset : 0;
     const cel = celebrate();
@@ -435,6 +393,26 @@ export function createAnimatedRenderer(pack: MascotPack): {
     );
   };
 
+  const propElement = () => {
+    activeProp();
+    propFrameIdx();
+    const prop = activeProp();
+    if (!prop) return null;
+
+    const propFramesRaw = Array.isArray(prop.frames[0])
+      ? (prop.frames as string[][])
+      : [prop.frames as string[]];
+    const propLines = propFramesRaw[propFrameIdx() % propFramesRaw.length] ?? propFramesRaw[0];
+
+    return (
+      <box flexDirection="column" alignItems="flex-start">
+        {propLines.map((line: string) => (
+          <text fg={fg}>{line}</text>
+        ))}
+      </box>
+    );
+  };
+
   // ─── State control ───
   const setState = (s: MascotState) => {
     setCurrentState(s);
@@ -658,5 +636,5 @@ export function createAnimatedRenderer(pack: MascotPack): {
 
   const getProp = () => activeProp();
 
-  return { element, getState: currentState, setState, toggleWalk, setDragging, setCharacterHidden, celebrateUpdate, bounce, showVersion, scatterIn, explode, setProp, getProp };
+  return { element, propElement, getPropPosition: () => propPosition(), getState: currentState, setState, toggleWalk, setDragging, setCharacterHidden, celebrateUpdate, bounce, showVersion, scatterIn, explode, setProp, getProp };
 }