@mingxy/opencode-mascot 0.7.8 → 0.7.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mingxy/opencode-mascot",
-  "version": "0.7.8",
+  "version": "0.7.10",
   "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

@@ -5,7 +5,7 @@ import type { JSX } from "@opentui/solid";
 import type { MascotPack, MascotState } from "../core/types";
 import { createAnimatedRenderer } from "../core/ascii-renderer";
 import { onCelebrate, onVersion, onScatter } from "../core/celebration-bus";
-import { pickPropByTrigger, getProp } from "../core/prop-loader";
+import { pickPropByTrigger } from "../core/prop-loader";
 
 interface SidebarMascotProps {
   mascots: Record<string, MascotPack>;
@@ -159,19 +159,13 @@ 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);
+      renderers[currentName()].setCharacterHidden(busyProp?.position === "front");
     } else {
       setStateWithSwitch("idle");
       renderers[currentName()].setProp(null);
+      renderers[currentName()].setCharacterHidden(false);
     }
   });
 
@@ -223,63 +217,82 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
     renderers[currentName()].scatterIn();
   }, 2000);
 
+  const propOffset = () => {
+    const pos = renderers[currentName()]?.getPropPosition();
+    if (pos === "side-left") return -18;
+    if (pos === "side-right") return 12;
+    return 0;
+  };
+
   return (
-    <box
-      position="absolute"
-      left={posX()}
-      top={posY()}
-      alignItems="center"
-      zIndex={zBoost() ? 9999 : 100}
-      flexDirection="column"
-      ref={(node: any) => {
-        if (node) {
-          setContainerWidth(node.width || 0);
-          if (node.onSizeChange !== undefined) {
-            node.onSizeChange = () => {
-              setContainerWidth(node.width || 0);
-            };
+    <>
+      {renderers[currentName()]?.propElement() ? (
+        <box
+          position="absolute"
+          left={posX() + propOffset()}
+          top={posY()}
+          zIndex={zBoost() ? 9998 : 50}
+        >
+          {renderers[currentName()].propElement()}
+        </box>
+      ) : null}
+      <box
+        position="absolute"
+        left={posX()}
+        top={posY()}
+        alignItems="center"
+        zIndex={zBoost() ? 9999 : 100}
+        flexDirection="column"
+        ref={(node: any) => {
+          if (node) {
+            setContainerWidth(node.width || 0);
+            if (node.onSizeChange !== undefined) {
+              node.onSizeChange = () => {
+                setContainerWidth(node.width || 0);
+              };
+            }
           }
-        }
-      }}
-      onMouseDown={(e: any) => {
-        if (hideSide) { returnToView(); return; }
+        }}
+        onMouseDown={(e: any) => {
+          if (hideSide) { returnToView(); return; }
 
-        const now = Date.now();
-        if (now - lastClickTime < 300) {
-          switchToNext();
-          lastClickTime = 0;
-          return;
-        }
-        lastClickTime = now;
+          const now = Date.now();
+          if (now - lastClickTime < 300) {
+            switchToNext();
+            lastClickTime = 0;
+            return;
+          }
+          lastClickTime = now;
 
-        if (e.modifiers?.alt) {
-          dragStartX = e.x;
-          dragStartY = e.y;
-          dragAnchorX = posX();
-          dragAnchorY = posY();
-          isDragging = true;
-          renderers[currentName()].setDragging(true);
-          props.api.renderer.clearSelection();
-        }
-      }}
-      onMouseDrag={(e: any) => {
-        if (e.modifiers?.alt && isDragging) {
-          setPosX(clampX(dragAnchorX + (e.x - dragStartX)));
-          setPosY(clampY(dragAnchorY + (e.y - dragStartY)));
-        }
-      }}
-      onMouseUp={() => {
-        isDragging = false;
-        renderers[currentName()].setDragging(false);
-        checkEdge();
-      }}
-      onMouseDragEnd={() => {
-        isDragging = false;
-        renderers[currentName()].setDragging(false);
-        checkEdge();
-      }}
-    >
-      {renderers[currentName()]?.element() ?? null}
-    </box>
+          if (e.modifiers?.alt) {
+            dragStartX = e.x;
+            dragStartY = e.y;
+            dragAnchorX = posX();
+            dragAnchorY = posY();
+            isDragging = true;
+            renderers[currentName()].setDragging(true);
+            props.api.renderer.clearSelection();
+          }
+        }}
+        onMouseDrag={(e: any) => {
+          if (e.modifiers?.alt && isDragging) {
+            setPosX(clampX(dragAnchorX + (e.x - dragStartX)));
+            setPosY(clampY(dragAnchorY + (e.y - dragStartY)));
+          }
+        }}
+        onMouseUp={() => {
+          isDragging = false;
+          renderers[currentName()].setDragging(false);
+          checkEdge();
+        }}
+        onMouseDragEnd={() => {
+          isDragging = false;
+          renderers[currentName()].setDragging(false);
+          checkEdge();
+        }}
+      >
+        {renderers[currentName()]?.element() ?? null}
+      </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 };
 }