@playruo/embed 1.8.0 → 1.8.1
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.cjs +171 -42
- package/dist/index.d.cts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +171 -42
- package/package.json +3 -2
package/dist/index.cjs
CHANGED
|
@@ -939,6 +939,7 @@ var createInitialDiagnostics = () => ({
|
|
|
939
939
|
});
|
|
940
940
|
var EmbedTester = (props = {}) => {
|
|
941
941
|
const [operationDraft, setOperationDraft] = (0, import_react2.useState)(props.operation ?? "iframe");
|
|
942
|
+
const [operationKeyDraft, setOperationKeyDraft] = (0, import_react2.useState)(props.operationKey ?? "");
|
|
942
943
|
const [storeUrlDraft, setStoreUrlDraft] = (0, import_react2.useState)(
|
|
943
944
|
props.storeUrl ?? "https://store.steampowered.com/app/123456"
|
|
944
945
|
);
|
|
@@ -946,6 +947,7 @@ var EmbedTester = (props = {}) => {
|
|
|
946
947
|
props.enableWindowedLaunch ?? false
|
|
947
948
|
);
|
|
948
949
|
const [appliedOperation, setAppliedOperation] = (0, import_react2.useState)(props.operation ?? "iframe");
|
|
950
|
+
const [appliedOperationKey, setAppliedOperationKey] = (0, import_react2.useState)(props.operationKey ?? "");
|
|
949
951
|
const [appliedStoreUrl, setAppliedStoreUrl] = (0, import_react2.useState)(
|
|
950
952
|
props.storeUrl ?? "https://store.steampowered.com/app/123456"
|
|
951
953
|
);
|
|
@@ -955,6 +957,7 @@ var EmbedTester = (props = {}) => {
|
|
|
955
957
|
const [key, setKey] = (0, import_react2.useState)(0);
|
|
956
958
|
const [hasUserClicked, setHasUserClicked] = (0, import_react2.useState)(false);
|
|
957
959
|
const [showIframe, setShowIframe] = (0, import_react2.useState)(false);
|
|
960
|
+
const [overlayPassword, setOverlayPassword] = (0, import_react2.useState)("");
|
|
958
961
|
const [embedState, setEmbedState] = (0, import_react2.useState)(createInitialEmbedState);
|
|
959
962
|
const [eventLog, setEventLog] = (0, import_react2.useState)([]);
|
|
960
963
|
const [diagnostics, setDiagnostics] = (0, import_react2.useState)(createInitialDiagnostics);
|
|
@@ -965,10 +968,11 @@ var EmbedTester = (props = {}) => {
|
|
|
965
968
|
const previousStateRef = (0, import_react2.useRef)("");
|
|
966
969
|
const iframeRef = (0, import_react2.useRef)(null);
|
|
967
970
|
const isOperationPending = operationDraft !== appliedOperation;
|
|
971
|
+
const isOperationKeyPending = operationKeyDraft !== appliedOperationKey;
|
|
968
972
|
const isStoreUrlPending = storeUrlDraft !== appliedStoreUrl;
|
|
969
973
|
const isWindowedLaunchPending = enableWindowedLaunchDraft !== appliedEnableWindowedLaunch;
|
|
970
|
-
const hasPendingConfigChanges = isOperationPending || isStoreUrlPending || isWindowedLaunchPending;
|
|
971
|
-
const pendingChangeCount = Number(isOperationPending) + Number(isStoreUrlPending) + Number(isWindowedLaunchPending);
|
|
974
|
+
const hasPendingConfigChanges = isOperationPending || isOperationKeyPending || isStoreUrlPending || isWindowedLaunchPending;
|
|
975
|
+
const pendingChangeCount = Number(isOperationPending) + Number(isOperationKeyPending) + Number(isStoreUrlPending) + Number(isWindowedLaunchPending);
|
|
972
976
|
const addEvent = (0, import_react2.useCallback)(
|
|
973
977
|
(message) => {
|
|
974
978
|
const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
|
|
@@ -1069,25 +1073,40 @@ var EmbedTester = (props = {}) => {
|
|
|
1069
1073
|
setKey((prev) => prev + 1);
|
|
1070
1074
|
setHasUserClicked(false);
|
|
1071
1075
|
setShowIframe(false);
|
|
1076
|
+
setOverlayPassword("");
|
|
1072
1077
|
hasReadyBeenCalled.current = false;
|
|
1073
1078
|
previousStateRef.current = "";
|
|
1074
1079
|
addEvent(message);
|
|
1075
1080
|
}, [addEvent]);
|
|
1076
1081
|
const handleApply = (0, import_react2.useCallback)(() => {
|
|
1077
1082
|
setAppliedOperation(operationDraft);
|
|
1083
|
+
setAppliedOperationKey(operationKeyDraft);
|
|
1078
1084
|
setAppliedStoreUrl(storeUrlDraft);
|
|
1079
1085
|
setAppliedEnableWindowedLaunch(enableWindowedLaunchDraft);
|
|
1080
1086
|
resetEmbedSession("Applied updated embed settings");
|
|
1081
|
-
}, [
|
|
1087
|
+
}, [
|
|
1088
|
+
enableWindowedLaunchDraft,
|
|
1089
|
+
operationDraft,
|
|
1090
|
+
operationKeyDraft,
|
|
1091
|
+
resetEmbedSession,
|
|
1092
|
+
storeUrlDraft
|
|
1093
|
+
]);
|
|
1082
1094
|
const handleRestartSession = (0, import_react2.useCallback)(() => {
|
|
1083
1095
|
resetEmbedSession("Embed restarted with applied settings");
|
|
1084
1096
|
}, [resetEmbedSession]);
|
|
1085
1097
|
const handleResetDrafts = (0, import_react2.useCallback)(() => {
|
|
1086
1098
|
setOperationDraft(appliedOperation);
|
|
1099
|
+
setOperationKeyDraft(appliedOperationKey);
|
|
1087
1100
|
setStoreUrlDraft(appliedStoreUrl);
|
|
1088
1101
|
setEnableWindowedLaunchDraft(appliedEnableWindowedLaunch);
|
|
1089
1102
|
addEvent("Reverted draft changes to the applied configuration");
|
|
1090
|
-
}, [
|
|
1103
|
+
}, [
|
|
1104
|
+
addEvent,
|
|
1105
|
+
appliedEnableWindowedLaunch,
|
|
1106
|
+
appliedOperation,
|
|
1107
|
+
appliedOperationKey,
|
|
1108
|
+
appliedStoreUrl
|
|
1109
|
+
]);
|
|
1091
1110
|
const panelStyle = {
|
|
1092
1111
|
position: "relative",
|
|
1093
1112
|
border: "1px solid rgba(148, 163, 184, 0.18)",
|
|
@@ -1619,6 +1638,46 @@ var EmbedTester = (props = {}) => {
|
|
|
1619
1638
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { style: codeStyle, children: appliedOperation })
|
|
1620
1639
|
] })
|
|
1621
1640
|
] }),
|
|
1641
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
|
|
1642
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { htmlFor: "operationKey", style: labelStyle, children: [
|
|
1643
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Op key" }),
|
|
1644
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: buildIndicatorStyle(isOperationKeyPending), children: [
|
|
1645
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: buildIndicatorDotStyle(isOperationKeyPending) }),
|
|
1646
|
+
isOperationKeyPending ? "Pending" : "Live"
|
|
1647
|
+
] })
|
|
1648
|
+
] }),
|
|
1649
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: buildInputShellStyle(isOperationKeyPending), children: [
|
|
1650
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1651
|
+
"input",
|
|
1652
|
+
{
|
|
1653
|
+
id: "operationKey",
|
|
1654
|
+
style: inputStyle,
|
|
1655
|
+
onChange: (e) => setOperationKeyDraft(e.target.value),
|
|
1656
|
+
placeholder: "e.g. embed-password",
|
|
1657
|
+
value: operationKeyDraft
|
|
1658
|
+
}
|
|
1659
|
+
),
|
|
1660
|
+
isOperationKeyPending && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1661
|
+
"span",
|
|
1662
|
+
{
|
|
1663
|
+
"aria-hidden": "true",
|
|
1664
|
+
style: {
|
|
1665
|
+
fontSize: "16px",
|
|
1666
|
+
color: "#fbbf24",
|
|
1667
|
+
fontWeight: 700
|
|
1668
|
+
},
|
|
1669
|
+
children: "!"
|
|
1670
|
+
}
|
|
1671
|
+
)
|
|
1672
|
+
] }),
|
|
1673
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { style: helperTextStyle, children: [
|
|
1674
|
+
"Optional ",
|
|
1675
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { style: codeStyle, children: "?op=" }),
|
|
1676
|
+
" when the path is the campaign. Applied:",
|
|
1677
|
+
" ",
|
|
1678
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { style: codeStyle, children: appliedOperationKey || "(none)" })
|
|
1679
|
+
] })
|
|
1680
|
+
] }),
|
|
1622
1681
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
|
|
1623
1682
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { htmlFor: "storeUrl", style: labelStyle, children: [
|
|
1624
1683
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Store URL" }),
|
|
@@ -2059,7 +2118,8 @@ var EmbedTester = (props = {}) => {
|
|
|
2059
2118
|
onStateChange: handleStateChange,
|
|
2060
2119
|
enableWindowedLaunch: appliedEnableWindowedLaunch,
|
|
2061
2120
|
operation: appliedOperation,
|
|
2062
|
-
|
|
2121
|
+
operationKey: appliedOperationKey || void 0,
|
|
2122
|
+
renderState: ({ actions, message, status, password }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: !hasUserClicked && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2063
2123
|
"div",
|
|
2064
2124
|
{
|
|
2065
2125
|
style: {
|
|
@@ -2114,48 +2174,117 @@ var EmbedTester = (props = {}) => {
|
|
|
2114
2174
|
fontSize: "28px",
|
|
2115
2175
|
letterSpacing: "-0.03em"
|
|
2116
2176
|
},
|
|
2117
|
-
children: embedState.hasPlayedOnce ? "Resume the session" : "Start the demo"
|
|
2177
|
+
children: password?.required && !password.unlocked ? "Password required" : embedState.hasPlayedOnce ? "Resume the session" : "Start the demo"
|
|
2118
2178
|
}
|
|
2119
2179
|
),
|
|
2120
2180
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { style: { margin: 0, color: "#94a3b8", lineHeight: 1.7 }, children: [
|
|
2121
|
-
"Status:
|
|
2181
|
+
"Status:",
|
|
2182
|
+
" ",
|
|
2122
2183
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#f8fafc", fontWeight: 700 }, children: status })
|
|
2123
2184
|
] }),
|
|
2124
|
-
message && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { margin: "10px 0 0 0", color: "#cbd5e1", lineHeight: 1.7 }, children: message }),
|
|
2125
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
{
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
}
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2185
|
+
message && !(password?.required && !password.unlocked) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { margin: "10px 0 0 0", color: "#cbd5e1", lineHeight: 1.7 }, children: message }),
|
|
2186
|
+
password?.required && !password.unlocked ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
2187
|
+
"form",
|
|
2188
|
+
{
|
|
2189
|
+
style: {
|
|
2190
|
+
display: "flex",
|
|
2191
|
+
flexWrap: "wrap",
|
|
2192
|
+
gap: "12px",
|
|
2193
|
+
marginTop: "24px",
|
|
2194
|
+
alignItems: "center"
|
|
2195
|
+
},
|
|
2196
|
+
onSubmit: (event) => {
|
|
2197
|
+
event.preventDefault();
|
|
2198
|
+
if (!overlayPassword) {
|
|
2199
|
+
return;
|
|
2200
|
+
}
|
|
2201
|
+
actions.submitPassword(overlayPassword);
|
|
2202
|
+
setOverlayPassword("");
|
|
2203
|
+
},
|
|
2204
|
+
children: [
|
|
2205
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2206
|
+
"input",
|
|
2207
|
+
{
|
|
2208
|
+
"aria-label": "Operation password",
|
|
2209
|
+
autoComplete: "off",
|
|
2210
|
+
onChange: (event) => setOverlayPassword(event.target.value),
|
|
2211
|
+
placeholder: "Operation password",
|
|
2212
|
+
style: {
|
|
2213
|
+
flex: "1 1 180px",
|
|
2214
|
+
minWidth: "140px",
|
|
2215
|
+
padding: "12px 14px",
|
|
2216
|
+
borderRadius: "12px",
|
|
2217
|
+
border: "1px solid rgba(148, 163, 184, 0.28)",
|
|
2218
|
+
backgroundColor: "rgba(15, 23, 42, 0.9)",
|
|
2219
|
+
color: "#f8fafc"
|
|
2220
|
+
},
|
|
2221
|
+
type: "password",
|
|
2222
|
+
value: overlayPassword
|
|
2223
|
+
}
|
|
2224
|
+
),
|
|
2225
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2226
|
+
"button",
|
|
2227
|
+
{
|
|
2228
|
+
type: "submit",
|
|
2229
|
+
style: buildButtonStyle("primary", !overlayPassword),
|
|
2230
|
+
disabled: !overlayPassword,
|
|
2231
|
+
children: "Unlock"
|
|
2232
|
+
}
|
|
2233
|
+
),
|
|
2234
|
+
password.error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2235
|
+
"p",
|
|
2236
|
+
{
|
|
2237
|
+
style: {
|
|
2238
|
+
flex: "1 1 100%",
|
|
2239
|
+
margin: 0,
|
|
2240
|
+
color: "#fca5a5",
|
|
2241
|
+
fontSize: "13px"
|
|
2242
|
+
},
|
|
2243
|
+
children: password.error
|
|
2244
|
+
}
|
|
2245
|
+
) : null
|
|
2246
|
+
]
|
|
2247
|
+
}
|
|
2248
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
2249
|
+
"div",
|
|
2250
|
+
{
|
|
2251
|
+
style: { display: "flex", flexWrap: "wrap", gap: "12px", marginTop: "24px" },
|
|
2252
|
+
children: [
|
|
2253
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
2254
|
+
"button",
|
|
2255
|
+
{
|
|
2256
|
+
type: "button",
|
|
2257
|
+
style: buildButtonStyle("primary", !actions.canTryNow),
|
|
2258
|
+
disabled: !actions.canTryNow,
|
|
2259
|
+
onClick: () => {
|
|
2260
|
+
setHasUserClicked(true);
|
|
2261
|
+
setShowIframe(true);
|
|
2262
|
+
addEvent(
|
|
2263
|
+
embedState.hasPlayedOnce ? "User clicked - Resuming game" : "User clicked - Starting game with tryNow"
|
|
2264
|
+
);
|
|
2265
|
+
actions.tryNow();
|
|
2266
|
+
},
|
|
2267
|
+
children: [
|
|
2268
|
+
"\u{1F3AE} ",
|
|
2269
|
+
embedState.hasPlayedOnce ? "Resume game" : "Try demo now"
|
|
2270
|
+
]
|
|
2271
|
+
}
|
|
2272
|
+
),
|
|
2273
|
+
actions.canBuyNow && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2274
|
+
"button",
|
|
2275
|
+
{
|
|
2276
|
+
type: "button",
|
|
2277
|
+
style: buildButtonStyle("secondary"),
|
|
2278
|
+
onClick: () => {
|
|
2279
|
+
addEvent("Buy Now clicked");
|
|
2280
|
+
actions.buyNow();
|
|
2281
|
+
},
|
|
2282
|
+
children: "Buy Now"
|
|
2283
|
+
}
|
|
2284
|
+
)
|
|
2285
|
+
]
|
|
2286
|
+
}
|
|
2287
|
+
)
|
|
2159
2288
|
]
|
|
2160
2289
|
}
|
|
2161
2290
|
)
|
package/dist/index.d.cts
CHANGED
|
@@ -276,6 +276,8 @@ interface EmbedTesterProps {
|
|
|
276
276
|
baseUrl?: string;
|
|
277
277
|
enableConsoleLog?: boolean;
|
|
278
278
|
operation?: string;
|
|
279
|
+
/** Optional ?op= key when the campaign path is not the operation itself. */
|
|
280
|
+
operationKey?: string;
|
|
279
281
|
storeUrl?: string;
|
|
280
282
|
/** Start the experience inside the iframe without requesting parent fullscreen. */
|
|
281
283
|
enableWindowedLaunch?: boolean;
|
package/dist/index.d.ts
CHANGED
|
@@ -276,6 +276,8 @@ interface EmbedTesterProps {
|
|
|
276
276
|
baseUrl?: string;
|
|
277
277
|
enableConsoleLog?: boolean;
|
|
278
278
|
operation?: string;
|
|
279
|
+
/** Optional ?op= key when the campaign path is not the operation itself. */
|
|
280
|
+
operationKey?: string;
|
|
279
281
|
storeUrl?: string;
|
|
280
282
|
/** Start the experience inside the iframe without requesting parent fullscreen. */
|
|
281
283
|
enableWindowedLaunch?: boolean;
|
package/dist/index.js
CHANGED
|
@@ -895,6 +895,7 @@ var createInitialDiagnostics = () => ({
|
|
|
895
895
|
});
|
|
896
896
|
var EmbedTester = (props = {}) => {
|
|
897
897
|
const [operationDraft, setOperationDraft] = useState2(props.operation ?? "iframe");
|
|
898
|
+
const [operationKeyDraft, setOperationKeyDraft] = useState2(props.operationKey ?? "");
|
|
898
899
|
const [storeUrlDraft, setStoreUrlDraft] = useState2(
|
|
899
900
|
props.storeUrl ?? "https://store.steampowered.com/app/123456"
|
|
900
901
|
);
|
|
@@ -902,6 +903,7 @@ var EmbedTester = (props = {}) => {
|
|
|
902
903
|
props.enableWindowedLaunch ?? false
|
|
903
904
|
);
|
|
904
905
|
const [appliedOperation, setAppliedOperation] = useState2(props.operation ?? "iframe");
|
|
906
|
+
const [appliedOperationKey, setAppliedOperationKey] = useState2(props.operationKey ?? "");
|
|
905
907
|
const [appliedStoreUrl, setAppliedStoreUrl] = useState2(
|
|
906
908
|
props.storeUrl ?? "https://store.steampowered.com/app/123456"
|
|
907
909
|
);
|
|
@@ -911,6 +913,7 @@ var EmbedTester = (props = {}) => {
|
|
|
911
913
|
const [key, setKey] = useState2(0);
|
|
912
914
|
const [hasUserClicked, setHasUserClicked] = useState2(false);
|
|
913
915
|
const [showIframe, setShowIframe] = useState2(false);
|
|
916
|
+
const [overlayPassword, setOverlayPassword] = useState2("");
|
|
914
917
|
const [embedState, setEmbedState] = useState2(createInitialEmbedState);
|
|
915
918
|
const [eventLog, setEventLog] = useState2([]);
|
|
916
919
|
const [diagnostics, setDiagnostics] = useState2(createInitialDiagnostics);
|
|
@@ -921,10 +924,11 @@ var EmbedTester = (props = {}) => {
|
|
|
921
924
|
const previousStateRef = useRef2("");
|
|
922
925
|
const iframeRef = useRef2(null);
|
|
923
926
|
const isOperationPending = operationDraft !== appliedOperation;
|
|
927
|
+
const isOperationKeyPending = operationKeyDraft !== appliedOperationKey;
|
|
924
928
|
const isStoreUrlPending = storeUrlDraft !== appliedStoreUrl;
|
|
925
929
|
const isWindowedLaunchPending = enableWindowedLaunchDraft !== appliedEnableWindowedLaunch;
|
|
926
|
-
const hasPendingConfigChanges = isOperationPending || isStoreUrlPending || isWindowedLaunchPending;
|
|
927
|
-
const pendingChangeCount = Number(isOperationPending) + Number(isStoreUrlPending) + Number(isWindowedLaunchPending);
|
|
930
|
+
const hasPendingConfigChanges = isOperationPending || isOperationKeyPending || isStoreUrlPending || isWindowedLaunchPending;
|
|
931
|
+
const pendingChangeCount = Number(isOperationPending) + Number(isOperationKeyPending) + Number(isStoreUrlPending) + Number(isWindowedLaunchPending);
|
|
928
932
|
const addEvent = useCallback2(
|
|
929
933
|
(message) => {
|
|
930
934
|
const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
|
|
@@ -1025,25 +1029,40 @@ var EmbedTester = (props = {}) => {
|
|
|
1025
1029
|
setKey((prev) => prev + 1);
|
|
1026
1030
|
setHasUserClicked(false);
|
|
1027
1031
|
setShowIframe(false);
|
|
1032
|
+
setOverlayPassword("");
|
|
1028
1033
|
hasReadyBeenCalled.current = false;
|
|
1029
1034
|
previousStateRef.current = "";
|
|
1030
1035
|
addEvent(message);
|
|
1031
1036
|
}, [addEvent]);
|
|
1032
1037
|
const handleApply = useCallback2(() => {
|
|
1033
1038
|
setAppliedOperation(operationDraft);
|
|
1039
|
+
setAppliedOperationKey(operationKeyDraft);
|
|
1034
1040
|
setAppliedStoreUrl(storeUrlDraft);
|
|
1035
1041
|
setAppliedEnableWindowedLaunch(enableWindowedLaunchDraft);
|
|
1036
1042
|
resetEmbedSession("Applied updated embed settings");
|
|
1037
|
-
}, [
|
|
1043
|
+
}, [
|
|
1044
|
+
enableWindowedLaunchDraft,
|
|
1045
|
+
operationDraft,
|
|
1046
|
+
operationKeyDraft,
|
|
1047
|
+
resetEmbedSession,
|
|
1048
|
+
storeUrlDraft
|
|
1049
|
+
]);
|
|
1038
1050
|
const handleRestartSession = useCallback2(() => {
|
|
1039
1051
|
resetEmbedSession("Embed restarted with applied settings");
|
|
1040
1052
|
}, [resetEmbedSession]);
|
|
1041
1053
|
const handleResetDrafts = useCallback2(() => {
|
|
1042
1054
|
setOperationDraft(appliedOperation);
|
|
1055
|
+
setOperationKeyDraft(appliedOperationKey);
|
|
1043
1056
|
setStoreUrlDraft(appliedStoreUrl);
|
|
1044
1057
|
setEnableWindowedLaunchDraft(appliedEnableWindowedLaunch);
|
|
1045
1058
|
addEvent("Reverted draft changes to the applied configuration");
|
|
1046
|
-
}, [
|
|
1059
|
+
}, [
|
|
1060
|
+
addEvent,
|
|
1061
|
+
appliedEnableWindowedLaunch,
|
|
1062
|
+
appliedOperation,
|
|
1063
|
+
appliedOperationKey,
|
|
1064
|
+
appliedStoreUrl
|
|
1065
|
+
]);
|
|
1047
1066
|
const panelStyle = {
|
|
1048
1067
|
position: "relative",
|
|
1049
1068
|
border: "1px solid rgba(148, 163, 184, 0.18)",
|
|
@@ -1575,6 +1594,46 @@ var EmbedTester = (props = {}) => {
|
|
|
1575
1594
|
/* @__PURE__ */ jsx2("code", { style: codeStyle, children: appliedOperation })
|
|
1576
1595
|
] })
|
|
1577
1596
|
] }),
|
|
1597
|
+
/* @__PURE__ */ jsxs2("div", { children: [
|
|
1598
|
+
/* @__PURE__ */ jsxs2("label", { htmlFor: "operationKey", style: labelStyle, children: [
|
|
1599
|
+
/* @__PURE__ */ jsx2("span", { children: "Op key" }),
|
|
1600
|
+
/* @__PURE__ */ jsxs2("span", { style: buildIndicatorStyle(isOperationKeyPending), children: [
|
|
1601
|
+
/* @__PURE__ */ jsx2("span", { style: buildIndicatorDotStyle(isOperationKeyPending) }),
|
|
1602
|
+
isOperationKeyPending ? "Pending" : "Live"
|
|
1603
|
+
] })
|
|
1604
|
+
] }),
|
|
1605
|
+
/* @__PURE__ */ jsxs2("div", { style: buildInputShellStyle(isOperationKeyPending), children: [
|
|
1606
|
+
/* @__PURE__ */ jsx2(
|
|
1607
|
+
"input",
|
|
1608
|
+
{
|
|
1609
|
+
id: "operationKey",
|
|
1610
|
+
style: inputStyle,
|
|
1611
|
+
onChange: (e) => setOperationKeyDraft(e.target.value),
|
|
1612
|
+
placeholder: "e.g. embed-password",
|
|
1613
|
+
value: operationKeyDraft
|
|
1614
|
+
}
|
|
1615
|
+
),
|
|
1616
|
+
isOperationKeyPending && /* @__PURE__ */ jsx2(
|
|
1617
|
+
"span",
|
|
1618
|
+
{
|
|
1619
|
+
"aria-hidden": "true",
|
|
1620
|
+
style: {
|
|
1621
|
+
fontSize: "16px",
|
|
1622
|
+
color: "#fbbf24",
|
|
1623
|
+
fontWeight: 700
|
|
1624
|
+
},
|
|
1625
|
+
children: "!"
|
|
1626
|
+
}
|
|
1627
|
+
)
|
|
1628
|
+
] }),
|
|
1629
|
+
/* @__PURE__ */ jsxs2("p", { style: helperTextStyle, children: [
|
|
1630
|
+
"Optional ",
|
|
1631
|
+
/* @__PURE__ */ jsx2("code", { style: codeStyle, children: "?op=" }),
|
|
1632
|
+
" when the path is the campaign. Applied:",
|
|
1633
|
+
" ",
|
|
1634
|
+
/* @__PURE__ */ jsx2("code", { style: codeStyle, children: appliedOperationKey || "(none)" })
|
|
1635
|
+
] })
|
|
1636
|
+
] }),
|
|
1578
1637
|
/* @__PURE__ */ jsxs2("div", { children: [
|
|
1579
1638
|
/* @__PURE__ */ jsxs2("label", { htmlFor: "storeUrl", style: labelStyle, children: [
|
|
1580
1639
|
/* @__PURE__ */ jsx2("span", { children: "Store URL" }),
|
|
@@ -2015,7 +2074,8 @@ var EmbedTester = (props = {}) => {
|
|
|
2015
2074
|
onStateChange: handleStateChange,
|
|
2016
2075
|
enableWindowedLaunch: appliedEnableWindowedLaunch,
|
|
2017
2076
|
operation: appliedOperation,
|
|
2018
|
-
|
|
2077
|
+
operationKey: appliedOperationKey || void 0,
|
|
2078
|
+
renderState: ({ actions, message, status, password }) => /* @__PURE__ */ jsx2(Fragment, { children: !hasUserClicked && /* @__PURE__ */ jsx2(
|
|
2019
2079
|
"div",
|
|
2020
2080
|
{
|
|
2021
2081
|
style: {
|
|
@@ -2070,48 +2130,117 @@ var EmbedTester = (props = {}) => {
|
|
|
2070
2130
|
fontSize: "28px",
|
|
2071
2131
|
letterSpacing: "-0.03em"
|
|
2072
2132
|
},
|
|
2073
|
-
children: embedState.hasPlayedOnce ? "Resume the session" : "Start the demo"
|
|
2133
|
+
children: password?.required && !password.unlocked ? "Password required" : embedState.hasPlayedOnce ? "Resume the session" : "Start the demo"
|
|
2074
2134
|
}
|
|
2075
2135
|
),
|
|
2076
2136
|
/* @__PURE__ */ jsxs2("p", { style: { margin: 0, color: "#94a3b8", lineHeight: 1.7 }, children: [
|
|
2077
|
-
"Status:
|
|
2137
|
+
"Status:",
|
|
2138
|
+
" ",
|
|
2078
2139
|
/* @__PURE__ */ jsx2("span", { style: { color: "#f8fafc", fontWeight: 700 }, children: status })
|
|
2079
2140
|
] }),
|
|
2080
|
-
message && /* @__PURE__ */ jsx2("p", { style: { margin: "10px 0 0 0", color: "#cbd5e1", lineHeight: 1.7 }, children: message }),
|
|
2081
|
-
/* @__PURE__ */ jsxs2(
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
{
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
}
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2141
|
+
message && !(password?.required && !password.unlocked) && /* @__PURE__ */ jsx2("p", { style: { margin: "10px 0 0 0", color: "#cbd5e1", lineHeight: 1.7 }, children: message }),
|
|
2142
|
+
password?.required && !password.unlocked ? /* @__PURE__ */ jsxs2(
|
|
2143
|
+
"form",
|
|
2144
|
+
{
|
|
2145
|
+
style: {
|
|
2146
|
+
display: "flex",
|
|
2147
|
+
flexWrap: "wrap",
|
|
2148
|
+
gap: "12px",
|
|
2149
|
+
marginTop: "24px",
|
|
2150
|
+
alignItems: "center"
|
|
2151
|
+
},
|
|
2152
|
+
onSubmit: (event) => {
|
|
2153
|
+
event.preventDefault();
|
|
2154
|
+
if (!overlayPassword) {
|
|
2155
|
+
return;
|
|
2156
|
+
}
|
|
2157
|
+
actions.submitPassword(overlayPassword);
|
|
2158
|
+
setOverlayPassword("");
|
|
2159
|
+
},
|
|
2160
|
+
children: [
|
|
2161
|
+
/* @__PURE__ */ jsx2(
|
|
2162
|
+
"input",
|
|
2163
|
+
{
|
|
2164
|
+
"aria-label": "Operation password",
|
|
2165
|
+
autoComplete: "off",
|
|
2166
|
+
onChange: (event) => setOverlayPassword(event.target.value),
|
|
2167
|
+
placeholder: "Operation password",
|
|
2168
|
+
style: {
|
|
2169
|
+
flex: "1 1 180px",
|
|
2170
|
+
minWidth: "140px",
|
|
2171
|
+
padding: "12px 14px",
|
|
2172
|
+
borderRadius: "12px",
|
|
2173
|
+
border: "1px solid rgba(148, 163, 184, 0.28)",
|
|
2174
|
+
backgroundColor: "rgba(15, 23, 42, 0.9)",
|
|
2175
|
+
color: "#f8fafc"
|
|
2176
|
+
},
|
|
2177
|
+
type: "password",
|
|
2178
|
+
value: overlayPassword
|
|
2179
|
+
}
|
|
2180
|
+
),
|
|
2181
|
+
/* @__PURE__ */ jsx2(
|
|
2182
|
+
"button",
|
|
2183
|
+
{
|
|
2184
|
+
type: "submit",
|
|
2185
|
+
style: buildButtonStyle("primary", !overlayPassword),
|
|
2186
|
+
disabled: !overlayPassword,
|
|
2187
|
+
children: "Unlock"
|
|
2188
|
+
}
|
|
2189
|
+
),
|
|
2190
|
+
password.error ? /* @__PURE__ */ jsx2(
|
|
2191
|
+
"p",
|
|
2192
|
+
{
|
|
2193
|
+
style: {
|
|
2194
|
+
flex: "1 1 100%",
|
|
2195
|
+
margin: 0,
|
|
2196
|
+
color: "#fca5a5",
|
|
2197
|
+
fontSize: "13px"
|
|
2198
|
+
},
|
|
2199
|
+
children: password.error
|
|
2200
|
+
}
|
|
2201
|
+
) : null
|
|
2202
|
+
]
|
|
2203
|
+
}
|
|
2204
|
+
) : /* @__PURE__ */ jsxs2(
|
|
2205
|
+
"div",
|
|
2206
|
+
{
|
|
2207
|
+
style: { display: "flex", flexWrap: "wrap", gap: "12px", marginTop: "24px" },
|
|
2208
|
+
children: [
|
|
2209
|
+
/* @__PURE__ */ jsxs2(
|
|
2210
|
+
"button",
|
|
2211
|
+
{
|
|
2212
|
+
type: "button",
|
|
2213
|
+
style: buildButtonStyle("primary", !actions.canTryNow),
|
|
2214
|
+
disabled: !actions.canTryNow,
|
|
2215
|
+
onClick: () => {
|
|
2216
|
+
setHasUserClicked(true);
|
|
2217
|
+
setShowIframe(true);
|
|
2218
|
+
addEvent(
|
|
2219
|
+
embedState.hasPlayedOnce ? "User clicked - Resuming game" : "User clicked - Starting game with tryNow"
|
|
2220
|
+
);
|
|
2221
|
+
actions.tryNow();
|
|
2222
|
+
},
|
|
2223
|
+
children: [
|
|
2224
|
+
"\u{1F3AE} ",
|
|
2225
|
+
embedState.hasPlayedOnce ? "Resume game" : "Try demo now"
|
|
2226
|
+
]
|
|
2227
|
+
}
|
|
2228
|
+
),
|
|
2229
|
+
actions.canBuyNow && /* @__PURE__ */ jsx2(
|
|
2230
|
+
"button",
|
|
2231
|
+
{
|
|
2232
|
+
type: "button",
|
|
2233
|
+
style: buildButtonStyle("secondary"),
|
|
2234
|
+
onClick: () => {
|
|
2235
|
+
addEvent("Buy Now clicked");
|
|
2236
|
+
actions.buyNow();
|
|
2237
|
+
},
|
|
2238
|
+
children: "Buy Now"
|
|
2239
|
+
}
|
|
2240
|
+
)
|
|
2241
|
+
]
|
|
2242
|
+
}
|
|
2243
|
+
)
|
|
2115
2244
|
]
|
|
2116
2245
|
}
|
|
2117
2246
|
)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@playruo/embed",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.1",
|
|
4
4
|
"description": "React SDK to embed Playruo with postMessage API.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -49,7 +49,8 @@
|
|
|
49
49
|
"overrides": {
|
|
50
50
|
"esbuild": "^0.28.1",
|
|
51
51
|
"picomatch": "^4.0.4",
|
|
52
|
-
"rollup": "^4.59.0"
|
|
52
|
+
"rollup": "^4.59.0",
|
|
53
|
+
"source-map-js": "^1.2.2"
|
|
53
54
|
},
|
|
54
55
|
"scripts": {
|
|
55
56
|
"build": "tsup src/index.ts --format esm,cjs --dts --clean",
|