@chao-component/bag-animation-ui 1.0.3 → 1.0.5
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.
- package/dist/index.d.mts +4 -3
- package/dist/index.d.ts +4 -3
- package/dist/index.js +109 -71
- package/dist/index.mjs +109 -71
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
3
|
interface BagAnimationProps {
|
|
4
|
-
isAnimating: boolean;
|
|
5
|
-
setIsAnimating: (isAnimating: boolean) => void;
|
|
6
4
|
doneFunction: () => void;
|
|
7
5
|
frames?: string[];
|
|
8
6
|
defaultImage?: string;
|
|
9
7
|
defaultImageAlt?: string;
|
|
10
8
|
swipeHintText?: string;
|
|
9
|
+
showMask?: boolean;
|
|
10
|
+
maskOpacity?: number;
|
|
11
|
+
maskBlur?: number;
|
|
11
12
|
}
|
|
12
|
-
declare function BagAnimation({
|
|
13
|
+
declare function BagAnimation({ doneFunction, frames, defaultImage, defaultImageAlt, swipeHintText, showMask, maskOpacity, maskBlur }: BagAnimationProps): react_jsx_runtime.JSX.Element;
|
|
13
14
|
|
|
14
15
|
/**
|
|
15
16
|
* 获取打包后的资源路径
|
package/dist/index.d.ts
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
3
|
interface BagAnimationProps {
|
|
4
|
-
isAnimating: boolean;
|
|
5
|
-
setIsAnimating: (isAnimating: boolean) => void;
|
|
6
4
|
doneFunction: () => void;
|
|
7
5
|
frames?: string[];
|
|
8
6
|
defaultImage?: string;
|
|
9
7
|
defaultImageAlt?: string;
|
|
10
8
|
swipeHintText?: string;
|
|
9
|
+
showMask?: boolean;
|
|
10
|
+
maskOpacity?: number;
|
|
11
|
+
maskBlur?: number;
|
|
11
12
|
}
|
|
12
|
-
declare function BagAnimation({
|
|
13
|
+
declare function BagAnimation({ doneFunction, frames, defaultImage, defaultImageAlt, swipeHintText, showMask, maskOpacity, maskBlur }: BagAnimationProps): react_jsx_runtime.JSX.Element;
|
|
13
14
|
|
|
14
15
|
/**
|
|
15
16
|
* 获取打包后的资源路径
|
package/dist/index.js
CHANGED
|
@@ -802,14 +802,16 @@ var defaultImagePath = "/assets/bag.png";
|
|
|
802
802
|
// src/BagAnimation.tsx
|
|
803
803
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
804
804
|
function BagAnimation({
|
|
805
|
-
isAnimating,
|
|
806
|
-
setIsAnimating,
|
|
807
805
|
doneFunction,
|
|
808
806
|
frames = defaultAnimationFrames,
|
|
809
807
|
defaultImage = defaultImagePath,
|
|
810
808
|
defaultImageAlt = "Weedza Mystery Box",
|
|
811
|
-
swipeHintText = "Swipe to open"
|
|
809
|
+
swipeHintText = "Swipe to open",
|
|
810
|
+
showMask = true,
|
|
811
|
+
maskOpacity = 0.7,
|
|
812
|
+
maskBlur = 8
|
|
812
813
|
}) {
|
|
814
|
+
const [isAnimating, setIsAnimating] = (0, import_react.useState)(false);
|
|
813
815
|
const [frame, setFrame] = (0, import_react.useState)(0);
|
|
814
816
|
const [isPausedAtThird, setIsPausedAtThird] = (0, import_react.useState)(false);
|
|
815
817
|
const [thirdFrameProgress, setThirdFrameProgress] = (0, import_react.useState)(0);
|
|
@@ -1028,85 +1030,121 @@ function BagAnimation({
|
|
|
1028
1030
|
}
|
|
1029
1031
|
};
|
|
1030
1032
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
1031
|
-
isAnimating && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
1032
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1033
|
-
"
|
|
1033
|
+
isAnimating && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
1034
|
+
showMask && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1035
|
+
"div",
|
|
1034
1036
|
{
|
|
1035
|
-
|
|
1036
|
-
onMouseDown,
|
|
1037
|
-
onMouseMove,
|
|
1038
|
-
onMouseUp,
|
|
1039
|
-
onMouseLeave: onMouseUp,
|
|
1040
|
-
onTouchStart: (e) => {
|
|
1041
|
-
if (isPausedAtThird && canvasRef.current) {
|
|
1042
|
-
const touch = e.touches[0];
|
|
1043
|
-
const rect = canvasRef.current.getBoundingClientRect();
|
|
1044
|
-
const touchGap = touch.clientX - rect.left;
|
|
1045
|
-
const initialProgress = Math.max(0, Math.min(100, touchGap / rect.width * 100));
|
|
1046
|
-
setThirdFrameProgress(initialProgress);
|
|
1047
|
-
setShowSwipeHint(false);
|
|
1048
|
-
}
|
|
1049
|
-
},
|
|
1050
|
-
onTouchMove: (e) => {
|
|
1051
|
-
if (!isPausedAtThird || !canvasRef.current || hasTriggeredFourthFrame.current) return;
|
|
1052
|
-
const touch = e.touches[0];
|
|
1053
|
-
const rect = canvasRef.current.getBoundingClientRect();
|
|
1054
|
-
const relativeX = touch.clientX - rect.left;
|
|
1055
|
-
const canvasWidth = rect.width;
|
|
1056
|
-
const progress = Math.max(0, Math.min(100, relativeX / canvasWidth * 100));
|
|
1057
|
-
setThirdFrameProgress(progress);
|
|
1058
|
-
if (progress >= 95 && !hasTriggeredFourthFrame.current) {
|
|
1059
|
-
hasTriggeredFourthFrame.current = true;
|
|
1060
|
-
setIsPausedAtThird(false);
|
|
1061
|
-
setThirdFrameProgress(0);
|
|
1062
|
-
setFrame(3);
|
|
1063
|
-
}
|
|
1064
|
-
},
|
|
1065
|
-
onTouchEnd: (e) => {
|
|
1066
|
-
if (isPausedAtThird) {
|
|
1067
|
-
e.preventDefault();
|
|
1068
|
-
setThirdFrameProgress(0);
|
|
1069
|
-
setShowSwipeHint(true);
|
|
1070
|
-
}
|
|
1071
|
-
},
|
|
1072
|
-
className: "select-none cursor-pointer w-full h-full object-contain",
|
|
1037
|
+
className: "fixed inset-0 z-[9998]",
|
|
1073
1038
|
style: {
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
//
|
|
1078
|
-
|
|
1079
|
-
|
|
1039
|
+
backgroundColor: `rgba(0, 0, 0, ${maskOpacity})`,
|
|
1040
|
+
backdropFilter: `blur(${maskBlur}px)`,
|
|
1041
|
+
WebkitBackdropFilter: `blur(${maskBlur}px)`
|
|
1042
|
+
// Safari 支持
|
|
1043
|
+
},
|
|
1044
|
+
onClick: (e) => {
|
|
1045
|
+
e.stopPropagation();
|
|
1080
1046
|
}
|
|
1081
1047
|
}
|
|
1082
1048
|
),
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
"
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1049
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1050
|
+
"div",
|
|
1051
|
+
{
|
|
1052
|
+
className: "fixed inset-0 z-[9999] flex items-center justify-center pointer-events-none",
|
|
1053
|
+
style: { pointerEvents: "none" },
|
|
1054
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
1055
|
+
"div",
|
|
1056
|
+
{
|
|
1057
|
+
className: "relative w-full max-w-[90vw] max-h-[90vh] flex items-center justify-center pointer-events-auto",
|
|
1058
|
+
style: { pointerEvents: "auto" },
|
|
1059
|
+
children: [
|
|
1060
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1061
|
+
"canvas",
|
|
1062
|
+
{
|
|
1063
|
+
ref: canvasRef,
|
|
1064
|
+
onMouseDown,
|
|
1065
|
+
onMouseMove,
|
|
1066
|
+
onMouseUp,
|
|
1067
|
+
onMouseLeave: onMouseUp,
|
|
1068
|
+
onTouchStart: (e) => {
|
|
1069
|
+
if (isPausedAtThird && canvasRef.current) {
|
|
1070
|
+
const touch = e.touches[0];
|
|
1071
|
+
const rect = canvasRef.current.getBoundingClientRect();
|
|
1072
|
+
const touchGap = touch.clientX - rect.left;
|
|
1073
|
+
const initialProgress = Math.max(0, Math.min(100, touchGap / rect.width * 100));
|
|
1074
|
+
setThirdFrameProgress(initialProgress);
|
|
1075
|
+
setShowSwipeHint(false);
|
|
1076
|
+
}
|
|
1077
|
+
},
|
|
1078
|
+
onTouchMove: (e) => {
|
|
1079
|
+
if (!isPausedAtThird || !canvasRef.current || hasTriggeredFourthFrame.current) return;
|
|
1080
|
+
const touch = e.touches[0];
|
|
1081
|
+
const rect = canvasRef.current.getBoundingClientRect();
|
|
1082
|
+
const relativeX = touch.clientX - rect.left;
|
|
1083
|
+
const canvasWidth = rect.width;
|
|
1084
|
+
const progress = Math.max(0, Math.min(100, relativeX / canvasWidth * 100));
|
|
1085
|
+
setThirdFrameProgress(progress);
|
|
1086
|
+
if (progress >= 95 && !hasTriggeredFourthFrame.current) {
|
|
1087
|
+
hasTriggeredFourthFrame.current = true;
|
|
1088
|
+
setIsPausedAtThird(false);
|
|
1089
|
+
setThirdFrameProgress(0);
|
|
1090
|
+
setFrame(3);
|
|
1091
|
+
}
|
|
1092
|
+
},
|
|
1093
|
+
onTouchEnd: (e) => {
|
|
1094
|
+
if (isPausedAtThird) {
|
|
1095
|
+
e.preventDefault();
|
|
1096
|
+
setThirdFrameProgress(0);
|
|
1097
|
+
setShowSwipeHint(true);
|
|
1098
|
+
}
|
|
1099
|
+
},
|
|
1100
|
+
className: "select-none cursor-pointer w-full h-full object-contain",
|
|
1101
|
+
style: {
|
|
1102
|
+
imageRendering: "pixelated",
|
|
1103
|
+
cursor: isPausedAtThird ? "grab" : "pointer",
|
|
1104
|
+
touchAction: "none",
|
|
1105
|
+
// 防止默認觸摸行為
|
|
1106
|
+
userSelect: "none",
|
|
1107
|
+
// 防止選中
|
|
1108
|
+
maxWidth: "100%",
|
|
1109
|
+
maxHeight: "100%"
|
|
1110
|
+
}
|
|
1111
|
+
}
|
|
1112
|
+
),
|
|
1113
|
+
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: [
|
|
1114
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1115
|
+
"svg",
|
|
1116
|
+
{
|
|
1117
|
+
className: "w-5 h-5 md:w-6 md:h-6",
|
|
1118
|
+
fill: "none",
|
|
1119
|
+
stroke: "currentColor",
|
|
1120
|
+
viewBox: "0 0 24 24",
|
|
1121
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1122
|
+
"path",
|
|
1123
|
+
{
|
|
1124
|
+
strokeLinecap: "round",
|
|
1125
|
+
strokeLinejoin: "round",
|
|
1126
|
+
strokeWidth: 2,
|
|
1127
|
+
d: "M13 7l5 5m0 0l-5 5m5-5H6"
|
|
1128
|
+
}
|
|
1129
|
+
)
|
|
1130
|
+
}
|
|
1131
|
+
),
|
|
1132
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: swipeHintText })
|
|
1133
|
+
] }) })
|
|
1134
|
+
]
|
|
1135
|
+
}
|
|
1136
|
+
)
|
|
1137
|
+
}
|
|
1138
|
+
)
|
|
1104
1139
|
] }),
|
|
1105
1140
|
!isAnimating && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1106
1141
|
"img",
|
|
1107
1142
|
{
|
|
1108
1143
|
src: mysteryBoxImage,
|
|
1109
1144
|
alt: mysteryBoxAlt,
|
|
1145
|
+
onClick: () => {
|
|
1146
|
+
setIsAnimating(true);
|
|
1147
|
+
},
|
|
1110
1148
|
className: "w-36 h-36 md:w-96 md:h-96 object-contain relative z-10"
|
|
1111
1149
|
}
|
|
1112
1150
|
)
|
package/dist/index.mjs
CHANGED
|
@@ -786,14 +786,16 @@ var defaultImagePath = "/assets/bag.png";
|
|
|
786
786
|
// src/BagAnimation.tsx
|
|
787
787
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
788
788
|
function BagAnimation({
|
|
789
|
-
isAnimating,
|
|
790
|
-
setIsAnimating,
|
|
791
789
|
doneFunction,
|
|
792
790
|
frames = defaultAnimationFrames,
|
|
793
791
|
defaultImage = defaultImagePath,
|
|
794
792
|
defaultImageAlt = "Weedza Mystery Box",
|
|
795
|
-
swipeHintText = "Swipe to open"
|
|
793
|
+
swipeHintText = "Swipe to open",
|
|
794
|
+
showMask = true,
|
|
795
|
+
maskOpacity = 0.7,
|
|
796
|
+
maskBlur = 8
|
|
796
797
|
}) {
|
|
798
|
+
const [isAnimating, setIsAnimating] = useState(false);
|
|
797
799
|
const [frame, setFrame] = useState(0);
|
|
798
800
|
const [isPausedAtThird, setIsPausedAtThird] = useState(false);
|
|
799
801
|
const [thirdFrameProgress, setThirdFrameProgress] = useState(0);
|
|
@@ -1012,85 +1014,121 @@ function BagAnimation({
|
|
|
1012
1014
|
}
|
|
1013
1015
|
};
|
|
1014
1016
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1015
|
-
isAnimating && /* @__PURE__ */ jsxs(
|
|
1016
|
-
/* @__PURE__ */ jsx(
|
|
1017
|
-
"
|
|
1017
|
+
isAnimating && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1018
|
+
showMask && /* @__PURE__ */ jsx(
|
|
1019
|
+
"div",
|
|
1018
1020
|
{
|
|
1019
|
-
|
|
1020
|
-
onMouseDown,
|
|
1021
|
-
onMouseMove,
|
|
1022
|
-
onMouseUp,
|
|
1023
|
-
onMouseLeave: onMouseUp,
|
|
1024
|
-
onTouchStart: (e) => {
|
|
1025
|
-
if (isPausedAtThird && canvasRef.current) {
|
|
1026
|
-
const touch = e.touches[0];
|
|
1027
|
-
const rect = canvasRef.current.getBoundingClientRect();
|
|
1028
|
-
const touchGap = touch.clientX - rect.left;
|
|
1029
|
-
const initialProgress = Math.max(0, Math.min(100, touchGap / rect.width * 100));
|
|
1030
|
-
setThirdFrameProgress(initialProgress);
|
|
1031
|
-
setShowSwipeHint(false);
|
|
1032
|
-
}
|
|
1033
|
-
},
|
|
1034
|
-
onTouchMove: (e) => {
|
|
1035
|
-
if (!isPausedAtThird || !canvasRef.current || hasTriggeredFourthFrame.current) return;
|
|
1036
|
-
const touch = e.touches[0];
|
|
1037
|
-
const rect = canvasRef.current.getBoundingClientRect();
|
|
1038
|
-
const relativeX = touch.clientX - rect.left;
|
|
1039
|
-
const canvasWidth = rect.width;
|
|
1040
|
-
const progress = Math.max(0, Math.min(100, relativeX / canvasWidth * 100));
|
|
1041
|
-
setThirdFrameProgress(progress);
|
|
1042
|
-
if (progress >= 95 && !hasTriggeredFourthFrame.current) {
|
|
1043
|
-
hasTriggeredFourthFrame.current = true;
|
|
1044
|
-
setIsPausedAtThird(false);
|
|
1045
|
-
setThirdFrameProgress(0);
|
|
1046
|
-
setFrame(3);
|
|
1047
|
-
}
|
|
1048
|
-
},
|
|
1049
|
-
onTouchEnd: (e) => {
|
|
1050
|
-
if (isPausedAtThird) {
|
|
1051
|
-
e.preventDefault();
|
|
1052
|
-
setThirdFrameProgress(0);
|
|
1053
|
-
setShowSwipeHint(true);
|
|
1054
|
-
}
|
|
1055
|
-
},
|
|
1056
|
-
className: "select-none cursor-pointer w-full h-full object-contain",
|
|
1021
|
+
className: "fixed inset-0 z-[9998]",
|
|
1057
1022
|
style: {
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
//
|
|
1062
|
-
|
|
1063
|
-
|
|
1023
|
+
backgroundColor: `rgba(0, 0, 0, ${maskOpacity})`,
|
|
1024
|
+
backdropFilter: `blur(${maskBlur}px)`,
|
|
1025
|
+
WebkitBackdropFilter: `blur(${maskBlur}px)`
|
|
1026
|
+
// Safari 支持
|
|
1027
|
+
},
|
|
1028
|
+
onClick: (e) => {
|
|
1029
|
+
e.stopPropagation();
|
|
1064
1030
|
}
|
|
1065
1031
|
}
|
|
1066
1032
|
),
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
"
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1033
|
+
/* @__PURE__ */ jsx(
|
|
1034
|
+
"div",
|
|
1035
|
+
{
|
|
1036
|
+
className: "fixed inset-0 z-[9999] flex items-center justify-center pointer-events-none",
|
|
1037
|
+
style: { pointerEvents: "none" },
|
|
1038
|
+
children: /* @__PURE__ */ jsxs(
|
|
1039
|
+
"div",
|
|
1040
|
+
{
|
|
1041
|
+
className: "relative w-full max-w-[90vw] max-h-[90vh] flex items-center justify-center pointer-events-auto",
|
|
1042
|
+
style: { pointerEvents: "auto" },
|
|
1043
|
+
children: [
|
|
1044
|
+
/* @__PURE__ */ jsx(
|
|
1045
|
+
"canvas",
|
|
1046
|
+
{
|
|
1047
|
+
ref: canvasRef,
|
|
1048
|
+
onMouseDown,
|
|
1049
|
+
onMouseMove,
|
|
1050
|
+
onMouseUp,
|
|
1051
|
+
onMouseLeave: onMouseUp,
|
|
1052
|
+
onTouchStart: (e) => {
|
|
1053
|
+
if (isPausedAtThird && canvasRef.current) {
|
|
1054
|
+
const touch = e.touches[0];
|
|
1055
|
+
const rect = canvasRef.current.getBoundingClientRect();
|
|
1056
|
+
const touchGap = touch.clientX - rect.left;
|
|
1057
|
+
const initialProgress = Math.max(0, Math.min(100, touchGap / rect.width * 100));
|
|
1058
|
+
setThirdFrameProgress(initialProgress);
|
|
1059
|
+
setShowSwipeHint(false);
|
|
1060
|
+
}
|
|
1061
|
+
},
|
|
1062
|
+
onTouchMove: (e) => {
|
|
1063
|
+
if (!isPausedAtThird || !canvasRef.current || hasTriggeredFourthFrame.current) return;
|
|
1064
|
+
const touch = e.touches[0];
|
|
1065
|
+
const rect = canvasRef.current.getBoundingClientRect();
|
|
1066
|
+
const relativeX = touch.clientX - rect.left;
|
|
1067
|
+
const canvasWidth = rect.width;
|
|
1068
|
+
const progress = Math.max(0, Math.min(100, relativeX / canvasWidth * 100));
|
|
1069
|
+
setThirdFrameProgress(progress);
|
|
1070
|
+
if (progress >= 95 && !hasTriggeredFourthFrame.current) {
|
|
1071
|
+
hasTriggeredFourthFrame.current = true;
|
|
1072
|
+
setIsPausedAtThird(false);
|
|
1073
|
+
setThirdFrameProgress(0);
|
|
1074
|
+
setFrame(3);
|
|
1075
|
+
}
|
|
1076
|
+
},
|
|
1077
|
+
onTouchEnd: (e) => {
|
|
1078
|
+
if (isPausedAtThird) {
|
|
1079
|
+
e.preventDefault();
|
|
1080
|
+
setThirdFrameProgress(0);
|
|
1081
|
+
setShowSwipeHint(true);
|
|
1082
|
+
}
|
|
1083
|
+
},
|
|
1084
|
+
className: "select-none cursor-pointer w-full h-full object-contain",
|
|
1085
|
+
style: {
|
|
1086
|
+
imageRendering: "pixelated",
|
|
1087
|
+
cursor: isPausedAtThird ? "grab" : "pointer",
|
|
1088
|
+
touchAction: "none",
|
|
1089
|
+
// 防止默認觸摸行為
|
|
1090
|
+
userSelect: "none",
|
|
1091
|
+
// 防止選中
|
|
1092
|
+
maxWidth: "100%",
|
|
1093
|
+
maxHeight: "100%"
|
|
1094
|
+
}
|
|
1095
|
+
}
|
|
1096
|
+
),
|
|
1097
|
+
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: [
|
|
1098
|
+
/* @__PURE__ */ jsx(
|
|
1099
|
+
"svg",
|
|
1100
|
+
{
|
|
1101
|
+
className: "w-5 h-5 md:w-6 md:h-6",
|
|
1102
|
+
fill: "none",
|
|
1103
|
+
stroke: "currentColor",
|
|
1104
|
+
viewBox: "0 0 24 24",
|
|
1105
|
+
children: /* @__PURE__ */ jsx(
|
|
1106
|
+
"path",
|
|
1107
|
+
{
|
|
1108
|
+
strokeLinecap: "round",
|
|
1109
|
+
strokeLinejoin: "round",
|
|
1110
|
+
strokeWidth: 2,
|
|
1111
|
+
d: "M13 7l5 5m0 0l-5 5m5-5H6"
|
|
1112
|
+
}
|
|
1113
|
+
)
|
|
1114
|
+
}
|
|
1115
|
+
),
|
|
1116
|
+
/* @__PURE__ */ jsx("span", { children: swipeHintText })
|
|
1117
|
+
] }) })
|
|
1118
|
+
]
|
|
1119
|
+
}
|
|
1120
|
+
)
|
|
1121
|
+
}
|
|
1122
|
+
)
|
|
1088
1123
|
] }),
|
|
1089
1124
|
!isAnimating && /* @__PURE__ */ jsx(
|
|
1090
1125
|
"img",
|
|
1091
1126
|
{
|
|
1092
1127
|
src: mysteryBoxImage,
|
|
1093
1128
|
alt: mysteryBoxAlt,
|
|
1129
|
+
onClick: () => {
|
|
1130
|
+
setIsAnimating(true);
|
|
1131
|
+
},
|
|
1094
1132
|
className: "w-36 h-36 md:w-96 md:h-96 object-contain relative z-10"
|
|
1095
1133
|
}
|
|
1096
1134
|
)
|