@chao-component/bag-animation-ui 1.0.0 → 1.0.1

package/dist/index.d.mts

@@ -1,2 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
-export {  }
+declare function BagAnimation({ isAnimating, setIsAnimating, doneFunction }: {
+    isAnimating: boolean;
+    setIsAnimating: (isAnimating: boolean) => void;
+    doneFunction: () => void;
+}): react_jsx_runtime.JSX.Element;
+
+export { BagAnimation };

package/dist/index.d.ts

@@ -1,2 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
-export {  }
+declare function BagAnimation({ isAnimating, setIsAnimating, doneFunction }: {
+    isAnimating: boolean;
+    setIsAnimating: (isAnimating: boolean) => void;
+    doneFunction: () => void;
+}): react_jsx_runtime.JSX.Element;
+
+export { BagAnimation };

package/dist/index.js

@@ -8,6 +8,10 @@ var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -770,9 +774,325 @@ var require_lib = __commonJS({
 
 // src/index.ts
 var index_exports = {};
+__export(index_exports, {
+  BagAnimation: () => BagAnimation
+});
 module.exports = __toCommonJS(index_exports);
 
 // src/BagAnimation.tsx
 var import_react = require("react");
 var import_apng_js = __toESM(require_lib());
 var import_jsx_runtime = require("react/jsx-runtime");
+var frames = [
+  "/assets/main/bag/blind_box_spin.png",
+  "/assets/main/bag/blind_box_unopen.png",
+  "/assets/main/bag/blind_box_tear_off.png",
+  "/assets/main/bag/blind_box_open.png"
+];
+function BagAnimation({ isAnimating, setIsAnimating, doneFunction }) {
+  const [frame, setFrame] = (0, import_react.useState)(0);
+  const [isPausedAtThird, setIsPausedAtThird] = (0, import_react.useState)(false);
+  const [thirdFrameProgress, setThirdFrameProgress] = (0, import_react.useState)(0);
+  const [showSwipeHint, setShowSwipeHint] = (0, import_react.useState)(true);
+  const canvasRef = (0, import_react.useRef)(null);
+  const apngRefs = (0, import_react.useRef)([]);
+  const animationRefs = (0, import_react.useRef)([]);
+  const thirdFramePlayerRef = (0, import_react.useRef)(null);
+  const thirdFrameCtxRef = (0, import_react.useRef)(null);
+  const thirdFrameApngRef = (0, import_react.useRef)(null);
+  const thirdFrameOriginalSizeRef = (0, import_react.useRef)(null);
+  const hasTriggeredFourthFrame = (0, import_react.useRef)(false);
+  const mysteryBoxImage = "/assets/main/bag.png";
+  const mysteryBoxAlt = "Weedza Mystery Box";
+  (0, import_react.useEffect)(() => {
+    if (isAnimating) {
+      setFrame(0);
+      setIsPausedAtThird(false);
+      setThirdFrameProgress(0);
+      setShowSwipeHint(true);
+      hasTriggeredFourthFrame.current = false;
+    } else {
+      animationRefs.current.forEach((anim) => {
+        if (anim) anim.stop();
+      });
+    }
+  }, [isAnimating]);
+  (0, import_react.useEffect)(() => {
+    if (!isAnimating || !canvasRef.current) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    if (animationRefs.current[frame]) {
+      animationRefs.current[frame].stop();
+    }
+    const loadAPNG = async () => {
+      try {
+        const response = await fetch(frames[frame]);
+        const arrayBuffer = await response.arrayBuffer();
+        const apng = await (0, import_apng_js.default)(arrayBuffer);
+        if (apng instanceof Error) {
+          console.error("Failed to parse APNG:", apng);
+          return;
+        }
+        canvas.width = apng.width;
+        canvas.height = apng.height;
+        apngRefs.current[frame] = apng;
+        await apng.createImages();
+        const player = await apng.getPlayer(ctx);
+        let isStopped = false;
+        let stopFunction = null;
+        let totalDuration = 0;
+        for (let i = 0; i < apng.frames.length; i++) {
+          const frameDelay = apng.frames[i].delay || 100;
+          totalDuration += frameDelay / 1e3 * 1e3;
+        }
+        player.play(1);
+        if (player.stop) {
+          stopFunction = player.stop.bind(player);
+        }
+        animationRefs.current[frame] = {
+          stop: () => {
+            isStopped = true;
+            if (stopFunction) {
+              stopFunction();
+            }
+          }
+        };
+        if (frame === 2) {
+          if (stopFunction) {
+            stopFunction();
+          }
+          thirdFramePlayerRef.current = player;
+          thirdFrameCtxRef.current = ctx;
+          thirdFrameApngRef.current = apng;
+          thirdFrameOriginalSizeRef.current = {
+            width: apng.width,
+            height: apng.height
+          };
+          setTimeout(() => {
+            setIsPausedAtThird(true);
+            setThirdFrameProgress(0);
+          }, 0);
+          const originalStop = animationRefs.current[frame].stop;
+          animationRefs.current[frame].stop = () => {
+            isStopped = true;
+            if (stopFunction) {
+              stopFunction();
+            }
+            originalStop();
+          };
+        } else {
+          const timeoutId = setTimeout(() => {
+            if (!isStopped) {
+              if (frame < frames.length - 1) {
+                setFrame(frame + 1);
+              } else {
+                setIsAnimating(false);
+                doneFunction();
+                setFrame(0);
+              }
+            }
+          }, totalDuration);
+          const originalStop = animationRefs.current[frame].stop;
+          animationRefs.current[frame].stop = () => {
+            isStopped = true;
+            clearTimeout(timeoutId);
+            if (stopFunction) {
+              stopFunction();
+            }
+            originalStop();
+          };
+        }
+      } catch (error) {
+        console.error("Error loading APNG:", error);
+      }
+    };
+    loadAPNG();
+    return () => {
+      if (animationRefs.current[frame]) {
+        animationRefs.current[frame].stop();
+      }
+    };
+  }, [frame, isAnimating, setIsAnimating, doneFunction]);
+  (0, import_react.useEffect)(() => {
+    if (isPausedAtThird && thirdFrameCtxRef.current && thirdFrameApngRef.current && thirdFramePlayerRef.current && canvasRef.current && thirdFrameOriginalSizeRef.current) {
+      const apng = thirdFrameApngRef.current;
+      const ctx = thirdFrameCtxRef.current;
+      const canvas = canvasRef.current;
+      const player = thirdFramePlayerRef.current;
+      const originalSize = thirdFrameOriginalSizeRef.current;
+      canvas.width = originalSize.width;
+      canvas.height = originalSize.height;
+      const totalFrames = apng.frames.length;
+      const targetFrameIndex = Math.floor(thirdFrameProgress / 100 * totalFrames);
+      const clampedFrameIndex = Math.min(Math.max(0, targetFrameIndex), totalFrames - 1);
+      if (apng.frames[clampedFrameIndex]) {
+        try {
+          ctx.save();
+          ctx.setTransform(1, 0, 0, 1, 0, 0);
+          ctx.clearRect(0, 0, originalSize.width, originalSize.height);
+          if (player.render && typeof player.render === "function") {
+            if (canvas.width !== originalSize.width || canvas.height !== originalSize.height) {
+              canvas.width = originalSize.width;
+              canvas.height = originalSize.height;
+            }
+            player.render(apng.frames[clampedFrameIndex]);
+          } else {
+            const frame2 = apng.frames[clampedFrameIndex];
+            if (frame2.imageElement && frame2.imageElement instanceof HTMLImageElement) {
+              const img = frame2.imageElement;
+              ctxDrawSwipeFrames(ctx, img, clampedFrameIndex, originalSize);
+            } else if (frame2.image && frame2.image instanceof HTMLImageElement) {
+              const img = frame2.image;
+              ctxDrawSwipeFrames(ctx, img, clampedFrameIndex, originalSize);
+            } else {
+              if (canvas.width !== originalSize.width || canvas.height !== originalSize.height) {
+                canvas.width = originalSize.width;
+                canvas.height = originalSize.height;
+              }
+              player.render(apng.frames[clampedFrameIndex]);
+            }
+          }
+          ctx.restore();
+        } catch (error) {
+          console.error("Error rendering frame:", error);
+        }
+      }
+    }
+  }, [thirdFrameProgress, isPausedAtThird]);
+  const ctxDrawSwipeFrames = (ctx, img, clampedFrameIndex, originalSize) => {
+    let buttonGapPercentage = 0;
+    let startX = originalSize.width * 0.30685;
+    let startY = originalSize.height - (originalSize.height * buttonGapPercentage + img.height);
+    if (clampedFrameIndex == 0) {
+      ctx.drawImage(img, 0, 0, originalSize.width, originalSize.height);
+    } else if (clampedFrameIndex == 1 || clampedFrameIndex == 2) {
+      ctx.drawImage(img, startX, startY, img.width, img.height);
+    } else if (clampedFrameIndex == 3) {
+      ctx.drawImage(img, startX, startY, img.width, img.height);
+    } else if (clampedFrameIndex == 4) {
+      ctx.drawImage(img, startX, startY, img.width, img.height);
+    } else if (clampedFrameIndex == 5) {
+      ctx.drawImage(img, startX, startY, img.width, img.height);
+    }
+  };
+  const onMouseDown = (e) => {
+    if (isPausedAtThird && canvasRef.current) {
+      const rect = canvasRef.current.getBoundingClientRect();
+      const touchGap = e.clientX - rect.left;
+      const initialProgress = Math.max(0, Math.min(100, touchGap / rect.width * 100));
+      setThirdFrameProgress(initialProgress);
+      setShowSwipeHint(false);
+    }
+  };
+  const onMouseMove = (e) => {
+    if (!isPausedAtThird || !canvasRef.current || hasTriggeredFourthFrame.current) return;
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    const currentX = e.clientX;
+    const relativeX = currentX - rect.left;
+    const canvasWidth = rect.width;
+    const progress = Math.max(0, Math.min(100, relativeX / canvasWidth * 100));
+    setThirdFrameProgress(progress);
+    if (progress >= 95 && !hasTriggeredFourthFrame.current) {
+      hasTriggeredFourthFrame.current = true;
+      setIsPausedAtThird(false);
+      setThirdFrameProgress(0);
+      setFrame(3);
+    }
+  };
+  const onMouseUp = (e) => {
+    if (isPausedAtThird) {
+      setThirdFrameProgress(0);
+      setShowSwipeHint(true);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    isAnimating && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative w-full md:w-[85%] mx-auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "canvas",
+        {
+          ref: canvasRef,
+          onMouseDown,
+          onMouseMove,
+          onMouseUp,
+          onMouseLeave: onMouseUp,
+          onTouchStart: (e) => {
+            if (isPausedAtThird && canvasRef.current) {
+              const touch = e.touches[0];
+              const rect = canvasRef.current.getBoundingClientRect();
+              const touchGap = touch.clientX - rect.left;
+              const initialProgress = Math.max(0, Math.min(100, touchGap / rect.width * 100));
+              setThirdFrameProgress(initialProgress);
+              setShowSwipeHint(false);
+            }
+          },
+          onTouchMove: (e) => {
+            if (!isPausedAtThird || !canvasRef.current || hasTriggeredFourthFrame.current) return;
+            const touch = e.touches[0];
+            const rect = canvasRef.current.getBoundingClientRect();
+            const relativeX = touch.clientX - rect.left;
+            const canvasWidth = rect.width;
+            const progress = Math.max(0, Math.min(100, relativeX / canvasWidth * 100));
+            setThirdFrameProgress(progress);
+            if (progress >= 95 && !hasTriggeredFourthFrame.current) {
+              hasTriggeredFourthFrame.current = true;
+              setIsPausedAtThird(false);
+              setThirdFrameProgress(0);
+              setFrame(3);
+            }
+          },
+          onTouchEnd: (e) => {
+            if (isPausedAtThird) {
+              e.preventDefault();
+              setThirdFrameProgress(0);
+              setShowSwipeHint(true);
+            }
+          },
+          className: "select-none cursor-pointer w-full h-full object-contain",
+          style: {
+            imageRendering: "pixelated",
+            cursor: isPausedAtThird ? "grab" : "pointer",
+            touchAction: "none",
+            // 防止默認觸摸行為
+            userSelect: "none"
+            // 防止選中
+          }
+        }
+      ),
+      isPausedAtThird && showSwipeHint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute bottom-8 left-1/2 transform -translate-x-1/2 bg-black/70 text-white px-6 py-3 rounded-full text-sm md:text-base font-medium animate-pulse pointer-events-none z-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "svg",
+          {
+            className: "w-5 h-5 md:w-6 md:h-6",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M13 7l5 5m0 0l-5 5m5-5H6"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Swipe to open" })
+      ] }) })
+    ] }),
+    !isAnimating && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "img",
+      {
+        src: mysteryBoxImage,
+        alt: mysteryBoxAlt,
+        className: "w-36 h-36 md:w-96 md:h-96 object-contain relative z-10"
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BagAnimation
+});

package/dist/index.mjs

@@ -770,3 +770,315 @@ var require_lib = __commonJS({
 var import_apng_js = __toESM(require_lib());
 import { useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var frames = [
+  "/assets/main/bag/blind_box_spin.png",
+  "/assets/main/bag/blind_box_unopen.png",
+  "/assets/main/bag/blind_box_tear_off.png",
+  "/assets/main/bag/blind_box_open.png"
+];
+function BagAnimation({ isAnimating, setIsAnimating, doneFunction }) {
+  const [frame, setFrame] = useState(0);
+  const [isPausedAtThird, setIsPausedAtThird] = useState(false);
+  const [thirdFrameProgress, setThirdFrameProgress] = useState(0);
+  const [showSwipeHint, setShowSwipeHint] = useState(true);
+  const canvasRef = useRef(null);
+  const apngRefs = useRef([]);
+  const animationRefs = useRef([]);
+  const thirdFramePlayerRef = useRef(null);
+  const thirdFrameCtxRef = useRef(null);
+  const thirdFrameApngRef = useRef(null);
+  const thirdFrameOriginalSizeRef = useRef(null);
+  const hasTriggeredFourthFrame = useRef(false);
+  const mysteryBoxImage = "/assets/main/bag.png";
+  const mysteryBoxAlt = "Weedza Mystery Box";
+  useEffect(() => {
+    if (isAnimating) {
+      setFrame(0);
+      setIsPausedAtThird(false);
+      setThirdFrameProgress(0);
+      setShowSwipeHint(true);
+      hasTriggeredFourthFrame.current = false;
+    } else {
+      animationRefs.current.forEach((anim) => {
+        if (anim) anim.stop();
+      });
+    }
+  }, [isAnimating]);
+  useEffect(() => {
+    if (!isAnimating || !canvasRef.current) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    if (animationRefs.current[frame]) {
+      animationRefs.current[frame].stop();
+    }
+    const loadAPNG = async () => {
+      try {
+        const response = await fetch(frames[frame]);
+        const arrayBuffer = await response.arrayBuffer();
+        const apng = await (0, import_apng_js.default)(arrayBuffer);
+        if (apng instanceof Error) {
+          console.error("Failed to parse APNG:", apng);
+          return;
+        }
+        canvas.width = apng.width;
+        canvas.height = apng.height;
+        apngRefs.current[frame] = apng;
+        await apng.createImages();
+        const player = await apng.getPlayer(ctx);
+        let isStopped = false;
+        let stopFunction = null;
+        let totalDuration = 0;
+        for (let i = 0; i < apng.frames.length; i++) {
+          const frameDelay = apng.frames[i].delay || 100;
+          totalDuration += frameDelay / 1e3 * 1e3;
+        }
+        player.play(1);
+        if (player.stop) {
+          stopFunction = player.stop.bind(player);
+        }
+        animationRefs.current[frame] = {
+          stop: () => {
+            isStopped = true;
+            if (stopFunction) {
+              stopFunction();
+            }
+          }
+        };
+        if (frame === 2) {
+          if (stopFunction) {
+            stopFunction();
+          }
+          thirdFramePlayerRef.current = player;
+          thirdFrameCtxRef.current = ctx;
+          thirdFrameApngRef.current = apng;
+          thirdFrameOriginalSizeRef.current = {
+            width: apng.width,
+            height: apng.height
+          };
+          setTimeout(() => {
+            setIsPausedAtThird(true);
+            setThirdFrameProgress(0);
+          }, 0);
+          const originalStop = animationRefs.current[frame].stop;
+          animationRefs.current[frame].stop = () => {
+            isStopped = true;
+            if (stopFunction) {
+              stopFunction();
+            }
+            originalStop();
+          };
+        } else {
+          const timeoutId = setTimeout(() => {
+            if (!isStopped) {
+              if (frame < frames.length - 1) {
+                setFrame(frame + 1);
+              } else {
+                setIsAnimating(false);
+                doneFunction();
+                setFrame(0);
+              }
+            }
+          }, totalDuration);
+          const originalStop = animationRefs.current[frame].stop;
+          animationRefs.current[frame].stop = () => {
+            isStopped = true;
+            clearTimeout(timeoutId);
+            if (stopFunction) {
+              stopFunction();
+            }
+            originalStop();
+          };
+        }
+      } catch (error) {
+        console.error("Error loading APNG:", error);
+      }
+    };
+    loadAPNG();
+    return () => {
+      if (animationRefs.current[frame]) {
+        animationRefs.current[frame].stop();
+      }
+    };
+  }, [frame, isAnimating, setIsAnimating, doneFunction]);
+  useEffect(() => {
+    if (isPausedAtThird && thirdFrameCtxRef.current && thirdFrameApngRef.current && thirdFramePlayerRef.current && canvasRef.current && thirdFrameOriginalSizeRef.current) {
+      const apng = thirdFrameApngRef.current;
+      const ctx = thirdFrameCtxRef.current;
+      const canvas = canvasRef.current;
+      const player = thirdFramePlayerRef.current;
+      const originalSize = thirdFrameOriginalSizeRef.current;
+      canvas.width = originalSize.width;
+      canvas.height = originalSize.height;
+      const totalFrames = apng.frames.length;
+      const targetFrameIndex = Math.floor(thirdFrameProgress / 100 * totalFrames);
+      const clampedFrameIndex = Math.min(Math.max(0, targetFrameIndex), totalFrames - 1);
+      if (apng.frames[clampedFrameIndex]) {
+        try {
+          ctx.save();
+          ctx.setTransform(1, 0, 0, 1, 0, 0);
+          ctx.clearRect(0, 0, originalSize.width, originalSize.height);
+          if (player.render && typeof player.render === "function") {
+            if (canvas.width !== originalSize.width || canvas.height !== originalSize.height) {
+              canvas.width = originalSize.width;
+              canvas.height = originalSize.height;
+            }
+            player.render(apng.frames[clampedFrameIndex]);
+          } else {
+            const frame2 = apng.frames[clampedFrameIndex];
+            if (frame2.imageElement && frame2.imageElement instanceof HTMLImageElement) {
+              const img = frame2.imageElement;
+              ctxDrawSwipeFrames(ctx, img, clampedFrameIndex, originalSize);
+            } else if (frame2.image && frame2.image instanceof HTMLImageElement) {
+              const img = frame2.image;
+              ctxDrawSwipeFrames(ctx, img, clampedFrameIndex, originalSize);
+            } else {
+              if (canvas.width !== originalSize.width || canvas.height !== originalSize.height) {
+                canvas.width = originalSize.width;
+                canvas.height = originalSize.height;
+              }
+              player.render(apng.frames[clampedFrameIndex]);
+            }
+          }
+          ctx.restore();
+        } catch (error) {
+          console.error("Error rendering frame:", error);
+        }
+      }
+    }
+  }, [thirdFrameProgress, isPausedAtThird]);
+  const ctxDrawSwipeFrames = (ctx, img, clampedFrameIndex, originalSize) => {
+    let buttonGapPercentage = 0;
+    let startX = originalSize.width * 0.30685;
+    let startY = originalSize.height - (originalSize.height * buttonGapPercentage + img.height);
+    if (clampedFrameIndex == 0) {
+      ctx.drawImage(img, 0, 0, originalSize.width, originalSize.height);
+    } else if (clampedFrameIndex == 1 || clampedFrameIndex == 2) {
+      ctx.drawImage(img, startX, startY, img.width, img.height);
+    } else if (clampedFrameIndex == 3) {
+      ctx.drawImage(img, startX, startY, img.width, img.height);
+    } else if (clampedFrameIndex == 4) {
+      ctx.drawImage(img, startX, startY, img.width, img.height);
+    } else if (clampedFrameIndex == 5) {
+      ctx.drawImage(img, startX, startY, img.width, img.height);
+    }
+  };
+  const onMouseDown = (e) => {
+    if (isPausedAtThird && canvasRef.current) {
+      const rect = canvasRef.current.getBoundingClientRect();
+      const touchGap = e.clientX - rect.left;
+      const initialProgress = Math.max(0, Math.min(100, touchGap / rect.width * 100));
+      setThirdFrameProgress(initialProgress);
+      setShowSwipeHint(false);
+    }
+  };
+  const onMouseMove = (e) => {
+    if (!isPausedAtThird || !canvasRef.current || hasTriggeredFourthFrame.current) return;
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    const currentX = e.clientX;
+    const relativeX = currentX - rect.left;
+    const canvasWidth = rect.width;
+    const progress = Math.max(0, Math.min(100, relativeX / canvasWidth * 100));
+    setThirdFrameProgress(progress);
+    if (progress >= 95 && !hasTriggeredFourthFrame.current) {
+      hasTriggeredFourthFrame.current = true;
+      setIsPausedAtThird(false);
+      setThirdFrameProgress(0);
+      setFrame(3);
+    }
+  };
+  const onMouseUp = (e) => {
+    if (isPausedAtThird) {
+      setThirdFrameProgress(0);
+      setShowSwipeHint(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isAnimating && /* @__PURE__ */ jsxs("div", { className: "relative w-full md:w-[85%] mx-auto", children: [
+      /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          onMouseDown,
+          onMouseMove,
+          onMouseUp,
+          onMouseLeave: onMouseUp,
+          onTouchStart: (e) => {
+            if (isPausedAtThird && canvasRef.current) {
+              const touch = e.touches[0];
+              const rect = canvasRef.current.getBoundingClientRect();
+              const touchGap = touch.clientX - rect.left;
+              const initialProgress = Math.max(0, Math.min(100, touchGap / rect.width * 100));
+              setThirdFrameProgress(initialProgress);
+              setShowSwipeHint(false);
+            }
+          },
+          onTouchMove: (e) => {
+            if (!isPausedAtThird || !canvasRef.current || hasTriggeredFourthFrame.current) return;
+            const touch = e.touches[0];
+            const rect = canvasRef.current.getBoundingClientRect();
+            const relativeX = touch.clientX - rect.left;
+            const canvasWidth = rect.width;
+            const progress = Math.max(0, Math.min(100, relativeX / canvasWidth * 100));
+            setThirdFrameProgress(progress);
+            if (progress >= 95 && !hasTriggeredFourthFrame.current) {
+              hasTriggeredFourthFrame.current = true;
+              setIsPausedAtThird(false);
+              setThirdFrameProgress(0);
+              setFrame(3);
+            }
+          },
+          onTouchEnd: (e) => {
+            if (isPausedAtThird) {
+              e.preventDefault();
+              setThirdFrameProgress(0);
+              setShowSwipeHint(true);
+            }
+          },
+          className: "select-none cursor-pointer w-full h-full object-contain",
+          style: {
+            imageRendering: "pixelated",
+            cursor: isPausedAtThird ? "grab" : "pointer",
+            touchAction: "none",
+            // 防止默認觸摸行為
+            userSelect: "none"
+            // 防止選中
+          }
+        }
+      ),
+      isPausedAtThird && showSwipeHint && /* @__PURE__ */ jsx("div", { className: "absolute bottom-8 left-1/2 transform -translate-x-1/2 bg-black/70 text-white px-6 py-3 rounded-full text-sm md:text-base font-medium animate-pulse pointer-events-none z-20", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-5 h-5 md:w-6 md:h-6",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M13 7l5 5m0 0l-5 5m5-5H6"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: "Swipe to open" })
+      ] }) })
+    ] }),
+    !isAnimating && /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: mysteryBoxImage,
+        alt: mysteryBoxAlt,
+        className: "w-36 h-36 md:w-96 md:h-96 object-contain relative z-10"
+      }
+    )
+  ] });
+}
+export {
+  BagAnimation
+};

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@chao-component/bag-animation-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     }
   },
   "files": ["dist"],