@wasm-gaming/rsdkv3-wasm 0.1.5 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -0
- package/dist/rsdkv3/app/app.css +93 -0
- package/dist/rsdkv3/app/app.js +319 -0
- package/dist/rsdkv3/rsdkv3.sdk.d.ts +1 -1
- package/dist/rsdkv3/rsdkv3.sdk.js +1 -1
- package/package.json +5 -1
- package/src/app/app.css +93 -0
- package/src/app/app.js +319 -0
- package/src/rsdkv3.sdk.ts +1 -1
package/README.md
CHANGED
|
@@ -45,6 +45,22 @@ await play.destroy(); // save flushed, loop stopped, au
|
|
|
45
45
|
Events: the contract's `start`, `error`, `exit`, `pause`, `resume`, plus `saves`.
|
|
46
46
|
RSDKv3 cannot restart in process: after `destroy()`, a new session needs a new page (or iframe).
|
|
47
47
|
|
|
48
|
+
## The engine's own app
|
|
49
|
+
|
|
50
|
+
A host that would rather not draw menus mounts the app shipped next to the SDK
|
|
51
|
+
([engine-specs](https://github.com/wasm-gaming/engine-specs) `EngineApp`, `UX.md`):
|
|
52
|
+
|
|
53
|
+
```js
|
|
54
|
+
const app = await import('@wasm-gaming/rsdkv3-wasm/app'); // dist/rsdkv3/app/app.js
|
|
55
|
+
const handle = await app.mount(element, { game, storage, assets, input, exit });
|
|
56
|
+
await handle.unmount();
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
It shows a boot screen, then Sonic CD with its own title and save select. Select + Start or
|
|
60
|
+
Escape opens the pause menu: *Continuar*, the game's own screens found in the stage list (title
|
|
61
|
+
screen, main menu, level select — only those the data has) and *Volver al lanzador* (asks first).
|
|
62
|
+
There is no load-game screen like rsdkv4's yet: that needs a native bridge (see `RECORD/`).
|
|
63
|
+
|
|
48
64
|
## Saves live in the engine's own folder
|
|
49
65
|
|
|
50
66
|
The working dir is `/data/rsdkv3/<namespace>` (in memory). The SDK seeds `SData.bin` from OPFS
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/* rsdkv3 app — boot screen and pause menu (same look as rsdkv4's app).
|
|
2
|
+
Tokens come from engine-specs (UI_TOKENS, `--wg-*`) when the host sets them; the
|
|
3
|
+
fallbacks are the same values, so the app looks right on a bare page too. */
|
|
4
|
+
|
|
5
|
+
.rsdk-app {
|
|
6
|
+
--ring: var(--wg-focus-ring, 0 0 0 3px #fff);
|
|
7
|
+
--surface: var(--wg-surface, rgb(18 20 28 / 0.78));
|
|
8
|
+
--line: var(--wg-line, rgb(255 255 255 / 0.12));
|
|
9
|
+
--text: var(--wg-text, #f4f6fb);
|
|
10
|
+
--muted: var(--wg-muted, #8e97a9);
|
|
11
|
+
--danger: var(--wg-danger, #f87171);
|
|
12
|
+
--ui: var(--wg-font-ui, 'Inter Variable', 'Inter', system-ui, sans-serif);
|
|
13
|
+
--display: var(--wg-font-display, 'Unbounded Variable', 'Unbounded', system-ui, sans-serif);
|
|
14
|
+
--ease: var(--wg-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
|
|
15
|
+
position: absolute;
|
|
16
|
+
inset: 0;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
background: #000;
|
|
19
|
+
color: var(--text);
|
|
20
|
+
font-family: var(--ui);
|
|
21
|
+
user-select: none;
|
|
22
|
+
-webkit-tap-highlight-color: transparent;
|
|
23
|
+
}
|
|
24
|
+
.rsdk-app * { box-sizing: border-box; }
|
|
25
|
+
.rsdk-stage { position: absolute; inset: 0; display: grid; place-items: center; }
|
|
26
|
+
.rsdk-stage canvas { outline: none; }
|
|
27
|
+
.rsdk-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
|
|
28
|
+
.rsdk-overlay > * { pointer-events: auto; }
|
|
29
|
+
.rsdk-app[data-screen='game'] .rsdk-overlay { display: none; }
|
|
30
|
+
|
|
31
|
+
/* Everything but the game sits on a backdrop that keeps the game visible underneath. */
|
|
32
|
+
.rsdk-app:not([data-screen='game']) .rsdk-overlay {
|
|
33
|
+
background:
|
|
34
|
+
radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%),
|
|
35
|
+
rgb(4 6 12 / 0.72);
|
|
36
|
+
backdrop-filter: blur(14px) saturate(1.2);
|
|
37
|
+
-webkit-backdrop-filter: blur(14px) saturate(1.2);
|
|
38
|
+
}
|
|
39
|
+
.rsdk-app[data-screen='boot'] .rsdk-overlay { background-color: rgb(4 6 12 / 0.9); }
|
|
40
|
+
|
|
41
|
+
.kicker { margin: 0; font: 600 0.72rem var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
|
|
42
|
+
.rsdk-app h2 { margin: 0; font: 700 clamp(1.4rem, 3vw, 2.1rem) var(--display); letter-spacing: -0.02em; }
|
|
43
|
+
|
|
44
|
+
/* ---- boot ---- */
|
|
45
|
+
.rsdk-boot { display: grid; justify-items: center; gap: 22px; }
|
|
46
|
+
.rsdk-boot img { width: min(260px, 50vw); border-radius: 22px; box-shadow: 0 30px 80px -30px #000; animation: rsdk-breathe 2.4s var(--ease) infinite alternate; }
|
|
47
|
+
.rsdk-boot p { margin: 0; color: var(--muted); font-weight: 500; }
|
|
48
|
+
@keyframes rsdk-breathe { from { opacity: 0.55; transform: scale(0.98); } to { opacity: 1; transform: none; } }
|
|
49
|
+
|
|
50
|
+
/* ---- pause & confirm ---- */
|
|
51
|
+
.rsdk-panel {
|
|
52
|
+
width: min(440px, 92vw); display: grid; gap: 10px; padding: 26px; border-radius: 28px;
|
|
53
|
+
background: rgb(20 22 31 / 0.9); border: 1px solid var(--line); box-shadow: 0 40px 100px -30px #000;
|
|
54
|
+
}
|
|
55
|
+
.rsdk-panel h2 { margin-bottom: 8px; }
|
|
56
|
+
.rsdk-panel .text { margin: 0 0 8px; color: var(--muted); line-height: 1.5; }
|
|
57
|
+
.item {
|
|
58
|
+
all: unset; box-sizing: border-box; display: grid; gap: 2px; padding: 13px 16px; border-radius: 14px;
|
|
59
|
+
background: rgb(255 255 255 / 0.05); font-weight: 600; cursor: pointer; transition: background 0.15s, box-shadow 0.15s;
|
|
60
|
+
}
|
|
61
|
+
.item small { font-weight: 500; font-size: 0.78rem; color: var(--muted); }
|
|
62
|
+
.item.is-focused { background: #fff; color: #0b0d12; box-shadow: var(--ring); }
|
|
63
|
+
.item.is-focused small { color: #4b5563; }
|
|
64
|
+
.item.is-danger.is-focused { background: var(--danger); color: #1a0505; box-shadow: 0 0 0 3px var(--danger); }
|
|
65
|
+
.rsdk-panel .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
66
|
+
.rsdk-panel .row .item { text-align: center; }
|
|
67
|
+
/* A dialog sits on its own layer, above anything the screen under it positions (the
|
|
68
|
+
character art on the slot cards is z-index 1), on a backdrop that hides that screen. */
|
|
69
|
+
.rsdk-confirm {
|
|
70
|
+
position: absolute; inset: 0; z-index: 10; display: grid; place-items: center;
|
|
71
|
+
background: rgb(4 6 12 / 0.78);
|
|
72
|
+
backdrop-filter: blur(10px) saturate(0.8);
|
|
73
|
+
-webkit-backdrop-filter: blur(10px) saturate(0.8);
|
|
74
|
+
}
|
|
75
|
+
.rsdk-confirm h2 { font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.2; }
|
|
76
|
+
.rsdk-confirm .rsdk-panel {
|
|
77
|
+
width: min(500px, 92vw);
|
|
78
|
+
background:
|
|
79
|
+
radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
|
|
80
|
+
#151821;
|
|
81
|
+
border-color: rgb(255 255 255 / 0.14);
|
|
82
|
+
box-shadow: 0 40px 120px -20px #000, 0 0 0 1px rgb(0 0 0 / 0.4);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* ---- hints ---- */
|
|
86
|
+
.rsdk-hints { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; color: var(--muted); font-size: 0.78rem; font-weight: 500; }
|
|
87
|
+
.rsdk-hints span { display: inline-flex; align-items: center; gap: 7px; }
|
|
88
|
+
.rsdk-hints kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgb(255 255 255 / 0.12); color: var(--text); font: 700 0.68rem var(--ui); }
|
|
89
|
+
.rsdk-panel .rsdk-hints { justify-content: flex-start; margin-top: 6px; }
|
|
90
|
+
|
|
91
|
+
@media (prefers-reduced-motion: reduce) {
|
|
92
|
+
.rsdk-boot img { transition: none; animation: none; }
|
|
93
|
+
}
|
|
@@ -0,0 +1,319 @@
|
|
|
1
|
+
// rsdkv3's own app: what a host gets when it mounts this engine instead of driving
|
|
2
|
+
// the SDK itself — a boot screen, then the game with its OWN title and save select,
|
|
3
|
+
// and a pause menu on the wasm-gaming usability scheme (engine-specs UX.md).
|
|
4
|
+
//
|
|
5
|
+
// import * as app from '<engines>/rsdkv3/app/app.js'
|
|
6
|
+
// const handle = await app.mount(target, host) // EngineApp.mount
|
|
7
|
+
// await handle.unmount()
|
|
8
|
+
//
|
|
9
|
+
// `host` is engine-specs' EngineAppHost: { game, storage, assets, input, exit }. The
|
|
10
|
+
// input is the host's createInput(): resumed it delivers menu actions; suspended (in
|
|
11
|
+
// game) only Select+Start and Escape come through, as `menu`.
|
|
12
|
+
//
|
|
13
|
+
// Unlike rsdkv4's app there is no load-game screen: Sonic CD's menus are scripts in
|
|
14
|
+
// Data.rsdk, with no native bridge to list or start a save (see RECORD/).
|
|
15
|
+
//
|
|
16
|
+
// Plain JS and DOM on purpose: the app ships inside the engine's package next to the
|
|
17
|
+
// SDK and loads from a static server, so it imports nothing but the SDK.
|
|
18
|
+
|
|
19
|
+
import Rsdkv3SDK from '../rsdkv3.sdk.js';
|
|
20
|
+
|
|
21
|
+
const ENGINE = 'rsdkv3';
|
|
22
|
+
const OWNER = 'app';
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* The game's own screens worth jumping to from the pause menu, looked up by scene
|
|
26
|
+
* name in the live stage list. Only the ones the loaded Data.rsdk has are offered.
|
|
27
|
+
*/
|
|
28
|
+
export const GAME_SCREENS = [
|
|
29
|
+
{ match: /^TITLE( SCREEN)?$/i, label: 'Pantalla de título' },
|
|
30
|
+
{ match: /^(MAIN MENU|MENU|SAVE SELECT|STAGE MENU)$/i, label: 'Menú del juego' },
|
|
31
|
+
{ match: /^(LEVEL|STAGE) SELECT$/i, label: 'Level select' }, // Sonic CD: STAGE SELECT
|
|
32
|
+
];
|
|
33
|
+
|
|
34
|
+
/** `[{ label, list, scene }]` for the GAME_SCREENS found in a devMenu stage list. */
|
|
35
|
+
export const findGameScreens = (lists) => {
|
|
36
|
+
const found = [];
|
|
37
|
+
for (const screen of GAME_SCREENS) {
|
|
38
|
+
for (let list = 0; list < (lists?.length ?? 0); list++) {
|
|
39
|
+
const scene = (lists[list]?.stages ?? []).findIndex(({ name } = {}) => screen.match.test(String(name ?? '').trim()));
|
|
40
|
+
if (scene >= 0) {
|
|
41
|
+
found.push({ label: screen.label, list, scene });
|
|
42
|
+
break;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
return found;
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const esc = (text) => String(text ?? '').replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
|
|
50
|
+
|
|
51
|
+
let cssLoaded = null;
|
|
52
|
+
const loadCss = () =>
|
|
53
|
+
(cssLoaded ??= new Promise((resolve) => {
|
|
54
|
+
const link = document.createElement('link');
|
|
55
|
+
link.rel = 'stylesheet';
|
|
56
|
+
link.href = new URL('./app.css', import.meta.url).href;
|
|
57
|
+
link.onload = link.onerror = () => resolve();
|
|
58
|
+
document.head.append(link);
|
|
59
|
+
}));
|
|
60
|
+
|
|
61
|
+
export async function mount(target, host) {
|
|
62
|
+
await loadCss();
|
|
63
|
+
|
|
64
|
+
const root = document.createElement('div');
|
|
65
|
+
root.className = 'rsdk-app';
|
|
66
|
+
root.style.setProperty('--accent', host.game?.accent ?? '#1d4ed8');
|
|
67
|
+
const stage = document.createElement('div');
|
|
68
|
+
stage.className = 'rsdk-stage';
|
|
69
|
+
const overlay = document.createElement('div');
|
|
70
|
+
overlay.className = 'rsdk-overlay';
|
|
71
|
+
root.append(stage, overlay);
|
|
72
|
+
target.append(root);
|
|
73
|
+
|
|
74
|
+
/** screen: 'boot' | 'game' | 'pause' | 'confirm' | 'error' */
|
|
75
|
+
const state = {
|
|
76
|
+
screen: 'boot',
|
|
77
|
+
status: 'Arrancando el motor…',
|
|
78
|
+
error: null,
|
|
79
|
+
pause: { items: [], focus: 0 },
|
|
80
|
+
confirm: null, // { title, text, yes, no, onYes, onNo, focus, under }
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
let play = null;
|
|
84
|
+
let leaving = false;
|
|
85
|
+
let destroyed = false;
|
|
86
|
+
|
|
87
|
+
const canvasFocus = () => stage.querySelector('canvas')?.focus({ preventScroll: true });
|
|
88
|
+
const title = () => host.game?.title ?? 'Sonic CD';
|
|
89
|
+
|
|
90
|
+
// ---- screens ------------------------------------------------------------------
|
|
91
|
+
|
|
92
|
+
const hints = (pairs) =>
|
|
93
|
+
`<footer class="rsdk-hints">${pairs.map(([k, t]) => `<span><kbd>${k}</kbd>${t}</span>`).join('')}</footer>`;
|
|
94
|
+
|
|
95
|
+
const render = () => {
|
|
96
|
+
if (destroyed) return;
|
|
97
|
+
root.dataset.screen = state.screen;
|
|
98
|
+
const s = state.screen;
|
|
99
|
+
if (s === 'game') {
|
|
100
|
+
overlay.innerHTML = '';
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
if (s === 'boot') {
|
|
104
|
+
overlay.innerHTML = `<section class="rsdk-boot">
|
|
105
|
+
${host.game?.art ? `<img src="${esc(host.game.art)}" alt="">` : ''}
|
|
106
|
+
<p>${esc(state.status)}</p>
|
|
107
|
+
</section>`;
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
if (s === 'error') {
|
|
111
|
+
overlay.innerHTML = `<section class="rsdk-panel">
|
|
112
|
+
<p class="kicker">${esc(title())}</p>
|
|
113
|
+
<h2>No se pudo arrancar</h2>
|
|
114
|
+
<p class="text">${esc(state.error)}</p>
|
|
115
|
+
<button class="item is-focused" data-exit>Volver</button>
|
|
116
|
+
</section>`;
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
let html = '';
|
|
120
|
+
const base = s === 'confirm' ? state.confirm.under : s;
|
|
121
|
+
if (base === 'pause') {
|
|
122
|
+
html += `<section class="rsdk-panel">
|
|
123
|
+
<p class="kicker">${esc(title())}</p>
|
|
124
|
+
<h2>Pausa</h2>
|
|
125
|
+
${state.pause.items.map((item, i) => `<button class="item${i === state.pause.focus && s !== 'confirm' ? ' is-focused' : ''}" data-item="${i}">${esc(item.label)}${item.hint ? `<small>${esc(item.hint)}</small>` : ''}</button>`).join('')}
|
|
126
|
+
${hints([['A', 'elegir'], ['B', 'continuar']])}
|
|
127
|
+
</section>`;
|
|
128
|
+
}
|
|
129
|
+
if (s === 'confirm') {
|
|
130
|
+
const c = state.confirm;
|
|
131
|
+
html += `<div class="rsdk-confirm"><section class="rsdk-panel">
|
|
132
|
+
<h2>${esc(c.title)}</h2>
|
|
133
|
+
${c.text ? `<p class="text">${esc(c.text)}</p>` : ''}
|
|
134
|
+
<div class="row">
|
|
135
|
+
<button class="item${c.focus === 0 ? ' is-focused' : ''}" data-confirm="0">${esc(c.no)}</button>
|
|
136
|
+
<button class="item is-danger${c.focus === 1 ? ' is-focused' : ''}" data-confirm="1">${esc(c.yes)}</button>
|
|
137
|
+
</div>
|
|
138
|
+
</section></div>`;
|
|
139
|
+
}
|
|
140
|
+
overlay.innerHTML = html;
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
// ---- transitions --------------------------------------------------------------
|
|
144
|
+
|
|
145
|
+
const enterGame = () => {
|
|
146
|
+
state.screen = 'game';
|
|
147
|
+
render();
|
|
148
|
+
host.input.suspend();
|
|
149
|
+
canvasFocus();
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
const gameScreens = () => {
|
|
153
|
+
try {
|
|
154
|
+
return findGameScreens(play.devMenu.getStageList());
|
|
155
|
+
} catch {
|
|
156
|
+
return [];
|
|
157
|
+
}
|
|
158
|
+
};
|
|
159
|
+
|
|
160
|
+
const openPause = () => {
|
|
161
|
+
play?.pause(OWNER);
|
|
162
|
+
state.pause = {
|
|
163
|
+
focus: 0,
|
|
164
|
+
items: [
|
|
165
|
+
{ label: 'Continuar', run: closePause },
|
|
166
|
+
...gameScreens().map((screen) => ({
|
|
167
|
+
label: screen.label,
|
|
168
|
+
hint: 'pantalla del propio juego',
|
|
169
|
+
run: () => {
|
|
170
|
+
closePause();
|
|
171
|
+
play.devMenu.loadStage(screen.list, screen.scene);
|
|
172
|
+
},
|
|
173
|
+
})),
|
|
174
|
+
{ label: 'Volver al lanzador', run: askExit },
|
|
175
|
+
],
|
|
176
|
+
};
|
|
177
|
+
state.screen = 'pause';
|
|
178
|
+
host.input.resume();
|
|
179
|
+
render();
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
const closePause = () => {
|
|
183
|
+
enterGame();
|
|
184
|
+
play?.resume(OWNER);
|
|
185
|
+
};
|
|
186
|
+
|
|
187
|
+
// A confirm sits on top of the screen it was asked from and goes back to it.
|
|
188
|
+
const ask = (options) => {
|
|
189
|
+
state.confirm = { focus: 0, under: state.screen, ...options };
|
|
190
|
+
state.screen = 'confirm';
|
|
191
|
+
render();
|
|
192
|
+
};
|
|
193
|
+
const answer = (yes) => {
|
|
194
|
+
const c = state.confirm;
|
|
195
|
+
state.screen = c.under;
|
|
196
|
+
state.confirm = null;
|
|
197
|
+
render();
|
|
198
|
+
(yes ? c.onYes : c.onNo)?.();
|
|
199
|
+
};
|
|
200
|
+
|
|
201
|
+
const exit = async () => {
|
|
202
|
+
if (leaving) return;
|
|
203
|
+
leaving = true;
|
|
204
|
+
try {
|
|
205
|
+
await play?.destroy();
|
|
206
|
+
} catch (error) {
|
|
207
|
+
console.warn(`[${ENGINE} app] destroy failed`, error);
|
|
208
|
+
}
|
|
209
|
+
play = null;
|
|
210
|
+
host.exit();
|
|
211
|
+
};
|
|
212
|
+
|
|
213
|
+
const askExit = () =>
|
|
214
|
+
ask({ title: '¿Volver al lanzador?', text: 'La partida se guarda donde la guarde el juego.', yes: 'Salir', no: 'Seguir', onYes: exit });
|
|
215
|
+
|
|
216
|
+
// ---- input ----------------------------------------------------------------------
|
|
217
|
+
|
|
218
|
+
const onPause = (action) => {
|
|
219
|
+
const p = state.pause;
|
|
220
|
+
if (action === 'up') p.focus = (p.focus + p.items.length - 1) % p.items.length;
|
|
221
|
+
else if (action === 'down') p.focus = (p.focus + 1) % p.items.length;
|
|
222
|
+
else if (action === 'accept') return p.items[p.focus].run();
|
|
223
|
+
else if (action === 'back' || action === 'menu') return closePause();
|
|
224
|
+
else return;
|
|
225
|
+
render();
|
|
226
|
+
};
|
|
227
|
+
|
|
228
|
+
const onConfirm = (action) => {
|
|
229
|
+
const c = state.confirm;
|
|
230
|
+
if (action === 'left' || action === 'up') c.focus = 0;
|
|
231
|
+
else if (action === 'right' || action === 'down') c.focus = 1;
|
|
232
|
+
else if (action === 'accept') return answer(c.focus === 1);
|
|
233
|
+
else if (action === 'back') return answer(false);
|
|
234
|
+
else return;
|
|
235
|
+
render();
|
|
236
|
+
};
|
|
237
|
+
|
|
238
|
+
const off = host.input.on((action) => {
|
|
239
|
+
if (leaving) return;
|
|
240
|
+
const s = state.screen;
|
|
241
|
+
if (s === 'game') {
|
|
242
|
+
if (action === 'menu') openPause();
|
|
243
|
+
} else if (s === 'pause') onPause(action);
|
|
244
|
+
else if (s === 'confirm') onConfirm(action);
|
|
245
|
+
else if (s === 'error' && (action === 'accept' || action === 'back')) exit();
|
|
246
|
+
else if (s === 'boot' && action === 'back') exit();
|
|
247
|
+
});
|
|
248
|
+
|
|
249
|
+
// Pointer: hover focuses, click activates — the same paths as the pad. Hover is read
|
|
250
|
+
// from real movement only: every render replaces the buttons, and the browser fires
|
|
251
|
+
// a fresh pointerover for whatever lands under a resting cursor.
|
|
252
|
+
let lastPointer = '';
|
|
253
|
+
const onPointer = (event) => {
|
|
254
|
+
if (event.type === 'pointermove') {
|
|
255
|
+
const at = `${event.clientX},${event.clientY}`;
|
|
256
|
+
if (at === lastPointer) return;
|
|
257
|
+
lastPointer = at;
|
|
258
|
+
}
|
|
259
|
+
const el = event.target.closest('[data-item],[data-confirm],[data-exit]');
|
|
260
|
+
if (!el || leaving) return;
|
|
261
|
+
if (event.type === 'pointermove') {
|
|
262
|
+
if (el.dataset.item != null && state.screen === 'pause' && state.pause.focus !== +el.dataset.item) {
|
|
263
|
+
state.pause.focus = +el.dataset.item;
|
|
264
|
+
render();
|
|
265
|
+
}
|
|
266
|
+
return;
|
|
267
|
+
}
|
|
268
|
+
if (el.dataset.item != null) state.pause.items[+el.dataset.item].run();
|
|
269
|
+
else if (el.dataset.confirm != null) answer(el.dataset.confirm === '1');
|
|
270
|
+
else if (el.dataset.exit != null) exit();
|
|
271
|
+
};
|
|
272
|
+
overlay.addEventListener('click', onPointer);
|
|
273
|
+
overlay.addEventListener('pointermove', onPointer);
|
|
274
|
+
|
|
275
|
+
const handle = {
|
|
276
|
+
async unmount() {
|
|
277
|
+
destroyed = true;
|
|
278
|
+
leaving = true;
|
|
279
|
+
off();
|
|
280
|
+
overlay.removeEventListener('click', onPointer);
|
|
281
|
+
overlay.removeEventListener('pointermove', onPointer);
|
|
282
|
+
try {
|
|
283
|
+
await play?.destroy();
|
|
284
|
+
} catch {
|
|
285
|
+
/* already gone */
|
|
286
|
+
}
|
|
287
|
+
play = null;
|
|
288
|
+
root.remove();
|
|
289
|
+
},
|
|
290
|
+
};
|
|
291
|
+
|
|
292
|
+
// ---- boot -----------------------------------------------------------------------
|
|
293
|
+
|
|
294
|
+
render();
|
|
295
|
+
host.input.resume();
|
|
296
|
+
try {
|
|
297
|
+
play = await new Rsdkv3SDK()
|
|
298
|
+
.mount(stage)
|
|
299
|
+
.assets(host.assets)
|
|
300
|
+
.storage(host.storage)
|
|
301
|
+
.on('error', ({ detail }) => console.error(`[${ENGINE} app]`, detail))
|
|
302
|
+
.on('exit', () => exit())
|
|
303
|
+
.start();
|
|
304
|
+
if (destroyed) {
|
|
305
|
+
// Unmounted while booting: nothing to show any more.
|
|
306
|
+
await play.destroy().catch(() => {});
|
|
307
|
+
play = null;
|
|
308
|
+
return handle;
|
|
309
|
+
}
|
|
310
|
+
enterGame();
|
|
311
|
+
} catch (error) {
|
|
312
|
+
console.error(`[${ENGINE} app]`, error);
|
|
313
|
+
state.error = error?.message ?? String(error);
|
|
314
|
+
state.screen = 'error';
|
|
315
|
+
render();
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
return handle;
|
|
319
|
+
}
|
|
@@ -75,7 +75,7 @@ export declare class Rsdkv3Play extends EnginePlayBase<Rsdkv3Payloads> {
|
|
|
75
75
|
export declare class Rsdkv3SDK extends EngineSDKBase<Rsdkv3Payloads> {
|
|
76
76
|
static readonly id = "rsdkv3";
|
|
77
77
|
/** Kept in step with package.json by `node scripts/sync-version.mjs`. */
|
|
78
|
-
static readonly version = "0.1
|
|
78
|
+
static readonly version = "0.2.1";
|
|
79
79
|
static readonly name = "Retro Software Development Kit v3";
|
|
80
80
|
static readonly description = "RSDKv3 (Sonic CD 2011 decompilation) compiled to WebAssembly. Ships none of the game: the player provides Data.rsdk, and it never leaves their browser.";
|
|
81
81
|
protected createPlay(init: EngineInit<Rsdkv3Payloads>, events: EventEmitter<EventsOf<Rsdkv3Payloads>>): Rsdkv3Play;
|
|
@@ -384,7 +384,7 @@ export class Rsdkv3Play extends EnginePlayBase {
|
|
|
384
384
|
export class Rsdkv3SDK extends EngineSDKBase {
|
|
385
385
|
static id = ENGINE_ID;
|
|
386
386
|
/** Kept in step with package.json by `node scripts/sync-version.mjs`. */
|
|
387
|
-
static version = '0.1
|
|
387
|
+
static version = '0.2.1';
|
|
388
388
|
static name = 'Retro Software Development Kit v3';
|
|
389
389
|
static description = 'RSDKv3 (Sonic CD 2011 decompilation) compiled to WebAssembly. Ships none of the game: the player provides Data.rsdk, and it never leaves their browser.';
|
|
390
390
|
createPlay(init, events) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wasm-gaming/rsdkv3-wasm",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "RSDKv3 (Sonic CD decompilation) compiled to WebAssembly, with a self-contained JS SDK implementing the wasm-gaming engine contract. Data.rsdk is loaded at runtime.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -21,10 +21,14 @@
|
|
|
21
21
|
"./options": {
|
|
22
22
|
"types": "./dist/rsdkv3/rsdkv3.options.d.ts",
|
|
23
23
|
"import": "./dist/rsdkv3/rsdkv3.options.js"
|
|
24
|
+
},
|
|
25
|
+
"./app": {
|
|
26
|
+
"import": "./dist/rsdkv3/app/app.js"
|
|
24
27
|
}
|
|
25
28
|
},
|
|
26
29
|
"files": [
|
|
27
30
|
"dist/rsdkv3/",
|
|
31
|
+
"src/app/",
|
|
28
32
|
"src/rsdkv3.options.ts",
|
|
29
33
|
"src/rsdkv3.sdk.ts",
|
|
30
34
|
"README.md"
|
package/src/app/app.css
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/* rsdkv3 app — boot screen and pause menu (same look as rsdkv4's app).
|
|
2
|
+
Tokens come from engine-specs (UI_TOKENS, `--wg-*`) when the host sets them; the
|
|
3
|
+
fallbacks are the same values, so the app looks right on a bare page too. */
|
|
4
|
+
|
|
5
|
+
.rsdk-app {
|
|
6
|
+
--ring: var(--wg-focus-ring, 0 0 0 3px #fff);
|
|
7
|
+
--surface: var(--wg-surface, rgb(18 20 28 / 0.78));
|
|
8
|
+
--line: var(--wg-line, rgb(255 255 255 / 0.12));
|
|
9
|
+
--text: var(--wg-text, #f4f6fb);
|
|
10
|
+
--muted: var(--wg-muted, #8e97a9);
|
|
11
|
+
--danger: var(--wg-danger, #f87171);
|
|
12
|
+
--ui: var(--wg-font-ui, 'Inter Variable', 'Inter', system-ui, sans-serif);
|
|
13
|
+
--display: var(--wg-font-display, 'Unbounded Variable', 'Unbounded', system-ui, sans-serif);
|
|
14
|
+
--ease: var(--wg-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
|
|
15
|
+
position: absolute;
|
|
16
|
+
inset: 0;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
background: #000;
|
|
19
|
+
color: var(--text);
|
|
20
|
+
font-family: var(--ui);
|
|
21
|
+
user-select: none;
|
|
22
|
+
-webkit-tap-highlight-color: transparent;
|
|
23
|
+
}
|
|
24
|
+
.rsdk-app * { box-sizing: border-box; }
|
|
25
|
+
.rsdk-stage { position: absolute; inset: 0; display: grid; place-items: center; }
|
|
26
|
+
.rsdk-stage canvas { outline: none; }
|
|
27
|
+
.rsdk-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
|
|
28
|
+
.rsdk-overlay > * { pointer-events: auto; }
|
|
29
|
+
.rsdk-app[data-screen='game'] .rsdk-overlay { display: none; }
|
|
30
|
+
|
|
31
|
+
/* Everything but the game sits on a backdrop that keeps the game visible underneath. */
|
|
32
|
+
.rsdk-app:not([data-screen='game']) .rsdk-overlay {
|
|
33
|
+
background:
|
|
34
|
+
radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%),
|
|
35
|
+
rgb(4 6 12 / 0.72);
|
|
36
|
+
backdrop-filter: blur(14px) saturate(1.2);
|
|
37
|
+
-webkit-backdrop-filter: blur(14px) saturate(1.2);
|
|
38
|
+
}
|
|
39
|
+
.rsdk-app[data-screen='boot'] .rsdk-overlay { background-color: rgb(4 6 12 / 0.9); }
|
|
40
|
+
|
|
41
|
+
.kicker { margin: 0; font: 600 0.72rem var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
|
|
42
|
+
.rsdk-app h2 { margin: 0; font: 700 clamp(1.4rem, 3vw, 2.1rem) var(--display); letter-spacing: -0.02em; }
|
|
43
|
+
|
|
44
|
+
/* ---- boot ---- */
|
|
45
|
+
.rsdk-boot { display: grid; justify-items: center; gap: 22px; }
|
|
46
|
+
.rsdk-boot img { width: min(260px, 50vw); border-radius: 22px; box-shadow: 0 30px 80px -30px #000; animation: rsdk-breathe 2.4s var(--ease) infinite alternate; }
|
|
47
|
+
.rsdk-boot p { margin: 0; color: var(--muted); font-weight: 500; }
|
|
48
|
+
@keyframes rsdk-breathe { from { opacity: 0.55; transform: scale(0.98); } to { opacity: 1; transform: none; } }
|
|
49
|
+
|
|
50
|
+
/* ---- pause & confirm ---- */
|
|
51
|
+
.rsdk-panel {
|
|
52
|
+
width: min(440px, 92vw); display: grid; gap: 10px; padding: 26px; border-radius: 28px;
|
|
53
|
+
background: rgb(20 22 31 / 0.9); border: 1px solid var(--line); box-shadow: 0 40px 100px -30px #000;
|
|
54
|
+
}
|
|
55
|
+
.rsdk-panel h2 { margin-bottom: 8px; }
|
|
56
|
+
.rsdk-panel .text { margin: 0 0 8px; color: var(--muted); line-height: 1.5; }
|
|
57
|
+
.item {
|
|
58
|
+
all: unset; box-sizing: border-box; display: grid; gap: 2px; padding: 13px 16px; border-radius: 14px;
|
|
59
|
+
background: rgb(255 255 255 / 0.05); font-weight: 600; cursor: pointer; transition: background 0.15s, box-shadow 0.15s;
|
|
60
|
+
}
|
|
61
|
+
.item small { font-weight: 500; font-size: 0.78rem; color: var(--muted); }
|
|
62
|
+
.item.is-focused { background: #fff; color: #0b0d12; box-shadow: var(--ring); }
|
|
63
|
+
.item.is-focused small { color: #4b5563; }
|
|
64
|
+
.item.is-danger.is-focused { background: var(--danger); color: #1a0505; box-shadow: 0 0 0 3px var(--danger); }
|
|
65
|
+
.rsdk-panel .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
66
|
+
.rsdk-panel .row .item { text-align: center; }
|
|
67
|
+
/* A dialog sits on its own layer, above anything the screen under it positions (the
|
|
68
|
+
character art on the slot cards is z-index 1), on a backdrop that hides that screen. */
|
|
69
|
+
.rsdk-confirm {
|
|
70
|
+
position: absolute; inset: 0; z-index: 10; display: grid; place-items: center;
|
|
71
|
+
background: rgb(4 6 12 / 0.78);
|
|
72
|
+
backdrop-filter: blur(10px) saturate(0.8);
|
|
73
|
+
-webkit-backdrop-filter: blur(10px) saturate(0.8);
|
|
74
|
+
}
|
|
75
|
+
.rsdk-confirm h2 { font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.2; }
|
|
76
|
+
.rsdk-confirm .rsdk-panel {
|
|
77
|
+
width: min(500px, 92vw);
|
|
78
|
+
background:
|
|
79
|
+
radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
|
|
80
|
+
#151821;
|
|
81
|
+
border-color: rgb(255 255 255 / 0.14);
|
|
82
|
+
box-shadow: 0 40px 120px -20px #000, 0 0 0 1px rgb(0 0 0 / 0.4);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* ---- hints ---- */
|
|
86
|
+
.rsdk-hints { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; color: var(--muted); font-size: 0.78rem; font-weight: 500; }
|
|
87
|
+
.rsdk-hints span { display: inline-flex; align-items: center; gap: 7px; }
|
|
88
|
+
.rsdk-hints kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgb(255 255 255 / 0.12); color: var(--text); font: 700 0.68rem var(--ui); }
|
|
89
|
+
.rsdk-panel .rsdk-hints { justify-content: flex-start; margin-top: 6px; }
|
|
90
|
+
|
|
91
|
+
@media (prefers-reduced-motion: reduce) {
|
|
92
|
+
.rsdk-boot img { transition: none; animation: none; }
|
|
93
|
+
}
|
package/src/app/app.js
ADDED
|
@@ -0,0 +1,319 @@
|
|
|
1
|
+
// rsdkv3's own app: what a host gets when it mounts this engine instead of driving
|
|
2
|
+
// the SDK itself — a boot screen, then the game with its OWN title and save select,
|
|
3
|
+
// and a pause menu on the wasm-gaming usability scheme (engine-specs UX.md).
|
|
4
|
+
//
|
|
5
|
+
// import * as app from '<engines>/rsdkv3/app/app.js'
|
|
6
|
+
// const handle = await app.mount(target, host) // EngineApp.mount
|
|
7
|
+
// await handle.unmount()
|
|
8
|
+
//
|
|
9
|
+
// `host` is engine-specs' EngineAppHost: { game, storage, assets, input, exit }. The
|
|
10
|
+
// input is the host's createInput(): resumed it delivers menu actions; suspended (in
|
|
11
|
+
// game) only Select+Start and Escape come through, as `menu`.
|
|
12
|
+
//
|
|
13
|
+
// Unlike rsdkv4's app there is no load-game screen: Sonic CD's menus are scripts in
|
|
14
|
+
// Data.rsdk, with no native bridge to list or start a save (see RECORD/).
|
|
15
|
+
//
|
|
16
|
+
// Plain JS and DOM on purpose: the app ships inside the engine's package next to the
|
|
17
|
+
// SDK and loads from a static server, so it imports nothing but the SDK.
|
|
18
|
+
|
|
19
|
+
import Rsdkv3SDK from '../rsdkv3.sdk.js';
|
|
20
|
+
|
|
21
|
+
const ENGINE = 'rsdkv3';
|
|
22
|
+
const OWNER = 'app';
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* The game's own screens worth jumping to from the pause menu, looked up by scene
|
|
26
|
+
* name in the live stage list. Only the ones the loaded Data.rsdk has are offered.
|
|
27
|
+
*/
|
|
28
|
+
export const GAME_SCREENS = [
|
|
29
|
+
{ match: /^TITLE( SCREEN)?$/i, label: 'Pantalla de título' },
|
|
30
|
+
{ match: /^(MAIN MENU|MENU|SAVE SELECT|STAGE MENU)$/i, label: 'Menú del juego' },
|
|
31
|
+
{ match: /^(LEVEL|STAGE) SELECT$/i, label: 'Level select' }, // Sonic CD: STAGE SELECT
|
|
32
|
+
];
|
|
33
|
+
|
|
34
|
+
/** `[{ label, list, scene }]` for the GAME_SCREENS found in a devMenu stage list. */
|
|
35
|
+
export const findGameScreens = (lists) => {
|
|
36
|
+
const found = [];
|
|
37
|
+
for (const screen of GAME_SCREENS) {
|
|
38
|
+
for (let list = 0; list < (lists?.length ?? 0); list++) {
|
|
39
|
+
const scene = (lists[list]?.stages ?? []).findIndex(({ name } = {}) => screen.match.test(String(name ?? '').trim()));
|
|
40
|
+
if (scene >= 0) {
|
|
41
|
+
found.push({ label: screen.label, list, scene });
|
|
42
|
+
break;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
return found;
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const esc = (text) => String(text ?? '').replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
|
|
50
|
+
|
|
51
|
+
let cssLoaded = null;
|
|
52
|
+
const loadCss = () =>
|
|
53
|
+
(cssLoaded ??= new Promise((resolve) => {
|
|
54
|
+
const link = document.createElement('link');
|
|
55
|
+
link.rel = 'stylesheet';
|
|
56
|
+
link.href = new URL('./app.css', import.meta.url).href;
|
|
57
|
+
link.onload = link.onerror = () => resolve();
|
|
58
|
+
document.head.append(link);
|
|
59
|
+
}));
|
|
60
|
+
|
|
61
|
+
export async function mount(target, host) {
|
|
62
|
+
await loadCss();
|
|
63
|
+
|
|
64
|
+
const root = document.createElement('div');
|
|
65
|
+
root.className = 'rsdk-app';
|
|
66
|
+
root.style.setProperty('--accent', host.game?.accent ?? '#1d4ed8');
|
|
67
|
+
const stage = document.createElement('div');
|
|
68
|
+
stage.className = 'rsdk-stage';
|
|
69
|
+
const overlay = document.createElement('div');
|
|
70
|
+
overlay.className = 'rsdk-overlay';
|
|
71
|
+
root.append(stage, overlay);
|
|
72
|
+
target.append(root);
|
|
73
|
+
|
|
74
|
+
/** screen: 'boot' | 'game' | 'pause' | 'confirm' | 'error' */
|
|
75
|
+
const state = {
|
|
76
|
+
screen: 'boot',
|
|
77
|
+
status: 'Arrancando el motor…',
|
|
78
|
+
error: null,
|
|
79
|
+
pause: { items: [], focus: 0 },
|
|
80
|
+
confirm: null, // { title, text, yes, no, onYes, onNo, focus, under }
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
let play = null;
|
|
84
|
+
let leaving = false;
|
|
85
|
+
let destroyed = false;
|
|
86
|
+
|
|
87
|
+
const canvasFocus = () => stage.querySelector('canvas')?.focus({ preventScroll: true });
|
|
88
|
+
const title = () => host.game?.title ?? 'Sonic CD';
|
|
89
|
+
|
|
90
|
+
// ---- screens ------------------------------------------------------------------
|
|
91
|
+
|
|
92
|
+
const hints = (pairs) =>
|
|
93
|
+
`<footer class="rsdk-hints">${pairs.map(([k, t]) => `<span><kbd>${k}</kbd>${t}</span>`).join('')}</footer>`;
|
|
94
|
+
|
|
95
|
+
const render = () => {
|
|
96
|
+
if (destroyed) return;
|
|
97
|
+
root.dataset.screen = state.screen;
|
|
98
|
+
const s = state.screen;
|
|
99
|
+
if (s === 'game') {
|
|
100
|
+
overlay.innerHTML = '';
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
if (s === 'boot') {
|
|
104
|
+
overlay.innerHTML = `<section class="rsdk-boot">
|
|
105
|
+
${host.game?.art ? `<img src="${esc(host.game.art)}" alt="">` : ''}
|
|
106
|
+
<p>${esc(state.status)}</p>
|
|
107
|
+
</section>`;
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
if (s === 'error') {
|
|
111
|
+
overlay.innerHTML = `<section class="rsdk-panel">
|
|
112
|
+
<p class="kicker">${esc(title())}</p>
|
|
113
|
+
<h2>No se pudo arrancar</h2>
|
|
114
|
+
<p class="text">${esc(state.error)}</p>
|
|
115
|
+
<button class="item is-focused" data-exit>Volver</button>
|
|
116
|
+
</section>`;
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
let html = '';
|
|
120
|
+
const base = s === 'confirm' ? state.confirm.under : s;
|
|
121
|
+
if (base === 'pause') {
|
|
122
|
+
html += `<section class="rsdk-panel">
|
|
123
|
+
<p class="kicker">${esc(title())}</p>
|
|
124
|
+
<h2>Pausa</h2>
|
|
125
|
+
${state.pause.items.map((item, i) => `<button class="item${i === state.pause.focus && s !== 'confirm' ? ' is-focused' : ''}" data-item="${i}">${esc(item.label)}${item.hint ? `<small>${esc(item.hint)}</small>` : ''}</button>`).join('')}
|
|
126
|
+
${hints([['A', 'elegir'], ['B', 'continuar']])}
|
|
127
|
+
</section>`;
|
|
128
|
+
}
|
|
129
|
+
if (s === 'confirm') {
|
|
130
|
+
const c = state.confirm;
|
|
131
|
+
html += `<div class="rsdk-confirm"><section class="rsdk-panel">
|
|
132
|
+
<h2>${esc(c.title)}</h2>
|
|
133
|
+
${c.text ? `<p class="text">${esc(c.text)}</p>` : ''}
|
|
134
|
+
<div class="row">
|
|
135
|
+
<button class="item${c.focus === 0 ? ' is-focused' : ''}" data-confirm="0">${esc(c.no)}</button>
|
|
136
|
+
<button class="item is-danger${c.focus === 1 ? ' is-focused' : ''}" data-confirm="1">${esc(c.yes)}</button>
|
|
137
|
+
</div>
|
|
138
|
+
</section></div>`;
|
|
139
|
+
}
|
|
140
|
+
overlay.innerHTML = html;
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
// ---- transitions --------------------------------------------------------------
|
|
144
|
+
|
|
145
|
+
const enterGame = () => {
|
|
146
|
+
state.screen = 'game';
|
|
147
|
+
render();
|
|
148
|
+
host.input.suspend();
|
|
149
|
+
canvasFocus();
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
const gameScreens = () => {
|
|
153
|
+
try {
|
|
154
|
+
return findGameScreens(play.devMenu.getStageList());
|
|
155
|
+
} catch {
|
|
156
|
+
return [];
|
|
157
|
+
}
|
|
158
|
+
};
|
|
159
|
+
|
|
160
|
+
const openPause = () => {
|
|
161
|
+
play?.pause(OWNER);
|
|
162
|
+
state.pause = {
|
|
163
|
+
focus: 0,
|
|
164
|
+
items: [
|
|
165
|
+
{ label: 'Continuar', run: closePause },
|
|
166
|
+
...gameScreens().map((screen) => ({
|
|
167
|
+
label: screen.label,
|
|
168
|
+
hint: 'pantalla del propio juego',
|
|
169
|
+
run: () => {
|
|
170
|
+
closePause();
|
|
171
|
+
play.devMenu.loadStage(screen.list, screen.scene);
|
|
172
|
+
},
|
|
173
|
+
})),
|
|
174
|
+
{ label: 'Volver al lanzador', run: askExit },
|
|
175
|
+
],
|
|
176
|
+
};
|
|
177
|
+
state.screen = 'pause';
|
|
178
|
+
host.input.resume();
|
|
179
|
+
render();
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
const closePause = () => {
|
|
183
|
+
enterGame();
|
|
184
|
+
play?.resume(OWNER);
|
|
185
|
+
};
|
|
186
|
+
|
|
187
|
+
// A confirm sits on top of the screen it was asked from and goes back to it.
|
|
188
|
+
const ask = (options) => {
|
|
189
|
+
state.confirm = { focus: 0, under: state.screen, ...options };
|
|
190
|
+
state.screen = 'confirm';
|
|
191
|
+
render();
|
|
192
|
+
};
|
|
193
|
+
const answer = (yes) => {
|
|
194
|
+
const c = state.confirm;
|
|
195
|
+
state.screen = c.under;
|
|
196
|
+
state.confirm = null;
|
|
197
|
+
render();
|
|
198
|
+
(yes ? c.onYes : c.onNo)?.();
|
|
199
|
+
};
|
|
200
|
+
|
|
201
|
+
const exit = async () => {
|
|
202
|
+
if (leaving) return;
|
|
203
|
+
leaving = true;
|
|
204
|
+
try {
|
|
205
|
+
await play?.destroy();
|
|
206
|
+
} catch (error) {
|
|
207
|
+
console.warn(`[${ENGINE} app] destroy failed`, error);
|
|
208
|
+
}
|
|
209
|
+
play = null;
|
|
210
|
+
host.exit();
|
|
211
|
+
};
|
|
212
|
+
|
|
213
|
+
const askExit = () =>
|
|
214
|
+
ask({ title: '¿Volver al lanzador?', text: 'La partida se guarda donde la guarde el juego.', yes: 'Salir', no: 'Seguir', onYes: exit });
|
|
215
|
+
|
|
216
|
+
// ---- input ----------------------------------------------------------------------
|
|
217
|
+
|
|
218
|
+
const onPause = (action) => {
|
|
219
|
+
const p = state.pause;
|
|
220
|
+
if (action === 'up') p.focus = (p.focus + p.items.length - 1) % p.items.length;
|
|
221
|
+
else if (action === 'down') p.focus = (p.focus + 1) % p.items.length;
|
|
222
|
+
else if (action === 'accept') return p.items[p.focus].run();
|
|
223
|
+
else if (action === 'back' || action === 'menu') return closePause();
|
|
224
|
+
else return;
|
|
225
|
+
render();
|
|
226
|
+
};
|
|
227
|
+
|
|
228
|
+
const onConfirm = (action) => {
|
|
229
|
+
const c = state.confirm;
|
|
230
|
+
if (action === 'left' || action === 'up') c.focus = 0;
|
|
231
|
+
else if (action === 'right' || action === 'down') c.focus = 1;
|
|
232
|
+
else if (action === 'accept') return answer(c.focus === 1);
|
|
233
|
+
else if (action === 'back') return answer(false);
|
|
234
|
+
else return;
|
|
235
|
+
render();
|
|
236
|
+
};
|
|
237
|
+
|
|
238
|
+
const off = host.input.on((action) => {
|
|
239
|
+
if (leaving) return;
|
|
240
|
+
const s = state.screen;
|
|
241
|
+
if (s === 'game') {
|
|
242
|
+
if (action === 'menu') openPause();
|
|
243
|
+
} else if (s === 'pause') onPause(action);
|
|
244
|
+
else if (s === 'confirm') onConfirm(action);
|
|
245
|
+
else if (s === 'error' && (action === 'accept' || action === 'back')) exit();
|
|
246
|
+
else if (s === 'boot' && action === 'back') exit();
|
|
247
|
+
});
|
|
248
|
+
|
|
249
|
+
// Pointer: hover focuses, click activates — the same paths as the pad. Hover is read
|
|
250
|
+
// from real movement only: every render replaces the buttons, and the browser fires
|
|
251
|
+
// a fresh pointerover for whatever lands under a resting cursor.
|
|
252
|
+
let lastPointer = '';
|
|
253
|
+
const onPointer = (event) => {
|
|
254
|
+
if (event.type === 'pointermove') {
|
|
255
|
+
const at = `${event.clientX},${event.clientY}`;
|
|
256
|
+
if (at === lastPointer) return;
|
|
257
|
+
lastPointer = at;
|
|
258
|
+
}
|
|
259
|
+
const el = event.target.closest('[data-item],[data-confirm],[data-exit]');
|
|
260
|
+
if (!el || leaving) return;
|
|
261
|
+
if (event.type === 'pointermove') {
|
|
262
|
+
if (el.dataset.item != null && state.screen === 'pause' && state.pause.focus !== +el.dataset.item) {
|
|
263
|
+
state.pause.focus = +el.dataset.item;
|
|
264
|
+
render();
|
|
265
|
+
}
|
|
266
|
+
return;
|
|
267
|
+
}
|
|
268
|
+
if (el.dataset.item != null) state.pause.items[+el.dataset.item].run();
|
|
269
|
+
else if (el.dataset.confirm != null) answer(el.dataset.confirm === '1');
|
|
270
|
+
else if (el.dataset.exit != null) exit();
|
|
271
|
+
};
|
|
272
|
+
overlay.addEventListener('click', onPointer);
|
|
273
|
+
overlay.addEventListener('pointermove', onPointer);
|
|
274
|
+
|
|
275
|
+
const handle = {
|
|
276
|
+
async unmount() {
|
|
277
|
+
destroyed = true;
|
|
278
|
+
leaving = true;
|
|
279
|
+
off();
|
|
280
|
+
overlay.removeEventListener('click', onPointer);
|
|
281
|
+
overlay.removeEventListener('pointermove', onPointer);
|
|
282
|
+
try {
|
|
283
|
+
await play?.destroy();
|
|
284
|
+
} catch {
|
|
285
|
+
/* already gone */
|
|
286
|
+
}
|
|
287
|
+
play = null;
|
|
288
|
+
root.remove();
|
|
289
|
+
},
|
|
290
|
+
};
|
|
291
|
+
|
|
292
|
+
// ---- boot -----------------------------------------------------------------------
|
|
293
|
+
|
|
294
|
+
render();
|
|
295
|
+
host.input.resume();
|
|
296
|
+
try {
|
|
297
|
+
play = await new Rsdkv3SDK()
|
|
298
|
+
.mount(stage)
|
|
299
|
+
.assets(host.assets)
|
|
300
|
+
.storage(host.storage)
|
|
301
|
+
.on('error', ({ detail }) => console.error(`[${ENGINE} app]`, detail))
|
|
302
|
+
.on('exit', () => exit())
|
|
303
|
+
.start();
|
|
304
|
+
if (destroyed) {
|
|
305
|
+
// Unmounted while booting: nothing to show any more.
|
|
306
|
+
await play.destroy().catch(() => {});
|
|
307
|
+
play = null;
|
|
308
|
+
return handle;
|
|
309
|
+
}
|
|
310
|
+
enterGame();
|
|
311
|
+
} catch (error) {
|
|
312
|
+
console.error(`[${ENGINE} app]`, error);
|
|
313
|
+
state.error = error?.message ?? String(error);
|
|
314
|
+
state.screen = 'error';
|
|
315
|
+
render();
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
return handle;
|
|
319
|
+
}
|
package/src/rsdkv3.sdk.ts
CHANGED
|
@@ -446,7 +446,7 @@ export class Rsdkv3Play extends EnginePlayBase<Rsdkv3Payloads> {
|
|
|
446
446
|
export class Rsdkv3SDK extends EngineSDKBase<Rsdkv3Payloads> {
|
|
447
447
|
static readonly id = ENGINE_ID;
|
|
448
448
|
/** Kept in step with package.json by `node scripts/sync-version.mjs`. */
|
|
449
|
-
static readonly version = '0.1
|
|
449
|
+
static readonly version = '0.2.1';
|
|
450
450
|
static readonly name = 'Retro Software Development Kit v3';
|
|
451
451
|
static readonly description =
|
|
452
452
|
'RSDKv3 (Sonic CD 2011 decompilation) compiled to WebAssembly. Ships none of the game: the player provides Data.rsdk, and it never leaves their browser.';
|