@mingxy/opencode-mascot 0.2.9 → 0.3.1

package/package.json

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

@@ -44,16 +44,6 @@ function getFrameLines(pack: MascotPack, frameName: string): string[] {
   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;
@@ -80,6 +70,9 @@ export function createAnimatedRenderer(pack: MascotPack): {
 
   let flashTimer: ReturnType<typeof setInterval> | null = null;
   let dragMsgTimer: ReturnType<typeof setInterval> | null = null;
+  let bounceTimers: ReturnType<typeof setTimeout>[] = [];
+  let celebrateTimers: ReturnType<typeof setTimeout>[] = [];
+  let versionTimer: ReturnType<typeof setTimeout> | null = null;
 
   const stopFlash = () => {
     if (flashTimer) { clearInterval(flashTimer); flashTimer = null; }
@@ -88,6 +81,26 @@ export function createAnimatedRenderer(pack: MascotPack): {
     if (dragMsgTimer) { clearInterval(dragMsgTimer); dragMsgTimer = null; }
     setDragMsg(null);
   };
+  const stopBounce = () => {
+    bounceTimers.forEach(t => { clearTimeout(t); });
+    bounceTimers = [];
+  };
+  const stopCelebrate = () => {
+    celebrateTimers.forEach(t => { clearTimeout(t); });
+    celebrateTimers = [];
+  };
+  const stopVersion = () => {
+    if (versionTimer) { clearTimeout(versionTimer); versionTimer = null; }
+    setCelebrate(null);
+  };
+
+  const stopAllAnimations = () => {
+    stopFlash();
+    stopBounce();
+    stopCelebrate();
+    stopVersion();
+    setJumpOffset(0);
+  };
 
   let idleSleepTimeout: ReturnType<typeof setTimeout> | null = null;
 
@@ -248,6 +261,9 @@ export function createAnimatedRenderer(pack: MascotPack): {
     for (const t of effectTimers) clearInterval(t);
     stopFlash();
     stopDragMsg();
+    stopBounce();
+    stopCelebrate();
+    stopVersion();
   });
 
   // ─── Render ───
@@ -297,13 +313,16 @@ export function createAnimatedRenderer(pack: MascotPack): {
     const left = offset > 0 ? offset : 0;
     const cel = celebrate();
     const dm = dragMsg();
-    const color = flashColor() ?? fg;
 
     return (
       <box flexDirection="column" left={left} top={top}>
-        {cel ? <text fg={color}>{cel.text}</text> : null}
+        {cel ? <text fg={flashColor() ?? fg}>{cel.text}</text> : null}
         {dm ? <text fg="#FF4081">{dm}</text> : null}
-        {renderLines(lines, color)}
+        <box flexDirection="column">
+          {lines.map((line: string) => (
+            <text fg={flashColor() ?? fg}>{line}</text>
+          ))}
+        </box>
       </box>
     );
   };
@@ -353,15 +372,21 @@ export function createAnimatedRenderer(pack: MascotPack): {
       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();
     }
   };
 
   // 连续跳跃 + 吐火星文泡泡庆祝更新成功
   const celebrateUpdate = (newVersion: string) => {
     const bubbles = ["ᵘᵖ~", "ⁿᵉʷ!", "ʸᵉ~", "ᵍᵒ~", "ᵒᵏ~"];
+    stopAllAnimations();
     setState("happy");
     setFrameOverride("happy");
 
@@ -373,28 +398,32 @@ export function createAnimatedRenderer(pack: MascotPack): {
         setCelebrate(null);
         setFrameOverride(null);
         setState("idle");
+        celebrateTimers = [];
         return;
       }
       setJumpOffset(step % 2 === 0 ? -2 : 0);
       const word = bubbles[Math.floor(Math.random() * bubbles.length)];
       setCelebrate({ text: `${word} ᵘᵖ→ᵛ${newVersion}`, count: step });
       step++;
-      setTimeout(tick, 600);
+      celebrateTimers.push(setTimeout(tick, 600));
     };
     tick();
   };
 
   const bounce = () => {
+    stopBounce();
+    stopCelebrate();
     if (currentState() === "sleeping") setState("idle");
     setJumpOffset(-3);
-    setTimeout(() => setJumpOffset(-2), 150);
-    setTimeout(() => setJumpOffset(-1), 300);
-    setTimeout(() => setJumpOffset(0), 450);
+    bounceTimers.push(setTimeout(() => setJumpOffset(-2), 150));
+    bounceTimers.push(setTimeout(() => setJumpOffset(-1), 300));
+    bounceTimers.push(setTimeout(() => { setJumpOffset(0); bounceTimers = []; }, 450));
   };
 
   const showVersion = (version: string) => {
+    stopVersion();
     setCelebrate({ text: `ᵛ${toSuperscript(version)}`, count: 0 });
-    setTimeout(() => setCelebrate(null), 3000);
+    versionTimer = setTimeout(() => { setCelebrate(null); versionTimer = null; }, 3000);
   };
 
   return { element, setState, toggleWalk, setDragging, celebrateUpdate, bounce, showVersion };