<!doctype html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hamster</title> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { font-family: arial; background: #222; color: #ded; overflow: hidden; display: flex; align-items: center; justify-items: center; justify-content: center; } .light { background: #fff; color: #000; } #container { position: fixed; display: flex; justify-content: center; align-items: center; top: 0; left: 0; right: 0; bottom: 0; } #output { position: fixed; display: none; font-family: 'Courier New', Courier, monospace; width: 100%; height: 15vh; top:85vh; bottom: 0; margin-left: 1rem; padding-left: 1rem; background: #000; color: #fff; outline: none; border: none; } #container.show-console { bottom: 15vh; } #output.show-console { display: block; } #canvas { display: block; border: 0px none; background-color: black; margin: 0 auto; } #canvas:focus { outline: none; } #toggle-console { display: none; position: fixed; top: 1rem; left: 1rem; } </style> </head> <body> <div id="container"> <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas> </div> <button id="toggle-console">Toggle Console</button> <script type='text/javascript'> var Module = { print: (function () { return (...args) => { var text = args.join(' '); window.parent.postMessage({ message: "console-output", data: text + "\n", }, "*"); }; })(), canvas: (() => { var canvas = document.getElementById('canvas'); // As a default initial behavior, pop up an alert when webgl context is lost. To make your // application robust, you may want to override this behavior before shipping! // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2 canvas.addEventListener("webglcontextlost", (e) => { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false); return canvas; })(), setStatus: (text) => { }, totalDependencies: 0, monitorRunDependencies: (left) => { } }; window.onerror = (event) => { window.parent.postMessage({ message: "player-runtime-error", }, "*"); }; window.parent.postMessage({ message: "player-ready", }, "*"); window.addEventListener("message", (event) => { if (typeof event.data !== "object") return; if (typeof event.data.message !== "string") return; if (event.data.message === "set-theme") { document.querySelector("body").className = event.data.theme; return; } }); </script> {{{ SCRIPT }}} </body> </html>