73 lines
2.7 KiB
HTML
73 lines
2.7 KiB
HTML
<!doctype html>
|
|
<!--
|
|
Part of JoeyLib, Copyright (c) 2026 Scott Duensing, under the MIT License.
|
|
See LICENSE.md for license information.
|
|
SPDX-License-Identifier: MIT
|
|
-->
|
|
<!--
|
|
The page every JoeyLib web program is built into (make/web.mk passes it to
|
|
emcc as --shell-file; emcc puts the program's script where SCRIPT is).
|
|
|
|
The canvas is the program's window. Browsers keep sound off until the page
|
|
is clicked or a key is pressed, so the hint says so. The page's address
|
|
sets the window as the native SDL3 port's environment does:
|
|
NAME.html?scale=1&aspect=square&fullscreen=1 become JOEYLIB_SCALE,
|
|
JOEYLIB_ASPECT and JOEYLIB_FULLSCREEN (the web gates open the stage at one
|
|
canvas pixel per stage pixel that way). The program's joeylog.txt (in its
|
|
write folder in the in-memory file system, Module.joeyWriteFolder, once the
|
|
program has one) is mirrored into the hidden #joeylog element once a
|
|
second, for a look without a debugger.
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>JoeyLib</title>
|
|
<link rel="icon" type="image/png" href="icon.png">
|
|
<style>
|
|
html, body { margin: 0; height: 100%; background: #000; color: #9a9a9a; font: 14px sans-serif; }
|
|
body { display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
|
#canvas { display: block; max-width: 100vw; max-height: 90vh; outline: none; image-rendering: pixelated; }
|
|
#hint { padding: 8px; }
|
|
#joeylog { display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" tabindex="-1" oncontextmenu="event.preventDefault()"></canvas>
|
|
<div id="hint">Click the picture to give it the keyboard and sound.</div>
|
|
<pre id="joeylog"></pre>
|
|
<script>
|
|
var Module = {
|
|
canvas: document.getElementById("canvas"),
|
|
print: function (text) { console.log(text); },
|
|
printErr: function (text) { console.error(text); },
|
|
preRun: [function () {
|
|
var query = new URLSearchParams(window.location.search);
|
|
var names = { scale: "JOEYLIB_SCALE", aspect: "JOEYLIB_ASPECT", fullscreen: "JOEYLIB_FULLSCREEN" };
|
|
var key;
|
|
for (key in names) {
|
|
if (query.has(key)) {
|
|
Module.ENV[names[key]] = query.get(key);
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
document.getElementById("canvas").addEventListener("click", function () {
|
|
document.getElementById("canvas").focus();
|
|
});
|
|
setInterval(function () {
|
|
var log;
|
|
if (!Module.FS || !Module.joeyWriteFolder) {
|
|
return;
|
|
}
|
|
try {
|
|
log = Module.FS.readFile(Module.joeyWriteFolder + "joeylog.txt", { encoding: "utf8" });
|
|
} catch (e) {
|
|
return;
|
|
}
|
|
document.getElementById("joeylog").textContent = log;
|
|
}, 1000);
|
|
</script>
|
|
{{{ SCRIPT }}}
|
|
</body>
|
|
</html>
|