@littlepartytime/dev-kit 1.18.1 → 1.18.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.
|
@@ -11,53 +11,39 @@ const CAPTURE_H = 751; // 844 - 59 - 34
|
|
|
11
11
|
* Also exposed on window.__devkit__.captureScreen() for LLM/Playwright callers:
|
|
12
12
|
* await page.evaluate(() => window.__devkit__.captureScreen())
|
|
13
13
|
*
|
|
14
|
-
* ##
|
|
15
|
-
* The PhoneFrame has two CSS properties that break html2canvas:
|
|
14
|
+
* ## Strategy: clone into a mobile-viewport-sized container
|
|
16
15
|
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
* (e.g. 375px at 0.5× scale) even though the canvas is 751px tall, leaving the
|
|
22
|
-
* bottom half black.
|
|
16
|
+
* All LPT games are designed for full-screen mobile. In the dev-kit, the game
|
|
17
|
+
* renders inside PhoneFrame which wraps it in transform:scale + contain:paint.
|
|
18
|
+
* html2canvas cannot correctly capture elements inside this hierarchy because
|
|
19
|
+
* getBoundingClientRect() returns the scaled visual size, not the natural size.
|
|
23
20
|
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
* user from seeing the brief layout shift.
|
|
21
|
+
* Instead of fighting html2canvas, we deep-clone the game DOM subtree into a
|
|
22
|
+
* standalone 390×751 container appended to <body> — no transforms, no contain,
|
|
23
|
+
* no overflow clipping from ancestors. The game content is designed for exactly
|
|
24
|
+
* this size, so it renders correctly. html2canvas captures the clean container
|
|
25
|
+
* with no coordinate mismatches.
|
|
30
26
|
*/
|
|
31
27
|
export async function captureScreen(): Promise<string> {
|
|
32
28
|
const el = document.getElementById('devkit-game-screen');
|
|
33
29
|
if (!el) throw new Error('[devkit] #devkit-game-screen not found — is the Preview page active?');
|
|
34
30
|
|
|
35
|
-
//
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
if (node.style[prop]) {
|
|
49
|
-
saved.push([node, prop, node.style[prop]]);
|
|
50
|
-
node.style[prop] = prop === 'transform' ? 'none' : '';
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
node = node.parentElement;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
// Wait for the browser to reflow/repaint with the normalised styles.
|
|
57
|
-
await new Promise<void>(r => requestAnimationFrame(() => requestAnimationFrame(r)));
|
|
31
|
+
// Deep-clone the safe-area subtree into a standalone mobile-sized container.
|
|
32
|
+
const clone = el.cloneNode(true) as HTMLElement;
|
|
33
|
+
clone.removeAttribute('id');
|
|
34
|
+
clone.removeAttribute('data-testid');
|
|
35
|
+
clone.style.cssText = `
|
|
36
|
+
position: absolute;
|
|
37
|
+
left: -9999px;
|
|
38
|
+
top: 0;
|
|
39
|
+
width: ${CAPTURE_W}px;
|
|
40
|
+
height: ${CAPTURE_H}px;
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
`;
|
|
43
|
+
document.body.appendChild(clone);
|
|
58
44
|
|
|
59
45
|
try {
|
|
60
|
-
const canvas = await html2canvas(
|
|
46
|
+
const canvas = await html2canvas(clone, {
|
|
61
47
|
width: CAPTURE_W,
|
|
62
48
|
height: CAPTURE_H,
|
|
63
49
|
scale: 2,
|
|
@@ -68,9 +54,7 @@ export async function captureScreen(): Promise<string> {
|
|
|
68
54
|
});
|
|
69
55
|
return canvas.toDataURL('image/png');
|
|
70
56
|
} finally {
|
|
71
|
-
|
|
72
|
-
for (const [node, prop, val] of saved) node.style[prop] = val;
|
|
73
|
-
document.body.removeChild(overlay);
|
|
57
|
+
document.body.removeChild(clone);
|
|
74
58
|
}
|
|
75
59
|
}
|
|
76
60
|
|