584424c939
- The classic dropdown menus across the top of the play screen: Game (New Game / Edit Mode / CRT / Sound / About) and Action (Look Around / Inventory / Help). Pure bus consumers — menu items inject the same Commands every other surface uses. Sliding along the bar switches menus, clicks outside close, clicks never leak into click-to-walk. - web: README tab pinned top-right with the short guide — controls, editor shortcuts (undo is just Z, no Ctrl), the two-layer paint model, and why the lake is scenery for now. - --shot out.png: render a few Play frames and save the real backbuffer to PNG — ground-truth GPU screenshots for debugging and CI. (Used to prove the menu colors were right when a preview browser's auto-dark filter was inverting light neutrals on canvas.) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
97 lines
4.4 KiB
HTML
97 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>MRPGI — Monster Robot Party Game Interpreter</title>
|
|
<meta name="description" content="A new-school reimagining of Sierra's AGI adventure engine. Play The DJ's Lost Fuse in your browser.">
|
|
<style>
|
|
html, body { margin: 0; padding: 0; height: 100%; background: #0b0d11; overflow: hidden; }
|
|
canvas {
|
|
position: absolute; inset: 0;
|
|
width: 100%; height: 100%;
|
|
image-rendering: pixelated;
|
|
background: #0b0d11;
|
|
}
|
|
#boot {
|
|
position: absolute; inset: 0; display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center; gap: 12px;
|
|
color: #5fffd7; font-family: ui-monospace, Menlo, monospace; font-size: 14px;
|
|
pointer-events: none; transition: opacity .4s;
|
|
}
|
|
#boot b { font-size: 22px; letter-spacing: 2px; color: #ff87d7; }
|
|
#readme-tab {
|
|
position: fixed; top: 0; right: 24px; z-index: 10;
|
|
background: #ff87d7; color: #0b0d11; border: 0;
|
|
border-radius: 0 0 8px 8px; padding: 5px 14px 7px;
|
|
font: bold 13px ui-monospace, Menlo, monospace; letter-spacing: 1px;
|
|
cursor: pointer;
|
|
}
|
|
#readme {
|
|
position: fixed; top: 34px; right: 12px; z-index: 10; display: none;
|
|
width: min(340px, calc(100vw - 24px)); max-height: 80vh; overflow-y: auto;
|
|
background: #12151c; color: #cdd5e1; border: 1px solid #ff87d7; border-radius: 8px;
|
|
padding: 14px 16px; font: 13px/1.5 ui-monospace, Menlo, monospace;
|
|
}
|
|
#readme.open { display: block; }
|
|
#readme h1 { font-size: 15px; color: #ff87d7; margin: 0 0 6px; letter-spacing: 1px; }
|
|
#readme h2 { font-size: 13px; color: #5fffd7; margin: 12px 0 2px; }
|
|
#readme p { margin: 4px 0; }
|
|
#readme kbd {
|
|
background: #1e232b; border: 1px solid #48505f; border-radius: 4px;
|
|
padding: 0 5px; font: inherit; color: #fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="boot"><b>MRPGI</b><span>booting the party…</span></div>
|
|
<canvas id="glcanvas" tabindex="1"></canvas>
|
|
<button id="readme-tab">README</button>
|
|
<div id="readme">
|
|
<h1>MRPGI</h1>
|
|
<p>A new-school take on Sierra's 1980s AGI adventure engine (King's Quest,
|
|
Space Quest), rebuilt in Rust and running here as one small WASM file —
|
|
engine, paint tool, and the game <i>The DJ's Lost Fuse</i> included.</p>
|
|
<h2>Playing</h2>
|
|
<p><kbd>←↑↓→</kbd> or click to walk · type verbs +
|
|
<kbd>Enter</kbd> (<i>look, take fuse, use amp, talk bouncer…</i>) ·
|
|
menus along the top, like the classics · <kbd>1</kbd>–<kbd>6</kbd>
|
|
pick a dialogue reply · <kbd>Esc</kbd> leaves a chat.</p>
|
|
<h2>Painting (press <kbd>Tab</kbd>)</h2>
|
|
<p>The in-engine room editor. <kbd>1</kbd>–<kbd>0</kbd> tools ·
|
|
<kbd>Z</kbd> undo (just Z — no Ctrl!) · <kbd>L</kbd> cycles the
|
|
look/walkability view · <kbd>[</kbd> <kbd>]</kbd> pick sprites ·
|
|
<kbd>,</kbd> <kbd>.</kbd> brush size. You paint two layers at once: a colour
|
|
<i>and</i> a meaning (floor / wall / water). Making a lake? Paint with the
|
|
<b>water</b> tag — today it's scenery with plans (the engine reserves it
|
|
for swimming, like the original).</p>
|
|
<p>Saving needs a disk, so the web build is play + paint only — the
|
|
native app saves worlds as tiny JSON files.</p>
|
|
<h2>Etc</h2>
|
|
<p><kbd>F1</kbd> CRT scanlines · <kbd>F2</kbd> sound · whole
|
|
thing is ~1 MB · also drivable headlessly by terminals, Python,
|
|
and AIs (it's an MCP server). Made by Monster Robot Party.</p>
|
|
</div>
|
|
<script>
|
|
const tab = document.getElementById('readme-tab');
|
|
const panel = document.getElementById('readme');
|
|
tab.addEventListener('click', () => {
|
|
panel.classList.toggle('open');
|
|
tab.textContent = panel.classList.contains('open') ? 'CLOSE' : 'README';
|
|
if (!panel.classList.contains('open')) document.getElementById('glcanvas').focus();
|
|
});
|
|
</script>
|
|
<script src="mq_js_bundle.js"></script>
|
|
<script>
|
|
load("mrpgi.wasm");
|
|
// hide the boot splash once the engine is drawing frames
|
|
const t = setInterval(() => {
|
|
if (typeof wasm_exports !== "undefined" && wasm_exports) {
|
|
document.getElementById("boot").style.opacity = "0";
|
|
clearInterval(t);
|
|
}
|
|
}, 250);
|
|
</script>
|
|
</body>
|
|
</html>
|