Skip to content

Instantly share code, notes, and snippets.

@nandenjin
Created November 4, 2022 07:19
Show Gist options
  • Save nandenjin/12e5aec866cf9be638a85d39e6e153a6 to your computer and use it in GitHub Desktop.
Save nandenjin/12e5aec866cf9be638a85d39e6e153a6 to your computer and use it in GitHub Desktop.
oF x Emscripten
<!DOCTYPE html>
<!-- Modern shell file for Emscripten -->
<html>
<meta charset="UTF-8">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,
body {
background-color: #000;
margin: 0;
color: #fff;
}
#control {
position: fixed;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<div id="control">
<div id="status"></div>
<progress id="progress"></progress>
<div id="error"></div>
</div>
<canvas id="canvas"></canvas>
<script>
const statusElement = document.getElementById("status");
const progressElement = document.getElementById("progress");
var Module = {
preRun: [updateCanvasSize],
postRun: [],
print: (text) => {
// To be implemented
},
printErr: (text) => {
console.error(text);
},
canvas: document.getElementById("canvas"),
setStatus: (text) => {
const now = Date.now();
// Save last execution, mock for initialization
Module.setStatus.last = Module.setStatus.last || {
time: now,
text: "",
};
// Ignore if same with current
if (text === Module.setStatus.text) return;
// Is progress update?
const m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
// Ignore if progress update in 30ms from previous
if (m && now - Module.setStatus.last.time < 30) return;
// If is progress update:
if (m) {
text = m[1];
progressElement.value = parseInt(m[2]);
progressElement.max = parseInt(m[4]);
}
// Others:
else {
// Hide progress display
progressElement.value = null;
progressElement.max = null;
progressElement.hidden = true;
}
// Output
console.log(text);
statusElement.innerHTML = text;
// Store execution log
Module.setStatus.last.time = now;
Module.setStatus.last.text = text;
},
};
// If some error is throwed, report by setting status
window.addEventListener("error", (e) => {
Module.setStatus("Error");
console.error(e);
document.getElementById("error").innerHTML = e.message;
});
/** Update canvas size with fitting to window size */
const updateCanvasSize = () => {
Module.setCanvasSize?.(window.innerWidth, window.innerHeight);
};
window.addEventListener("resize", updateCanvasSize);
window.addEventListener("load", updateCanvasSize);
Module.setStatus("Downloading...");
</script>
{{{ SCRIPT }}}
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment