@chao-component/bag-animation-ui 1.0.13 → 1.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +2 -1
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.js +119 -120
  4. package/dist/index.mjs +119 -120
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -12,8 +12,9 @@ interface BagAnimationProps {
12
12
  showMask?: boolean;
13
13
  maskOpacity?: number;
14
14
  maskBlur?: number;
15
+ className?: string;
15
16
  }
16
- declare function BagAnimation({ doneFunction, frames, defaultImage, defaultImageAlt, swipeHintText, boxOpeningText, clickHintText, hasChances, showMask, maskOpacity, maskBlur }: BagAnimationProps): react_jsx_runtime.JSX.Element;
17
+ declare function BagAnimation({ doneFunction, frames, defaultImage, defaultImageAlt, swipeHintText, boxOpeningText, clickHintText, hasChances, showMask, maskOpacity, maskBlur, className }: BagAnimationProps): react_jsx_runtime.JSX.Element;
17
18
 
18
19
  /**
19
20
  * 获取打包后的资源路径
package/dist/index.d.ts CHANGED
@@ -12,8 +12,9 @@ interface BagAnimationProps {
12
12
  showMask?: boolean;
13
13
  maskOpacity?: number;
14
14
  maskBlur?: number;
15
+ className?: string;
15
16
  }
16
- declare function BagAnimation({ doneFunction, frames, defaultImage, defaultImageAlt, swipeHintText, boxOpeningText, clickHintText, hasChances, showMask, maskOpacity, maskBlur }: BagAnimationProps): react_jsx_runtime.JSX.Element;
17
+ declare function BagAnimation({ doneFunction, frames, defaultImage, defaultImageAlt, swipeHintText, boxOpeningText, clickHintText, hasChances, showMask, maskOpacity, maskBlur, className }: BagAnimationProps): react_jsx_runtime.JSX.Element;
17
18
 
18
19
  /**
19
20
  * 获取打包后的资源路径
package/dist/index.js CHANGED
@@ -813,7 +813,8 @@ function BagAnimation({
813
813
  hasChances = true,
814
814
  showMask = true,
815
815
  maskOpacity = 0.7,
816
- maskBlur = 8
816
+ maskBlur = 8,
817
+ className = ""
817
818
  }) {
818
819
  const [isAnimating, setIsAnimating] = (0, import_react.useState)(false);
819
820
  const [frame, setFrame] = (0, import_react.useState)(0);
@@ -1033,145 +1034,143 @@ function BagAnimation({
1033
1034
  setShowSwipeHint(true);
1034
1035
  }
1035
1036
  };
1036
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
1037
- !isAnimating && hasChances && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-8 left-[calc(50%-0px)] transform -translate-x-1/2 z-50 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center animate-bounce", children: [
1037
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `flex w-full relative justify-center items-center ${className}`, children: [
1038
+ !isAnimating && hasChances && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute left-[calc(50%-0px)] transform -translate-x-1/2 z-50 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center animate-bounce", children: [
1038
1039
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1039
1040
  "p",
1040
1041
  {
1041
- className: "font-bold text-lg md:text-xl mb-1 drop-shadow-lg text-theme_gold",
1042
+ className: "font-bold text-lg md:text-xl mb-1 drop-shadow-lg",
1042
1043
  children: clickHintText
1043
1044
  }
1044
1045
  ),
1045
1046
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1046
1047
  import_lucide_react.ChevronDown,
1047
1048
  {
1048
- className: "h-8 w-8 md:h-10 md:w-10 text-lime-500 drop-shadow-lg text-theme_gold",
1049
+ className: `h-8 w-8 md:h-10 md:w-10 text-lime-500 drop-shadow-lg ${className}`,
1049
1050
  strokeWidth: 4
1050
1051
  }
1051
1052
  )
1052
1053
  ] }) }),
1053
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full relative justify-center items-center", children: [
1054
- isAnimating && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
1055
- showMask && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1056
- "div",
1057
- {
1058
- className: "fixed inset-0 z-[99]",
1059
- style: {
1060
- backgroundColor: `rgba(0, 0, 0, ${maskOpacity})`,
1061
- backdropFilter: `blur(${maskBlur}px)`,
1062
- WebkitBackdropFilter: `blur(${maskBlur}px)`
1063
- // Safari 支持
1064
- },
1065
- onClick: (e) => {
1066
- e.stopPropagation();
1067
- }
1054
+ isAnimating && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
1055
+ showMask && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1056
+ "div",
1057
+ {
1058
+ className: "fixed inset-0 z-[99]",
1059
+ style: {
1060
+ backgroundColor: `rgba(0, 0, 0, ${maskOpacity})`,
1061
+ backdropFilter: `blur(${maskBlur}px)`,
1062
+ WebkitBackdropFilter: `blur(${maskBlur}px)`
1063
+ // Safari 支持
1064
+ },
1065
+ onClick: (e) => {
1066
+ e.stopPropagation();
1068
1067
  }
1069
- ),
1070
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1071
- "div",
1072
- {
1073
- className: "fixed inset-0 z-[100] flex items-center justify-center pointer-events-none",
1074
- style: { pointerEvents: "none" },
1075
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1076
- "div",
1077
- {
1078
- className: "relative w-full max-w-[90vw] max-h-[90vh] flex items-center justify-center pointer-events-auto",
1079
- style: { pointerEvents: "auto" },
1080
- children: [
1081
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1082
- "canvas",
1083
- {
1084
- ref: canvasRef,
1085
- onMouseDown,
1086
- onMouseMove,
1087
- onMouseUp,
1088
- onMouseLeave: onMouseUp,
1089
- onTouchStart: (e) => {
1090
- if (isPausedAtThird && canvasRef.current) {
1091
- const touch = e.touches[0];
1092
- const rect = canvasRef.current.getBoundingClientRect();
1093
- const touchGap = touch.clientX - rect.left;
1094
- const initialProgress = Math.max(0, Math.min(100, touchGap / rect.width * 100));
1095
- setThirdFrameProgress(initialProgress);
1096
- setShowSwipeHint(false);
1097
- }
1098
- },
1099
- onTouchMove: (e) => {
1100
- if (!isPausedAtThird || !canvasRef.current || hasTriggeredFourthFrame.current) return;
1068
+ }
1069
+ ),
1070
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1071
+ "div",
1072
+ {
1073
+ className: "fixed inset-0 z-[100] flex items-center justify-center pointer-events-none",
1074
+ style: { pointerEvents: "none" },
1075
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1076
+ "div",
1077
+ {
1078
+ className: "relative w-full max-w-[90vw] max-h-[90vh] flex items-center justify-center pointer-events-auto",
1079
+ style: { pointerEvents: "auto" },
1080
+ children: [
1081
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1082
+ "canvas",
1083
+ {
1084
+ ref: canvasRef,
1085
+ onMouseDown,
1086
+ onMouseMove,
1087
+ onMouseUp,
1088
+ onMouseLeave: onMouseUp,
1089
+ onTouchStart: (e) => {
1090
+ if (isPausedAtThird && canvasRef.current) {
1101
1091
  const touch = e.touches[0];
1102
1092
  const rect = canvasRef.current.getBoundingClientRect();
1103
- const relativeX = touch.clientX - rect.left;
1104
- const canvasWidth = rect.width;
1105
- const progress = Math.max(0, Math.min(100, relativeX / canvasWidth * 100));
1106
- setThirdFrameProgress(progress);
1107
- if (progress >= 95 && !hasTriggeredFourthFrame.current) {
1108
- hasTriggeredFourthFrame.current = true;
1109
- setIsPausedAtThird(false);
1110
- setThirdFrameProgress(0);
1111
- setFrame(3);
1112
- }
1113
- },
1114
- onTouchEnd: (e) => {
1115
- if (isPausedAtThird) {
1116
- e.preventDefault();
1117
- setThirdFrameProgress(0);
1118
- setShowSwipeHint(true);
1119
- }
1120
- },
1121
- className: "select-none cursor-pointer w-full h-full object-contain",
1122
- style: {
1123
- imageRendering: "pixelated",
1124
- cursor: isPausedAtThird ? "grab" : "pointer",
1125
- touchAction: "none",
1126
- // 防止默認觸摸行為
1127
- userSelect: "none",
1128
- // 防止選中
1129
- maxWidth: "100%",
1130
- maxHeight: "100%"
1093
+ const touchGap = touch.clientX - rect.left;
1094
+ const initialProgress = Math.max(0, Math.min(100, touchGap / rect.width * 100));
1095
+ setThirdFrameProgress(initialProgress);
1096
+ setShowSwipeHint(false);
1131
1097
  }
1098
+ },
1099
+ onTouchMove: (e) => {
1100
+ if (!isPausedAtThird || !canvasRef.current || hasTriggeredFourthFrame.current) return;
1101
+ const touch = e.touches[0];
1102
+ const rect = canvasRef.current.getBoundingClientRect();
1103
+ const relativeX = touch.clientX - rect.left;
1104
+ const canvasWidth = rect.width;
1105
+ const progress = Math.max(0, Math.min(100, relativeX / canvasWidth * 100));
1106
+ setThirdFrameProgress(progress);
1107
+ if (progress >= 95 && !hasTriggeredFourthFrame.current) {
1108
+ hasTriggeredFourthFrame.current = true;
1109
+ setIsPausedAtThird(false);
1110
+ setThirdFrameProgress(0);
1111
+ setFrame(3);
1112
+ }
1113
+ },
1114
+ onTouchEnd: (e) => {
1115
+ if (isPausedAtThird) {
1116
+ e.preventDefault();
1117
+ setThirdFrameProgress(0);
1118
+ setShowSwipeHint(true);
1119
+ }
1120
+ },
1121
+ className: "select-none cursor-pointer w-full h-full object-contain",
1122
+ style: {
1123
+ imageRendering: "pixelated",
1124
+ cursor: isPausedAtThird ? "grab" : "pointer",
1125
+ touchAction: "none",
1126
+ // 防止默認觸摸行為
1127
+ userSelect: "none",
1128
+ // 防止選中
1129
+ maxWidth: "100%",
1130
+ maxHeight: "100%"
1131
+ }
1132
+ }
1133
+ ),
1134
+ 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: [
1135
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1136
+ "svg",
1137
+ {
1138
+ className: "w-5 h-5 md:w-6 md:h-6",
1139
+ fill: "none",
1140
+ stroke: "currentColor",
1141
+ viewBox: "0 0 24 24",
1142
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1143
+ "path",
1144
+ {
1145
+ strokeLinecap: "round",
1146
+ strokeLinejoin: "round",
1147
+ strokeWidth: 2,
1148
+ d: "M13 7l5 5m0 0l-5 5m5-5H6"
1149
+ }
1150
+ )
1132
1151
  }
1133
1152
  ),
1134
- 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: [
1135
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1136
- "svg",
1137
- {
1138
- className: "w-5 h-5 md:w-6 md:h-6",
1139
- fill: "none",
1140
- stroke: "currentColor",
1141
- viewBox: "0 0 24 24",
1142
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1143
- "path",
1144
- {
1145
- strokeLinecap: "round",
1146
- strokeLinejoin: "round",
1147
- strokeWidth: 2,
1148
- d: "M13 7l5 5m0 0l-5 5m5-5H6"
1149
- }
1150
- )
1151
- }
1152
- ),
1153
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: swipeHintText })
1154
- ] }) })
1155
- ]
1156
- }
1157
- )
1158
- }
1159
- ),
1160
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fixed z-[101] top-0 left-0 w-full h-[10%] flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-theme_gold animate-pulse text-sm md:text-base text-center z-[101]", children: boxOpeningText }) })
1161
- ] }),
1162
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1163
- "img",
1164
- {
1165
- src: mysteryBoxImage,
1166
- alt: mysteryBoxAlt,
1167
- onClick: () => {
1168
- setIsAnimating(true);
1169
- },
1170
- className: "w-36 h-36 md:w-96 md:h-96 object-contain relative z-10"
1153
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: swipeHintText })
1154
+ ] }) })
1155
+ ]
1156
+ }
1157
+ )
1171
1158
  }
1172
- )
1173
- ] })
1174
- ] });
1159
+ ),
1160
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fixed z-[101] top-0 left-0 w-full h-[10%] flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "animate-pulse text-sm md:text-base text-center z-[101]", children: boxOpeningText }) })
1161
+ ] }),
1162
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1163
+ "img",
1164
+ {
1165
+ src: mysteryBoxImage,
1166
+ alt: mysteryBoxAlt,
1167
+ onClick: () => {
1168
+ setIsAnimating(true);
1169
+ },
1170
+ className: "w-36 h-36 md:w-96 md:h-96 object-contain relative mt-8 z-10"
1171
+ }
1172
+ )
1173
+ ] }) });
1175
1174
  }
1176
1175
  // Annotate the CommonJS export names for ESM import in node:
1177
1176
  0 && (module.exports = {
package/dist/index.mjs CHANGED
@@ -797,7 +797,8 @@ function BagAnimation({
797
797
  hasChances = true,
798
798
  showMask = true,
799
799
  maskOpacity = 0.7,
800
- maskBlur = 8
800
+ maskBlur = 8,
801
+ className = ""
801
802
  }) {
802
803
  const [isAnimating, setIsAnimating] = useState(false);
803
804
  const [frame, setFrame] = useState(0);
@@ -1017,145 +1018,143 @@ function BagAnimation({
1017
1018
  setShowSwipeHint(true);
1018
1019
  }
1019
1020
  };
1020
- return /* @__PURE__ */ jsxs(Fragment, { children: [
1021
- !isAnimating && hasChances && /* @__PURE__ */ jsx("div", { className: "absolute top-8 left-[calc(50%-0px)] transform -translate-x-1/2 z-50 pointer-events-none", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center animate-bounce", children: [
1021
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: `flex w-full relative justify-center items-center ${className}`, children: [
1022
+ !isAnimating && hasChances && /* @__PURE__ */ jsx("div", { className: "absolute left-[calc(50%-0px)] transform -translate-x-1/2 z-50 pointer-events-none", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center animate-bounce", children: [
1022
1023
  /* @__PURE__ */ jsx(
1023
1024
  "p",
1024
1025
  {
1025
- className: "font-bold text-lg md:text-xl mb-1 drop-shadow-lg text-theme_gold",
1026
+ className: "font-bold text-lg md:text-xl mb-1 drop-shadow-lg",
1026
1027
  children: clickHintText
1027
1028
  }
1028
1029
  ),
1029
1030
  /* @__PURE__ */ jsx(
1030
1031
  ChevronDown,
1031
1032
  {
1032
- className: "h-8 w-8 md:h-10 md:w-10 text-lime-500 drop-shadow-lg text-theme_gold",
1033
+ className: `h-8 w-8 md:h-10 md:w-10 text-lime-500 drop-shadow-lg ${className}`,
1033
1034
  strokeWidth: 4
1034
1035
  }
1035
1036
  )
1036
1037
  ] }) }),
1037
- /* @__PURE__ */ jsxs("div", { className: "flex w-full relative justify-center items-center", children: [
1038
- isAnimating && /* @__PURE__ */ jsxs(Fragment, { children: [
1039
- showMask && /* @__PURE__ */ jsx(
1040
- "div",
1041
- {
1042
- className: "fixed inset-0 z-[99]",
1043
- style: {
1044
- backgroundColor: `rgba(0, 0, 0, ${maskOpacity})`,
1045
- backdropFilter: `blur(${maskBlur}px)`,
1046
- WebkitBackdropFilter: `blur(${maskBlur}px)`
1047
- // Safari 支持
1048
- },
1049
- onClick: (e) => {
1050
- e.stopPropagation();
1051
- }
1038
+ isAnimating && /* @__PURE__ */ jsxs(Fragment, { children: [
1039
+ showMask && /* @__PURE__ */ jsx(
1040
+ "div",
1041
+ {
1042
+ className: "fixed inset-0 z-[99]",
1043
+ style: {
1044
+ backgroundColor: `rgba(0, 0, 0, ${maskOpacity})`,
1045
+ backdropFilter: `blur(${maskBlur}px)`,
1046
+ WebkitBackdropFilter: `blur(${maskBlur}px)`
1047
+ // Safari 支持
1048
+ },
1049
+ onClick: (e) => {
1050
+ e.stopPropagation();
1052
1051
  }
1053
- ),
1054
- /* @__PURE__ */ jsx(
1055
- "div",
1056
- {
1057
- className: "fixed inset-0 z-[100] flex items-center justify-center pointer-events-none",
1058
- style: { pointerEvents: "none" },
1059
- children: /* @__PURE__ */ jsxs(
1060
- "div",
1061
- {
1062
- className: "relative w-full max-w-[90vw] max-h-[90vh] flex items-center justify-center pointer-events-auto",
1063
- style: { pointerEvents: "auto" },
1064
- children: [
1065
- /* @__PURE__ */ jsx(
1066
- "canvas",
1067
- {
1068
- ref: canvasRef,
1069
- onMouseDown,
1070
- onMouseMove,
1071
- onMouseUp,
1072
- onMouseLeave: onMouseUp,
1073
- onTouchStart: (e) => {
1074
- if (isPausedAtThird && canvasRef.current) {
1075
- const touch = e.touches[0];
1076
- const rect = canvasRef.current.getBoundingClientRect();
1077
- const touchGap = touch.clientX - rect.left;
1078
- const initialProgress = Math.max(0, Math.min(100, touchGap / rect.width * 100));
1079
- setThirdFrameProgress(initialProgress);
1080
- setShowSwipeHint(false);
1081
- }
1082
- },
1083
- onTouchMove: (e) => {
1084
- if (!isPausedAtThird || !canvasRef.current || hasTriggeredFourthFrame.current) return;
1052
+ }
1053
+ ),
1054
+ /* @__PURE__ */ jsx(
1055
+ "div",
1056
+ {
1057
+ className: "fixed inset-0 z-[100] flex items-center justify-center pointer-events-none",
1058
+ style: { pointerEvents: "none" },
1059
+ children: /* @__PURE__ */ jsxs(
1060
+ "div",
1061
+ {
1062
+ className: "relative w-full max-w-[90vw] max-h-[90vh] flex items-center justify-center pointer-events-auto",
1063
+ style: { pointerEvents: "auto" },
1064
+ children: [
1065
+ /* @__PURE__ */ jsx(
1066
+ "canvas",
1067
+ {
1068
+ ref: canvasRef,
1069
+ onMouseDown,
1070
+ onMouseMove,
1071
+ onMouseUp,
1072
+ onMouseLeave: onMouseUp,
1073
+ onTouchStart: (e) => {
1074
+ if (isPausedAtThird && canvasRef.current) {
1085
1075
  const touch = e.touches[0];
1086
1076
  const rect = canvasRef.current.getBoundingClientRect();
1087
- const relativeX = touch.clientX - rect.left;
1088
- const canvasWidth = rect.width;
1089
- const progress = Math.max(0, Math.min(100, relativeX / canvasWidth * 100));
1090
- setThirdFrameProgress(progress);
1091
- if (progress >= 95 && !hasTriggeredFourthFrame.current) {
1092
- hasTriggeredFourthFrame.current = true;
1093
- setIsPausedAtThird(false);
1094
- setThirdFrameProgress(0);
1095
- setFrame(3);
1096
- }
1097
- },
1098
- onTouchEnd: (e) => {
1099
- if (isPausedAtThird) {
1100
- e.preventDefault();
1101
- setThirdFrameProgress(0);
1102
- setShowSwipeHint(true);
1103
- }
1104
- },
1105
- className: "select-none cursor-pointer w-full h-full object-contain",
1106
- style: {
1107
- imageRendering: "pixelated",
1108
- cursor: isPausedAtThird ? "grab" : "pointer",
1109
- touchAction: "none",
1110
- // 防止默認觸摸行為
1111
- userSelect: "none",
1112
- // 防止選中
1113
- maxWidth: "100%",
1114
- maxHeight: "100%"
1077
+ const touchGap = touch.clientX - rect.left;
1078
+ const initialProgress = Math.max(0, Math.min(100, touchGap / rect.width * 100));
1079
+ setThirdFrameProgress(initialProgress);
1080
+ setShowSwipeHint(false);
1115
1081
  }
1082
+ },
1083
+ onTouchMove: (e) => {
1084
+ if (!isPausedAtThird || !canvasRef.current || hasTriggeredFourthFrame.current) return;
1085
+ const touch = e.touches[0];
1086
+ const rect = canvasRef.current.getBoundingClientRect();
1087
+ const relativeX = touch.clientX - rect.left;
1088
+ const canvasWidth = rect.width;
1089
+ const progress = Math.max(0, Math.min(100, relativeX / canvasWidth * 100));
1090
+ setThirdFrameProgress(progress);
1091
+ if (progress >= 95 && !hasTriggeredFourthFrame.current) {
1092
+ hasTriggeredFourthFrame.current = true;
1093
+ setIsPausedAtThird(false);
1094
+ setThirdFrameProgress(0);
1095
+ setFrame(3);
1096
+ }
1097
+ },
1098
+ onTouchEnd: (e) => {
1099
+ if (isPausedAtThird) {
1100
+ e.preventDefault();
1101
+ setThirdFrameProgress(0);
1102
+ setShowSwipeHint(true);
1103
+ }
1104
+ },
1105
+ className: "select-none cursor-pointer w-full h-full object-contain",
1106
+ style: {
1107
+ imageRendering: "pixelated",
1108
+ cursor: isPausedAtThird ? "grab" : "pointer",
1109
+ touchAction: "none",
1110
+ // 防止默認觸摸行為
1111
+ userSelect: "none",
1112
+ // 防止選中
1113
+ maxWidth: "100%",
1114
+ maxHeight: "100%"
1115
+ }
1116
+ }
1117
+ ),
1118
+ 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: [
1119
+ /* @__PURE__ */ jsx(
1120
+ "svg",
1121
+ {
1122
+ className: "w-5 h-5 md:w-6 md:h-6",
1123
+ fill: "none",
1124
+ stroke: "currentColor",
1125
+ viewBox: "0 0 24 24",
1126
+ children: /* @__PURE__ */ jsx(
1127
+ "path",
1128
+ {
1129
+ strokeLinecap: "round",
1130
+ strokeLinejoin: "round",
1131
+ strokeWidth: 2,
1132
+ d: "M13 7l5 5m0 0l-5 5m5-5H6"
1133
+ }
1134
+ )
1116
1135
  }
1117
1136
  ),
1118
- 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: [
1119
- /* @__PURE__ */ jsx(
1120
- "svg",
1121
- {
1122
- className: "w-5 h-5 md:w-6 md:h-6",
1123
- fill: "none",
1124
- stroke: "currentColor",
1125
- viewBox: "0 0 24 24",
1126
- children: /* @__PURE__ */ jsx(
1127
- "path",
1128
- {
1129
- strokeLinecap: "round",
1130
- strokeLinejoin: "round",
1131
- strokeWidth: 2,
1132
- d: "M13 7l5 5m0 0l-5 5m5-5H6"
1133
- }
1134
- )
1135
- }
1136
- ),
1137
- /* @__PURE__ */ jsx("span", { children: swipeHintText })
1138
- ] }) })
1139
- ]
1140
- }
1141
- )
1142
- }
1143
- ),
1144
- /* @__PURE__ */ jsx("div", { className: "fixed z-[101] top-0 left-0 w-full h-[10%] flex justify-center items-center", children: /* @__PURE__ */ jsx("p", { className: "text-theme_gold animate-pulse text-sm md:text-base text-center z-[101]", children: boxOpeningText }) })
1145
- ] }),
1146
- /* @__PURE__ */ jsx(
1147
- "img",
1148
- {
1149
- src: mysteryBoxImage,
1150
- alt: mysteryBoxAlt,
1151
- onClick: () => {
1152
- setIsAnimating(true);
1153
- },
1154
- className: "w-36 h-36 md:w-96 md:h-96 object-contain relative z-10"
1137
+ /* @__PURE__ */ jsx("span", { children: swipeHintText })
1138
+ ] }) })
1139
+ ]
1140
+ }
1141
+ )
1155
1142
  }
1156
- )
1157
- ] })
1158
- ] });
1143
+ ),
1144
+ /* @__PURE__ */ jsx("div", { className: "fixed z-[101] top-0 left-0 w-full h-[10%] flex justify-center items-center", children: /* @__PURE__ */ jsx("p", { className: "animate-pulse text-sm md:text-base text-center z-[101]", children: boxOpeningText }) })
1145
+ ] }),
1146
+ /* @__PURE__ */ jsx(
1147
+ "img",
1148
+ {
1149
+ src: mysteryBoxImage,
1150
+ alt: mysteryBoxAlt,
1151
+ onClick: () => {
1152
+ setIsAnimating(true);
1153
+ },
1154
+ className: "w-36 h-36 md:w-96 md:h-96 object-contain relative mt-8 z-10"
1155
+ }
1156
+ )
1157
+ ] }) });
1159
1158
  }
1160
1159
  export {
1161
1160
  BagAnimation,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chao-component/bag-animation-ui",
3
- "version": "1.0.13",
3
+ "version": "1.0.15",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",