Skip to content

Commit 74e6668

Browse files
coocoodaegapcoocoodaegap
committed
test: update playground
1 parent f16a9d1 commit 74e6668

File tree

5 files changed

+95
-58
lines changed

5 files changed

+95
-58
lines changed

‎playground/guest.html‎

Lines changed: 18 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,33 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html>
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>OmniPad Guest Environment</title>
74
<style>
8-
html, body {
9-
margin: 0; padding: 0; width: 100%; height: 100%;
10-
background-color: #000; overflow: hidden;
11-
}
12-
#ruffle-container {
13-
width: 100%; height: 100%;
14-
}
5+
html, body { margin: 0; width: 100vw; height: 100vh;
6+
background: rgba(255, 0, 0, 0); overflow: hidden; border: none;
7+
display: flex; flex-direction: column; align-items: center; justify-content: center; }
8+
iframe { width: 100%; height: 100%; }
159
</style>
16-
<!-- 1. 引入 Ruffle -->
17-
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
1810
</head>
1911
<body>
20-
21-
<div id="ruffle-container"></div>
12+
<iframe src="./player.html"></iframe>
2213

23-
<!-- 2. 业务逻辑：接收父窗口发来的 SWF 地址并让 Ruffle 加载 -->
24-
<script>
25-
let rufflePlayer = null;
26-
27-
function initRuffle() {
28-
const container = document.getElementById('ruffle-container');
29-
const ruffle = window.RufflePlayer.newest();
30-
rufflePlayer = ruffle.createPlayer();
31-
rufflePlayer.style.width = '100%';
32-
rufflePlayer.style.height = '100%';
33-
container.appendChild(rufflePlayer);
34-
}
35-
36-
window.addEventListener('message', (event) => {
37-
// 业务指令：加载游戏
38-
if (event.data && event.data.type === 'BUSINESS_LOAD_SWF') {
39-
if (!rufflePlayer) initRuffle();
40-
41-
console.log('[Guest] Received SWF URL, loading...');
42-
rufflePlayer.load({
43-
url: event.data.url,
44-
allowScriptAccess: true,
45-
backgroundColor: '#000000',
46-
letterbox: 'on',
47-
forceScale: true
48-
});
49-
}
50-
});
51-
</script>
52-
53-
<!-- 3. 信号接收器：监听虚拟手柄信号 -->
54-
<!--
55-
在真实的插件场景中，这段脚本是通过 Content Script 动态注入的。
56-
在我们的测试环境里，我们通过 esm 模块引入它。
57-
由于 public 目录无法直接用 TypeScript，我们需要把接收器编译好的 JS 拿过来，
58-
或者在开发时用 Vite 的特性引入它。
59-
-->
6014
<script type="module">
61-
// 假设你在 @omnipad/core 导出了 initIframeReceiver
62-
// 在 Vite dev 环境中，可以直接请求 src 下的文件
6315
import { initIframeReceiver } from './src/iframe-receiver-test-entry.ts';
64-
65-
// 启动内应，开始监听父窗口的虚拟指针/键盘信号
6616
initIframeReceiver({
6717
allowedOrigins: [window.location.origin]
6818
});
69-
</script>
7019

20+
window.addEventListener('message', (event) => {
21+
if (event.data && event.data.type === 'BUSINESS_LOAD_SWF') {
22+
const subIframe = document.querySelector('iframe');
23+
24+
console.log(event)
25+
26+
if (subIframe && subIframe.contentWindow) {
27+
subIframe.contentWindow.postMessage(event.data, window.location.origin);
28+
}
29+
}
30+
});
31+
</script>
7132
</body>
7233
</html>

‎playground/player.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>OmniPad Guest Environment</title>
7+
<style>
8+
html, body {
9+
margin: 0; padding: 0; width: 100%; height: 100%;
10+
background-color: #000; overflow: hidden;
11+
}
12+
#ruffle-container {
13+
width: 100%; height: 100%;
14+
}
15+
</style>
16+
<!-- 1. 引入 Ruffle -->
17+
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
18+
</head>
19+
<body>
20+
21+
<div id="ruffle-container"></div>
22+
23+
<!-- 2. 业务逻辑：接收父窗口发来的 SWF 地址并让 Ruffle 加载 -->
24+
<script>
25+
let rufflePlayer = null;
26+
27+
function initRuffle() {
28+
const container = document.getElementById('ruffle-container');
29+
const ruffle = window.RufflePlayer.newest();
30+
rufflePlayer = ruffle.createPlayer();
31+
rufflePlayer.style.width = '100%';
32+
rufflePlayer.style.height = '100%';
33+
container.appendChild(rufflePlayer);
34+
}
35+
36+
window.addEventListener('message', (event) => {
37+
// 业务指令：加载游戏
38+
if (event.data && event.data.type === 'BUSINESS_LOAD_SWF') {
39+
if (!rufflePlayer) initRuffle();
40+
41+
console.log('[Guest] Received SWF URL, loading...');
42+
rufflePlayer.load({
43+
url: event.data.url,
44+
allowScriptAccess: true,
45+
backgroundColor: '#000000',
46+
letterbox: 'on',
47+
forceScale: true
48+
});
49+
}
50+
});
51+
</script>
52+
53+
<!-- 3. 信号接收器：监听虚拟手柄信号 -->
54+
<!--
55+
在真实的插件场景中，这段脚本是通过 Content Script 动态注入的。
56+
在我们的测试环境里，我们通过 esm 模块引入它。
57+
由于 public 目录无法直接用 TypeScript，我们需要把接收器编译好的 JS 拿过来，
58+
或者在开发时用 Vite 的特性引入它。
59+
-->
60+
<script type="module">
61+
// 假设你在 @omnipad/core 导出了 initIframeReceiver
62+
// 在 Vite dev 环境中，可以直接请求 src 下的文件
63+
import { initIframeReceiver } from './src/iframe-receiver-test-entry.ts';
64+
65+
// 启动内应，开始监听父窗口的虚拟指针/键盘信号
66+
initIframeReceiver({
67+
allowedOrigins: [window.location.origin]
68+
});
69+
</script>
70+
71+
</body>
72+
</html>

‎playground/src/components/DemoIntro.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@
4242
text-align: center;
4343
padding: 40px;
4444
box-sizing: border-box;
45+
46+
pointer-events: none;
47+
user-select: none;
4548
}
4649
4750
.content {

‎playground/src/components/IFramePlayer.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const loadSwfIntoIframe = (url: string) => {
2323
type: 'BUSINESS_LOAD_SWF',
2424
url: url,
2525
},
26-
'*',
26+
window.location.origin,
2727
);
2828
}
2929
};

‎playground/vite.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export default defineConfig({
1515
input: {
1616
main: resolve(__dirname, 'index.html'),
1717
guest: resolve(__dirname, 'guest.html'),
18+
player: resolve(__dirname, 'player.html'),
1819
},
1920
},
2021
},

0 commit comments

Comments
 (0)