@oasiz/sdk 1.8.1 → 1.8.3
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/README.md +571 -80
- package/dist/index.cjs +3166 -225
- package/dist/index.d.cts +362 -110
- package/dist/index.d.ts +362 -110
- package/dist/index.js +3149 -214
- package/package.json +15 -4
package/dist/index.js
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
// src/
|
|
1
|
+
// src/navigation.ts
|
|
2
|
+
var BACK_BUTTON_TEST_STATE_KEY = "__oasizBackButtonTest";
|
|
3
|
+
var activeBackListeners = 0;
|
|
4
|
+
var activeBackButtonTestingHandle;
|
|
2
5
|
function isDevelopment() {
|
|
3
6
|
const nodeEnv = globalThis.process?.env?.NODE_ENV;
|
|
4
7
|
return nodeEnv !== "production";
|
|
@@ -9,83 +12,2475 @@ function getBridgeWindow() {
|
|
|
9
12
|
}
|
|
10
13
|
return window;
|
|
11
14
|
}
|
|
12
|
-
function
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
function warnMissingBridge(methodName) {
|
|
16
|
+
if (isDevelopment()) {
|
|
17
|
+
console.warn(
|
|
18
|
+
"[oasiz/sdk] " + methodName + " bridge is unavailable. This is expected in local development."
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
function normalizeNavigationError(error) {
|
|
23
|
+
if (error instanceof Error) {
|
|
24
|
+
return error;
|
|
25
|
+
}
|
|
26
|
+
return new Error(
|
|
27
|
+
typeof error === "string" ? error : "Back button callback failed."
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
function isRecord(value) {
|
|
31
|
+
return typeof value === "object" && value !== null;
|
|
32
|
+
}
|
|
33
|
+
function dispatchNavigationEvent(eventName) {
|
|
34
|
+
const bridge = getBridgeWindow();
|
|
35
|
+
if (!bridge || typeof bridge.dispatchEvent !== "function") {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
bridge.dispatchEvent(new Event(eventName));
|
|
39
|
+
}
|
|
40
|
+
function addNavigationListener(eventName, callback) {
|
|
41
|
+
if (typeof window === "undefined") {
|
|
42
|
+
if (isDevelopment()) {
|
|
43
|
+
console.warn(
|
|
44
|
+
"[oasiz/sdk] " + eventName + " listener registered without a browser window. This is expected in local development."
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
return () => {
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
const handler = () => callback();
|
|
51
|
+
window.addEventListener(eventName, handler);
|
|
52
|
+
return () => window.removeEventListener(eventName, handler);
|
|
53
|
+
}
|
|
54
|
+
function enableBackButtonTesting(options = {}) {
|
|
55
|
+
activeBackButtonTestingHandle?.destroy();
|
|
56
|
+
const bridge = getBridgeWindow();
|
|
57
|
+
if (!bridge) {
|
|
58
|
+
if (isDevelopment()) {
|
|
59
|
+
console.warn(
|
|
60
|
+
"[oasiz/sdk] enableBackButtonTesting requires a browser window."
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
return {
|
|
64
|
+
destroy: () => {
|
|
65
|
+
},
|
|
66
|
+
isBackOverrideActive: () => false,
|
|
67
|
+
triggerBack: () => {
|
|
68
|
+
},
|
|
69
|
+
triggerLeave: () => {
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
const bridgeWindow = bridge;
|
|
74
|
+
const keyboard = options.keyboard ?? true;
|
|
75
|
+
const browserHistory = options.browserHistory ?? true;
|
|
76
|
+
const log = options.log === true;
|
|
77
|
+
const previousSetBackOverride = bridgeWindow.__oasizSetBackOverride;
|
|
78
|
+
const previousLeaveGame = bridgeWindow.__oasizLeaveGame;
|
|
79
|
+
let destroyed = false;
|
|
80
|
+
let backOverrideActive = false;
|
|
81
|
+
let historyTrapArmed = false;
|
|
82
|
+
function maybeLog(message) {
|
|
83
|
+
if (log) {
|
|
84
|
+
console.info("[oasiz/sdk] " + message);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
function canUseHistoryTrap() {
|
|
88
|
+
return browserHistory && typeof bridgeWindow.history?.pushState === "function" && typeof bridgeWindow.history?.replaceState === "function" && typeof bridgeWindow.location?.href === "string";
|
|
89
|
+
}
|
|
90
|
+
function ensureHistoryTrap() {
|
|
91
|
+
if (!backOverrideActive || historyTrapArmed || !canUseHistoryTrap()) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
try {
|
|
95
|
+
const currentState = isRecord(bridgeWindow.history.state) ? bridgeWindow.history.state : {};
|
|
96
|
+
bridgeWindow.history.replaceState(
|
|
97
|
+
{ ...currentState, [BACK_BUTTON_TEST_STATE_KEY]: "base" },
|
|
98
|
+
"",
|
|
99
|
+
bridgeWindow.location.href
|
|
100
|
+
);
|
|
101
|
+
bridgeWindow.history.pushState(
|
|
102
|
+
{ [BACK_BUTTON_TEST_STATE_KEY]: "trap" },
|
|
103
|
+
"",
|
|
104
|
+
bridgeWindow.location.href
|
|
105
|
+
);
|
|
106
|
+
historyTrapArmed = true;
|
|
107
|
+
maybeLog("Local browser Back testing is armed.");
|
|
108
|
+
} catch (error) {
|
|
109
|
+
historyTrapArmed = false;
|
|
110
|
+
if (log) {
|
|
111
|
+
console.warn("[oasiz/sdk] Failed to arm browser Back testing:", error);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
function triggerBack() {
|
|
116
|
+
dispatchNavigationEvent("oasiz:back");
|
|
117
|
+
}
|
|
118
|
+
function triggerLeave() {
|
|
119
|
+
dispatchNavigationEvent("oasiz:leave");
|
|
120
|
+
}
|
|
121
|
+
function setBackOverride(active) {
|
|
122
|
+
backOverrideActive = active;
|
|
123
|
+
if (active) {
|
|
124
|
+
ensureHistoryTrap();
|
|
125
|
+
}
|
|
126
|
+
if (typeof previousSetBackOverride === "function") {
|
|
127
|
+
previousSetBackOverride(active);
|
|
128
|
+
}
|
|
129
|
+
maybeLog("Back override " + (active ? "enabled" : "disabled") + ".");
|
|
130
|
+
}
|
|
131
|
+
function stopBackEvent(event) {
|
|
132
|
+
event.preventDefault();
|
|
133
|
+
event.stopPropagation();
|
|
134
|
+
event.stopImmediatePropagation?.();
|
|
135
|
+
}
|
|
136
|
+
const handleKeyDown = (event) => {
|
|
137
|
+
if (!backOverrideActive || event.key !== "Escape") {
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
stopBackEvent(event);
|
|
141
|
+
triggerBack();
|
|
142
|
+
};
|
|
143
|
+
const handlePopState = (event) => {
|
|
144
|
+
if (!backOverrideActive) {
|
|
145
|
+
historyTrapArmed = false;
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
stopBackEvent(event);
|
|
149
|
+
triggerBack();
|
|
150
|
+
historyTrapArmed = false;
|
|
151
|
+
ensureHistoryTrap();
|
|
152
|
+
};
|
|
153
|
+
const testLeaveGame = () => {
|
|
154
|
+
triggerLeave();
|
|
155
|
+
if (typeof previousLeaveGame === "function") {
|
|
156
|
+
previousLeaveGame();
|
|
157
|
+
}
|
|
158
|
+
};
|
|
159
|
+
bridgeWindow.__oasizSetBackOverride = setBackOverride;
|
|
160
|
+
bridgeWindow.__oasizLeaveGame = testLeaveGame;
|
|
161
|
+
if (keyboard) {
|
|
162
|
+
bridgeWindow.addEventListener("keydown", handleKeyDown);
|
|
163
|
+
}
|
|
164
|
+
if (browserHistory) {
|
|
165
|
+
bridgeWindow.addEventListener("popstate", handlePopState);
|
|
166
|
+
}
|
|
167
|
+
if (activeBackListeners > 0) {
|
|
168
|
+
setBackOverride(true);
|
|
169
|
+
}
|
|
170
|
+
maybeLog("Back button testing bridge installed.");
|
|
171
|
+
const handle = {
|
|
172
|
+
destroy: () => {
|
|
173
|
+
if (destroyed) return;
|
|
174
|
+
destroyed = true;
|
|
175
|
+
if (keyboard) {
|
|
176
|
+
bridgeWindow.removeEventListener("keydown", handleKeyDown);
|
|
177
|
+
}
|
|
178
|
+
if (browserHistory) {
|
|
179
|
+
bridgeWindow.removeEventListener("popstate", handlePopState);
|
|
180
|
+
}
|
|
181
|
+
if (bridgeWindow.__oasizSetBackOverride === setBackOverride) {
|
|
182
|
+
bridgeWindow.__oasizSetBackOverride = previousSetBackOverride;
|
|
183
|
+
}
|
|
184
|
+
if (bridgeWindow.__oasizLeaveGame === testLeaveGame) {
|
|
185
|
+
bridgeWindow.__oasizLeaveGame = previousLeaveGame;
|
|
186
|
+
}
|
|
187
|
+
if (activeBackButtonTestingHandle === handle) {
|
|
188
|
+
activeBackButtonTestingHandle = void 0;
|
|
189
|
+
}
|
|
190
|
+
maybeLog("Back button testing bridge removed.");
|
|
191
|
+
},
|
|
192
|
+
isBackOverrideActive: () => backOverrideActive,
|
|
193
|
+
triggerBack,
|
|
194
|
+
triggerLeave
|
|
195
|
+
};
|
|
196
|
+
activeBackButtonTestingHandle = handle;
|
|
197
|
+
return handle;
|
|
198
|
+
}
|
|
199
|
+
function onBackButton(callback) {
|
|
200
|
+
const off = addNavigationListener("oasiz:back", () => {
|
|
201
|
+
try {
|
|
202
|
+
callback();
|
|
203
|
+
} catch (error) {
|
|
204
|
+
leaveGame();
|
|
205
|
+
throw normalizeNavigationError(error);
|
|
206
|
+
}
|
|
207
|
+
});
|
|
208
|
+
const bridge = getBridgeWindow();
|
|
209
|
+
activeBackListeners += 1;
|
|
210
|
+
if (activeBackListeners === 1) {
|
|
211
|
+
if (typeof bridge?.__oasizSetBackOverride === "function") {
|
|
212
|
+
bridge.__oasizSetBackOverride(true);
|
|
213
|
+
} else {
|
|
214
|
+
warnMissingBridge("__oasizSetBackOverride");
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
return () => {
|
|
218
|
+
off();
|
|
219
|
+
activeBackListeners = Math.max(0, activeBackListeners - 1);
|
|
220
|
+
if (activeBackListeners === 0) {
|
|
221
|
+
const currentBridge = getBridgeWindow();
|
|
222
|
+
if (typeof currentBridge?.__oasizSetBackOverride === "function") {
|
|
223
|
+
currentBridge.__oasizSetBackOverride(false);
|
|
224
|
+
} else {
|
|
225
|
+
warnMissingBridge("__oasizSetBackOverride");
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
};
|
|
229
|
+
}
|
|
230
|
+
function onLeaveGame(callback) {
|
|
231
|
+
return addNavigationListener("oasiz:leave", callback);
|
|
232
|
+
}
|
|
233
|
+
function leaveGame() {
|
|
234
|
+
const bridge = getBridgeWindow();
|
|
235
|
+
if (typeof bridge?.__oasizLeaveGame === "function") {
|
|
236
|
+
bridge.__oasizLeaveGame();
|
|
237
|
+
return;
|
|
238
|
+
}
|
|
239
|
+
warnMissingBridge("__oasizLeaveGame");
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
// src/app-simulator.ts
|
|
243
|
+
var DEVICE_PRESETS = {
|
|
244
|
+
"iphone-11": {
|
|
245
|
+
name: "iPhone 11",
|
|
246
|
+
width: 414,
|
|
247
|
+
height: 896,
|
|
248
|
+
safeArea: { top: 48, right: 0, bottom: 34, left: 0 }
|
|
249
|
+
},
|
|
250
|
+
"iphone-11-pro": {
|
|
251
|
+
name: "iPhone 11 Pro",
|
|
252
|
+
width: 375,
|
|
253
|
+
height: 812,
|
|
254
|
+
safeArea: { top: 44, right: 0, bottom: 34, left: 0 }
|
|
255
|
+
},
|
|
256
|
+
"iphone-11-pro-max": {
|
|
257
|
+
name: "iPhone 11 Pro Max",
|
|
258
|
+
width: 414,
|
|
259
|
+
height: 896,
|
|
260
|
+
safeArea: { top: 44, right: 0, bottom: 34, left: 0 }
|
|
261
|
+
},
|
|
262
|
+
"iphone-12-mini": {
|
|
263
|
+
name: "iPhone 12 mini",
|
|
264
|
+
width: 375,
|
|
265
|
+
height: 812,
|
|
266
|
+
safeArea: { top: 50, right: 0, bottom: 34, left: 0 }
|
|
267
|
+
},
|
|
268
|
+
"iphone-12": {
|
|
269
|
+
name: "iPhone 12",
|
|
270
|
+
width: 390,
|
|
271
|
+
height: 844,
|
|
272
|
+
safeArea: { top: 47, right: 0, bottom: 34, left: 0 }
|
|
273
|
+
},
|
|
274
|
+
"iphone-12-pro": {
|
|
275
|
+
name: "iPhone 12 Pro",
|
|
276
|
+
width: 390,
|
|
277
|
+
height: 844,
|
|
278
|
+
safeArea: { top: 47, right: 0, bottom: 34, left: 0 }
|
|
279
|
+
},
|
|
280
|
+
"iphone-12-pro-max": {
|
|
281
|
+
name: "iPhone 12 Pro Max",
|
|
282
|
+
width: 428,
|
|
283
|
+
height: 926,
|
|
284
|
+
safeArea: { top: 47, right: 0, bottom: 34, left: 0 }
|
|
285
|
+
},
|
|
286
|
+
"iphone-13-mini": {
|
|
287
|
+
name: "iPhone 13 mini",
|
|
288
|
+
width: 375,
|
|
289
|
+
height: 812,
|
|
290
|
+
safeArea: { top: 50, right: 0, bottom: 34, left: 0 }
|
|
291
|
+
},
|
|
292
|
+
"iphone-13": {
|
|
293
|
+
name: "iPhone 13",
|
|
294
|
+
width: 390,
|
|
295
|
+
height: 844,
|
|
296
|
+
safeArea: { top: 47, right: 0, bottom: 34, left: 0 }
|
|
297
|
+
},
|
|
298
|
+
"iphone-13-pro": {
|
|
299
|
+
name: "iPhone 13 Pro",
|
|
300
|
+
width: 390,
|
|
301
|
+
height: 844,
|
|
302
|
+
safeArea: { top: 47, right: 0, bottom: 34, left: 0 }
|
|
303
|
+
},
|
|
304
|
+
"iphone-13-pro-max": {
|
|
305
|
+
name: "iPhone 13 Pro Max",
|
|
306
|
+
width: 428,
|
|
307
|
+
height: 926,
|
|
308
|
+
safeArea: { top: 47, right: 0, bottom: 34, left: 0 }
|
|
309
|
+
},
|
|
310
|
+
"iphone-14": {
|
|
311
|
+
name: "iPhone 14",
|
|
312
|
+
width: 390,
|
|
313
|
+
height: 844,
|
|
314
|
+
safeArea: { top: 47, right: 0, bottom: 34, left: 0 }
|
|
315
|
+
},
|
|
316
|
+
"iphone-14-plus": {
|
|
317
|
+
name: "iPhone 14 Plus",
|
|
318
|
+
width: 428,
|
|
319
|
+
height: 926,
|
|
320
|
+
safeArea: { top: 47, right: 0, bottom: 34, left: 0 }
|
|
321
|
+
},
|
|
322
|
+
"iphone-14-pro": {
|
|
323
|
+
name: "iPhone 14 Pro",
|
|
324
|
+
width: 393,
|
|
325
|
+
height: 852,
|
|
326
|
+
safeArea: { top: 59, right: 0, bottom: 34, left: 0 }
|
|
327
|
+
},
|
|
328
|
+
"iphone-14-pro-max": {
|
|
329
|
+
name: "iPhone 14 Pro Max",
|
|
330
|
+
width: 430,
|
|
331
|
+
height: 932,
|
|
332
|
+
safeArea: { top: 59, right: 0, bottom: 34, left: 0 }
|
|
333
|
+
},
|
|
334
|
+
"iphone-15": {
|
|
335
|
+
name: "iPhone 15",
|
|
336
|
+
width: 393,
|
|
337
|
+
height: 852,
|
|
338
|
+
safeArea: { top: 59, right: 0, bottom: 34, left: 0 }
|
|
339
|
+
},
|
|
340
|
+
"iphone-15-plus": {
|
|
341
|
+
name: "iPhone 15 Plus",
|
|
342
|
+
width: 430,
|
|
343
|
+
height: 932,
|
|
344
|
+
safeArea: { top: 59, right: 0, bottom: 34, left: 0 }
|
|
345
|
+
},
|
|
346
|
+
"iphone-15-pro": {
|
|
347
|
+
name: "iPhone 15 Pro",
|
|
348
|
+
width: 393,
|
|
349
|
+
height: 852,
|
|
350
|
+
safeArea: { top: 59, right: 0, bottom: 34, left: 0 }
|
|
351
|
+
},
|
|
352
|
+
"iphone-15-pro-max": {
|
|
353
|
+
name: "iPhone 15 Pro Max",
|
|
354
|
+
width: 430,
|
|
355
|
+
height: 932,
|
|
356
|
+
safeArea: { top: 59, right: 0, bottom: 34, left: 0 }
|
|
357
|
+
},
|
|
358
|
+
"iphone-16": {
|
|
359
|
+
name: "iPhone 16",
|
|
360
|
+
width: 393,
|
|
361
|
+
height: 852,
|
|
362
|
+
safeArea: { top: 59, right: 0, bottom: 34, left: 0 }
|
|
363
|
+
},
|
|
364
|
+
"iphone-16-plus": {
|
|
365
|
+
name: "iPhone 16 Plus",
|
|
366
|
+
width: 430,
|
|
367
|
+
height: 932,
|
|
368
|
+
safeArea: { top: 59, right: 0, bottom: 34, left: 0 }
|
|
369
|
+
},
|
|
370
|
+
"iphone-16-pro": {
|
|
371
|
+
name: "iPhone 16 Pro",
|
|
372
|
+
width: 402,
|
|
373
|
+
height: 874,
|
|
374
|
+
safeArea: { top: 62, right: 0, bottom: 34, left: 0 }
|
|
375
|
+
},
|
|
376
|
+
"iphone-16-pro-max": {
|
|
377
|
+
name: "iPhone 16 Pro Max",
|
|
378
|
+
width: 440,
|
|
379
|
+
height: 956,
|
|
380
|
+
safeArea: { top: 62, right: 0, bottom: 34, left: 0 }
|
|
381
|
+
},
|
|
382
|
+
"iphone-16e": {
|
|
383
|
+
name: "iPhone 16e",
|
|
384
|
+
width: 390,
|
|
385
|
+
height: 844,
|
|
386
|
+
safeArea: { top: 47, right: 0, bottom: 34, left: 0 }
|
|
387
|
+
},
|
|
388
|
+
"iphone-17": {
|
|
389
|
+
name: "iPhone 17",
|
|
390
|
+
width: 402,
|
|
391
|
+
height: 874,
|
|
392
|
+
safeArea: { top: 62, right: 0, bottom: 34, left: 0 }
|
|
393
|
+
},
|
|
394
|
+
"iphone-17-pro": {
|
|
395
|
+
name: "iPhone 17 Pro",
|
|
396
|
+
width: 402,
|
|
397
|
+
height: 874,
|
|
398
|
+
safeArea: { top: 62, right: 0, bottom: 34, left: 0 }
|
|
399
|
+
},
|
|
400
|
+
"iphone-17-pro-max": {
|
|
401
|
+
name: "iPhone 17 Pro Max",
|
|
402
|
+
width: 440,
|
|
403
|
+
height: 956,
|
|
404
|
+
safeArea: { top: 62, right: 0, bottom: 34, left: 0 }
|
|
405
|
+
},
|
|
406
|
+
"iphone-17e": {
|
|
407
|
+
name: "iPhone 17e",
|
|
408
|
+
width: 390,
|
|
409
|
+
height: 844,
|
|
410
|
+
safeArea: { top: 47, right: 0, bottom: 34, left: 0 }
|
|
411
|
+
},
|
|
412
|
+
"iphone-air": {
|
|
413
|
+
name: "iPhone Air",
|
|
414
|
+
width: 420,
|
|
415
|
+
height: 912,
|
|
416
|
+
safeArea: { top: 62, right: 0, bottom: 34, left: 0 }
|
|
417
|
+
},
|
|
418
|
+
"iphone-se": {
|
|
419
|
+
name: "iPhone SE",
|
|
420
|
+
width: 375,
|
|
421
|
+
height: 667,
|
|
422
|
+
safeArea: { top: 20, right: 0, bottom: 0, left: 0 }
|
|
423
|
+
},
|
|
424
|
+
"pixel-8": {
|
|
425
|
+
name: "Pixel 8",
|
|
426
|
+
width: 412,
|
|
427
|
+
height: 915,
|
|
428
|
+
safeArea: { top: 32, right: 0, bottom: 24, left: 0 }
|
|
429
|
+
}
|
|
430
|
+
};
|
|
431
|
+
var DEFAULT_COUNTS = {
|
|
432
|
+
comments: 18,
|
|
433
|
+
likes: 128
|
|
434
|
+
};
|
|
435
|
+
var DEFAULT_SCORE = 12400;
|
|
436
|
+
var TOP_BAR_OFFSET = 12;
|
|
437
|
+
var TOP_CHROME_HEIGHT = 44;
|
|
438
|
+
var BODY_BACKGROUND = "#08090d";
|
|
439
|
+
var TEXT_PRIMARY = "#F6F9FB";
|
|
440
|
+
var TEXT_SECONDARY = "rgba(246,249,251,0.72)";
|
|
441
|
+
var TEXT_MUTED = "rgba(246,249,251,0.52)";
|
|
442
|
+
var BORDER = "rgba(255,255,255,0.14)";
|
|
443
|
+
var ACCENT = "#00A1E4";
|
|
444
|
+
var LIKE = "#ef4444";
|
|
445
|
+
var TROPHY = "#FBBF24";
|
|
446
|
+
var MAX_Z_INDEX = 2147483638;
|
|
447
|
+
var EMPTY_INSETS = {
|
|
448
|
+
top: 0,
|
|
449
|
+
right: 0,
|
|
450
|
+
bottom: 0,
|
|
451
|
+
left: 0
|
|
452
|
+
};
|
|
453
|
+
var BRIDGE_KEYS = [
|
|
454
|
+
"__OASIZ_SAFE_AREA_BOTTOM__",
|
|
455
|
+
"__OASIZ_SAFE_AREA_BOTTOM_PERCENT__",
|
|
456
|
+
"__OASIZ_SAFE_AREA_LEFT__",
|
|
457
|
+
"__OASIZ_SAFE_AREA_LEFT_PERCENT__",
|
|
458
|
+
"__OASIZ_SAFE_AREA_RIGHT__",
|
|
459
|
+
"__OASIZ_SAFE_AREA_RIGHT_PERCENT__",
|
|
460
|
+
"__OASIZ_SAFE_AREA_TOP__",
|
|
461
|
+
"__OASIZ_SAFE_AREA_TOP_PERCENT__",
|
|
462
|
+
"__OASIZ_VIEWPORT_INSETS__",
|
|
463
|
+
"__OASIZ_VIEWPORT_INSETS_PERCENT__",
|
|
464
|
+
"__oasizSetLeaderboardVisible",
|
|
465
|
+
"getSafeAreaBottom",
|
|
466
|
+
"getSafeAreaBottomPercent",
|
|
467
|
+
"getSafeAreaLeft",
|
|
468
|
+
"getSafeAreaLeftPercent",
|
|
469
|
+
"getSafeAreaRight",
|
|
470
|
+
"getSafeAreaRightPercent",
|
|
471
|
+
"getSafeAreaTop",
|
|
472
|
+
"getSafeAreaTopPercent",
|
|
473
|
+
"getViewportInsets",
|
|
474
|
+
"getViewportInsetsPercent"
|
|
475
|
+
];
|
|
476
|
+
var NOOP_HANDLE = {
|
|
477
|
+
closeSheet() {
|
|
478
|
+
},
|
|
479
|
+
destroy() {
|
|
480
|
+
},
|
|
481
|
+
getViewportInsets() {
|
|
482
|
+
return { pixels: { ...EMPTY_INSETS }, percent: { ...EMPTY_INSETS } };
|
|
483
|
+
},
|
|
484
|
+
hide() {
|
|
485
|
+
},
|
|
486
|
+
isVisible() {
|
|
487
|
+
return false;
|
|
488
|
+
},
|
|
489
|
+
openComments() {
|
|
490
|
+
},
|
|
491
|
+
openLeaderboard() {
|
|
492
|
+
},
|
|
493
|
+
setCounts() {
|
|
494
|
+
},
|
|
495
|
+
setLeaderboardVisible() {
|
|
496
|
+
},
|
|
497
|
+
setLiked() {
|
|
498
|
+
},
|
|
499
|
+
show() {
|
|
500
|
+
},
|
|
501
|
+
triggerBack() {
|
|
502
|
+
},
|
|
503
|
+
triggerLeave() {
|
|
504
|
+
}
|
|
505
|
+
};
|
|
506
|
+
function getBrowserWindow() {
|
|
507
|
+
if (typeof window === "undefined") {
|
|
508
|
+
return void 0;
|
|
509
|
+
}
|
|
510
|
+
return window;
|
|
511
|
+
}
|
|
512
|
+
function getDocument() {
|
|
513
|
+
if (typeof document === "undefined") {
|
|
514
|
+
return void 0;
|
|
515
|
+
}
|
|
516
|
+
return document;
|
|
517
|
+
}
|
|
518
|
+
function warn(message) {
|
|
519
|
+
const nodeEnv = globalThis.process?.env?.NODE_ENV;
|
|
520
|
+
if (nodeEnv !== "production") {
|
|
521
|
+
console.warn("[oasiz/sdk] " + message);
|
|
522
|
+
}
|
|
523
|
+
}
|
|
524
|
+
function normalizeCount(value, fallback) {
|
|
525
|
+
if (typeof value !== "number" || !Number.isFinite(value)) {
|
|
526
|
+
return fallback;
|
|
527
|
+
}
|
|
528
|
+
return Math.max(0, Math.floor(value));
|
|
529
|
+
}
|
|
530
|
+
function formatCompactCount(value) {
|
|
531
|
+
if (value >= 1e6) {
|
|
532
|
+
return (value / 1e6).toFixed(1).replace(/\.0$/, "") + "M";
|
|
533
|
+
}
|
|
534
|
+
if (value >= 1e3) {
|
|
535
|
+
return (value / 1e3).toFixed(1).replace(/\.0$/, "") + "k";
|
|
536
|
+
}
|
|
537
|
+
return String(value);
|
|
538
|
+
}
|
|
539
|
+
function resolveDevice(device, orientation) {
|
|
540
|
+
const preset = typeof device === "string" ? DEVICE_PRESETS[device] : device ? {
|
|
541
|
+
name: device.name ?? "Custom phone",
|
|
542
|
+
width: device.width,
|
|
543
|
+
height: device.height,
|
|
544
|
+
safeArea: {
|
|
545
|
+
...EMPTY_INSETS,
|
|
546
|
+
...device.safeArea
|
|
547
|
+
}
|
|
548
|
+
} : DEVICE_PRESETS["iphone-17-pro-max"];
|
|
549
|
+
const normalized = {
|
|
550
|
+
name: preset.name,
|
|
551
|
+
width: Math.max(320, Math.floor(preset.width)),
|
|
552
|
+
height: Math.max(480, Math.floor(preset.height)),
|
|
553
|
+
safeArea: {
|
|
554
|
+
...EMPTY_INSETS,
|
|
555
|
+
...preset.safeArea
|
|
556
|
+
}
|
|
557
|
+
};
|
|
558
|
+
if (orientation === "landscape") {
|
|
559
|
+
return {
|
|
560
|
+
...normalized,
|
|
561
|
+
width: Math.max(normalized.width, normalized.height),
|
|
562
|
+
height: Math.min(normalized.width, normalized.height),
|
|
563
|
+
safeArea: {
|
|
564
|
+
top: 0,
|
|
565
|
+
right: normalized.safeArea.top,
|
|
566
|
+
bottom: 21,
|
|
567
|
+
left: normalized.safeArea.top
|
|
568
|
+
}
|
|
569
|
+
};
|
|
570
|
+
}
|
|
571
|
+
return normalized;
|
|
572
|
+
}
|
|
573
|
+
function shouldFrame(frame, browserWindow, device) {
|
|
574
|
+
if (frame === true) {
|
|
575
|
+
return true;
|
|
576
|
+
}
|
|
577
|
+
if (frame === false) {
|
|
578
|
+
return false;
|
|
579
|
+
}
|
|
580
|
+
return browserWindow.innerWidth > device.width + 80 || browserWindow.innerHeight > device.height + 80;
|
|
581
|
+
}
|
|
582
|
+
function computeRect(browserWindow, device, frameEnabled) {
|
|
583
|
+
const viewportWidth = Math.max(320, browserWindow.innerWidth || device.width);
|
|
584
|
+
const viewportHeight = Math.max(480, browserWindow.innerHeight || device.height);
|
|
585
|
+
if (!frameEnabled) {
|
|
586
|
+
return {
|
|
587
|
+
left: 0,
|
|
588
|
+
top: 0,
|
|
589
|
+
width: viewportWidth,
|
|
590
|
+
height: viewportHeight,
|
|
591
|
+
scale: Math.min(viewportWidth / device.width, viewportHeight / device.height)
|
|
592
|
+
};
|
|
593
|
+
}
|
|
594
|
+
const margin = 24;
|
|
595
|
+
const scale = Math.min(
|
|
596
|
+
(viewportWidth - margin) / device.width,
|
|
597
|
+
(viewportHeight - margin) / device.height,
|
|
598
|
+
1
|
|
599
|
+
);
|
|
600
|
+
const width = Math.round(device.width * scale);
|
|
601
|
+
const height = Math.round(device.height * scale);
|
|
602
|
+
return {
|
|
603
|
+
left: Math.round((viewportWidth - width) / 2),
|
|
604
|
+
top: Math.round((viewportHeight - height) / 2),
|
|
605
|
+
width,
|
|
606
|
+
height,
|
|
607
|
+
scale
|
|
608
|
+
};
|
|
609
|
+
}
|
|
610
|
+
function scaledInset(value, scale) {
|
|
611
|
+
if (typeof value !== "number" || !Number.isFinite(value)) {
|
|
612
|
+
return 0;
|
|
613
|
+
}
|
|
614
|
+
return Math.max(0, Math.round(value * scale));
|
|
615
|
+
}
|
|
616
|
+
function getSimulatorInsets(state) {
|
|
617
|
+
const safe = state.device.safeArea;
|
|
618
|
+
const top = scaledInset(safe.top, state.rect.scale) + Math.round((TOP_BAR_OFFSET + TOP_CHROME_HEIGHT) * state.rect.scale);
|
|
619
|
+
const pixels = {
|
|
620
|
+
top,
|
|
621
|
+
right: scaledInset(safe.right, state.rect.scale),
|
|
622
|
+
bottom: scaledInset(safe.bottom, state.rect.scale),
|
|
623
|
+
left: scaledInset(safe.left, state.rect.scale)
|
|
624
|
+
};
|
|
625
|
+
const percent = {
|
|
626
|
+
top: state.rect.height > 0 ? pixels.top / state.rect.height * 100 : 0,
|
|
627
|
+
right: state.rect.width > 0 ? pixels.right / state.rect.width * 100 : 0,
|
|
628
|
+
bottom: state.rect.height > 0 ? pixels.bottom / state.rect.height * 100 : 0,
|
|
629
|
+
left: state.rect.width > 0 ? pixels.left / state.rect.width * 100 : 0
|
|
630
|
+
};
|
|
631
|
+
return { pixels, percent };
|
|
632
|
+
}
|
|
633
|
+
function snapshotBridge(browserWindow) {
|
|
634
|
+
const globals = {};
|
|
635
|
+
for (const key of BRIDGE_KEYS) {
|
|
636
|
+
globals[key] = browserWindow[key];
|
|
637
|
+
}
|
|
638
|
+
return { globals };
|
|
639
|
+
}
|
|
640
|
+
function restoreBridge(browserWindow, snapshot) {
|
|
641
|
+
for (const key of BRIDGE_KEYS) {
|
|
642
|
+
const value = snapshot.globals[key];
|
|
643
|
+
if (typeof value === "undefined") {
|
|
644
|
+
delete browserWindow[key];
|
|
645
|
+
} else {
|
|
646
|
+
browserWindow[key] = value;
|
|
647
|
+
}
|
|
648
|
+
}
|
|
649
|
+
}
|
|
650
|
+
function installBridge(state) {
|
|
651
|
+
const browserWindow = getBrowserWindow();
|
|
652
|
+
if (!browserWindow) return;
|
|
653
|
+
const bridge = browserWindow;
|
|
654
|
+
function refreshInsets() {
|
|
655
|
+
const insets = getSimulatorInsets(state);
|
|
656
|
+
bridge.__OASIZ_VIEWPORT_INSETS__ = insets;
|
|
657
|
+
bridge.__OASIZ_VIEWPORT_INSETS_PERCENT__ = insets.percent;
|
|
658
|
+
bridge.__OASIZ_SAFE_AREA_TOP__ = insets.pixels.top;
|
|
659
|
+
bridge.__OASIZ_SAFE_AREA_RIGHT__ = insets.pixels.right;
|
|
660
|
+
bridge.__OASIZ_SAFE_AREA_BOTTOM__ = insets.pixels.bottom;
|
|
661
|
+
bridge.__OASIZ_SAFE_AREA_LEFT__ = insets.pixels.left;
|
|
662
|
+
bridge.__OASIZ_SAFE_AREA_TOP_PERCENT__ = insets.percent.top;
|
|
663
|
+
bridge.__OASIZ_SAFE_AREA_RIGHT_PERCENT__ = insets.percent.right;
|
|
664
|
+
bridge.__OASIZ_SAFE_AREA_BOTTOM_PERCENT__ = insets.percent.bottom;
|
|
665
|
+
bridge.__OASIZ_SAFE_AREA_LEFT_PERCENT__ = insets.percent.left;
|
|
666
|
+
return insets;
|
|
667
|
+
}
|
|
668
|
+
bridge.getViewportInsets = () => refreshInsets();
|
|
669
|
+
bridge.getViewportInsetsPercent = () => refreshInsets().percent;
|
|
670
|
+
bridge.getSafeAreaTop = () => refreshInsets().pixels.top;
|
|
671
|
+
bridge.getSafeAreaRight = () => refreshInsets().pixels.right;
|
|
672
|
+
bridge.getSafeAreaBottom = () => refreshInsets().pixels.bottom;
|
|
673
|
+
bridge.getSafeAreaLeft = () => refreshInsets().pixels.left;
|
|
674
|
+
bridge.getSafeAreaTopPercent = () => refreshInsets().percent.top;
|
|
675
|
+
bridge.getSafeAreaRightPercent = () => refreshInsets().percent.right;
|
|
676
|
+
bridge.getSafeAreaBottomPercent = () => refreshInsets().percent.bottom;
|
|
677
|
+
bridge.getSafeAreaLeftPercent = () => refreshInsets().percent.left;
|
|
678
|
+
bridge.__oasizSetLeaderboardVisible = (visible) => {
|
|
679
|
+
state.leaderboard.visible = visible;
|
|
680
|
+
renderSimulator(state);
|
|
681
|
+
};
|
|
682
|
+
refreshInsets();
|
|
683
|
+
}
|
|
684
|
+
function createStyleElement() {
|
|
685
|
+
const style = document.createElement("style");
|
|
686
|
+
style.setAttribute("data-oasiz-app-simulator", "styles");
|
|
687
|
+
style.textContent = [
|
|
688
|
+
".oasiz-app-sim-button{appearance:none;border:0;margin:0;padding:0;font:inherit;color:inherit;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}",
|
|
689
|
+
".oasiz-app-sim-button:active{transform:scale(0.97)}",
|
|
690
|
+
".oasiz-app-sim-glass{background:rgba(18,20,24,0.42);border:1px solid rgba(255,255,255,0.22);box-shadow:0 12px 30px rgba(0,0,0,0.28),inset 0 1px 0 rgba(255,255,255,0.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}",
|
|
691
|
+
".oasiz-app-sim-scroll::-webkit-scrollbar{width:0;height:0}"
|
|
692
|
+
].join("\n");
|
|
693
|
+
return style;
|
|
694
|
+
}
|
|
695
|
+
function applyTextStyle(element, size = 12, weight = 600) {
|
|
696
|
+
element.style.font = String(weight) + " " + String(size) + "px/1.2 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif";
|
|
697
|
+
}
|
|
698
|
+
function createDiv(className) {
|
|
699
|
+
const element = document.createElement("div");
|
|
700
|
+
if (className) {
|
|
701
|
+
element.className = className;
|
|
702
|
+
}
|
|
703
|
+
return element;
|
|
704
|
+
}
|
|
705
|
+
function createButton(label, title) {
|
|
706
|
+
const button = document.createElement("button");
|
|
707
|
+
button.type = "button";
|
|
708
|
+
button.className = "oasiz-app-sim-button";
|
|
709
|
+
button.setAttribute("aria-label", title);
|
|
710
|
+
button.title = title;
|
|
711
|
+
button.innerHTML = label;
|
|
712
|
+
return button;
|
|
713
|
+
}
|
|
714
|
+
function svgIcon(name, filled = false) {
|
|
715
|
+
if (name === "back") {
|
|
716
|
+
return '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>';
|
|
717
|
+
}
|
|
718
|
+
if (name === "heart") {
|
|
719
|
+
return filled ? '<svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 21s-7.4-4.4-9.7-9.1C.7 8.5 2.7 4.8 6.4 4.3c2-.3 3.8.7 5.6 2.8 1.8-2.1 3.6-3.1 5.6-2.8 3.7.5 5.7 4.2 4.1 7.6C19.4 16.6 12 21 12 21Z"/></svg>' : '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6c-2-1.8-5.1-1.5-6.9.6L12 7.4l-1.9-2.2C8.3 3.1 5.2 2.8 3.2 4.6.8 6.8.7 10.5 3 12.9L12 21l9-8.1c2.3-2.4 2.2-6.1-.2-8.3Z"/></svg>';
|
|
720
|
+
}
|
|
721
|
+
if (name === "chat") {
|
|
722
|
+
return filled ? '<svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M4 5.5A3.5 3.5 0 0 1 7.5 2h9A3.5 3.5 0 0 1 20 5.5v7A3.5 3.5 0 0 1 16.5 16H9l-4.2 3.1A1.1 1.1 0 0 1 3 18.2V5.5Z"/></svg>' : '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5.5A3.5 3.5 0 0 1 7.5 2h9A3.5 3.5 0 0 1 20 5.5v7A3.5 3.5 0 0 1 16.5 16H9l-4.2 3.1A1.1 1.1 0 0 1 3 18.2V5.5Z"/></svg>';
|
|
723
|
+
}
|
|
724
|
+
if (name === "trophy") {
|
|
725
|
+
return '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M7 3h10v3h3a1 1 0 0 1 1 1c0 3.2-1.8 5.5-4.6 6.1A5 5 0 0 1 13 15.9V19h3v2H8v-2h3v-3.1a5 5 0 0 1-3.4-2.8C4.8 12.5 3 10.2 3 7a1 1 0 0 1 1-1h3V3Zm10 5v2.8c1.1-.5 1.8-1.5 2-2.8h-2ZM5 8c.2 1.3.9 2.3 2 2.8V8H5Z"/></svg>';
|
|
726
|
+
}
|
|
727
|
+
if (name === "share") {
|
|
728
|
+
return '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M5 14v5h14v-5"/></svg>';
|
|
729
|
+
}
|
|
730
|
+
return filled ? '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1Z"/></svg>' : '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1Z"/></svg>';
|
|
731
|
+
}
|
|
732
|
+
function setBoxStyle(element, state) {
|
|
733
|
+
const { rect } = state;
|
|
734
|
+
element.style.left = rect.left + "px";
|
|
735
|
+
element.style.top = rect.top + "px";
|
|
736
|
+
element.style.width = rect.width + "px";
|
|
737
|
+
element.style.height = rect.height + "px";
|
|
738
|
+
}
|
|
739
|
+
function createCircleButton(icon, title, onClick) {
|
|
740
|
+
const button = createButton(icon, title);
|
|
741
|
+
button.classList.add("oasiz-app-sim-glass");
|
|
742
|
+
button.style.cssText += [
|
|
743
|
+
"position:absolute",
|
|
744
|
+
"width:44px",
|
|
745
|
+
"height:44px",
|
|
746
|
+
"border-radius:999px",
|
|
747
|
+
"display:flex",
|
|
748
|
+
"align-items:center",
|
|
749
|
+
"justify-content:center",
|
|
750
|
+
"color:" + TEXT_PRIMARY,
|
|
751
|
+
"pointer-events:auto"
|
|
752
|
+
].join(";");
|
|
753
|
+
button.addEventListener("click", (event) => {
|
|
754
|
+
event.preventDefault();
|
|
755
|
+
event.stopPropagation();
|
|
756
|
+
onClick();
|
|
757
|
+
});
|
|
758
|
+
return button;
|
|
759
|
+
}
|
|
760
|
+
function createHubPill(state) {
|
|
761
|
+
const button = createButton("", "Open comments");
|
|
762
|
+
button.classList.add("oasiz-app-sim-glass");
|
|
763
|
+
button.style.cssText += [
|
|
764
|
+
"position:absolute",
|
|
765
|
+
"right:16px",
|
|
766
|
+
"height:44px",
|
|
767
|
+
"min-width:94px",
|
|
768
|
+
"border-radius:999px",
|
|
769
|
+
"display:flex",
|
|
770
|
+
"align-items:center",
|
|
771
|
+
"justify-content:center",
|
|
772
|
+
"gap:10px",
|
|
773
|
+
"padding:0 14px",
|
|
774
|
+
"color:" + TEXT_PRIMARY,
|
|
775
|
+
"pointer-events:auto"
|
|
776
|
+
].join(";");
|
|
777
|
+
const likeColor = state.wasLiked ? LIKE : TEXT_PRIMARY;
|
|
778
|
+
button.innerHTML = '<span style="display:inline-flex;align-items:center;gap:4px;color:' + likeColor + '">' + svgIcon("heart", state.wasLiked) + "<span>" + formatCompactCount(state.counts.likes) + '</span></span><span style="display:inline-flex;align-items:center;gap:4px;color:' + ACCENT + '">' + svgIcon("chat", true) + "<span>" + formatCompactCount(state.counts.comments) + "</span></span>";
|
|
779
|
+
applyTextStyle(button, 12, 700);
|
|
780
|
+
button.addEventListener("click", (event) => {
|
|
781
|
+
event.preventDefault();
|
|
782
|
+
event.stopPropagation();
|
|
783
|
+
state.sheet = "comments";
|
|
784
|
+
renderSimulator(state);
|
|
785
|
+
});
|
|
786
|
+
return button;
|
|
787
|
+
}
|
|
788
|
+
function createLeaderboardPill(state) {
|
|
789
|
+
const button = createButton("", "Open leaderboard");
|
|
790
|
+
button.classList.add("oasiz-app-sim-glass");
|
|
791
|
+
button.style.cssText += [
|
|
792
|
+
"position:absolute",
|
|
793
|
+
"left:50%",
|
|
794
|
+
"height:44px",
|
|
795
|
+
"min-width:118px",
|
|
796
|
+
"border-radius:999px",
|
|
797
|
+
"display:" + (state.leaderboard.visible ? "flex" : "none"),
|
|
798
|
+
"align-items:center",
|
|
799
|
+
"justify-content:center",
|
|
800
|
+
"gap:8px",
|
|
801
|
+
"padding:0 14px",
|
|
802
|
+
"color:" + TEXT_PRIMARY,
|
|
803
|
+
"pointer-events:auto",
|
|
804
|
+
"transform:translateX(-50%)"
|
|
805
|
+
].join(";");
|
|
806
|
+
button.innerHTML = '<span style="color:' + TROPHY + ';display:inline-flex">' + svgIcon("trophy", true) + '</span><span style="min-width:0">' + formatCompactCount(state.leaderboard.score) + "</span>";
|
|
807
|
+
applyTextStyle(button, 14, 800);
|
|
808
|
+
button.addEventListener("click", (event) => {
|
|
809
|
+
event.preventDefault();
|
|
810
|
+
event.stopPropagation();
|
|
811
|
+
state.sheet = "leaderboard";
|
|
812
|
+
renderSimulator(state);
|
|
813
|
+
});
|
|
814
|
+
return button;
|
|
815
|
+
}
|
|
816
|
+
function createToolbarButton(icon, count, color, title, onClick) {
|
|
817
|
+
const button = createButton("", title);
|
|
818
|
+
button.classList.add("oasiz-app-sim-glass");
|
|
819
|
+
button.style.cssText += [
|
|
820
|
+
"height:42px",
|
|
821
|
+
"min-width:42px",
|
|
822
|
+
"border-radius:999px",
|
|
823
|
+
"display:flex",
|
|
824
|
+
"align-items:center",
|
|
825
|
+
"justify-content:center",
|
|
826
|
+
"gap:6px",
|
|
827
|
+
"padding:0 12px",
|
|
828
|
+
"color:" + color,
|
|
829
|
+
"pointer-events:auto"
|
|
830
|
+
].join(";");
|
|
831
|
+
button.innerHTML = icon + (count === null ? "" : '<span style="color:' + color + ';min-width:0">' + formatCompactCount(count) + "</span>");
|
|
832
|
+
applyTextStyle(button, 13, 700);
|
|
833
|
+
button.addEventListener("click", (event) => {
|
|
834
|
+
event.preventDefault();
|
|
835
|
+
event.stopPropagation();
|
|
836
|
+
onClick();
|
|
837
|
+
});
|
|
838
|
+
return button;
|
|
839
|
+
}
|
|
840
|
+
function createSheet(state) {
|
|
841
|
+
if (!state.sheet) {
|
|
842
|
+
return null;
|
|
843
|
+
}
|
|
844
|
+
const overlay = createDiv();
|
|
845
|
+
overlay.style.cssText = [
|
|
846
|
+
"position:absolute",
|
|
847
|
+
"left:0",
|
|
848
|
+
"top:0",
|
|
849
|
+
"right:0",
|
|
850
|
+
"bottom:0",
|
|
851
|
+
"display:flex",
|
|
852
|
+
"align-items:center",
|
|
853
|
+
"justify-content:center",
|
|
854
|
+
"padding:" + String(scaledInset(state.device.safeArea.top, state.rect.scale) + 72) + "px 12px " + String(Math.max(18, scaledInset(state.device.safeArea.bottom, state.rect.scale) + 18)) + "px",
|
|
855
|
+
"background:rgba(0,0,0,0.34)",
|
|
856
|
+
"pointer-events:auto"
|
|
857
|
+
].join(";");
|
|
858
|
+
overlay.addEventListener("click", () => {
|
|
859
|
+
state.sheet = null;
|
|
860
|
+
renderSimulator(state);
|
|
861
|
+
});
|
|
862
|
+
const sheet = createDiv();
|
|
863
|
+
sheet.style.cssText = [
|
|
864
|
+
"position:relative",
|
|
865
|
+
"width:min(100%, 408px)",
|
|
866
|
+
"max-height:100%",
|
|
867
|
+
"min-height:min(390px, 64%)",
|
|
868
|
+
"display:flex",
|
|
869
|
+
"flex-direction:column",
|
|
870
|
+
"border-radius:24px",
|
|
871
|
+
"border:1px solid " + BORDER,
|
|
872
|
+
"background:linear-gradient(180deg, rgba(18,20,24,0.97), rgba(9,11,15,0.98))",
|
|
873
|
+
"box-shadow:0 30px 80px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.10)",
|
|
874
|
+
"overflow:hidden",
|
|
875
|
+
"pointer-events:auto"
|
|
876
|
+
].join(";");
|
|
877
|
+
sheet.addEventListener("click", (event) => {
|
|
878
|
+
event.stopPropagation();
|
|
879
|
+
});
|
|
880
|
+
const handle = createDiv();
|
|
881
|
+
handle.style.cssText = [
|
|
882
|
+
"width:42px",
|
|
883
|
+
"height:5px",
|
|
884
|
+
"border-radius:999px",
|
|
885
|
+
"background:rgba(255,255,255,0.28)",
|
|
886
|
+
"align-self:center",
|
|
887
|
+
"margin:10px 0 2px"
|
|
888
|
+
].join(";");
|
|
889
|
+
const header = createDiv();
|
|
890
|
+
header.style.cssText = [
|
|
891
|
+
"display:flex",
|
|
892
|
+
"align-items:center",
|
|
893
|
+
"justify-content:space-between",
|
|
894
|
+
"gap:8px",
|
|
895
|
+
"min-height:62px",
|
|
896
|
+
"padding:6px 14px 10px",
|
|
897
|
+
"border-bottom:1px solid " + BORDER
|
|
898
|
+
].join(";");
|
|
899
|
+
const left = createDiv();
|
|
900
|
+
left.style.cssText = "display:flex;align-items:center;gap:8px;min-width:112px";
|
|
901
|
+
const title = createDiv();
|
|
902
|
+
title.textContent = state.sheet === "comments" ? String(state.counts.comments) + " comments" : "Leaderboard";
|
|
903
|
+
title.style.cssText = [
|
|
904
|
+
"flex:1",
|
|
905
|
+
"min-width:0",
|
|
906
|
+
"text-align:center",
|
|
907
|
+
"color:" + TEXT_PRIMARY
|
|
908
|
+
].join(";");
|
|
909
|
+
applyTextStyle(title, 14, 700);
|
|
910
|
+
const right = createDiv();
|
|
911
|
+
right.style.cssText = "display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:112px";
|
|
912
|
+
const back = createToolbarButton(svgIcon("back"), null, TEXT_PRIMARY, "Close", () => {
|
|
913
|
+
state.sheet = null;
|
|
914
|
+
renderSimulator(state);
|
|
915
|
+
});
|
|
916
|
+
back.style.width = "36px";
|
|
917
|
+
back.style.height = "36px";
|
|
918
|
+
back.style.padding = "0";
|
|
919
|
+
left.appendChild(back);
|
|
920
|
+
if (state.sheet === "comments") {
|
|
921
|
+
const like = createToolbarButton(
|
|
922
|
+
svgIcon("heart", state.wasLiked),
|
|
923
|
+
state.counts.likes,
|
|
924
|
+
state.wasLiked ? LIKE : TEXT_PRIMARY,
|
|
925
|
+
"Like game",
|
|
926
|
+
() => {
|
|
927
|
+
state.wasLiked = !state.wasLiked;
|
|
928
|
+
state.counts.likes = Math.max(0, state.counts.likes + (state.wasLiked ? 1 : -1));
|
|
929
|
+
renderSimulator(state);
|
|
930
|
+
}
|
|
931
|
+
);
|
|
932
|
+
left.appendChild(like);
|
|
933
|
+
} else {
|
|
934
|
+
const trophy = createToolbarButton(svgIcon("trophy", true), null, TROPHY, "Leaderboard", () => {
|
|
935
|
+
});
|
|
936
|
+
trophy.style.width = "36px";
|
|
937
|
+
trophy.style.height = "36px";
|
|
938
|
+
trophy.style.padding = "0";
|
|
939
|
+
left.appendChild(trophy);
|
|
940
|
+
}
|
|
941
|
+
const share2 = createToolbarButton(svgIcon("share"), null, TEXT_PRIMARY, "Share", () => {
|
|
942
|
+
});
|
|
943
|
+
const save = createToolbarButton(svgIcon("bookmark"), null, TEXT_PRIMARY, "Save", () => {
|
|
944
|
+
});
|
|
945
|
+
right.appendChild(share2);
|
|
946
|
+
right.appendChild(save);
|
|
947
|
+
header.appendChild(left);
|
|
948
|
+
header.appendChild(title);
|
|
949
|
+
header.appendChild(right);
|
|
950
|
+
const body = createDiv("oasiz-app-sim-scroll");
|
|
951
|
+
body.style.cssText = [
|
|
952
|
+
"display:flex",
|
|
953
|
+
"flex-direction:column",
|
|
954
|
+
"gap:10px",
|
|
955
|
+
"overflow:auto",
|
|
956
|
+
"padding:14px 16px calc(" + String(Math.max(16, scaledInset(state.device.safeArea.bottom, state.rect.scale))) + "px + 14px)",
|
|
957
|
+
"min-height:0"
|
|
958
|
+
].join(";");
|
|
959
|
+
if (state.sheet === "leaderboard") {
|
|
960
|
+
appendLeaderboardBody(body);
|
|
961
|
+
} else {
|
|
962
|
+
appendCommentsBody(body, state);
|
|
963
|
+
}
|
|
964
|
+
sheet.appendChild(handle);
|
|
965
|
+
sheet.appendChild(header);
|
|
966
|
+
sheet.appendChild(body);
|
|
967
|
+
overlay.appendChild(sheet);
|
|
968
|
+
return overlay;
|
|
969
|
+
}
|
|
970
|
+
function appendLeaderboardBody(body) {
|
|
971
|
+
const tabs = createDiv();
|
|
972
|
+
tabs.style.cssText = [
|
|
973
|
+
"display:grid",
|
|
974
|
+
"grid-template-columns:repeat(3,1fr)",
|
|
975
|
+
"gap:6px",
|
|
976
|
+
"padding:4px",
|
|
977
|
+
"border-radius:14px",
|
|
978
|
+
"background:rgba(255,255,255,0.07)"
|
|
979
|
+
].join(";");
|
|
980
|
+
for (const label of ["Weekly", "Global", "Friends"]) {
|
|
981
|
+
const tab = createDiv();
|
|
982
|
+
tab.textContent = label;
|
|
983
|
+
tab.style.cssText = [
|
|
984
|
+
"border-radius:10px",
|
|
985
|
+
"padding:8px 6px",
|
|
986
|
+
"text-align:center",
|
|
987
|
+
"color:" + (label === "Weekly" ? TEXT_PRIMARY : TEXT_MUTED),
|
|
988
|
+
"background:" + (label === "Weekly" ? "rgba(0,161,228,0.28)" : "transparent")
|
|
989
|
+
].join(";");
|
|
990
|
+
applyTextStyle(tab, 12, 700);
|
|
991
|
+
tabs.appendChild(tab);
|
|
992
|
+
}
|
|
993
|
+
body.appendChild(tabs);
|
|
994
|
+
const entries = [
|
|
995
|
+
["1", "Nova", "24.8k"],
|
|
996
|
+
["2", "You", "12.4k"],
|
|
997
|
+
["3", "Mika", "9.7k"],
|
|
998
|
+
["4", "Ari", "8.1k"]
|
|
999
|
+
];
|
|
1000
|
+
for (const [rank, name, score] of entries) {
|
|
1001
|
+
const row = createDiv();
|
|
1002
|
+
row.style.cssText = [
|
|
1003
|
+
"display:grid",
|
|
1004
|
+
"grid-template-columns:34px 1fr auto",
|
|
1005
|
+
"align-items:center",
|
|
1006
|
+
"gap:10px",
|
|
1007
|
+
"min-height:58px",
|
|
1008
|
+
"padding:10px 12px",
|
|
1009
|
+
"border-radius:14px",
|
|
1010
|
+
"background:" + (name === "You" ? "rgba(0,161,228,0.13)" : "rgba(255,255,255,0.06)"),
|
|
1011
|
+
"border:1px solid " + (name === "You" ? "rgba(0,161,228,0.28)" : "rgba(255,255,255,0.08)")
|
|
1012
|
+
].join(";");
|
|
1013
|
+
const rankEl = createDiv();
|
|
1014
|
+
rankEl.textContent = rank;
|
|
1015
|
+
rankEl.style.cssText = "color:" + (rank === "1" ? TROPHY : TEXT_MUTED) + ";text-align:center";
|
|
1016
|
+
applyTextStyle(rankEl, 14, 800);
|
|
1017
|
+
const nameEl = createDiv();
|
|
1018
|
+
nameEl.textContent = name;
|
|
1019
|
+
nameEl.style.cssText = "color:" + TEXT_PRIMARY + ";min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap";
|
|
1020
|
+
applyTextStyle(nameEl, 14, 700);
|
|
1021
|
+
const scoreEl = createDiv();
|
|
1022
|
+
scoreEl.textContent = score;
|
|
1023
|
+
scoreEl.style.cssText = "color:" + TEXT_SECONDARY;
|
|
1024
|
+
applyTextStyle(scoreEl, 13, 700);
|
|
1025
|
+
row.appendChild(rankEl);
|
|
1026
|
+
row.appendChild(nameEl);
|
|
1027
|
+
row.appendChild(scoreEl);
|
|
1028
|
+
body.appendChild(row);
|
|
1029
|
+
}
|
|
1030
|
+
}
|
|
1031
|
+
function appendCommentsBody(body, state) {
|
|
1032
|
+
const toolbar = createDiv();
|
|
1033
|
+
toolbar.style.cssText = [
|
|
1034
|
+
"display:flex",
|
|
1035
|
+
"align-items:center",
|
|
1036
|
+
"gap:8px",
|
|
1037
|
+
"height:48px"
|
|
1038
|
+
].join(";");
|
|
1039
|
+
toolbar.appendChild(
|
|
1040
|
+
createToolbarButton(
|
|
1041
|
+
svgIcon("heart", state.wasLiked),
|
|
1042
|
+
state.counts.likes,
|
|
1043
|
+
state.wasLiked ? LIKE : TEXT_PRIMARY,
|
|
1044
|
+
"Like game",
|
|
1045
|
+
() => {
|
|
1046
|
+
state.wasLiked = !state.wasLiked;
|
|
1047
|
+
state.counts.likes = Math.max(0, state.counts.likes + (state.wasLiked ? 1 : -1));
|
|
1048
|
+
renderSimulator(state);
|
|
1049
|
+
}
|
|
1050
|
+
)
|
|
1051
|
+
);
|
|
1052
|
+
toolbar.appendChild(
|
|
1053
|
+
createToolbarButton(svgIcon("chat", true), state.counts.comments, ACCENT, "Comments", () => {
|
|
1054
|
+
})
|
|
1055
|
+
);
|
|
1056
|
+
toolbar.appendChild(createToolbarButton(svgIcon("share"), null, TEXT_PRIMARY, "Share", () => {
|
|
1057
|
+
}));
|
|
1058
|
+
toolbar.appendChild(createToolbarButton(svgIcon("bookmark"), null, TEXT_PRIMARY, "Save", () => {
|
|
1059
|
+
}));
|
|
1060
|
+
body.appendChild(toolbar);
|
|
1061
|
+
const comments = [
|
|
1062
|
+
["You", "Can my score panel clear the top buttons?"],
|
|
1063
|
+
["Nova", "This is a good spot to check pause and menu spacing."],
|
|
1064
|
+
["Mika", "The app chrome stays above the game just like mobile."]
|
|
1065
|
+
];
|
|
1066
|
+
for (const [author, text] of comments) {
|
|
1067
|
+
const row = createDiv();
|
|
1068
|
+
row.style.cssText = [
|
|
1069
|
+
"display:grid",
|
|
1070
|
+
"grid-template-columns:34px 1fr",
|
|
1071
|
+
"gap:10px",
|
|
1072
|
+
"padding:10px 0"
|
|
1073
|
+
].join(";");
|
|
1074
|
+
const avatar = createDiv();
|
|
1075
|
+
avatar.textContent = author.charAt(0);
|
|
1076
|
+
avatar.style.cssText = [
|
|
1077
|
+
"width:34px",
|
|
1078
|
+
"height:34px",
|
|
1079
|
+
"border-radius:999px",
|
|
1080
|
+
"display:flex",
|
|
1081
|
+
"align-items:center",
|
|
1082
|
+
"justify-content:center",
|
|
1083
|
+
"background:rgba(0,161,228,0.28)",
|
|
1084
|
+
"color:" + TEXT_PRIMARY
|
|
1085
|
+
].join(";");
|
|
1086
|
+
applyTextStyle(avatar, 13, 800);
|
|
1087
|
+
const message = createDiv();
|
|
1088
|
+
message.innerHTML = '<div style="color:' + TEXT_PRIMARY + ';font-weight:700;margin-bottom:3px">' + author + '</div><div style="color:' + TEXT_SECONDARY + '">' + text + "</div>";
|
|
1089
|
+
applyTextStyle(message, 13, 500);
|
|
1090
|
+
row.appendChild(avatar);
|
|
1091
|
+
row.appendChild(message);
|
|
1092
|
+
body.appendChild(row);
|
|
1093
|
+
}
|
|
1094
|
+
const composer = createDiv();
|
|
1095
|
+
composer.textContent = "Add comment...";
|
|
1096
|
+
composer.style.cssText = [
|
|
1097
|
+
"height:44px",
|
|
1098
|
+
"border-radius:18px",
|
|
1099
|
+
"display:flex",
|
|
1100
|
+
"align-items:center",
|
|
1101
|
+
"padding:0 14px",
|
|
1102
|
+
"background:rgba(255,255,255,0.08)",
|
|
1103
|
+
"border:1px solid rgba(255,255,255,0.10)",
|
|
1104
|
+
"color:" + TEXT_MUTED
|
|
1105
|
+
].join(";");
|
|
1106
|
+
applyTextStyle(composer, 13, 600);
|
|
1107
|
+
body.appendChild(composer);
|
|
1108
|
+
}
|
|
1109
|
+
function renderSimulator(state) {
|
|
1110
|
+
if (state.wasDestroyed) {
|
|
1111
|
+
return;
|
|
1112
|
+
}
|
|
1113
|
+
const { root, stage, gameViewport } = state.elements;
|
|
1114
|
+
root.style.display = state.visible ? "block" : "none";
|
|
1115
|
+
setBoxStyle(stage, state);
|
|
1116
|
+
if (gameViewport) {
|
|
1117
|
+
setBoxStyle(gameViewport, state);
|
|
1118
|
+
}
|
|
1119
|
+
stage.replaceChildren();
|
|
1120
|
+
const top = scaledInset(state.device.safeArea.top, state.rect.scale) + Math.round(TOP_BAR_OFFSET * state.rect.scale);
|
|
1121
|
+
const back = createCircleButton(svgIcon("back"), "Back", () => {
|
|
1122
|
+
if (state.backHandle.isBackOverrideActive()) {
|
|
1123
|
+
state.backHandle.triggerBack();
|
|
1124
|
+
} else {
|
|
1125
|
+
state.backHandle.triggerLeave();
|
|
1126
|
+
}
|
|
1127
|
+
});
|
|
1128
|
+
back.style.left = Math.round(16 * state.rect.scale) + "px";
|
|
1129
|
+
back.style.top = top + "px";
|
|
1130
|
+
const leaderboard = createLeaderboardPill(state);
|
|
1131
|
+
leaderboard.style.top = top + "px";
|
|
1132
|
+
const hub = createHubPill(state);
|
|
1133
|
+
hub.style.top = top + "px";
|
|
1134
|
+
hub.style.right = Math.round(16 * state.rect.scale) + "px";
|
|
1135
|
+
stage.appendChild(back);
|
|
1136
|
+
stage.appendChild(leaderboard);
|
|
1137
|
+
stage.appendChild(hub);
|
|
1138
|
+
const sheet = createSheet(state);
|
|
1139
|
+
if (sheet) {
|
|
1140
|
+
stage.appendChild(sheet);
|
|
1141
|
+
}
|
|
1142
|
+
if (state.options.log) {
|
|
1143
|
+
console.info("[oasiz/sdk] App simulator rendered.", {
|
|
1144
|
+
device: state.device.name,
|
|
1145
|
+
frame: state.frameEnabled,
|
|
1146
|
+
insets: getSimulatorInsets(state)
|
|
1147
|
+
});
|
|
1148
|
+
}
|
|
1149
|
+
}
|
|
1150
|
+
function installFrame(doc, state) {
|
|
1151
|
+
if (!state.frameEnabled || !doc.body) {
|
|
1152
|
+
return;
|
|
1153
|
+
}
|
|
1154
|
+
const body = doc.body;
|
|
1155
|
+
const html = doc.documentElement;
|
|
1156
|
+
const viewport = state.elements.gameViewport;
|
|
1157
|
+
if (!viewport) {
|
|
1158
|
+
return;
|
|
1159
|
+
}
|
|
1160
|
+
html.style.cssText = [
|
|
1161
|
+
state.previousDocumentElementStyle ?? "",
|
|
1162
|
+
"width:100%",
|
|
1163
|
+
"height:100%",
|
|
1164
|
+
"background:" + BODY_BACKGROUND,
|
|
1165
|
+
"overflow:hidden"
|
|
1166
|
+
].join(";");
|
|
1167
|
+
body.style.cssText = [
|
|
1168
|
+
state.previousBodyStyle ?? "",
|
|
1169
|
+
"width:100%",
|
|
1170
|
+
"height:100%",
|
|
1171
|
+
"margin:0",
|
|
1172
|
+
"background:" + BODY_BACKGROUND,
|
|
1173
|
+
"overflow:hidden"
|
|
1174
|
+
].join(";");
|
|
1175
|
+
const candidates = Array.from(body.children).filter(
|
|
1176
|
+
(node) => shouldMoveIntoGameViewport(node, state.elements)
|
|
1177
|
+
);
|
|
1178
|
+
for (const node of candidates) {
|
|
1179
|
+
state.movedNodes.push(node);
|
|
1180
|
+
viewport.appendChild(node);
|
|
1181
|
+
}
|
|
1182
|
+
body.appendChild(viewport);
|
|
1183
|
+
}
|
|
1184
|
+
function shouldMoveIntoGameViewport(node, elements) {
|
|
1185
|
+
if (node === elements.root || node === elements.style || node === elements.gameViewport) {
|
|
1186
|
+
return false;
|
|
1187
|
+
}
|
|
1188
|
+
const tagName = node.tagName.toUpperCase();
|
|
1189
|
+
if (tagName === "SCRIPT" || tagName === "STYLE" || tagName === "LINK" || tagName === "META" || tagName === "NOSCRIPT") {
|
|
1190
|
+
return false;
|
|
1191
|
+
}
|
|
1192
|
+
return node.getAttribute("data-oasiz-app-simulator") !== "true";
|
|
1193
|
+
}
|
|
1194
|
+
function restoreFrame(doc, state) {
|
|
1195
|
+
const body = doc.body;
|
|
1196
|
+
if (!body) {
|
|
1197
|
+
return;
|
|
1198
|
+
}
|
|
1199
|
+
for (const node of state.movedNodes) {
|
|
1200
|
+
body.appendChild(node);
|
|
1201
|
+
}
|
|
1202
|
+
state.movedNodes = [];
|
|
1203
|
+
state.elements.gameViewport?.remove();
|
|
1204
|
+
if (state.previousBodyStyle === null) {
|
|
1205
|
+
body.removeAttribute("style");
|
|
1206
|
+
} else {
|
|
1207
|
+
body.setAttribute("style", state.previousBodyStyle);
|
|
1208
|
+
}
|
|
1209
|
+
if (state.previousDocumentElementStyle === null) {
|
|
1210
|
+
doc.documentElement.removeAttribute("style");
|
|
1211
|
+
} else {
|
|
1212
|
+
doc.documentElement.setAttribute("style", state.previousDocumentElementStyle);
|
|
1213
|
+
}
|
|
1214
|
+
}
|
|
1215
|
+
function createElements(frameEnabled) {
|
|
1216
|
+
const root = document.createElement("div");
|
|
1217
|
+
root.setAttribute("data-oasiz-app-simulator", "true");
|
|
1218
|
+
root.style.cssText = [
|
|
1219
|
+
"position:fixed",
|
|
1220
|
+
"inset:0",
|
|
1221
|
+
"z-index:" + String(MAX_Z_INDEX),
|
|
1222
|
+
"pointer-events:none",
|
|
1223
|
+
"display:block",
|
|
1224
|
+
"font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif"
|
|
1225
|
+
].join(";");
|
|
1226
|
+
const stage = document.createElement("div");
|
|
1227
|
+
stage.setAttribute("data-oasiz-app-simulator", "stage");
|
|
1228
|
+
stage.style.cssText = [
|
|
1229
|
+
"position:absolute",
|
|
1230
|
+
"overflow:hidden",
|
|
1231
|
+
"pointer-events:none"
|
|
1232
|
+
].join(";");
|
|
1233
|
+
root.appendChild(stage);
|
|
1234
|
+
const gameViewport = frameEnabled ? document.createElement("div") : null;
|
|
1235
|
+
if (gameViewport) {
|
|
1236
|
+
gameViewport.setAttribute("data-oasiz-app-simulator", "game-viewport");
|
|
1237
|
+
gameViewport.style.cssText = [
|
|
1238
|
+
"position:fixed",
|
|
1239
|
+
"z-index:0",
|
|
1240
|
+
"overflow:hidden",
|
|
1241
|
+
"background:#000",
|
|
1242
|
+
"border-radius:28px",
|
|
1243
|
+
"outline:1px solid rgba(255,255,255,0.28)",
|
|
1244
|
+
"box-shadow:0 28px 90px rgba(0,0,0,0.48),0 0 0 8px rgba(255,255,255,0.06),0 0 0 10px rgba(0,0,0,0.58)"
|
|
1245
|
+
].join(";");
|
|
1246
|
+
}
|
|
1247
|
+
return {
|
|
1248
|
+
gameViewport,
|
|
1249
|
+
root,
|
|
1250
|
+
stage,
|
|
1251
|
+
style: createStyleElement()
|
|
1252
|
+
};
|
|
1253
|
+
}
|
|
1254
|
+
function installResizeHandler(browserWindow, state) {
|
|
1255
|
+
const resize = () => {
|
|
1256
|
+
state.rect = computeRect(browserWindow, state.device, state.frameEnabled);
|
|
1257
|
+
installBridge(state);
|
|
1258
|
+
renderSimulator(state);
|
|
1259
|
+
};
|
|
1260
|
+
browserWindow.addEventListener("resize", resize);
|
|
1261
|
+
browserWindow.addEventListener("orientationchange", resize);
|
|
1262
|
+
return () => {
|
|
1263
|
+
browserWindow.removeEventListener("resize", resize);
|
|
1264
|
+
browserWindow.removeEventListener("orientationchange", resize);
|
|
1265
|
+
};
|
|
1266
|
+
}
|
|
1267
|
+
function enableAppSimulator(options = {}) {
|
|
1268
|
+
if (options.enabled === false) {
|
|
1269
|
+
return NOOP_HANDLE;
|
|
1270
|
+
}
|
|
1271
|
+
const browserWindow = getBrowserWindow();
|
|
1272
|
+
const doc = getDocument();
|
|
1273
|
+
if (!browserWindow || !doc?.body || !doc.documentElement) {
|
|
1274
|
+
warn("enableAppSimulator requires a browser document.");
|
|
1275
|
+
return NOOP_HANDLE;
|
|
1276
|
+
}
|
|
1277
|
+
browserWindow.__oasizAppSimulatorHandle__?.destroy();
|
|
1278
|
+
const orientation = options.orientation ?? "portrait";
|
|
1279
|
+
const device = resolveDevice(options.device, orientation);
|
|
1280
|
+
const frameEnabled = shouldFrame(options.frame ?? true, browserWindow, device);
|
|
1281
|
+
const elements = createElements(frameEnabled);
|
|
1282
|
+
const rect = computeRect(browserWindow, device, frameEnabled);
|
|
1283
|
+
const backHandle = enableBackButtonTesting({
|
|
1284
|
+
browserHistory: options.browserHistoryBack ?? true,
|
|
1285
|
+
keyboard: options.keyboardBack ?? true,
|
|
1286
|
+
log: options.log === true
|
|
1287
|
+
});
|
|
1288
|
+
const state = {
|
|
1289
|
+
backHandle,
|
|
1290
|
+
bridgeSnapshot: snapshotBridge(browserWindow),
|
|
1291
|
+
cleanupResize: () => {
|
|
1292
|
+
},
|
|
1293
|
+
counts: {
|
|
1294
|
+
comments: normalizeCount(options.comments, DEFAULT_COUNTS.comments),
|
|
1295
|
+
likes: normalizeCount(options.likes, DEFAULT_COUNTS.likes)
|
|
1296
|
+
},
|
|
1297
|
+
device,
|
|
1298
|
+
elements,
|
|
1299
|
+
frameEnabled,
|
|
1300
|
+
leaderboard: {
|
|
1301
|
+
score: normalizeCount(options.score, DEFAULT_SCORE),
|
|
1302
|
+
visible: options.leaderboardVisible ?? true
|
|
1303
|
+
},
|
|
1304
|
+
movedNodes: [],
|
|
1305
|
+
options: {
|
|
1306
|
+
browserHistoryBack: options.browserHistoryBack ?? true,
|
|
1307
|
+
keyboardBack: options.keyboardBack ?? true,
|
|
1308
|
+
log: options.log === true,
|
|
1309
|
+
orientation,
|
|
1310
|
+
title: options.title ?? "Oasiz App Preview"
|
|
1311
|
+
},
|
|
1312
|
+
previousBodyStyle: doc.body.getAttribute("style"),
|
|
1313
|
+
previousDocumentElementStyle: doc.documentElement.getAttribute("style"),
|
|
1314
|
+
rect,
|
|
1315
|
+
sheet: null,
|
|
1316
|
+
visible: true,
|
|
1317
|
+
wasDestroyed: false,
|
|
1318
|
+
wasLiked: false
|
|
1319
|
+
};
|
|
1320
|
+
if (doc.head) {
|
|
1321
|
+
doc.head.appendChild(elements.style);
|
|
1322
|
+
} else {
|
|
1323
|
+
doc.body.appendChild(elements.style);
|
|
1324
|
+
}
|
|
1325
|
+
installFrame(doc, state);
|
|
1326
|
+
doc.body.appendChild(elements.root);
|
|
1327
|
+
installBridge(state);
|
|
1328
|
+
state.cleanupResize = installResizeHandler(browserWindow, state);
|
|
1329
|
+
const handle = {
|
|
1330
|
+
closeSheet: () => {
|
|
1331
|
+
state.sheet = null;
|
|
1332
|
+
renderSimulator(state);
|
|
1333
|
+
},
|
|
1334
|
+
destroy: () => {
|
|
1335
|
+
if (state.wasDestroyed) return;
|
|
1336
|
+
state.wasDestroyed = true;
|
|
1337
|
+
state.cleanupResize();
|
|
1338
|
+
state.backHandle.destroy();
|
|
1339
|
+
restoreBridge(browserWindow, state.bridgeSnapshot);
|
|
1340
|
+
delete browserWindow.__oasizAppSimulatorHandle__;
|
|
1341
|
+
elements.root.remove();
|
|
1342
|
+
elements.style.remove();
|
|
1343
|
+
restoreFrame(doc, state);
|
|
1344
|
+
},
|
|
1345
|
+
getViewportInsets: () => getSimulatorInsets(state),
|
|
1346
|
+
hide: () => {
|
|
1347
|
+
state.visible = false;
|
|
1348
|
+
renderSimulator(state);
|
|
1349
|
+
},
|
|
1350
|
+
isVisible: () => state.visible,
|
|
1351
|
+
openComments: () => {
|
|
1352
|
+
state.sheet = "comments";
|
|
1353
|
+
renderSimulator(state);
|
|
1354
|
+
},
|
|
1355
|
+
openLeaderboard: () => {
|
|
1356
|
+
state.sheet = "leaderboard";
|
|
1357
|
+
renderSimulator(state);
|
|
1358
|
+
},
|
|
1359
|
+
setCounts: (counts) => {
|
|
1360
|
+
state.counts.comments = normalizeCount(counts.comments, state.counts.comments);
|
|
1361
|
+
state.counts.likes = normalizeCount(counts.likes, state.counts.likes);
|
|
1362
|
+
renderSimulator(state);
|
|
1363
|
+
},
|
|
1364
|
+
setLeaderboardVisible: (visible) => {
|
|
1365
|
+
state.leaderboard.visible = visible;
|
|
1366
|
+
renderSimulator(state);
|
|
1367
|
+
},
|
|
1368
|
+
setLiked: (liked) => {
|
|
1369
|
+
if (state.wasLiked === liked) {
|
|
1370
|
+
return;
|
|
1371
|
+
}
|
|
1372
|
+
state.wasLiked = liked;
|
|
1373
|
+
state.counts.likes = Math.max(0, state.counts.likes + (liked ? 1 : -1));
|
|
1374
|
+
renderSimulator(state);
|
|
1375
|
+
},
|
|
1376
|
+
show: () => {
|
|
1377
|
+
state.visible = true;
|
|
1378
|
+
renderSimulator(state);
|
|
1379
|
+
},
|
|
1380
|
+
triggerBack: () => state.backHandle.triggerBack(),
|
|
1381
|
+
triggerLeave: () => state.backHandle.triggerLeave()
|
|
1382
|
+
};
|
|
1383
|
+
browserWindow.__oasizAppSimulatorHandle__ = handle;
|
|
1384
|
+
renderSimulator(state);
|
|
1385
|
+
return handle;
|
|
1386
|
+
}
|
|
1387
|
+
|
|
1388
|
+
// src/character.ts
|
|
1389
|
+
function isDevelopment2() {
|
|
1390
|
+
const nodeEnv = globalThis.process?.env?.NODE_ENV;
|
|
1391
|
+
return nodeEnv !== "production";
|
|
1392
|
+
}
|
|
1393
|
+
function getBridgeWindow2() {
|
|
1394
|
+
if (typeof window === "undefined") {
|
|
1395
|
+
return void 0;
|
|
1396
|
+
}
|
|
1397
|
+
return window;
|
|
1398
|
+
}
|
|
1399
|
+
function warnMissingBridge2(methodName) {
|
|
1400
|
+
if (isDevelopment2()) {
|
|
1401
|
+
console.warn(
|
|
1402
|
+
"[oasiz/sdk] " + methodName + " bridge is unavailable. This is expected in local development."
|
|
1403
|
+
);
|
|
1404
|
+
}
|
|
1405
|
+
}
|
|
1406
|
+
async function getPlayerCharacter() {
|
|
1407
|
+
const bridge = getBridgeWindow2();
|
|
1408
|
+
if (typeof bridge?.__oasizGetPlayerCharacter !== "function") {
|
|
1409
|
+
warnMissingBridge2("getPlayerCharacter");
|
|
1410
|
+
return null;
|
|
1411
|
+
}
|
|
1412
|
+
try {
|
|
1413
|
+
const result = await bridge.__oasizGetPlayerCharacter();
|
|
1414
|
+
return result ?? null;
|
|
1415
|
+
} catch (error) {
|
|
1416
|
+
if (isDevelopment2()) {
|
|
1417
|
+
console.error("[oasiz/sdk] getPlayerCharacter failed:", error);
|
|
1418
|
+
}
|
|
1419
|
+
return null;
|
|
1420
|
+
}
|
|
1421
|
+
}
|
|
1422
|
+
|
|
1423
|
+
// src/haptics.ts
|
|
1424
|
+
function isDevelopment3() {
|
|
1425
|
+
const nodeEnv = globalThis.process?.env?.NODE_ENV;
|
|
1426
|
+
return nodeEnv !== "production";
|
|
1427
|
+
}
|
|
1428
|
+
function getBridgeWindow3() {
|
|
1429
|
+
if (typeof window === "undefined") {
|
|
1430
|
+
return void 0;
|
|
1431
|
+
}
|
|
1432
|
+
return window;
|
|
1433
|
+
}
|
|
1434
|
+
function triggerHaptic(type) {
|
|
1435
|
+
const bridge = getBridgeWindow3();
|
|
1436
|
+
if (typeof bridge?.triggerHaptic === "function") {
|
|
1437
|
+
bridge.triggerHaptic(type);
|
|
1438
|
+
return;
|
|
1439
|
+
}
|
|
1440
|
+
if (isDevelopment3()) {
|
|
1441
|
+
console.warn(
|
|
1442
|
+
"[oasiz/sdk] triggerHaptic bridge is unavailable. This is expected in local development."
|
|
1443
|
+
);
|
|
1444
|
+
}
|
|
1445
|
+
}
|
|
1446
|
+
|
|
1447
|
+
// src/jibble.ts
|
|
1448
|
+
var JIBBLE_DIRECTIONS = [
|
|
1449
|
+
"n",
|
|
1450
|
+
"ne",
|
|
1451
|
+
"e",
|
|
1452
|
+
"se",
|
|
1453
|
+
"s",
|
|
1454
|
+
"sw",
|
|
1455
|
+
"w",
|
|
1456
|
+
"nw"
|
|
1457
|
+
];
|
|
1458
|
+
var JIBBLE_ANIMATION = {
|
|
1459
|
+
Idle: {
|
|
1460
|
+
North: "idle_n",
|
|
1461
|
+
NorthEast: "idle_ne",
|
|
1462
|
+
East: "idle_e",
|
|
1463
|
+
SouthEast: "idle_se",
|
|
1464
|
+
South: "idle_s",
|
|
1465
|
+
SouthWest: "idle_sw",
|
|
1466
|
+
West: "idle_w",
|
|
1467
|
+
NorthWest: "idle_nw"
|
|
1468
|
+
},
|
|
1469
|
+
Walk: {
|
|
1470
|
+
North: "walk_n",
|
|
1471
|
+
NorthEast: "walk_ne",
|
|
1472
|
+
East: "walk_e",
|
|
1473
|
+
SouthEast: "walk_se",
|
|
1474
|
+
South: "walk_s",
|
|
1475
|
+
SouthWest: "walk_sw",
|
|
1476
|
+
West: "walk_w",
|
|
1477
|
+
NorthWest: "walk_nw"
|
|
1478
|
+
},
|
|
1479
|
+
Backflip: "backflip"
|
|
1480
|
+
};
|
|
1481
|
+
var JIBBLE_ANIMATION_IDS = [
|
|
1482
|
+
JIBBLE_ANIMATION.Idle.North,
|
|
1483
|
+
JIBBLE_ANIMATION.Idle.NorthEast,
|
|
1484
|
+
JIBBLE_ANIMATION.Idle.East,
|
|
1485
|
+
JIBBLE_ANIMATION.Idle.SouthEast,
|
|
1486
|
+
JIBBLE_ANIMATION.Idle.South,
|
|
1487
|
+
JIBBLE_ANIMATION.Idle.SouthWest,
|
|
1488
|
+
JIBBLE_ANIMATION.Idle.West,
|
|
1489
|
+
JIBBLE_ANIMATION.Idle.NorthWest,
|
|
1490
|
+
JIBBLE_ANIMATION.Walk.North,
|
|
1491
|
+
JIBBLE_ANIMATION.Walk.NorthEast,
|
|
1492
|
+
JIBBLE_ANIMATION.Walk.East,
|
|
1493
|
+
JIBBLE_ANIMATION.Walk.SouthEast,
|
|
1494
|
+
JIBBLE_ANIMATION.Walk.South,
|
|
1495
|
+
JIBBLE_ANIMATION.Walk.SouthWest,
|
|
1496
|
+
JIBBLE_ANIMATION.Walk.West,
|
|
1497
|
+
JIBBLE_ANIMATION.Walk.NorthWest,
|
|
1498
|
+
JIBBLE_ANIMATION.Backflip
|
|
1499
|
+
];
|
|
1500
|
+
var JIBBLE_DIRECTION_ALIASES = {
|
|
1501
|
+
n: "n",
|
|
1502
|
+
ne: "ne",
|
|
1503
|
+
e: "e",
|
|
1504
|
+
se: "se",
|
|
1505
|
+
s: "s",
|
|
1506
|
+
sw: "sw",
|
|
1507
|
+
w: "w",
|
|
1508
|
+
nw: "nw",
|
|
1509
|
+
front: "s",
|
|
1510
|
+
back: "n",
|
|
1511
|
+
left: "w",
|
|
1512
|
+
right: "e"
|
|
1513
|
+
};
|
|
1514
|
+
function normalizeJibbleDirection(direction) {
|
|
1515
|
+
return JIBBLE_DIRECTION_ALIASES[direction];
|
|
1516
|
+
}
|
|
1517
|
+
function getJibbleAnimationId(action, direction = "front") {
|
|
1518
|
+
if (action === "backflip") {
|
|
1519
|
+
return JIBBLE_ANIMATION.Backflip;
|
|
1520
|
+
}
|
|
1521
|
+
return `${action}_${normalizeJibbleDirection(direction)}`;
|
|
1522
|
+
}
|
|
1523
|
+
|
|
1524
|
+
// src/log-overlay.ts
|
|
1525
|
+
var CONSOLE_METHODS = [
|
|
1526
|
+
"debug",
|
|
1527
|
+
"log",
|
|
1528
|
+
"info",
|
|
1529
|
+
"warn",
|
|
1530
|
+
"error"
|
|
1531
|
+
];
|
|
1532
|
+
var DEFAULT_MAX_ENTRIES = 200;
|
|
1533
|
+
var DEFAULT_TITLE = "SDK Logs";
|
|
1534
|
+
var OVERLAY_MARGIN = 12;
|
|
1535
|
+
var DEFAULT_COLLAPSED_WIDTH = 156;
|
|
1536
|
+
var DEFAULT_COLLAPSED_HEIGHT = 52;
|
|
1537
|
+
var DEFAULT_EXPANDED_WIDTH = 565;
|
|
1538
|
+
var DEFAULT_EXPANDED_HEIGHT = 372;
|
|
1539
|
+
var DRAG_THRESHOLD_PX = 6;
|
|
1540
|
+
var MIN_EXPANDED_WIDTH = 160;
|
|
1541
|
+
var MIN_EXPANDED_HEIGHT = 110;
|
|
1542
|
+
var RESIZE_HOTSPOT_PX = 28;
|
|
1543
|
+
var TOP_DRAG_ZONE_PX = 44;
|
|
1544
|
+
var NOOP_HANDLE2 = {
|
|
1545
|
+
clear() {
|
|
1546
|
+
},
|
|
1547
|
+
destroy() {
|
|
1548
|
+
},
|
|
1549
|
+
hide() {
|
|
1550
|
+
},
|
|
1551
|
+
isVisible() {
|
|
1552
|
+
return false;
|
|
1553
|
+
},
|
|
1554
|
+
show() {
|
|
1555
|
+
}
|
|
1556
|
+
};
|
|
1557
|
+
function getBrowserWindow2() {
|
|
1558
|
+
if (typeof window === "undefined") {
|
|
1559
|
+
return void 0;
|
|
1560
|
+
}
|
|
1561
|
+
return window;
|
|
1562
|
+
}
|
|
1563
|
+
function getDocument2() {
|
|
1564
|
+
if (typeof document === "undefined") {
|
|
1565
|
+
return void 0;
|
|
1566
|
+
}
|
|
1567
|
+
return document;
|
|
1568
|
+
}
|
|
1569
|
+
function clampMaxEntries(value) {
|
|
1570
|
+
if (!Number.isFinite(value)) {
|
|
1571
|
+
return DEFAULT_MAX_ENTRIES;
|
|
1572
|
+
}
|
|
1573
|
+
return Math.max(10, Math.floor(value));
|
|
1574
|
+
}
|
|
1575
|
+
function createConsoleSnapshot() {
|
|
1576
|
+
const fallback = console.log.bind(console);
|
|
1577
|
+
return {
|
|
1578
|
+
debug: typeof console.debug === "function" ? console.debug.bind(console) : fallback,
|
|
1579
|
+
log: fallback,
|
|
1580
|
+
info: typeof console.info === "function" ? console.info.bind(console) : fallback,
|
|
1581
|
+
warn: typeof console.warn === "function" ? console.warn.bind(console) : fallback,
|
|
1582
|
+
error: typeof console.error === "function" ? console.error.bind(console) : fallback
|
|
1583
|
+
};
|
|
1584
|
+
}
|
|
1585
|
+
function formatTimestamp(timestamp) {
|
|
1586
|
+
const date = new Date(timestamp);
|
|
1587
|
+
const hours = String(date.getHours()).padStart(2, "0");
|
|
1588
|
+
const minutes = String(date.getMinutes()).padStart(2, "0");
|
|
1589
|
+
const seconds = String(date.getSeconds()).padStart(2, "0");
|
|
1590
|
+
const milliseconds = String(date.getMilliseconds()).padStart(3, "0");
|
|
1591
|
+
return "[" + hours + ":" + minutes + ":" + seconds + "." + milliseconds + "]";
|
|
1592
|
+
}
|
|
1593
|
+
function safeStringify(value) {
|
|
1594
|
+
const seen = /* @__PURE__ */ new WeakSet();
|
|
1595
|
+
try {
|
|
1596
|
+
return JSON.stringify(
|
|
1597
|
+
value,
|
|
1598
|
+
(_key, candidate) => {
|
|
1599
|
+
if (typeof candidate === "bigint") {
|
|
1600
|
+
return candidate.toString() + "n";
|
|
1601
|
+
}
|
|
1602
|
+
if (typeof candidate === "object" && candidate !== null) {
|
|
1603
|
+
if (seen.has(candidate)) {
|
|
1604
|
+
return "[Circular]";
|
|
1605
|
+
}
|
|
1606
|
+
seen.add(candidate);
|
|
1607
|
+
}
|
|
1608
|
+
return candidate;
|
|
1609
|
+
},
|
|
1610
|
+
2
|
|
1611
|
+
) ?? String(value);
|
|
1612
|
+
} catch {
|
|
1613
|
+
return String(value);
|
|
1614
|
+
}
|
|
1615
|
+
}
|
|
1616
|
+
function formatArg(value) {
|
|
1617
|
+
if (typeof value === "string") {
|
|
1618
|
+
return value;
|
|
1619
|
+
}
|
|
1620
|
+
if (value instanceof Error) {
|
|
1621
|
+
if (value.stack) {
|
|
1622
|
+
return value.stack;
|
|
1623
|
+
}
|
|
1624
|
+
return value.name + ": " + value.message;
|
|
1625
|
+
}
|
|
1626
|
+
if (typeof value === "undefined") {
|
|
1627
|
+
return "undefined";
|
|
1628
|
+
}
|
|
1629
|
+
if (typeof value === "function") {
|
|
1630
|
+
return "[Function " + (value.name || "anonymous") + "]";
|
|
1631
|
+
}
|
|
1632
|
+
return safeStringify(value);
|
|
1633
|
+
}
|
|
1634
|
+
function formatEntryMessage(args) {
|
|
1635
|
+
const message = args.map(formatArg).join(" ");
|
|
1636
|
+
if (message.length <= 4e3) {
|
|
1637
|
+
return message;
|
|
1638
|
+
}
|
|
1639
|
+
return message.slice(0, 3997) + "...";
|
|
1640
|
+
}
|
|
1641
|
+
function createEntry(level, args, id) {
|
|
1642
|
+
return {
|
|
1643
|
+
id,
|
|
1644
|
+
level,
|
|
1645
|
+
message: formatEntryMessage(args),
|
|
1646
|
+
timestamp: Date.now()
|
|
1647
|
+
};
|
|
1648
|
+
}
|
|
1649
|
+
function createButton2(label) {
|
|
1650
|
+
const button = document.createElement("button");
|
|
1651
|
+
button.type = "button";
|
|
1652
|
+
button.textContent = label;
|
|
1653
|
+
button.style.cssText = [
|
|
1654
|
+
"appearance:none",
|
|
1655
|
+
"border:1px solid rgba(255,255,255,0.18)",
|
|
1656
|
+
"background:rgba(255,255,255,0.06)",
|
|
1657
|
+
"color:#f8fafc",
|
|
1658
|
+
"border-radius:999px",
|
|
1659
|
+
"padding:6px 10px",
|
|
1660
|
+
"font:600 12px/1.1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace",
|
|
1661
|
+
"cursor:pointer"
|
|
1662
|
+
].join(";");
|
|
1663
|
+
return button;
|
|
1664
|
+
}
|
|
1665
|
+
function getLevelAccent(level) {
|
|
1666
|
+
if (level === "error") {
|
|
1667
|
+
return {
|
|
1668
|
+
lineBackground: "rgba(255, 109, 122, 0.08)"
|
|
1669
|
+
};
|
|
1670
|
+
}
|
|
1671
|
+
if (level === "warn") {
|
|
1672
|
+
return {
|
|
1673
|
+
lineBackground: "rgba(255, 196, 94, 0.07)"
|
|
1674
|
+
};
|
|
1675
|
+
}
|
|
1676
|
+
if (level === "info") {
|
|
1677
|
+
return {
|
|
1678
|
+
lineBackground: "rgba(82, 187, 255, 0.07)"
|
|
1679
|
+
};
|
|
1680
|
+
}
|
|
1681
|
+
if (level === "debug") {
|
|
1682
|
+
return {
|
|
1683
|
+
lineBackground: "rgba(166, 137, 255, 0.07)"
|
|
1684
|
+
};
|
|
1685
|
+
}
|
|
1686
|
+
return {
|
|
1687
|
+
lineBackground: "rgba(117, 235, 191, 0.06)"
|
|
1688
|
+
};
|
|
1689
|
+
}
|
|
1690
|
+
function getViewportSize() {
|
|
1691
|
+
const browserWindow = getBrowserWindow2();
|
|
1692
|
+
return {
|
|
1693
|
+
width: Math.max(320, browserWindow?.innerWidth ?? 1280),
|
|
1694
|
+
height: Math.max(240, browserWindow?.innerHeight ?? 720)
|
|
1695
|
+
};
|
|
1696
|
+
}
|
|
1697
|
+
function clampPanelSize(size) {
|
|
1698
|
+
const viewport = getViewportSize();
|
|
1699
|
+
const maxWidth = Math.max(MIN_EXPANDED_WIDTH, viewport.width - OVERLAY_MARGIN * 2);
|
|
1700
|
+
const maxHeight = Math.max(
|
|
1701
|
+
MIN_EXPANDED_HEIGHT,
|
|
1702
|
+
viewport.height - OVERLAY_MARGIN * 2
|
|
1703
|
+
);
|
|
1704
|
+
return {
|
|
1705
|
+
width: Math.min(maxWidth, Math.max(MIN_EXPANDED_WIDTH, size.width)),
|
|
1706
|
+
height: Math.min(maxHeight, Math.max(MIN_EXPANDED_HEIGHT, size.height))
|
|
1707
|
+
};
|
|
1708
|
+
}
|
|
1709
|
+
function getOverlaySize(state) {
|
|
1710
|
+
if (state.expanded && state.panelSize) {
|
|
1711
|
+
return state.panelSize;
|
|
1712
|
+
}
|
|
1713
|
+
const rect = state.ui?.root && typeof state.ui.root.getBoundingClientRect === "function" ? state.ui.root.getBoundingClientRect() : null;
|
|
1714
|
+
if (rect && Number.isFinite(rect.width) && Number.isFinite(rect.height)) {
|
|
1715
|
+
return {
|
|
1716
|
+
width: Math.max(1, rect.width),
|
|
1717
|
+
height: Math.max(1, rect.height)
|
|
1718
|
+
};
|
|
1719
|
+
}
|
|
1720
|
+
return state.expanded ? clampPanelSize({
|
|
1721
|
+
width: DEFAULT_EXPANDED_WIDTH,
|
|
1722
|
+
height: DEFAULT_EXPANDED_HEIGHT
|
|
1723
|
+
}) : { width: DEFAULT_COLLAPSED_WIDTH, height: DEFAULT_COLLAPSED_HEIGHT };
|
|
1724
|
+
}
|
|
1725
|
+
function applyPanelSize(state) {
|
|
1726
|
+
if (!state.ui) {
|
|
16
1727
|
return;
|
|
17
1728
|
}
|
|
18
|
-
if (
|
|
19
|
-
|
|
20
|
-
|
|
1729
|
+
if (!state.expanded) {
|
|
1730
|
+
state.ui.root.style.width = "auto";
|
|
1731
|
+
state.ui.panel.style.width = "min(565px, calc(100vw - 24px))";
|
|
1732
|
+
state.ui.panel.style.height = "auto";
|
|
1733
|
+
state.ui.entries.style.maxHeight = "min(36vh, 280px)";
|
|
1734
|
+
return;
|
|
1735
|
+
}
|
|
1736
|
+
if (!state.panelSize) {
|
|
1737
|
+
state.ui.root.style.width = "min(565px, calc(100vw - 24px))";
|
|
1738
|
+
state.ui.panel.style.width = "min(565px, calc(100vw - 24px))";
|
|
1739
|
+
state.ui.panel.style.height = "auto";
|
|
1740
|
+
state.ui.entries.style.maxHeight = "min(36vh, 280px)";
|
|
1741
|
+
return;
|
|
1742
|
+
}
|
|
1743
|
+
const nextSize = clampPanelSize(
|
|
1744
|
+
state.panelSize
|
|
1745
|
+
);
|
|
1746
|
+
state.panelSize = nextSize;
|
|
1747
|
+
state.ui.root.style.width = nextSize.width + "px";
|
|
1748
|
+
state.ui.panel.style.width = "100%";
|
|
1749
|
+
state.ui.panel.style.height = nextSize.height + "px";
|
|
1750
|
+
state.ui.entries.style.maxHeight = Math.max(72, nextSize.height - 88) + "px";
|
|
1751
|
+
}
|
|
1752
|
+
function clampPosition(point, state) {
|
|
1753
|
+
const viewport = getViewportSize();
|
|
1754
|
+
const size = getOverlaySize(state);
|
|
1755
|
+
const maxX = Math.max(OVERLAY_MARGIN, viewport.width - size.width - OVERLAY_MARGIN);
|
|
1756
|
+
const maxY = Math.max(
|
|
1757
|
+
OVERLAY_MARGIN,
|
|
1758
|
+
viewport.height - size.height - OVERLAY_MARGIN
|
|
1759
|
+
);
|
|
1760
|
+
return {
|
|
1761
|
+
x: Math.min(maxX, Math.max(OVERLAY_MARGIN, point.x)),
|
|
1762
|
+
y: Math.min(maxY, Math.max(OVERLAY_MARGIN, point.y))
|
|
1763
|
+
};
|
|
1764
|
+
}
|
|
1765
|
+
function applyOverlayPosition(state) {
|
|
1766
|
+
if (!state.ui) {
|
|
1767
|
+
return;
|
|
1768
|
+
}
|
|
1769
|
+
if (!state.position) {
|
|
1770
|
+
const viewport = getViewportSize();
|
|
1771
|
+
const size = getOverlaySize(state);
|
|
1772
|
+
state.position = clampPosition(
|
|
1773
|
+
{
|
|
1774
|
+
x: viewport.width - size.width - OVERLAY_MARGIN,
|
|
1775
|
+
y: viewport.height - size.height - OVERLAY_MARGIN
|
|
1776
|
+
},
|
|
1777
|
+
state
|
|
21
1778
|
);
|
|
1779
|
+
} else {
|
|
1780
|
+
state.position = clampPosition(state.position, state);
|
|
22
1781
|
}
|
|
1782
|
+
state.ui.root.style.left = state.position.x + "px";
|
|
1783
|
+
state.ui.root.style.top = state.position.y + "px";
|
|
23
1784
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
function
|
|
28
|
-
|
|
29
|
-
|
|
1785
|
+
function getPointFromMouseEvent(event) {
|
|
1786
|
+
return { x: event.clientX, y: event.clientY };
|
|
1787
|
+
}
|
|
1788
|
+
function getPointFromTouchEvent(event) {
|
|
1789
|
+
const touch = event.touches[0] ?? event.changedTouches[0];
|
|
1790
|
+
if (!touch) {
|
|
1791
|
+
return null;
|
|
30
1792
|
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
1793
|
+
return { x: touch.clientX, y: touch.clientY };
|
|
1794
|
+
}
|
|
1795
|
+
function stopDragging(state) {
|
|
1796
|
+
if (state.isDragging || state.isResizing) {
|
|
1797
|
+
state.suppressToggleClickUntil = Date.now() + 180;
|
|
1798
|
+
}
|
|
1799
|
+
state.isDragging = false;
|
|
1800
|
+
state.dragStartPoint = null;
|
|
1801
|
+
state.lastDragPoint = null;
|
|
1802
|
+
state.removeDragListeners?.();
|
|
1803
|
+
state.removeDragListeners = null;
|
|
1804
|
+
if (state.ui) {
|
|
1805
|
+
state.ui.panel.style.cursor = "default";
|
|
1806
|
+
state.ui.dragZone.style.cursor = "grab";
|
|
1807
|
+
state.ui.toggleButton.style.cursor = "grab";
|
|
34
1808
|
}
|
|
35
|
-
return normalized;
|
|
36
1809
|
}
|
|
37
|
-
function
|
|
1810
|
+
function stopResizing(state) {
|
|
1811
|
+
if (state.isResizing) {
|
|
1812
|
+
state.suppressToggleClickUntil = Date.now() + 180;
|
|
1813
|
+
}
|
|
1814
|
+
state.isResizing = false;
|
|
1815
|
+
state.resizeStartPoint = null;
|
|
1816
|
+
state.resizeStartSize = null;
|
|
1817
|
+
state.removeResizeListeners?.();
|
|
1818
|
+
state.removeResizeListeners = null;
|
|
1819
|
+
}
|
|
1820
|
+
function beginDragTracking(state, startPoint) {
|
|
1821
|
+
const doc = getDocument2();
|
|
1822
|
+
if (!doc) {
|
|
1823
|
+
return;
|
|
1824
|
+
}
|
|
1825
|
+
stopResizing(state);
|
|
1826
|
+
stopDragging(state);
|
|
1827
|
+
state.dragMoved = false;
|
|
1828
|
+
state.dragStartPoint = startPoint;
|
|
1829
|
+
state.lastDragPoint = startPoint;
|
|
1830
|
+
const handlePointerMove = (nextPoint) => {
|
|
1831
|
+
if (!state.dragStartPoint || !state.lastDragPoint || !nextPoint) {
|
|
1832
|
+
return;
|
|
1833
|
+
}
|
|
1834
|
+
if (!state.isDragging) {
|
|
1835
|
+
const deltaFromStartX = nextPoint.x - state.dragStartPoint.x;
|
|
1836
|
+
const deltaFromStartY = nextPoint.y - state.dragStartPoint.y;
|
|
1837
|
+
const distance = Math.sqrt(
|
|
1838
|
+
deltaFromStartX * deltaFromStartX + deltaFromStartY * deltaFromStartY
|
|
1839
|
+
);
|
|
1840
|
+
if (distance < DRAG_THRESHOLD_PX) {
|
|
1841
|
+
return;
|
|
1842
|
+
}
|
|
1843
|
+
state.isDragging = true;
|
|
1844
|
+
state.dragMoved = true;
|
|
1845
|
+
if (state.ui) {
|
|
1846
|
+
state.ui.panel.style.cursor = "grabbing";
|
|
1847
|
+
state.ui.dragZone.style.cursor = "grabbing";
|
|
1848
|
+
state.ui.toggleButton.style.cursor = "grabbing";
|
|
1849
|
+
}
|
|
1850
|
+
}
|
|
1851
|
+
const currentPosition = state.position ?? { x: OVERLAY_MARGIN, y: OVERLAY_MARGIN };
|
|
1852
|
+
state.position = clampPosition(
|
|
1853
|
+
{
|
|
1854
|
+
x: currentPosition.x + (nextPoint.x - state.lastDragPoint.x),
|
|
1855
|
+
y: currentPosition.y + (nextPoint.y - state.lastDragPoint.y)
|
|
1856
|
+
},
|
|
1857
|
+
state
|
|
1858
|
+
);
|
|
1859
|
+
state.lastDragPoint = nextPoint;
|
|
1860
|
+
applyOverlayPosition(state);
|
|
1861
|
+
};
|
|
1862
|
+
const handleMouseMove = (event) => {
|
|
1863
|
+
handlePointerMove(getPointFromMouseEvent(event));
|
|
1864
|
+
};
|
|
1865
|
+
const handleTouchMove = (event) => {
|
|
1866
|
+
handlePointerMove(getPointFromTouchEvent(event));
|
|
1867
|
+
};
|
|
1868
|
+
const handleMouseUp = () => {
|
|
1869
|
+
stopDragging(state);
|
|
1870
|
+
};
|
|
1871
|
+
const handleTouchEnd = () => {
|
|
1872
|
+
stopDragging(state);
|
|
1873
|
+
};
|
|
1874
|
+
doc.addEventListener("mousemove", handleMouseMove);
|
|
1875
|
+
doc.addEventListener("mouseup", handleMouseUp);
|
|
1876
|
+
doc.addEventListener("touchmove", handleTouchMove, { passive: true });
|
|
1877
|
+
doc.addEventListener("touchend", handleTouchEnd);
|
|
1878
|
+
doc.addEventListener("touchcancel", handleTouchEnd);
|
|
1879
|
+
state.removeDragListeners = () => {
|
|
1880
|
+
doc.removeEventListener("mousemove", handleMouseMove);
|
|
1881
|
+
doc.removeEventListener("mouseup", handleMouseUp);
|
|
1882
|
+
doc.removeEventListener("touchmove", handleTouchMove);
|
|
1883
|
+
doc.removeEventListener("touchend", handleTouchEnd);
|
|
1884
|
+
doc.removeEventListener("touchcancel", handleTouchEnd);
|
|
1885
|
+
};
|
|
1886
|
+
}
|
|
1887
|
+
function startResizing(state, startPoint) {
|
|
1888
|
+
const doc = getDocument2();
|
|
1889
|
+
if (!doc) {
|
|
1890
|
+
return;
|
|
1891
|
+
}
|
|
1892
|
+
stopDragging(state);
|
|
1893
|
+
stopResizing(state);
|
|
1894
|
+
state.isResizing = true;
|
|
1895
|
+
state.resizeStartPoint = startPoint;
|
|
1896
|
+
state.resizeStartSize = state.panelSize ?? clampPanelSize({ width: DEFAULT_EXPANDED_WIDTH, height: DEFAULT_EXPANDED_HEIGHT });
|
|
1897
|
+
const handleResizeMove = (nextPoint) => {
|
|
1898
|
+
if (!state.isResizing || !state.resizeStartPoint || !state.resizeStartSize || !nextPoint) {
|
|
1899
|
+
return;
|
|
1900
|
+
}
|
|
1901
|
+
state.panelSize = clampPanelSize({
|
|
1902
|
+
width: state.resizeStartSize.width + (nextPoint.x - state.resizeStartPoint.x),
|
|
1903
|
+
height: state.resizeStartSize.height + (nextPoint.y - state.resizeStartPoint.y)
|
|
1904
|
+
});
|
|
1905
|
+
applyPanelSize(state);
|
|
1906
|
+
applyOverlayPosition(state);
|
|
1907
|
+
};
|
|
1908
|
+
const handleMouseMove = (event) => {
|
|
1909
|
+
handleResizeMove(getPointFromMouseEvent(event));
|
|
1910
|
+
};
|
|
1911
|
+
const handleTouchMove = (event) => {
|
|
1912
|
+
handleResizeMove(getPointFromTouchEvent(event));
|
|
1913
|
+
};
|
|
1914
|
+
const handleFinish = () => {
|
|
1915
|
+
stopResizing(state);
|
|
1916
|
+
};
|
|
1917
|
+
doc.addEventListener("mousemove", handleMouseMove);
|
|
1918
|
+
doc.addEventListener("mouseup", handleFinish);
|
|
1919
|
+
doc.addEventListener("touchmove", handleTouchMove, { passive: true });
|
|
1920
|
+
doc.addEventListener("touchend", handleFinish);
|
|
1921
|
+
doc.addEventListener("touchcancel", handleFinish);
|
|
1922
|
+
state.removeResizeListeners = () => {
|
|
1923
|
+
doc.removeEventListener("mousemove", handleMouseMove);
|
|
1924
|
+
doc.removeEventListener("mouseup", handleFinish);
|
|
1925
|
+
doc.removeEventListener("touchmove", handleTouchMove);
|
|
1926
|
+
doc.removeEventListener("touchend", handleFinish);
|
|
1927
|
+
doc.removeEventListener("touchcancel", handleFinish);
|
|
1928
|
+
};
|
|
1929
|
+
}
|
|
1930
|
+
function isInBottomRightResizeZone(element, point) {
|
|
1931
|
+
const rect = element.getBoundingClientRect();
|
|
1932
|
+
return point.x >= rect.right - RESIZE_HOTSPOT_PX && point.x <= rect.right && point.y >= rect.bottom - RESIZE_HOTSPOT_PX && point.y <= rect.bottom;
|
|
1933
|
+
}
|
|
1934
|
+
function canStartDragFromTarget(target) {
|
|
1935
|
+
if (!(target instanceof Element)) {
|
|
1936
|
+
return true;
|
|
1937
|
+
}
|
|
1938
|
+
if (target.closest("button") || target.closest("a") || target.closest("input") || target.closest("textarea") || target.closest("select")) {
|
|
1939
|
+
return false;
|
|
1940
|
+
}
|
|
1941
|
+
return true;
|
|
1942
|
+
}
|
|
1943
|
+
function isInTopDragZone(element, point, zoneHeight) {
|
|
1944
|
+
const rect = element.getBoundingClientRect();
|
|
1945
|
+
return point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.top + zoneHeight;
|
|
1946
|
+
}
|
|
1947
|
+
function attachDragStartListeners(element, state, options = {}) {
|
|
1948
|
+
element.addEventListener("mousedown", (event) => {
|
|
1949
|
+
if (!options.allowInteractiveTarget && !canStartDragFromTarget(event.target)) {
|
|
1950
|
+
return;
|
|
1951
|
+
}
|
|
1952
|
+
const point = getPointFromMouseEvent(event);
|
|
1953
|
+
if (typeof options.topZoneHeight === "number" && !isInTopDragZone(element, point, options.topZoneHeight)) {
|
|
1954
|
+
return;
|
|
1955
|
+
}
|
|
1956
|
+
beginDragTracking(state, point);
|
|
1957
|
+
});
|
|
1958
|
+
element.addEventListener("touchstart", (event) => {
|
|
1959
|
+
if (!options.allowInteractiveTarget && !canStartDragFromTarget(event.target)) {
|
|
1960
|
+
return;
|
|
1961
|
+
}
|
|
1962
|
+
const point = getPointFromTouchEvent(event);
|
|
1963
|
+
if (!point) {
|
|
1964
|
+
return;
|
|
1965
|
+
}
|
|
1966
|
+
if (typeof options.topZoneHeight === "number" && !isInTopDragZone(element, point, options.topZoneHeight)) {
|
|
1967
|
+
return;
|
|
1968
|
+
}
|
|
1969
|
+
beginDragTracking(state, point);
|
|
1970
|
+
});
|
|
1971
|
+
}
|
|
1972
|
+
function attachCollapsedToggleListeners(element, state) {
|
|
1973
|
+
const startToggleInteraction = (startPoint) => {
|
|
1974
|
+
const doc = getDocument2();
|
|
1975
|
+
if (!doc) {
|
|
1976
|
+
return;
|
|
1977
|
+
}
|
|
1978
|
+
beginDragTracking(state, startPoint);
|
|
1979
|
+
const finishInteraction = () => {
|
|
1980
|
+
releaseListeners();
|
|
1981
|
+
if (state.dragMoved || Date.now() < state.suppressToggleClickUntil) {
|
|
1982
|
+
return;
|
|
1983
|
+
}
|
|
1984
|
+
state.expanded = true;
|
|
1985
|
+
state.unreadCount = 0;
|
|
1986
|
+
renderOverlay(state);
|
|
1987
|
+
};
|
|
1988
|
+
const releaseListeners = () => {
|
|
1989
|
+
doc.removeEventListener("mouseup", finishInteraction);
|
|
1990
|
+
doc.removeEventListener("touchend", finishInteraction);
|
|
1991
|
+
doc.removeEventListener("touchcancel", finishInteraction);
|
|
1992
|
+
};
|
|
1993
|
+
doc.addEventListener("mouseup", finishInteraction);
|
|
1994
|
+
doc.addEventListener("touchend", finishInteraction);
|
|
1995
|
+
doc.addEventListener("touchcancel", finishInteraction);
|
|
1996
|
+
};
|
|
1997
|
+
element.addEventListener("mousedown", (event) => {
|
|
1998
|
+
event.preventDefault();
|
|
1999
|
+
startToggleInteraction(getPointFromMouseEvent(event));
|
|
2000
|
+
});
|
|
2001
|
+
element.addEventListener("touchstart", (event) => {
|
|
2002
|
+
const point = getPointFromTouchEvent(event);
|
|
2003
|
+
if (!point) {
|
|
2004
|
+
return;
|
|
2005
|
+
}
|
|
2006
|
+
event.preventDefault();
|
|
2007
|
+
startToggleInteraction(point);
|
|
2008
|
+
});
|
|
2009
|
+
}
|
|
2010
|
+
function attachPanelResizeListeners(element, state) {
|
|
2011
|
+
element.addEventListener("mousedown", (event) => {
|
|
2012
|
+
if (!state.expanded || !canStartDragFromTarget(event.target)) {
|
|
2013
|
+
return;
|
|
2014
|
+
}
|
|
2015
|
+
const point = getPointFromMouseEvent(event);
|
|
2016
|
+
if (!isInBottomRightResizeZone(element, point)) {
|
|
2017
|
+
return;
|
|
2018
|
+
}
|
|
2019
|
+
event.preventDefault();
|
|
2020
|
+
event.stopPropagation();
|
|
2021
|
+
startResizing(state, point);
|
|
2022
|
+
});
|
|
2023
|
+
element.addEventListener("touchstart", (event) => {
|
|
2024
|
+
if (!state.expanded || !canStartDragFromTarget(event.target)) {
|
|
2025
|
+
return;
|
|
2026
|
+
}
|
|
2027
|
+
const point = getPointFromTouchEvent(event);
|
|
2028
|
+
if (!point || !isInBottomRightResizeZone(element, point)) {
|
|
2029
|
+
return;
|
|
2030
|
+
}
|
|
2031
|
+
event.preventDefault();
|
|
2032
|
+
event.stopPropagation();
|
|
2033
|
+
startResizing(state, point);
|
|
2034
|
+
});
|
|
2035
|
+
}
|
|
2036
|
+
function createOverlayUi(state) {
|
|
2037
|
+
const root = document.createElement("div");
|
|
2038
|
+
root.style.cssText = [
|
|
2039
|
+
"position:fixed",
|
|
2040
|
+
"left:12px",
|
|
2041
|
+
"top:12px",
|
|
2042
|
+
"z-index:2147483647",
|
|
2043
|
+
"display:flex",
|
|
2044
|
+
"flex-direction:column",
|
|
2045
|
+
"align-items:stretch",
|
|
2046
|
+
"gap:8px",
|
|
2047
|
+
"width:min(565px, calc(100vw - 24px))",
|
|
2048
|
+
"pointer-events:none"
|
|
2049
|
+
].join(";");
|
|
2050
|
+
const toggleButton = createButton2("Logs");
|
|
2051
|
+
toggleButton.style.pointerEvents = "auto";
|
|
2052
|
+
toggleButton.style.alignSelf = "flex-end";
|
|
2053
|
+
toggleButton.style.display = "inline-flex";
|
|
2054
|
+
toggleButton.style.alignItems = "center";
|
|
2055
|
+
toggleButton.style.justifyContent = "center";
|
|
2056
|
+
toggleButton.style.minHeight = "40px";
|
|
2057
|
+
toggleButton.style.minWidth = "76px";
|
|
2058
|
+
toggleButton.style.padding = "8px 14px";
|
|
2059
|
+
toggleButton.style.textAlign = "center";
|
|
2060
|
+
toggleButton.style.border = "1px solid rgba(122, 212, 255, 0.22)";
|
|
2061
|
+
toggleButton.style.background = "linear-gradient(180deg, rgba(13,31,54,0.98), rgba(8,19,37,0.98))";
|
|
2062
|
+
toggleButton.style.boxShadow = "0 18px 40px rgba(4,12,24,0.34)";
|
|
2063
|
+
toggleButton.style.cursor = "grab";
|
|
2064
|
+
toggleButton.style.touchAction = "none";
|
|
2065
|
+
const panel = document.createElement("div");
|
|
2066
|
+
panel.style.cssText = [
|
|
2067
|
+
"position:relative",
|
|
2068
|
+
"display:flex",
|
|
2069
|
+
"flex-direction:column",
|
|
2070
|
+
"width:min(565px, calc(100vw - 24px))",
|
|
2071
|
+
"max-height:min(48vh, 372px)",
|
|
2072
|
+
"border-radius:18px",
|
|
2073
|
+
"border:1px solid rgba(116,167,255,0.16)",
|
|
2074
|
+
"background:linear-gradient(180deg, rgba(9,19,37,0.98), rgba(5,12,24,0.98))",
|
|
2075
|
+
"box-shadow:0 28px 64px rgba(2,8,18,0.46)",
|
|
2076
|
+
"backdrop-filter:blur(16px)",
|
|
2077
|
+
"overflow:hidden",
|
|
2078
|
+
"cursor:default",
|
|
2079
|
+
"pointer-events:auto"
|
|
2080
|
+
].join(";");
|
|
2081
|
+
const dragZone = document.createElement("div");
|
|
2082
|
+
dragZone.style.cssText = [
|
|
2083
|
+
"position:absolute",
|
|
2084
|
+
"top:0",
|
|
2085
|
+
"left:0",
|
|
2086
|
+
"right:0",
|
|
2087
|
+
"height:" + String(TOP_DRAG_ZONE_PX) + "px",
|
|
2088
|
+
"z-index:1",
|
|
2089
|
+
"cursor:grab",
|
|
2090
|
+
"background:transparent",
|
|
2091
|
+
"pointer-events:auto"
|
|
2092
|
+
].join(";");
|
|
2093
|
+
const controls = document.createElement("div");
|
|
2094
|
+
controls.style.cssText = [
|
|
2095
|
+
"position:absolute",
|
|
2096
|
+
"top:22px",
|
|
2097
|
+
"right:22px",
|
|
2098
|
+
"z-index:2",
|
|
2099
|
+
"display:flex",
|
|
2100
|
+
"align-items:center",
|
|
2101
|
+
"gap:8px",
|
|
2102
|
+
"pointer-events:auto"
|
|
2103
|
+
].join(";");
|
|
2104
|
+
const clearButton = createButton2("Clear");
|
|
2105
|
+
clearButton.style.background = "rgba(255,255,255,0.1)";
|
|
2106
|
+
clearButton.style.border = "1px solid rgba(255,255,255,0.16)";
|
|
2107
|
+
clearButton.style.color = "#eef6ff";
|
|
2108
|
+
clearButton.style.minHeight = "30px";
|
|
2109
|
+
clearButton.style.padding = "4px 9px";
|
|
2110
|
+
clearButton.style.fontSize = "11px";
|
|
2111
|
+
clearButton.style.backdropFilter = "blur(8px)";
|
|
2112
|
+
const collapseButton = createButton2("Hide");
|
|
2113
|
+
collapseButton.style.background = "rgba(113, 171, 255, 0.12)";
|
|
2114
|
+
collapseButton.style.border = "1px solid rgba(113, 171, 255, 0.2)";
|
|
2115
|
+
collapseButton.style.color = "#d9ebff";
|
|
2116
|
+
collapseButton.style.minHeight = "30px";
|
|
2117
|
+
collapseButton.style.padding = "4px 9px";
|
|
2118
|
+
collapseButton.style.fontSize = "11px";
|
|
2119
|
+
collapseButton.style.backdropFilter = "blur(8px)";
|
|
2120
|
+
const body = document.createElement("div");
|
|
2121
|
+
body.style.cssText = [
|
|
2122
|
+
"position:relative",
|
|
2123
|
+
"display:flex",
|
|
2124
|
+
"flex-direction:column",
|
|
2125
|
+
"padding:12px",
|
|
2126
|
+
"background:linear-gradient(180deg, rgba(4,10,20,0.88), rgba(3,8,18,0.98))",
|
|
2127
|
+
"flex:1 1 auto",
|
|
2128
|
+
"min-height:0"
|
|
2129
|
+
].join(";");
|
|
2130
|
+
const entries = document.createElement("div");
|
|
2131
|
+
entries.style.cssText = [
|
|
2132
|
+
"display:flex",
|
|
2133
|
+
"flex-direction:column",
|
|
2134
|
+
"gap:0",
|
|
2135
|
+
"overflow:auto",
|
|
2136
|
+
"flex:1 1 auto",
|
|
2137
|
+
"min-height:96px",
|
|
2138
|
+
"max-height:min(36vh, 280px)",
|
|
2139
|
+
"padding:0",
|
|
2140
|
+
"border:1px solid rgba(115,153,212,0.14)",
|
|
2141
|
+
"border-radius:12px",
|
|
2142
|
+
"background:rgba(4,10,20,0.82)"
|
|
2143
|
+
].join(";");
|
|
2144
|
+
const emptyState = document.createElement("div");
|
|
2145
|
+
emptyState.style.cssText = [
|
|
2146
|
+
"display:flex",
|
|
2147
|
+
"align-items:center",
|
|
2148
|
+
"justify-content:center",
|
|
2149
|
+
"flex:1 1 auto",
|
|
2150
|
+
"min-height:96px",
|
|
2151
|
+
"color:rgba(204,222,250,0.6)",
|
|
2152
|
+
"font:500 12px/1.5 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace",
|
|
2153
|
+
"text-align:center",
|
|
2154
|
+
"padding:18px"
|
|
2155
|
+
].join(";");
|
|
2156
|
+
emptyState.textContent = "Console output will appear here.";
|
|
2157
|
+
collapseButton.addEventListener("click", (event) => {
|
|
2158
|
+
event.stopPropagation();
|
|
2159
|
+
state.expanded = false;
|
|
2160
|
+
renderOverlay(state);
|
|
2161
|
+
});
|
|
2162
|
+
clearButton.addEventListener("click", (event) => {
|
|
2163
|
+
event.stopPropagation();
|
|
2164
|
+
state.entries = [];
|
|
2165
|
+
state.unreadCount = 0;
|
|
2166
|
+
renderOverlay(state);
|
|
2167
|
+
});
|
|
2168
|
+
controls.appendChild(clearButton);
|
|
2169
|
+
controls.appendChild(collapseButton);
|
|
2170
|
+
entries.appendChild(emptyState);
|
|
2171
|
+
body.appendChild(entries);
|
|
2172
|
+
body.appendChild(controls);
|
|
2173
|
+
panel.appendChild(dragZone);
|
|
2174
|
+
panel.appendChild(body);
|
|
2175
|
+
attachDragStartListeners(dragZone, state);
|
|
2176
|
+
attachPanelResizeListeners(panel, state);
|
|
2177
|
+
attachCollapsedToggleListeners(toggleButton, state);
|
|
2178
|
+
root.appendChild(panel);
|
|
2179
|
+
root.appendChild(toggleButton);
|
|
2180
|
+
return {
|
|
2181
|
+
body,
|
|
2182
|
+
clearButton,
|
|
2183
|
+
collapseButton,
|
|
2184
|
+
controls,
|
|
2185
|
+
dragZone,
|
|
2186
|
+
emptyState,
|
|
2187
|
+
entries,
|
|
2188
|
+
panel,
|
|
2189
|
+
root,
|
|
2190
|
+
toggleButton
|
|
2191
|
+
};
|
|
2192
|
+
}
|
|
2193
|
+
function renderOverlay(state) {
|
|
2194
|
+
if (!state.ui) {
|
|
2195
|
+
return;
|
|
2196
|
+
}
|
|
2197
|
+
state.ui.panel.style.display = state.expanded ? "flex" : "none";
|
|
2198
|
+
state.ui.toggleButton.style.display = state.expanded ? "none" : "inline-flex";
|
|
2199
|
+
state.ui.toggleButton.textContent = "Logs";
|
|
2200
|
+
if (state.entries.length === 0) {
|
|
2201
|
+
state.ui.entries.style.display = "flex";
|
|
2202
|
+
state.ui.emptyState.style.display = "flex";
|
|
2203
|
+
state.ui.entries.replaceChildren(state.ui.emptyState);
|
|
2204
|
+
applyPanelSize(state);
|
|
2205
|
+
applyOverlayPosition(state);
|
|
2206
|
+
return;
|
|
2207
|
+
}
|
|
2208
|
+
state.ui.entries.style.display = "flex";
|
|
2209
|
+
state.ui.emptyState.style.display = "none";
|
|
2210
|
+
const nextChildren = state.entries.map((entry) => {
|
|
2211
|
+
const accent = getLevelAccent(entry.level);
|
|
2212
|
+
const row = document.createElement("div");
|
|
2213
|
+
row.style.cssText = [
|
|
2214
|
+
"display:flex",
|
|
2215
|
+
"align-items:flex-start",
|
|
2216
|
+
"gap:0",
|
|
2217
|
+
"padding:4px 12px",
|
|
2218
|
+
"background:" + accent.lineBackground
|
|
2219
|
+
].join(";");
|
|
2220
|
+
const line = document.createElement("div");
|
|
2221
|
+
line.textContent = formatTimestamp(entry.timestamp) + " " + entry.level.toUpperCase() + " " + entry.message;
|
|
2222
|
+
line.style.cssText = [
|
|
2223
|
+
"color:#ecf4ff",
|
|
2224
|
+
"font:500 12px/1.5 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace",
|
|
2225
|
+
"white-space:pre-wrap",
|
|
2226
|
+
"word-break:break-word",
|
|
2227
|
+
"flex:1 1 auto"
|
|
2228
|
+
].join(";");
|
|
2229
|
+
row.appendChild(line);
|
|
2230
|
+
return row;
|
|
2231
|
+
});
|
|
2232
|
+
state.ui.entries.replaceChildren(...nextChildren);
|
|
2233
|
+
state.ui.entries.scrollTop = state.ui.entries.scrollHeight;
|
|
2234
|
+
applyPanelSize(state);
|
|
2235
|
+
applyOverlayPosition(state);
|
|
2236
|
+
}
|
|
2237
|
+
function mountOverlay(state) {
|
|
2238
|
+
const doc = getDocument2();
|
|
2239
|
+
if (!doc?.body || state.ui) {
|
|
2240
|
+
return;
|
|
2241
|
+
}
|
|
2242
|
+
state.ui = createOverlayUi(state);
|
|
2243
|
+
doc.body.appendChild(state.ui.root);
|
|
2244
|
+
applyPanelSize(state);
|
|
2245
|
+
applyOverlayPosition(state);
|
|
2246
|
+
renderOverlay(state);
|
|
2247
|
+
}
|
|
2248
|
+
function enqueueEntry(state, level, args) {
|
|
2249
|
+
state.entries.push(createEntry(level, args, state.nextEntryId));
|
|
2250
|
+
state.nextEntryId += 1;
|
|
2251
|
+
if (state.entries.length > state.maxEntries) {
|
|
2252
|
+
state.entries.splice(0, state.entries.length - state.maxEntries);
|
|
2253
|
+
}
|
|
2254
|
+
if (!state.expanded) {
|
|
2255
|
+
state.unreadCount += 1;
|
|
2256
|
+
}
|
|
2257
|
+
renderOverlay(state);
|
|
2258
|
+
}
|
|
2259
|
+
function restoreConsole(snapshot) {
|
|
2260
|
+
for (const method of CONSOLE_METHODS) {
|
|
2261
|
+
console[method] = snapshot[method];
|
|
2262
|
+
}
|
|
2263
|
+
}
|
|
2264
|
+
function patchConsole(state) {
|
|
2265
|
+
for (const method of CONSOLE_METHODS) {
|
|
2266
|
+
const original = state.originalConsole[method];
|
|
2267
|
+
console[method] = (...args) => {
|
|
2268
|
+
enqueueEntry(state, method, args);
|
|
2269
|
+
original(...args);
|
|
2270
|
+
};
|
|
2271
|
+
}
|
|
2272
|
+
}
|
|
2273
|
+
function cleanupOverlay(browserWindow, state) {
|
|
2274
|
+
restoreConsole(state.originalConsole);
|
|
2275
|
+
stopResizing(state);
|
|
2276
|
+
stopDragging(state);
|
|
2277
|
+
if (state.domReadyHandler) {
|
|
2278
|
+
getDocument2()?.removeEventListener("DOMContentLoaded", state.domReadyHandler);
|
|
2279
|
+
state.domReadyHandler = void 0;
|
|
2280
|
+
}
|
|
2281
|
+
if (state.resizeHandler && typeof browserWindow.removeEventListener === "function") {
|
|
2282
|
+
browserWindow.removeEventListener("resize", state.resizeHandler);
|
|
2283
|
+
state.resizeHandler = void 0;
|
|
2284
|
+
}
|
|
2285
|
+
state.ui?.root.remove();
|
|
2286
|
+
state.ui = null;
|
|
2287
|
+
delete browserWindow.__oasizLogOverlayController__;
|
|
2288
|
+
delete browserWindow.__oasizLogOverlayState__;
|
|
2289
|
+
}
|
|
2290
|
+
function createController(browserWindow, state) {
|
|
2291
|
+
return {
|
|
2292
|
+
retain() {
|
|
2293
|
+
state.refCount += 1;
|
|
2294
|
+
this.ensureMounted();
|
|
2295
|
+
},
|
|
2296
|
+
ensureMounted() {
|
|
2297
|
+
const doc = getDocument2();
|
|
2298
|
+
if (!doc) {
|
|
2299
|
+
return;
|
|
2300
|
+
}
|
|
2301
|
+
if (doc.body) {
|
|
2302
|
+
mountOverlay(state);
|
|
2303
|
+
applyOverlayPosition(state);
|
|
2304
|
+
return;
|
|
2305
|
+
}
|
|
2306
|
+
if (!state.domReadyHandler) {
|
|
2307
|
+
state.domReadyHandler = () => {
|
|
2308
|
+
mountOverlay(state);
|
|
2309
|
+
state.domReadyHandler = void 0;
|
|
2310
|
+
};
|
|
2311
|
+
doc.addEventListener("DOMContentLoaded", state.domReadyHandler, {
|
|
2312
|
+
once: true
|
|
2313
|
+
});
|
|
2314
|
+
}
|
|
2315
|
+
},
|
|
2316
|
+
clear() {
|
|
2317
|
+
state.entries = [];
|
|
2318
|
+
state.unreadCount = 0;
|
|
2319
|
+
renderOverlay(state);
|
|
2320
|
+
},
|
|
2321
|
+
show() {
|
|
2322
|
+
state.expanded = true;
|
|
2323
|
+
state.unreadCount = 0;
|
|
2324
|
+
renderOverlay(state);
|
|
2325
|
+
},
|
|
2326
|
+
hide() {
|
|
2327
|
+
state.expanded = false;
|
|
2328
|
+
renderOverlay(state);
|
|
2329
|
+
},
|
|
2330
|
+
isVisible() {
|
|
2331
|
+
return state.expanded;
|
|
2332
|
+
},
|
|
2333
|
+
destroy() {
|
|
2334
|
+
state.refCount = Math.max(0, state.refCount - 1);
|
|
2335
|
+
if (state.refCount === 0) {
|
|
2336
|
+
cleanupOverlay(browserWindow, state);
|
|
2337
|
+
}
|
|
2338
|
+
}
|
|
2339
|
+
};
|
|
2340
|
+
}
|
|
2341
|
+
function enableLogOverlay(options = {}) {
|
|
2342
|
+
if (options.enabled === false) {
|
|
2343
|
+
return NOOP_HANDLE2;
|
|
2344
|
+
}
|
|
2345
|
+
const browserWindow = getBrowserWindow2();
|
|
2346
|
+
const doc = getDocument2();
|
|
2347
|
+
if (!browserWindow || !doc) {
|
|
2348
|
+
return NOOP_HANDLE2;
|
|
2349
|
+
}
|
|
2350
|
+
const existingController = browserWindow.__oasizLogOverlayController__;
|
|
2351
|
+
const existingState = browserWindow.__oasizLogOverlayState__;
|
|
2352
|
+
if (existingController && existingState) {
|
|
2353
|
+
existingController.retain();
|
|
2354
|
+
if (typeof options.maxEntries === "number") {
|
|
2355
|
+
existingState.maxEntries = clampMaxEntries(options.maxEntries);
|
|
2356
|
+
if (existingState.entries.length > existingState.maxEntries) {
|
|
2357
|
+
existingState.entries.splice(
|
|
2358
|
+
0,
|
|
2359
|
+
existingState.entries.length - existingState.maxEntries
|
|
2360
|
+
);
|
|
2361
|
+
}
|
|
2362
|
+
}
|
|
2363
|
+
if (typeof options.collapsed === "boolean") {
|
|
2364
|
+
existingState.expanded = !options.collapsed;
|
|
2365
|
+
applyPanelSize(existingState);
|
|
2366
|
+
if (existingState.expanded) {
|
|
2367
|
+
existingState.unreadCount = 0;
|
|
2368
|
+
}
|
|
2369
|
+
}
|
|
2370
|
+
if (typeof options.title === "string" && options.title.trim().length > 0) {
|
|
2371
|
+
existingState.title = options.title.trim();
|
|
2372
|
+
}
|
|
2373
|
+
existingController.ensureMounted();
|
|
2374
|
+
renderOverlay(existingState);
|
|
2375
|
+
return existingController;
|
|
2376
|
+
}
|
|
2377
|
+
const state = {
|
|
2378
|
+
dragMoved: false,
|
|
2379
|
+
dragStartPoint: null,
|
|
2380
|
+
entries: [],
|
|
2381
|
+
expanded: options.collapsed !== true,
|
|
2382
|
+
isDragging: false,
|
|
2383
|
+
isResizing: false,
|
|
2384
|
+
lastDragPoint: null,
|
|
2385
|
+
maxEntries: clampMaxEntries(options.maxEntries),
|
|
2386
|
+
nextEntryId: 1,
|
|
2387
|
+
originalConsole: createConsoleSnapshot(),
|
|
2388
|
+
panelSize: null,
|
|
2389
|
+
position: null,
|
|
2390
|
+
refCount: 1,
|
|
2391
|
+
removeDragListeners: null,
|
|
2392
|
+
removeResizeListeners: null,
|
|
2393
|
+
resizeStartPoint: null,
|
|
2394
|
+
resizeStartSize: null,
|
|
2395
|
+
suppressToggleClickUntil: 0,
|
|
2396
|
+
title: typeof options.title === "string" && options.title.trim().length > 0 ? options.title.trim() : DEFAULT_TITLE,
|
|
2397
|
+
resizeHandler: void 0,
|
|
2398
|
+
ui: null,
|
|
2399
|
+
unreadCount: 0
|
|
2400
|
+
};
|
|
2401
|
+
const controller = createController(browserWindow, state);
|
|
2402
|
+
browserWindow.__oasizLogOverlayState__ = state;
|
|
2403
|
+
browserWindow.__oasizLogOverlayController__ = controller;
|
|
2404
|
+
patchConsole(state);
|
|
2405
|
+
if (typeof browserWindow.addEventListener === "function") {
|
|
2406
|
+
state.resizeHandler = () => {
|
|
2407
|
+
applyOverlayPosition(state);
|
|
2408
|
+
};
|
|
2409
|
+
browserWindow.addEventListener("resize", state.resizeHandler);
|
|
2410
|
+
}
|
|
2411
|
+
controller.ensureMounted();
|
|
2412
|
+
return controller;
|
|
2413
|
+
}
|
|
2414
|
+
|
|
2415
|
+
// src/multiplayer.ts
|
|
2416
|
+
function isDevelopment4() {
|
|
38
2417
|
const nodeEnv = globalThis.process?.env?.NODE_ENV;
|
|
39
2418
|
return nodeEnv !== "production";
|
|
40
2419
|
}
|
|
41
|
-
function
|
|
2420
|
+
function getBridgeWindow4() {
|
|
42
2421
|
if (typeof window === "undefined") {
|
|
43
2422
|
return void 0;
|
|
44
2423
|
}
|
|
45
2424
|
return window;
|
|
46
2425
|
}
|
|
47
|
-
function shareRoomCode(roomCode) {
|
|
48
|
-
const bridge =
|
|
2426
|
+
function shareRoomCode(roomCode, options) {
|
|
2427
|
+
const bridge = getBridgeWindow4();
|
|
49
2428
|
if (typeof bridge?.shareRoomCode === "function") {
|
|
50
|
-
bridge.shareRoomCode(roomCode);
|
|
2429
|
+
bridge.shareRoomCode(roomCode, options);
|
|
51
2430
|
return;
|
|
52
2431
|
}
|
|
53
|
-
if (
|
|
2432
|
+
if (isDevelopment4()) {
|
|
54
2433
|
console.warn(
|
|
55
2434
|
"[oasiz/sdk] shareRoomCode bridge is unavailable. This is expected in local development."
|
|
56
2435
|
);
|
|
57
2436
|
}
|
|
58
2437
|
}
|
|
2438
|
+
function openInviteModal() {
|
|
2439
|
+
const bridge = getBridgeWindow4();
|
|
2440
|
+
if (typeof bridge?.openInviteModal === "function") {
|
|
2441
|
+
bridge.openInviteModal();
|
|
2442
|
+
return;
|
|
2443
|
+
}
|
|
2444
|
+
if (isDevelopment4()) {
|
|
2445
|
+
console.warn(
|
|
2446
|
+
"[oasiz/sdk] openInviteModal bridge is unavailable. This is expected in local development."
|
|
2447
|
+
);
|
|
2448
|
+
}
|
|
2449
|
+
}
|
|
59
2450
|
function getGameId() {
|
|
60
|
-
const bridge =
|
|
2451
|
+
const bridge = getBridgeWindow4();
|
|
61
2452
|
return bridge?.__GAME_ID__;
|
|
62
2453
|
}
|
|
63
2454
|
function getRoomCode() {
|
|
64
|
-
const bridge =
|
|
65
|
-
return
|
|
2455
|
+
const bridge = getBridgeWindow4();
|
|
2456
|
+
return bridge?.__ROOM_CODE__;
|
|
2457
|
+
}
|
|
2458
|
+
function getPlayerId() {
|
|
2459
|
+
const bridge = getBridgeWindow4();
|
|
2460
|
+
return bridge?.__PLAYER_ID__;
|
|
66
2461
|
}
|
|
67
2462
|
function getPlayerName() {
|
|
68
|
-
const bridge =
|
|
2463
|
+
const bridge = getBridgeWindow4();
|
|
69
2464
|
return bridge?.__PLAYER_NAME__;
|
|
70
2465
|
}
|
|
71
2466
|
function getPlayerAvatar() {
|
|
72
|
-
const bridge =
|
|
2467
|
+
const bridge = getBridgeWindow4();
|
|
73
2468
|
return bridge?.__PLAYER_AVATAR__;
|
|
74
2469
|
}
|
|
75
2470
|
|
|
76
2471
|
// src/score.ts
|
|
77
|
-
function
|
|
2472
|
+
function isDevelopment5() {
|
|
78
2473
|
const nodeEnv = globalThis.process?.env?.NODE_ENV;
|
|
79
2474
|
return nodeEnv !== "production";
|
|
80
2475
|
}
|
|
81
|
-
function
|
|
82
|
-
if (
|
|
2476
|
+
function warnMissingBridge3(methodName) {
|
|
2477
|
+
if (isDevelopment5()) {
|
|
83
2478
|
console.warn(
|
|
84
2479
|
"[oasiz/sdk] " + methodName + " bridge is unavailable. This is expected in local development."
|
|
85
2480
|
);
|
|
86
2481
|
}
|
|
87
2482
|
}
|
|
88
|
-
function
|
|
2483
|
+
function getBridgeWindow5() {
|
|
89
2484
|
if (typeof window === "undefined") {
|
|
90
2485
|
return void 0;
|
|
91
2486
|
}
|
|
@@ -93,41 +2488,92 @@ function getBridgeWindow3() {
|
|
|
93
2488
|
}
|
|
94
2489
|
function submitScore(score) {
|
|
95
2490
|
if (!Number.isFinite(score)) {
|
|
96
|
-
if (
|
|
2491
|
+
if (isDevelopment5()) {
|
|
97
2492
|
console.warn("[oasiz/sdk] submitScore expected a finite number:", score);
|
|
98
2493
|
}
|
|
99
2494
|
return;
|
|
100
2495
|
}
|
|
101
|
-
const bridge =
|
|
2496
|
+
const bridge = getBridgeWindow5();
|
|
102
2497
|
const normalizedScore = Math.max(0, Math.floor(score));
|
|
103
2498
|
if (typeof bridge?.submitScore === "function") {
|
|
104
2499
|
bridge.submitScore(normalizedScore);
|
|
105
2500
|
return;
|
|
106
2501
|
}
|
|
107
|
-
|
|
2502
|
+
warnMissingBridge3("submitScore");
|
|
108
2503
|
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
2504
|
+
|
|
2505
|
+
// src/score-edit.ts
|
|
2506
|
+
function isDevelopment6() {
|
|
2507
|
+
const nodeEnv = globalThis.process?.env?.NODE_ENV;
|
|
2508
|
+
return nodeEnv !== "production";
|
|
2509
|
+
}
|
|
2510
|
+
function getBridgeWindow6() {
|
|
2511
|
+
if (typeof window === "undefined") {
|
|
2512
|
+
return void 0;
|
|
2513
|
+
}
|
|
2514
|
+
return window;
|
|
2515
|
+
}
|
|
2516
|
+
function warnMissingBridge4(methodName) {
|
|
2517
|
+
if (isDevelopment6()) {
|
|
2518
|
+
console.warn(
|
|
2519
|
+
"[oasiz/sdk] " + methodName + " bridge is unavailable. This is expected in local development."
|
|
2520
|
+
);
|
|
2521
|
+
}
|
|
2522
|
+
}
|
|
2523
|
+
async function editScore(payload, methodName) {
|
|
2524
|
+
const bridge = getBridgeWindow6();
|
|
2525
|
+
if (typeof bridge?.__oasizEditScore !== "function") {
|
|
2526
|
+
warnMissingBridge4(methodName);
|
|
2527
|
+
return null;
|
|
2528
|
+
}
|
|
2529
|
+
try {
|
|
2530
|
+
const result = await bridge.__oasizEditScore(payload);
|
|
2531
|
+
return result ?? null;
|
|
2532
|
+
} catch (error) {
|
|
2533
|
+
if (isDevelopment6()) {
|
|
2534
|
+
console.error("[oasiz/sdk] " + methodName + " failed:", error);
|
|
2535
|
+
}
|
|
2536
|
+
return null;
|
|
2537
|
+
}
|
|
2538
|
+
}
|
|
2539
|
+
async function addScore(delta) {
|
|
2540
|
+
if (!Number.isInteger(delta)) {
|
|
2541
|
+
if (isDevelopment6()) {
|
|
2542
|
+
console.warn("[oasiz/sdk] addScore expected an integer:", delta);
|
|
2543
|
+
}
|
|
2544
|
+
return null;
|
|
2545
|
+
}
|
|
2546
|
+
if (delta === 0) {
|
|
2547
|
+
return null;
|
|
2548
|
+
}
|
|
2549
|
+
return editScore({ delta }, "addScore");
|
|
2550
|
+
}
|
|
2551
|
+
async function setScore(score) {
|
|
2552
|
+
if (!Number.isInteger(score) || score < 0) {
|
|
2553
|
+
if (isDevelopment6()) {
|
|
2554
|
+
console.warn(
|
|
2555
|
+
"[oasiz/sdk] setScore expected a non-negative integer:",
|
|
2556
|
+
score
|
|
2557
|
+
);
|
|
2558
|
+
}
|
|
2559
|
+
return null;
|
|
114
2560
|
}
|
|
115
|
-
|
|
2561
|
+
return editScore({ score }, "setScore");
|
|
116
2562
|
}
|
|
117
2563
|
|
|
118
2564
|
// src/share.ts
|
|
119
|
-
function
|
|
2565
|
+
function isDevelopment7() {
|
|
120
2566
|
const nodeEnv = globalThis.process?.env?.NODE_ENV;
|
|
121
2567
|
return nodeEnv !== "production";
|
|
122
2568
|
}
|
|
123
|
-
function
|
|
2569
|
+
function getBridgeWindow7() {
|
|
124
2570
|
if (typeof window === "undefined") {
|
|
125
2571
|
return void 0;
|
|
126
2572
|
}
|
|
127
2573
|
return window;
|
|
128
2574
|
}
|
|
129
|
-
function
|
|
130
|
-
if (
|
|
2575
|
+
function warnMissingBridge5(methodName) {
|
|
2576
|
+
if (isDevelopment7()) {
|
|
131
2577
|
console.warn(
|
|
132
2578
|
"[oasiz/sdk] " + methodName + " share bridge is unavailable. This is expected in local development."
|
|
133
2579
|
);
|
|
@@ -170,20 +2616,20 @@ function validateRequest(options) {
|
|
|
170
2616
|
}
|
|
171
2617
|
async function share(options) {
|
|
172
2618
|
const request = validateRequest(options);
|
|
173
|
-
const bridge =
|
|
2619
|
+
const bridge = getBridgeWindow7();
|
|
174
2620
|
if (typeof bridge?.__oasizShareRequest !== "function") {
|
|
175
|
-
|
|
2621
|
+
warnMissingBridge5("__oasizShareRequest");
|
|
176
2622
|
throw new Error("Share bridge unavailable");
|
|
177
2623
|
}
|
|
178
2624
|
await bridge.__oasizShareRequest(request);
|
|
179
2625
|
}
|
|
180
2626
|
|
|
181
2627
|
// src/state.ts
|
|
182
|
-
function
|
|
2628
|
+
function isDevelopment8() {
|
|
183
2629
|
const nodeEnv = globalThis.process?.env?.NODE_ENV;
|
|
184
2630
|
return nodeEnv !== "production";
|
|
185
2631
|
}
|
|
186
|
-
function
|
|
2632
|
+
function getBridgeWindow8() {
|
|
187
2633
|
if (typeof window === "undefined") {
|
|
188
2634
|
return void 0;
|
|
189
2635
|
}
|
|
@@ -196,22 +2642,22 @@ function isPlainObject(value) {
|
|
|
196
2642
|
const proto = Object.getPrototypeOf(value);
|
|
197
2643
|
return proto === Object.prototype || proto === null;
|
|
198
2644
|
}
|
|
199
|
-
function
|
|
200
|
-
if (
|
|
2645
|
+
function warnMissingBridge6(methodName) {
|
|
2646
|
+
if (isDevelopment8()) {
|
|
201
2647
|
console.warn(
|
|
202
2648
|
"[oasiz/sdk] " + methodName + " bridge is unavailable. This is expected in local development."
|
|
203
2649
|
);
|
|
204
2650
|
}
|
|
205
2651
|
}
|
|
206
2652
|
function loadGameState() {
|
|
207
|
-
const bridge =
|
|
2653
|
+
const bridge = getBridgeWindow8();
|
|
208
2654
|
if (typeof bridge?.loadGameState !== "function") {
|
|
209
|
-
|
|
2655
|
+
warnMissingBridge6("loadGameState");
|
|
210
2656
|
return {};
|
|
211
2657
|
}
|
|
212
2658
|
const state = bridge.loadGameState();
|
|
213
2659
|
if (!isPlainObject(state)) {
|
|
214
|
-
if (
|
|
2660
|
+
if (isDevelopment8()) {
|
|
215
2661
|
console.warn(
|
|
216
2662
|
"[oasiz/sdk] loadGameState returned invalid data. Falling back to empty object."
|
|
217
2663
|
);
|
|
@@ -222,35 +2668,35 @@ function loadGameState() {
|
|
|
222
2668
|
}
|
|
223
2669
|
function saveGameState(state) {
|
|
224
2670
|
if (!isPlainObject(state)) {
|
|
225
|
-
if (
|
|
2671
|
+
if (isDevelopment8()) {
|
|
226
2672
|
console.warn("[oasiz/sdk] saveGameState expected a plain object:", state);
|
|
227
2673
|
}
|
|
228
2674
|
return;
|
|
229
2675
|
}
|
|
230
|
-
const bridge =
|
|
2676
|
+
const bridge = getBridgeWindow8();
|
|
231
2677
|
if (typeof bridge?.saveGameState === "function") {
|
|
232
2678
|
bridge.saveGameState(state);
|
|
233
2679
|
return;
|
|
234
2680
|
}
|
|
235
|
-
|
|
2681
|
+
warnMissingBridge6("saveGameState");
|
|
236
2682
|
}
|
|
237
2683
|
function flushGameState() {
|
|
238
|
-
const bridge =
|
|
2684
|
+
const bridge = getBridgeWindow8();
|
|
239
2685
|
if (typeof bridge?.flushGameState === "function") {
|
|
240
2686
|
bridge.flushGameState();
|
|
241
2687
|
return;
|
|
242
2688
|
}
|
|
243
|
-
|
|
2689
|
+
warnMissingBridge6("flushGameState");
|
|
244
2690
|
}
|
|
245
2691
|
|
|
246
2692
|
// src/lifecycle.ts
|
|
247
|
-
function
|
|
2693
|
+
function isDevelopment9() {
|
|
248
2694
|
const nodeEnv = globalThis.process?.env?.NODE_ENV;
|
|
249
2695
|
return nodeEnv !== "production";
|
|
250
2696
|
}
|
|
251
2697
|
function addLifecycleListener(eventName, callback) {
|
|
252
2698
|
if (typeof window === "undefined") {
|
|
253
|
-
if (
|
|
2699
|
+
if (isDevelopment9()) {
|
|
254
2700
|
console.warn(
|
|
255
2701
|
"[oasiz/sdk] " + eventName + " listener registered without a browser window. This is expected in local development."
|
|
256
2702
|
);
|
|
@@ -269,252 +2715,741 @@ function onResume(callback) {
|
|
|
269
2715
|
return addLifecycleListener("oasiz:resume", callback);
|
|
270
2716
|
}
|
|
271
2717
|
|
|
272
|
-
// src/
|
|
273
|
-
var
|
|
274
|
-
|
|
2718
|
+
// src/layout.ts
|
|
2719
|
+
var INSET_SIDES = ["top", "right", "bottom", "left"];
|
|
2720
|
+
var SIDE_TO_AXIS = {
|
|
2721
|
+
top: "vertical",
|
|
2722
|
+
right: "horizontal",
|
|
2723
|
+
bottom: "vertical",
|
|
2724
|
+
left: "horizontal"
|
|
2725
|
+
};
|
|
2726
|
+
function createInsetEdges(value) {
|
|
2727
|
+
return {
|
|
2728
|
+
top: value,
|
|
2729
|
+
right: value,
|
|
2730
|
+
bottom: value,
|
|
2731
|
+
left: value
|
|
2732
|
+
};
|
|
2733
|
+
}
|
|
2734
|
+
function isDevelopment10() {
|
|
275
2735
|
const nodeEnv = globalThis.process?.env?.NODE_ENV;
|
|
276
2736
|
return nodeEnv !== "production";
|
|
277
2737
|
}
|
|
278
|
-
function
|
|
2738
|
+
function getBridgeWindow9() {
|
|
279
2739
|
if (typeof window === "undefined") {
|
|
280
2740
|
return void 0;
|
|
281
2741
|
}
|
|
282
2742
|
return window;
|
|
283
2743
|
}
|
|
284
|
-
function
|
|
285
|
-
if (
|
|
2744
|
+
function warnMissingBridge7(methodName) {
|
|
2745
|
+
if (isDevelopment10()) {
|
|
286
2746
|
console.warn(
|
|
287
2747
|
"[oasiz/sdk] " + methodName + " bridge is unavailable. This is expected in local development."
|
|
288
2748
|
);
|
|
289
2749
|
}
|
|
290
2750
|
}
|
|
291
|
-
function
|
|
292
|
-
|
|
293
|
-
return error;
|
|
294
|
-
}
|
|
295
|
-
return new Error(
|
|
296
|
-
typeof error === "string" ? error : "Back button callback failed."
|
|
297
|
-
);
|
|
2751
|
+
function isRecord2(value) {
|
|
2752
|
+
return typeof value === "object" && value !== null;
|
|
298
2753
|
}
|
|
299
|
-
function
|
|
300
|
-
if (typeof
|
|
301
|
-
if (
|
|
302
|
-
|
|
303
|
-
"[oasiz/sdk] " + eventName + " listener registered without a browser window. This is expected in local development."
|
|
304
|
-
);
|
|
2754
|
+
function toFiniteNumber(value) {
|
|
2755
|
+
if (typeof value !== "number" || !Number.isFinite(value)) {
|
|
2756
|
+
if (typeof value !== "string") {
|
|
2757
|
+
return void 0;
|
|
305
2758
|
}
|
|
306
|
-
|
|
307
|
-
|
|
2759
|
+
const parsed = Number.parseFloat(value.trim());
|
|
2760
|
+
if (!Number.isFinite(parsed)) {
|
|
2761
|
+
return void 0;
|
|
2762
|
+
}
|
|
2763
|
+
return parsed;
|
|
308
2764
|
}
|
|
309
|
-
|
|
310
|
-
window.addEventListener(eventName, handler);
|
|
311
|
-
return () => window.removeEventListener(eventName, handler);
|
|
2765
|
+
return value;
|
|
312
2766
|
}
|
|
313
|
-
function
|
|
314
|
-
const
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
2767
|
+
function clampInsetPixels(value) {
|
|
2768
|
+
const numeric = toFiniteNumber(value);
|
|
2769
|
+
if (typeof numeric === "undefined") {
|
|
2770
|
+
return void 0;
|
|
2771
|
+
}
|
|
2772
|
+
return Math.max(0, numeric);
|
|
2773
|
+
}
|
|
2774
|
+
function normalizeInsetPercent(value) {
|
|
2775
|
+
const numeric = toFiniteNumber(value);
|
|
2776
|
+
if (typeof numeric === "undefined") {
|
|
2777
|
+
return void 0;
|
|
2778
|
+
}
|
|
2779
|
+
return Math.min(100, Math.max(0, numeric));
|
|
2780
|
+
}
|
|
2781
|
+
function getViewportSize2(bridge, axis) {
|
|
2782
|
+
const visualViewportSize = axis === "vertical" ? bridge.visualViewport?.height : bridge.visualViewport?.width;
|
|
2783
|
+
if (typeof visualViewportSize === "number" && Number.isFinite(visualViewportSize) && visualViewportSize > 0) {
|
|
2784
|
+
return visualViewportSize;
|
|
2785
|
+
}
|
|
2786
|
+
const innerSize = axis === "vertical" ? bridge.innerHeight : bridge.innerWidth;
|
|
2787
|
+
if (typeof innerSize === "number" && Number.isFinite(innerSize) && innerSize > 0) {
|
|
2788
|
+
return innerSize;
|
|
2789
|
+
}
|
|
2790
|
+
const documentSize = axis === "vertical" ? bridge.document?.documentElement?.clientHeight : bridge.document?.documentElement?.clientWidth;
|
|
2791
|
+
if (typeof documentSize === "number" && Number.isFinite(documentSize) && documentSize > 0) {
|
|
2792
|
+
return documentSize;
|
|
2793
|
+
}
|
|
2794
|
+
const bodySize = axis === "vertical" ? bridge.document?.body?.clientHeight : bridge.document?.body?.clientWidth;
|
|
2795
|
+
if (typeof bodySize === "number" && Number.isFinite(bodySize) && bodySize > 0) {
|
|
2796
|
+
return bodySize;
|
|
2797
|
+
}
|
|
2798
|
+
return 0;
|
|
2799
|
+
}
|
|
2800
|
+
function readCssSafeAreaValue(bridge, cssValue) {
|
|
2801
|
+
const doc = bridge.document;
|
|
2802
|
+
const root = doc?.body ?? doc?.documentElement;
|
|
2803
|
+
if (!doc || !root || typeof doc.createElement !== "function" || typeof root.appendChild !== "function" || typeof bridge.getComputedStyle !== "function") {
|
|
2804
|
+
return 0;
|
|
2805
|
+
}
|
|
2806
|
+
const probe = doc.createElement("div");
|
|
2807
|
+
probe.style.position = "fixed";
|
|
2808
|
+
probe.style.top = "0";
|
|
2809
|
+
probe.style.left = "0";
|
|
2810
|
+
probe.style.width = "0";
|
|
2811
|
+
probe.style.height = "0";
|
|
2812
|
+
probe.style.visibility = "hidden";
|
|
2813
|
+
probe.style.pointerEvents = "none";
|
|
2814
|
+
probe.style.paddingTop = cssValue;
|
|
2815
|
+
root.appendChild(probe);
|
|
2816
|
+
try {
|
|
2817
|
+
return clampInsetPixels(bridge.getComputedStyle(probe).paddingTop) ?? 0;
|
|
2818
|
+
} finally {
|
|
2819
|
+
if (typeof probe.remove === "function") {
|
|
2820
|
+
probe.remove();
|
|
327
2821
|
} else {
|
|
328
|
-
|
|
2822
|
+
probe.parentNode?.removeChild(probe);
|
|
329
2823
|
}
|
|
330
2824
|
}
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
2825
|
+
}
|
|
2826
|
+
function readCssSafeAreaPixels(bridge, side) {
|
|
2827
|
+
const envPixels = readCssSafeAreaValue(
|
|
2828
|
+
bridge,
|
|
2829
|
+
"env(safe-area-inset-" + side + ")"
|
|
2830
|
+
);
|
|
2831
|
+
if (envPixels > 0) {
|
|
2832
|
+
return envPixels;
|
|
2833
|
+
}
|
|
2834
|
+
return readCssSafeAreaValue(
|
|
2835
|
+
bridge,
|
|
2836
|
+
"constant(safe-area-inset-" + side + ")"
|
|
2837
|
+
);
|
|
2838
|
+
}
|
|
2839
|
+
function getDevicePixelRatio(bridge) {
|
|
2840
|
+
const dpr = bridge.devicePixelRatio;
|
|
2841
|
+
if (typeof dpr !== "number" || !Number.isFinite(dpr) || dpr <= 0) {
|
|
2842
|
+
return 1;
|
|
2843
|
+
}
|
|
2844
|
+
return dpr;
|
|
2845
|
+
}
|
|
2846
|
+
function roughlyEqualPixels(a, b) {
|
|
2847
|
+
return Math.abs(a - b) <= 2;
|
|
2848
|
+
}
|
|
2849
|
+
function normalizeInsetPixels(value, bridge, side) {
|
|
2850
|
+
const pixels = clampInsetPixels(value);
|
|
2851
|
+
if (typeof pixels === "undefined") {
|
|
2852
|
+
return void 0;
|
|
2853
|
+
}
|
|
2854
|
+
const cssEnvPixels = readCssSafeAreaPixels(bridge, side);
|
|
2855
|
+
if (pixels <= 0) {
|
|
2856
|
+
return cssEnvPixels;
|
|
2857
|
+
}
|
|
2858
|
+
const dpr = getDevicePixelRatio(bridge);
|
|
2859
|
+
if (cssEnvPixels > 0 && dpr > 1 && roughlyEqualPixels(pixels / dpr, cssEnvPixels)) {
|
|
2860
|
+
return cssEnvPixels;
|
|
2861
|
+
}
|
|
2862
|
+
return pixels;
|
|
2863
|
+
}
|
|
2864
|
+
function pixelsToPercentOfViewport(pixels, bridge, side) {
|
|
2865
|
+
const size = getViewportSize2(bridge, SIDE_TO_AXIS[side]);
|
|
2866
|
+
if (size <= 0) {
|
|
2867
|
+
return 0;
|
|
2868
|
+
}
|
|
2869
|
+
return normalizeInsetPercent(pixels / size * 100) ?? 0;
|
|
2870
|
+
}
|
|
2871
|
+
function percentToPixelsOfViewport(percent, bridge, side) {
|
|
2872
|
+
const size = getViewportSize2(bridge, SIDE_TO_AXIS[side]);
|
|
2873
|
+
if (size <= 0) {
|
|
2874
|
+
return 0;
|
|
2875
|
+
}
|
|
2876
|
+
return percent / 100 * size;
|
|
2877
|
+
}
|
|
2878
|
+
function cssSafeAreaPercent(bridge, side) {
|
|
2879
|
+
return pixelsToPercentOfViewport(readCssSafeAreaPixels(bridge, side), bridge, side);
|
|
2880
|
+
}
|
|
2881
|
+
function resolvePercentValue(value, bridge, side) {
|
|
2882
|
+
const percent = normalizeInsetPercent(value);
|
|
2883
|
+
if (typeof percent === "undefined") {
|
|
2884
|
+
return void 0;
|
|
2885
|
+
}
|
|
2886
|
+
return percent > 0 ? percent : cssSafeAreaPercent(bridge, side);
|
|
2887
|
+
}
|
|
2888
|
+
function resolvePixelValue(value, bridge, side) {
|
|
2889
|
+
const numeric = toFiniteNumber(value);
|
|
2890
|
+
if (typeof numeric === "undefined") {
|
|
2891
|
+
return void 0;
|
|
2892
|
+
}
|
|
2893
|
+
return normalizeInsetPixels(numeric, bridge, side);
|
|
2894
|
+
}
|
|
2895
|
+
function sideSuffix(side) {
|
|
2896
|
+
switch (side) {
|
|
2897
|
+
case "top":
|
|
2898
|
+
return "Top";
|
|
2899
|
+
case "right":
|
|
2900
|
+
return "Right";
|
|
2901
|
+
case "bottom":
|
|
2902
|
+
return "Bottom";
|
|
2903
|
+
case "left":
|
|
2904
|
+
return "Left";
|
|
2905
|
+
}
|
|
2906
|
+
}
|
|
2907
|
+
function callBridgeFunction(bridge, name) {
|
|
2908
|
+
const fn = bridge[name];
|
|
2909
|
+
if (typeof fn !== "function") {
|
|
2910
|
+
return void 0;
|
|
2911
|
+
}
|
|
2912
|
+
try {
|
|
2913
|
+
return fn.call(bridge);
|
|
2914
|
+
} catch (error) {
|
|
2915
|
+
console.error("[oasiz/sdk] " + String(name) + " failed:", error);
|
|
2916
|
+
return void 0;
|
|
2917
|
+
}
|
|
2918
|
+
}
|
|
2919
|
+
function readInsetObjectValue(value, side, group) {
|
|
2920
|
+
if (!isRecord2(value)) {
|
|
2921
|
+
return void 0;
|
|
2922
|
+
}
|
|
2923
|
+
if (group) {
|
|
2924
|
+
return isRecord2(value[group]) ? value[group][side] : void 0;
|
|
2925
|
+
}
|
|
2926
|
+
return value[side];
|
|
2927
|
+
}
|
|
2928
|
+
function firstDefined(...values) {
|
|
2929
|
+
return values.find((value) => typeof value !== "undefined");
|
|
2930
|
+
}
|
|
2931
|
+
function readHostInsetSources(bridge) {
|
|
2932
|
+
return {
|
|
2933
|
+
globalPixels: bridge.__OASIZ_VIEWPORT_INSETS__,
|
|
2934
|
+
globalPercent: bridge.__OASIZ_VIEWPORT_INSETS_PERCENT__,
|
|
2935
|
+
methodPixels: callBridgeFunction(bridge, "getViewportInsets"),
|
|
2936
|
+
methodPercent: callBridgeFunction(bridge, "getViewportInsetsPercent")
|
|
342
2937
|
};
|
|
343
2938
|
}
|
|
344
|
-
function
|
|
345
|
-
|
|
2939
|
+
function readIndividualPercentValue(bridge, side) {
|
|
2940
|
+
const suffix = sideSuffix(side);
|
|
2941
|
+
return firstDefined(
|
|
2942
|
+
callBridgeFunction(
|
|
2943
|
+
bridge,
|
|
2944
|
+
"getSafeArea" + suffix + "Percent"
|
|
2945
|
+
),
|
|
2946
|
+
bridge["__OASIZ_SAFE_AREA_" + side.toUpperCase() + "_PERCENT__"]
|
|
2947
|
+
);
|
|
346
2948
|
}
|
|
347
|
-
function
|
|
348
|
-
const
|
|
349
|
-
|
|
350
|
-
|
|
2949
|
+
function readIndividualPixelValue(bridge, side) {
|
|
2950
|
+
const suffix = sideSuffix(side);
|
|
2951
|
+
return firstDefined(
|
|
2952
|
+
callBridgeFunction(
|
|
2953
|
+
bridge,
|
|
2954
|
+
"getSafeArea" + suffix
|
|
2955
|
+
),
|
|
2956
|
+
bridge["__OASIZ_SAFE_AREA_" + side.toUpperCase() + "__"]
|
|
2957
|
+
);
|
|
2958
|
+
}
|
|
2959
|
+
function resolveInsetSide(bridge, sources, side) {
|
|
2960
|
+
const percentCandidate = firstDefined(
|
|
2961
|
+
readInsetObjectValue(sources.methodPercent, side, "percent"),
|
|
2962
|
+
readInsetObjectValue(sources.methodPercent, side),
|
|
2963
|
+
readInsetObjectValue(sources.globalPercent, side, "percent"),
|
|
2964
|
+
readInsetObjectValue(sources.globalPercent, side),
|
|
2965
|
+
readInsetObjectValue(sources.methodPixels, side, "percent"),
|
|
2966
|
+
readInsetObjectValue(sources.globalPixels, side, "percent"),
|
|
2967
|
+
readIndividualPercentValue(bridge, side)
|
|
2968
|
+
);
|
|
2969
|
+
const percent = resolvePercentValue(percentCandidate, bridge, side);
|
|
2970
|
+
if (typeof percent !== "undefined") {
|
|
2971
|
+
return {
|
|
2972
|
+
pixels: percentToPixelsOfViewport(percent, bridge, side),
|
|
2973
|
+
percent
|
|
2974
|
+
};
|
|
2975
|
+
}
|
|
2976
|
+
const pixelCandidate = firstDefined(
|
|
2977
|
+
readInsetObjectValue(sources.methodPixels, side, "pixels"),
|
|
2978
|
+
readInsetObjectValue(sources.methodPixels, side),
|
|
2979
|
+
readInsetObjectValue(sources.globalPixels, side, "pixels"),
|
|
2980
|
+
readInsetObjectValue(sources.globalPixels, side),
|
|
2981
|
+
readIndividualPixelValue(bridge, side)
|
|
2982
|
+
);
|
|
2983
|
+
const pixels = resolvePixelValue(pixelCandidate, bridge, side);
|
|
2984
|
+
if (typeof pixels !== "undefined") {
|
|
2985
|
+
return {
|
|
2986
|
+
pixels,
|
|
2987
|
+
percent: pixelsToPercentOfViewport(pixels, bridge, side)
|
|
2988
|
+
};
|
|
2989
|
+
}
|
|
2990
|
+
const cssPixels = readCssSafeAreaPixels(bridge, side);
|
|
2991
|
+
return {
|
|
2992
|
+
pixels: cssPixels,
|
|
2993
|
+
percent: pixelsToPercentOfViewport(cssPixels, bridge, side)
|
|
2994
|
+
};
|
|
2995
|
+
}
|
|
2996
|
+
function getViewportInsets() {
|
|
2997
|
+
const bridge = getBridgeWindow9();
|
|
2998
|
+
if (!bridge) {
|
|
2999
|
+
return {
|
|
3000
|
+
pixels: createInsetEdges(0),
|
|
3001
|
+
percent: createInsetEdges(0)
|
|
3002
|
+
};
|
|
3003
|
+
}
|
|
3004
|
+
const sources = readHostInsetSources(bridge);
|
|
3005
|
+
const pixels = createInsetEdges(0);
|
|
3006
|
+
const percent = createInsetEdges(0);
|
|
3007
|
+
for (const side of INSET_SIDES) {
|
|
3008
|
+
const resolved = resolveInsetSide(bridge, sources, side);
|
|
3009
|
+
pixels[side] = resolved.pixels;
|
|
3010
|
+
percent[side] = resolved.percent;
|
|
3011
|
+
}
|
|
3012
|
+
return { pixels, percent };
|
|
3013
|
+
}
|
|
3014
|
+
function getSafeAreaTop() {
|
|
3015
|
+
const bridge = getBridgeWindow9();
|
|
3016
|
+
if (!bridge) {
|
|
3017
|
+
return 0;
|
|
3018
|
+
}
|
|
3019
|
+
const top = getViewportInsets().percent.top;
|
|
3020
|
+
if (top <= 0) {
|
|
3021
|
+
warnMissingBridge7("getSafeAreaTop");
|
|
3022
|
+
}
|
|
3023
|
+
return top;
|
|
3024
|
+
}
|
|
3025
|
+
function setLeaderboardVisible(visible) {
|
|
3026
|
+
if (typeof visible !== "boolean") {
|
|
3027
|
+
if (isDevelopment10()) {
|
|
3028
|
+
console.warn(
|
|
3029
|
+
"[oasiz/sdk] setLeaderboardVisible expected a boolean:",
|
|
3030
|
+
visible
|
|
3031
|
+
);
|
|
3032
|
+
}
|
|
3033
|
+
return;
|
|
3034
|
+
}
|
|
3035
|
+
const bridge = getBridgeWindow9();
|
|
3036
|
+
if (typeof bridge?.__oasizSetLeaderboardVisible === "function") {
|
|
3037
|
+
bridge.__oasizSetLeaderboardVisible(visible);
|
|
351
3038
|
return;
|
|
352
3039
|
}
|
|
353
|
-
|
|
3040
|
+
warnMissingBridge7("__oasizSetLeaderboardVisible");
|
|
354
3041
|
}
|
|
355
3042
|
|
|
356
|
-
// src/
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
}
|
|
361
|
-
|
|
3043
|
+
// src/performance.ts
|
|
3044
|
+
var DEFAULT_GRAPHICS_PERFORMANCE = {
|
|
3045
|
+
fps: 45,
|
|
3046
|
+
tier: "medium"
|
|
3047
|
+
};
|
|
3048
|
+
var TIER_DEFAULT_FPS = {
|
|
3049
|
+
minimal: 24,
|
|
3050
|
+
low: 30,
|
|
3051
|
+
medium: 45,
|
|
3052
|
+
high: 60
|
|
3053
|
+
};
|
|
3054
|
+
var cachedEstimatedGraphicsPerformance;
|
|
3055
|
+
function getBridgeWindow10() {
|
|
362
3056
|
if (typeof window === "undefined") {
|
|
363
3057
|
return void 0;
|
|
364
3058
|
}
|
|
365
3059
|
return window;
|
|
366
3060
|
}
|
|
367
|
-
function
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
3061
|
+
function isRecord3(value) {
|
|
3062
|
+
return typeof value === "object" && value !== null;
|
|
3063
|
+
}
|
|
3064
|
+
function toFiniteNumber2(value) {
|
|
3065
|
+
if (typeof value === "number" && Number.isFinite(value)) {
|
|
3066
|
+
return value;
|
|
372
3067
|
}
|
|
3068
|
+
if (typeof value === "string") {
|
|
3069
|
+
const parsed = Number.parseFloat(value.trim());
|
|
3070
|
+
if (Number.isFinite(parsed)) {
|
|
3071
|
+
return parsed;
|
|
3072
|
+
}
|
|
3073
|
+
}
|
|
3074
|
+
return void 0;
|
|
373
3075
|
}
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
3076
|
+
function clampScore(value) {
|
|
3077
|
+
return Math.min(100, Math.max(0, Math.round(value)));
|
|
3078
|
+
}
|
|
3079
|
+
function clampFps(value) {
|
|
3080
|
+
return Math.min(240, Math.max(1, Math.round(value)));
|
|
3081
|
+
}
|
|
3082
|
+
function tierFromScore(score) {
|
|
3083
|
+
if (score < 25) return "minimal";
|
|
3084
|
+
if (score < 40) return "low";
|
|
3085
|
+
if (score < 70) return "medium";
|
|
3086
|
+
return "high";
|
|
3087
|
+
}
|
|
3088
|
+
function tierFromFps(fps) {
|
|
3089
|
+
if (fps < 30) return "minimal";
|
|
3090
|
+
if (fps < 45) return "low";
|
|
3091
|
+
if (fps < 58) return "medium";
|
|
3092
|
+
return "high";
|
|
3093
|
+
}
|
|
3094
|
+
function fpsFromScore(score) {
|
|
3095
|
+
return TIER_DEFAULT_FPS[tierFromScore(score)];
|
|
3096
|
+
}
|
|
3097
|
+
function normalizeTier(value) {
|
|
3098
|
+
if (typeof value !== "string") {
|
|
3099
|
+
return void 0;
|
|
379
3100
|
}
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
3101
|
+
const normalized = value.trim().toLowerCase();
|
|
3102
|
+
if (normalized === "minimal" || normalized === "safe") return "minimal";
|
|
3103
|
+
if (normalized === "high") return "high";
|
|
3104
|
+
if (normalized === "medium") return "medium";
|
|
3105
|
+
if (normalized === "low") return "low";
|
|
3106
|
+
return void 0;
|
|
384
3107
|
}
|
|
385
|
-
|
|
386
|
-
return
|
|
3108
|
+
function firstDefined2(...values) {
|
|
3109
|
+
return values.find((value) => typeof value !== "undefined");
|
|
387
3110
|
}
|
|
388
|
-
function
|
|
389
|
-
if (typeof
|
|
390
|
-
return
|
|
391
|
-
};
|
|
3111
|
+
function normalizeMetric(value) {
|
|
3112
|
+
if (typeof value === "undefined" || value === null) {
|
|
3113
|
+
return void 0;
|
|
392
3114
|
}
|
|
393
|
-
|
|
394
|
-
const
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
3115
|
+
if (typeof value === "number" || typeof value === "string") {
|
|
3116
|
+
const numeric = toFiniteNumber2(value);
|
|
3117
|
+
if (typeof numeric !== "undefined") {
|
|
3118
|
+
const fps2 = clampFps(numeric);
|
|
3119
|
+
return { fps: fps2, tier: tierFromFps(fps2) };
|
|
3120
|
+
}
|
|
3121
|
+
const tier2 = normalizeTier(value);
|
|
3122
|
+
if (tier2) {
|
|
3123
|
+
return { fps: TIER_DEFAULT_FPS[tier2], tier: tier2 };
|
|
3124
|
+
}
|
|
3125
|
+
return void 0;
|
|
3126
|
+
}
|
|
3127
|
+
if (!isRecord3(value)) {
|
|
3128
|
+
return void 0;
|
|
3129
|
+
}
|
|
3130
|
+
const fpsCandidate = firstDefined2(
|
|
3131
|
+
value.fps,
|
|
3132
|
+
value.targetFps,
|
|
3133
|
+
value.frameRate,
|
|
3134
|
+
value.framesPerSecond
|
|
3135
|
+
);
|
|
3136
|
+
const legacyScoreCandidate = firstDefined2(
|
|
3137
|
+
value.score,
|
|
3138
|
+
value.metric,
|
|
3139
|
+
value.value,
|
|
3140
|
+
value.performance,
|
|
3141
|
+
value.performanceScore,
|
|
3142
|
+
value.graphicsScore
|
|
3143
|
+
);
|
|
3144
|
+
const tierCandidate = firstDefined2(
|
|
3145
|
+
value.tier,
|
|
3146
|
+
value.graphicsTier,
|
|
3147
|
+
value.performanceTier,
|
|
3148
|
+
value.qualityTier,
|
|
3149
|
+
value.recommendedTier
|
|
3150
|
+
);
|
|
3151
|
+
const tier = normalizeTier(tierCandidate);
|
|
3152
|
+
const fpsNumeric = toFiniteNumber2(fpsCandidate);
|
|
3153
|
+
const scoreNumeric = toFiniteNumber2(legacyScoreCandidate);
|
|
3154
|
+
if (typeof fpsNumeric === "undefined" && typeof scoreNumeric === "undefined" && !tier) {
|
|
3155
|
+
return void 0;
|
|
3156
|
+
}
|
|
3157
|
+
const fps = clampFps(
|
|
3158
|
+
typeof fpsNumeric !== "undefined" ? fpsNumeric : typeof scoreNumeric !== "undefined" ? fpsFromScore(clampScore(scoreNumeric)) : TIER_DEFAULT_FPS[tier]
|
|
3159
|
+
);
|
|
3160
|
+
return {
|
|
3161
|
+
fps,
|
|
3162
|
+
tier: tier ?? tierFromFps(fps)
|
|
400
3163
|
};
|
|
401
3164
|
}
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
}
|
|
3165
|
+
function callBridgeMetric(bridge, name) {
|
|
3166
|
+
const fn = bridge[name];
|
|
3167
|
+
if (typeof fn !== "function") {
|
|
3168
|
+
return void 0;
|
|
3169
|
+
}
|
|
3170
|
+
try {
|
|
3171
|
+
return fn.call(bridge);
|
|
3172
|
+
} catch (error) {
|
|
3173
|
+
console.error("[oasiz/sdk] " + String(name) + " failed:", error);
|
|
3174
|
+
return void 0;
|
|
3175
|
+
}
|
|
407
3176
|
}
|
|
408
|
-
|
|
409
|
-
const
|
|
410
|
-
|
|
3177
|
+
function readHostGraphicsPerformance(bridge) {
|
|
3178
|
+
const candidates = [
|
|
3179
|
+
callBridgeMetric(bridge, "getGraphicsPerformance"),
|
|
3180
|
+
callBridgeMetric(bridge, "getGraphicsPerformanceMetric"),
|
|
3181
|
+
callBridgeMetric(bridge, "getPerformanceMetric"),
|
|
3182
|
+
bridge.__OASIZ_GRAPHICS_PERFORMANCE__,
|
|
3183
|
+
bridge.__OASIZ_PERFORMANCE_METRIC__
|
|
3184
|
+
];
|
|
3185
|
+
for (const candidate of candidates) {
|
|
3186
|
+
const metric = normalizeMetric(candidate);
|
|
3187
|
+
if (metric) {
|
|
3188
|
+
return metric;
|
|
3189
|
+
}
|
|
3190
|
+
}
|
|
3191
|
+
return void 0;
|
|
411
3192
|
}
|
|
412
|
-
|
|
413
|
-
const
|
|
414
|
-
return
|
|
3193
|
+
function getDevicePixelRatio2(bridge) {
|
|
3194
|
+
const dpr = bridge.devicePixelRatio;
|
|
3195
|
+
return typeof dpr === "number" && Number.isFinite(dpr) && dpr > 0 ? dpr : 1;
|
|
415
3196
|
}
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
return state.entitlements.find((item) => item.productId === productId)?.owned === true;
|
|
3197
|
+
function getNavigatorValue(bridge) {
|
|
3198
|
+
return bridge.navigator;
|
|
419
3199
|
}
|
|
420
|
-
|
|
421
|
-
const
|
|
422
|
-
|
|
3200
|
+
function parseIosMajorVersion(userAgent) {
|
|
3201
|
+
const match = /\bOS (\d+)_/i.exec(userAgent);
|
|
3202
|
+
if (!match) {
|
|
3203
|
+
return void 0;
|
|
3204
|
+
}
|
|
3205
|
+
const parsed = Number.parseInt(match[1] ?? "", 10);
|
|
3206
|
+
return Number.isFinite(parsed) ? parsed : void 0;
|
|
423
3207
|
}
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
quantity
|
|
428
|
-
});
|
|
3208
|
+
function isAppleMobileDevice(bridge) {
|
|
3209
|
+
const userAgent = bridge.navigator?.userAgent ?? "";
|
|
3210
|
+
return /iP(hone|ad|od)/i.test(userAgent) || /Macintosh/i.test(userAgent) && (bridge.navigator?.maxTouchPoints ?? 0) > 1;
|
|
429
3211
|
}
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
3212
|
+
function getLongestScreenEdge(bridge) {
|
|
3213
|
+
const screenWidth = bridge.screen?.width;
|
|
3214
|
+
const screenHeight = bridge.screen?.height;
|
|
3215
|
+
const innerWidth = bridge.innerWidth;
|
|
3216
|
+
const innerHeight = bridge.innerHeight;
|
|
3217
|
+
return Math.max(
|
|
3218
|
+
typeof screenWidth === "number" ? screenWidth : 0,
|
|
3219
|
+
typeof screenHeight === "number" ? screenHeight : 0,
|
|
3220
|
+
typeof innerWidth === "number" ? innerWidth : 0,
|
|
3221
|
+
typeof innerHeight === "number" ? innerHeight : 0
|
|
3222
|
+
);
|
|
435
3223
|
}
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
3224
|
+
function isCoarsePointer(bridge) {
|
|
3225
|
+
try {
|
|
3226
|
+
return bridge.matchMedia?.("(pointer: coarse)").matches === true;
|
|
3227
|
+
} catch {
|
|
3228
|
+
return false;
|
|
3229
|
+
}
|
|
439
3230
|
}
|
|
440
|
-
function
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
3231
|
+
function getWebGlInfo(bridge) {
|
|
3232
|
+
const canvas = bridge.document?.createElement?.("canvas");
|
|
3233
|
+
if (!canvas || typeof canvas.getContext !== "function") {
|
|
3234
|
+
return { webglVersion: 0 };
|
|
3235
|
+
}
|
|
3236
|
+
const gl2 = canvas.getContext("webgl2");
|
|
3237
|
+
const gl = gl2 ?? canvas.getContext("webgl") ?? canvas.getContext("experimental-webgl");
|
|
3238
|
+
if (!gl) {
|
|
3239
|
+
return { webglVersion: 0 };
|
|
3240
|
+
}
|
|
3241
|
+
const context = gl;
|
|
3242
|
+
let maxTextureSize;
|
|
3243
|
+
let renderer;
|
|
3244
|
+
try {
|
|
3245
|
+
const value = context.getParameter(context.MAX_TEXTURE_SIZE);
|
|
3246
|
+
if (typeof value === "number" && Number.isFinite(value)) {
|
|
3247
|
+
maxTextureSize = value;
|
|
3248
|
+
}
|
|
3249
|
+
} catch {
|
|
3250
|
+
}
|
|
3251
|
+
try {
|
|
3252
|
+
const debugInfo = context.getExtension("WEBGL_debug_renderer_info");
|
|
3253
|
+
const rendererParam = debugInfo?.UNMASKED_RENDERER_WEBGL ?? context.RENDERER;
|
|
3254
|
+
const value = context.getParameter(rendererParam);
|
|
3255
|
+
if (typeof value === "string") {
|
|
3256
|
+
renderer = value;
|
|
3257
|
+
}
|
|
3258
|
+
} catch {
|
|
3259
|
+
}
|
|
3260
|
+
return {
|
|
3261
|
+
maxTextureSize,
|
|
3262
|
+
renderer,
|
|
3263
|
+
webglVersion: gl2 ? 2 : 1
|
|
3264
|
+
};
|
|
444
3265
|
}
|
|
445
|
-
function
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
}
|
|
3266
|
+
function applyMemoryScore(score, memory) {
|
|
3267
|
+
if (typeof memory !== "number" || !Number.isFinite(memory) || memory <= 0) {
|
|
3268
|
+
return score;
|
|
3269
|
+
}
|
|
3270
|
+
if (memory <= 1) return score - 18;
|
|
3271
|
+
if (memory <= 2) return score - 10;
|
|
3272
|
+
if (memory >= 8) return score + 16;
|
|
3273
|
+
if (memory >= 6) return score + 10;
|
|
3274
|
+
return score;
|
|
3275
|
+
}
|
|
3276
|
+
function applyCoreScore(score, cores) {
|
|
3277
|
+
if (typeof cores !== "number" || !Number.isFinite(cores) || cores <= 0) {
|
|
3278
|
+
return score;
|
|
3279
|
+
}
|
|
3280
|
+
if (cores <= 2) return score - 12;
|
|
3281
|
+
if (cores <= 4) return score;
|
|
3282
|
+
if (cores >= 8) return score + 12;
|
|
3283
|
+
return score + 8;
|
|
3284
|
+
}
|
|
3285
|
+
function applyWebGlScore(score, info) {
|
|
3286
|
+
let next = score;
|
|
3287
|
+
if (info.webglVersion === 2) {
|
|
3288
|
+
next += 16;
|
|
3289
|
+
} else if (info.webglVersion === 1) {
|
|
3290
|
+
next += 6;
|
|
3291
|
+
} else {
|
|
3292
|
+
next -= 25;
|
|
3293
|
+
}
|
|
3294
|
+
if (typeof info.maxTextureSize === "number") {
|
|
3295
|
+
if (info.maxTextureSize >= 8192) next += 10;
|
|
3296
|
+
else if (info.maxTextureSize >= 4096) next += 3;
|
|
3297
|
+
else next -= 8;
|
|
3298
|
+
}
|
|
3299
|
+
const renderer = info.renderer?.toLowerCase() ?? "";
|
|
3300
|
+
if (/swiftshader|llvmpipe|software/.test(renderer)) {
|
|
3301
|
+
next = Math.min(next, 35);
|
|
3302
|
+
} else if (/\bm[1-9]\b|apple gpu|a1[6-9]|rtx|radeon|adreno 7|adreno 8/.test(renderer)) {
|
|
3303
|
+
next += 8;
|
|
3304
|
+
}
|
|
3305
|
+
return next;
|
|
3306
|
+
}
|
|
3307
|
+
function applyMobileCostScore(score, bridge) {
|
|
3308
|
+
if (!isCoarsePointer(bridge)) {
|
|
3309
|
+
return score;
|
|
3310
|
+
}
|
|
3311
|
+
const dpr = getDevicePixelRatio2(bridge);
|
|
3312
|
+
const width = bridge.screen?.width ?? bridge.innerWidth ?? 0;
|
|
3313
|
+
const height = bridge.screen?.height ?? bridge.innerHeight ?? 0;
|
|
3314
|
+
const physicalPixels = width * height * dpr * dpr;
|
|
3315
|
+
if (physicalPixels > 4e6) {
|
|
3316
|
+
return score - 5;
|
|
3317
|
+
}
|
|
3318
|
+
return score;
|
|
3319
|
+
}
|
|
3320
|
+
function applyAppleMobileRules(score, bridge) {
|
|
3321
|
+
if (!isAppleMobileDevice(bridge)) {
|
|
3322
|
+
return score;
|
|
3323
|
+
}
|
|
3324
|
+
const userAgent = bridge.navigator?.userAgent ?? "";
|
|
3325
|
+
const iosMajorVersion = parseIosMajorVersion(userAgent);
|
|
3326
|
+
const highDensityDisplay = getDevicePixelRatio2(bridge) >= 3;
|
|
3327
|
+
const longestScreenEdge = getLongestScreenEdge(bridge);
|
|
3328
|
+
if (typeof iosMajorVersion === "number" && iosMajorVersion < 15) {
|
|
3329
|
+
return Math.min(score, 35);
|
|
3330
|
+
}
|
|
3331
|
+
if (highDensityDisplay && longestScreenEdge >= 430 && (typeof iosMajorVersion === "undefined" || iosMajorVersion >= 17)) {
|
|
3332
|
+
return Math.max(score, 78);
|
|
3333
|
+
}
|
|
3334
|
+
if (highDensityDisplay && longestScreenEdge >= 414 && (typeof iosMajorVersion === "undefined" || iosMajorVersion >= 16)) {
|
|
3335
|
+
return Math.max(score, 62);
|
|
3336
|
+
}
|
|
3337
|
+
return Math.min(score, 48);
|
|
3338
|
+
}
|
|
3339
|
+
function estimateGraphicsPerformance(bridge) {
|
|
3340
|
+
const navigatorValue = getNavigatorValue(bridge);
|
|
3341
|
+
let score = 45;
|
|
3342
|
+
score = applyMemoryScore(score, navigatorValue?.deviceMemory);
|
|
3343
|
+
score = applyCoreScore(score, navigatorValue?.hardwareConcurrency);
|
|
3344
|
+
score = applyWebGlScore(score, getWebGlInfo(bridge));
|
|
3345
|
+
score = applyMobileCostScore(score, bridge);
|
|
3346
|
+
score = applyAppleMobileRules(score, bridge);
|
|
3347
|
+
const normalizedScore = clampScore(score);
|
|
3348
|
+
return {
|
|
3349
|
+
fps: fpsFromScore(normalizedScore),
|
|
3350
|
+
tier: tierFromScore(normalizedScore)
|
|
3351
|
+
};
|
|
3352
|
+
}
|
|
3353
|
+
function getGraphicsPerformance() {
|
|
3354
|
+
const bridge = getBridgeWindow10();
|
|
3355
|
+
if (!bridge) {
|
|
3356
|
+
return { ...DEFAULT_GRAPHICS_PERFORMANCE };
|
|
3357
|
+
}
|
|
3358
|
+
const hostMetric = readHostGraphicsPerformance(bridge);
|
|
3359
|
+
if (hostMetric) {
|
|
3360
|
+
return hostMetric;
|
|
3361
|
+
}
|
|
3362
|
+
cachedEstimatedGraphicsPerformance ??= estimateGraphicsPerformance(bridge);
|
|
3363
|
+
return { ...cachedEstimatedGraphicsPerformance };
|
|
449
3364
|
}
|
|
450
3365
|
|
|
451
3366
|
// src/index.ts
|
|
452
3367
|
var oasiz = {
|
|
453
3368
|
submitScore,
|
|
454
|
-
|
|
3369
|
+
enableAppSimulator,
|
|
3370
|
+
getJibbleAnimationId,
|
|
3371
|
+
jibbleAnimations: JIBBLE_ANIMATION,
|
|
3372
|
+
jibbleAnimationIds: JIBBLE_ANIMATION_IDS,
|
|
3373
|
+
jibbleDirections: JIBBLE_DIRECTIONS,
|
|
3374
|
+
addScore,
|
|
3375
|
+
setScore,
|
|
3376
|
+
getPlayerCharacter,
|
|
455
3377
|
share,
|
|
456
3378
|
triggerHaptic,
|
|
3379
|
+
enableLogOverlay,
|
|
457
3380
|
loadGameState,
|
|
458
3381
|
saveGameState,
|
|
459
3382
|
flushGameState,
|
|
460
3383
|
shareRoomCode,
|
|
3384
|
+
openInviteModal,
|
|
461
3385
|
onPause,
|
|
462
3386
|
onResume,
|
|
3387
|
+
getSafeAreaTop,
|
|
3388
|
+
getViewportInsets,
|
|
3389
|
+
setLeaderboardVisible,
|
|
3390
|
+
getGraphicsPerformance,
|
|
3391
|
+
enableBackButtonTesting,
|
|
463
3392
|
onBackButton,
|
|
464
3393
|
onLeaveGame,
|
|
465
3394
|
leaveGame,
|
|
466
|
-
store: {
|
|
467
|
-
syncProducts,
|
|
468
|
-
getProducts,
|
|
469
|
-
getEntitlements,
|
|
470
|
-
hasEntitlement,
|
|
471
|
-
getQuantity,
|
|
472
|
-
purchase,
|
|
473
|
-
consume,
|
|
474
|
-
getJemBalance,
|
|
475
|
-
onEntitlementsChanged,
|
|
476
|
-
onJemBalanceChanged
|
|
477
|
-
},
|
|
478
3395
|
get gameId() {
|
|
479
3396
|
return getGameId();
|
|
480
3397
|
},
|
|
481
3398
|
get roomCode() {
|
|
482
3399
|
return getRoomCode();
|
|
483
3400
|
},
|
|
3401
|
+
get playerId() {
|
|
3402
|
+
return getPlayerId();
|
|
3403
|
+
},
|
|
484
3404
|
get playerName() {
|
|
485
3405
|
return getPlayerName();
|
|
486
3406
|
},
|
|
487
3407
|
get playerAvatar() {
|
|
488
3408
|
return getPlayerAvatar();
|
|
3409
|
+
},
|
|
3410
|
+
get safeAreaTop() {
|
|
3411
|
+
return getSafeAreaTop();
|
|
3412
|
+
},
|
|
3413
|
+
get viewportInsets() {
|
|
3414
|
+
return getViewportInsets();
|
|
3415
|
+
},
|
|
3416
|
+
get graphicsPerformance() {
|
|
3417
|
+
return getGraphicsPerformance();
|
|
489
3418
|
}
|
|
490
3419
|
};
|
|
491
3420
|
export {
|
|
492
|
-
|
|
493
|
-
|
|
3421
|
+
JIBBLE_ANIMATION,
|
|
3422
|
+
JIBBLE_ANIMATION_IDS,
|
|
3423
|
+
JIBBLE_DIRECTIONS,
|
|
3424
|
+
addScore,
|
|
3425
|
+
enableAppSimulator,
|
|
3426
|
+
enableBackButtonTesting,
|
|
3427
|
+
enableLogOverlay,
|
|
494
3428
|
flushGameState,
|
|
495
|
-
getEntitlements,
|
|
496
3429
|
getGameId,
|
|
497
|
-
|
|
3430
|
+
getGraphicsPerformance,
|
|
3431
|
+
getJibbleAnimationId,
|
|
498
3432
|
getPlayerAvatar,
|
|
3433
|
+
getPlayerCharacter,
|
|
3434
|
+
getPlayerId,
|
|
499
3435
|
getPlayerName,
|
|
500
|
-
getProducts,
|
|
501
|
-
getQuantity,
|
|
502
3436
|
getRoomCode,
|
|
503
|
-
|
|
3437
|
+
getSafeAreaTop,
|
|
3438
|
+
getViewportInsets,
|
|
504
3439
|
leaveGame,
|
|
505
3440
|
loadGameState,
|
|
3441
|
+
normalizeJibbleDirection,
|
|
506
3442
|
oasiz,
|
|
507
3443
|
onBackButton,
|
|
508
|
-
onEntitlementsChanged,
|
|
509
|
-
onJemBalanceChanged,
|
|
510
3444
|
onLeaveGame,
|
|
511
3445
|
onPause,
|
|
512
3446
|
onResume,
|
|
513
|
-
|
|
3447
|
+
openInviteModal,
|
|
514
3448
|
saveGameState,
|
|
3449
|
+
setLeaderboardVisible,
|
|
3450
|
+
setScore,
|
|
515
3451
|
share,
|
|
516
3452
|
shareRoomCode,
|
|
517
3453
|
submitScore,
|
|
518
|
-
syncProducts,
|
|
519
3454
|
triggerHaptic
|
|
520
3455
|
};
|