@mingxy/opencode-mascot 0.2.8 → 0.3.0

package/package.json

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

package/src/components/home-mascot.tsx

@@ -81,17 +81,18 @@ export function HomeMascot(props: HomeMascotProps): JSX.Element {
           setPosX(dragAnchorX + (e.x - dragStartX));
           setPosY(dragAnchorY + (e.y - dragStartY));
           e.preventDefault();
-          e.stopPropagation();
           props.api.renderer.clearSelection();
         }
       }}
       onMouseUp={() => {
-        if (isDragging) {
-          isDragging = false;
-          renderers[currentName()].setDragging(false);
-        }
+        isDragging = false;
+        renderers[currentName()].setDragging(false);
       }}
       onMouseDragEnd={() => {
+        isDragging = false;
+        renderers[currentName()].setDragging(false);
+      }}
+      onMouseOut={() => {
         if (isDragging) {
           isDragging = false;
           renderers[currentName()].setDragging(false);

package/src/components/sidebar-mascot.tsx

@@ -226,22 +226,23 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
           setPosX(clampX(dragAnchorX + (e.x - dragStartX)));
           setPosY(clampY(dragAnchorY + (e.y - dragStartY)));
           e.preventDefault();
-          e.stopPropagation();
           props.api.renderer.clearSelection();
         }
       }}
       onMouseUp={() => {
-        if (isDragging) {
-          isDragging = false;
-          renderers[currentName()].setDragging(false);
-          checkEdge();
-        }
+        isDragging = false;
+        renderers[currentName()].setDragging(false);
+        checkEdge();
       }}
       onMouseDragEnd={() => {
+        isDragging = false;
+        renderers[currentName()].setDragging(false);
+        checkEdge();
+      }}
+      onMouseOut={() => {
         if (isDragging) {
           isDragging = false;
           renderers[currentName()].setDragging(false);
-          checkEdge();
         }
       }}
     >

package/src/core/ascii-renderer.tsx

@@ -36,21 +36,14 @@ const DEFAULT_ANIM = {
 
 const WALK_PATH = [1, 2, 3, 4, 3, 2, 1, 0, -1, -2, -3, -2, -1, 0];
 
+const FLASH_COLORS = ["#FF006E", "#FFBE0B", "#8338EC", "#3A86FF", "#FB5607", "#06FFA5", "#FF4081", "#00E5FF"];
+const DRAG_MSGS = ["ᶠᵃⁿᵍ!..", "ᵏᵃⁱ~..", "ᵇᵘᶠᵃⁿᵍ~..", "ʷᵒ~..", "ⁿⁱᵘ~..", "ᵃᵃ~.."];
+
 function getFrameLines(pack: MascotPack, frameName: string): string[] {
   const frames = pack.frames as Record<string, string[] | undefined>;
   return frames[frameName] ?? frames["default"] ?? [];
 }
 
-function renderLines(lines: string[], fg?: string): JSX.Element {
-  return (
-    <box flexDirection="column">
-      {lines.map((line: string) => (
-        <text fg={fg}>{line}</text>
-      ))}
-    </box>
-  );
-}
-
 export function createAnimatedRenderer(pack: MascotPack): {
   element: () => JSX.Element;
   setState: (s: MascotState) => void;
@@ -72,6 +65,19 @@ export function createAnimatedRenderer(pack: MascotPack): {
   const [walkEnabled, setWalkEnabled] = createSignal(anim.walkEnabled ?? true);
   const [dragging, setDraggingSignal] = createSignal(false);
   const [celebrate, setCelebrate] = createSignal<{ text: string; count: number } | null>(null);
+  const [flashColor, setFlashColor] = createSignal<string | null>(null);
+  const [dragMsg, setDragMsg] = createSignal<string | null>(null);
+
+  let flashTimer: ReturnType<typeof setInterval> | null = null;
+  let dragMsgTimer: ReturnType<typeof setInterval> | null = null;
+
+  const stopFlash = () => {
+    if (flashTimer) { clearInterval(flashTimer); flashTimer = null; }
+  };
+  const stopDragMsg = () => {
+    if (dragMsgTimer) { clearInterval(dragMsgTimer); dragMsgTimer = null; }
+    setDragMsg(null);
+  };
 
   let idleSleepTimeout: ReturnType<typeof setTimeout> | null = null;
 
@@ -230,6 +236,8 @@ export function createAnimatedRenderer(pack: MascotPack): {
     if (idleSleepTimeout) clearTimeout(idleSleepTimeout);
     if (walkInterval) clearInterval(walkInterval);
     for (const t of effectTimers) clearInterval(t);
+    stopFlash();
+    stopDragMsg();
   });
 
   // ─── Render ───
@@ -241,6 +249,8 @@ export function createAnimatedRenderer(pack: MascotPack): {
     currentState();
     dragging();
     celebrate();
+    flashColor();
+    dragMsg();
 
     for (const [, [get]] of extraSignals) {
       get();
@@ -276,11 +286,17 @@ export function createAnimatedRenderer(pack: MascotPack): {
     const top = jumpOffset();
     const left = offset > 0 ? offset : 0;
     const cel = celebrate();
+    const dm = dragMsg();
 
     return (
       <box flexDirection="column" left={left} top={top}>
-        {cel ? <text fg={fg}>{cel.text}</text> : null}
-        {renderLines(lines, fg)}
+        {cel ? <text fg={flashColor() ?? fg}>{cel.text}</text> : null}
+        {dm ? <text fg="#FF4081">{dm}</text> : null}
+        <box flexDirection="column">
+          {lines.map((line: string) => (
+            <text fg={flashColor() ?? fg}>{line}</text>
+          ))}
+        </box>
       </box>
     );
   };
@@ -297,6 +313,15 @@ export function createAnimatedRenderer(pack: MascotPack): {
       walkTimeout = scheduleNextWalk();
       jumpTimeout = scheduleNextJump();
     }
+
+    if (s === "thinking" || s === "busy") {
+      stopFlash();
+      flashTimer = setInterval(() => {
+        setFlashColor(FLASH_COLORS[Math.floor(Math.random() * FLASH_COLORS.length)]);
+      }, 120);
+    } else {
+      stopFlash();
+    }
   };
 
   const toggleWalk = () => {
@@ -312,13 +337,23 @@ export function createAnimatedRenderer(pack: MascotPack): {
   const setDragging = (v: boolean) => {
     setDraggingSignal(v);
     if (v) {
-      // 睡着时被拖拽 → 惊醒到 idle，切回 default 帧后手臂 ┃███┃ 才能被扇手渲染匹配
       if (currentState() === "sleeping") {
         setState("idle");
       }
       setJumpOffset(-1);
+      stopDragMsg();
+      setDragMsg(DRAG_MSGS[Math.floor(Math.random() * DRAG_MSGS.length)]);
+      dragMsgTimer = setInterval(() => {
+        setDragMsg(DRAG_MSGS[Math.floor(Math.random() * DRAG_MSGS.length)]);
+      }, 800);
+      stopFlash();
+      flashTimer = setInterval(() => {
+        setFlashColor(FLASH_COLORS[Math.floor(Math.random() * FLASH_COLORS.length)]);
+      }, 100);
     } else {
       setJumpOffset(0);
+      stopDragMsg();
+      stopFlash();
     }
   };