115 lines
3.3 KiB
HTML
115 lines
3.3 KiB
HTML
<!doctype html>
|
|
<html lang="en-us">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
|
<title>Odin + Raylib on the web</title>
|
|
<meta name="title" content="Odin + Raylib on the web">
|
|
<meta name="description" content="Make games using Odin + Raylib that work in the browser">
|
|
<meta name="viewport" content="width=device-width">
|
|
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
background-color: black;
|
|
}
|
|
canvas.game_canvas {
|
|
border: 0px none;
|
|
background-color: black;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas class="game_canvas" id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1" onmousedown="event.target.focus()" onkeydown="event.preventDefault()"></canvas>
|
|
<script type="text/javascript" src="odin.js"></script>
|
|
<script>
|
|
var odinMemoryInterface = new odin.WasmMemoryInterface();
|
|
odinMemoryInterface.setIntSize(4);
|
|
var odinImports = odin.setupDefaultImports(odinMemoryInterface);
|
|
|
|
// The Module is used as configuration for emscripten.
|
|
var Module = {
|
|
// This is called by emscripten when it starts up.
|
|
instantiateWasm: (imports, successCallback) => {
|
|
const newImports = {
|
|
...odinImports,
|
|
...imports
|
|
}
|
|
|
|
return WebAssembly.instantiateStreaming(fetch("index.wasm"), newImports).then(function(output) {
|
|
var e = output.instance.exports;
|
|
odinMemoryInterface.setExports(e);
|
|
odinMemoryInterface.setMemory(e.memory);
|
|
return successCallback(output.instance);
|
|
});
|
|
},
|
|
// This happens a bit after `instantiateWasm`, when everything is
|
|
// done setting up. At that point we can run code.
|
|
onRuntimeInitialized: () => {
|
|
var e = wasmExports;
|
|
|
|
// Calls any procedure marked with @init
|
|
e._start();
|
|
|
|
// See source/main_web/main_web.odin for main_start,
|
|
// main_update and main_end.
|
|
e.main_start();
|
|
|
|
function send_resize() {
|
|
var canvas = document.getElementById('canvas');
|
|
e.web_window_size_changed(canvas.width, canvas.height);
|
|
}
|
|
|
|
window.addEventListener('resize', function(event) {
|
|
send_resize();
|
|
}, true);
|
|
|
|
// This can probably be done better: Ideally we'd feed the
|
|
// initial size to `main_start`. But there seems to be a
|
|
// race condition. `canvas` doesn't have it's correct size yet.
|
|
send_resize();
|
|
|
|
// Runs the "main loop".
|
|
function do_main_update() {
|
|
if (!e.main_update()) {
|
|
e.main_end();
|
|
|
|
// Calls procedures marked with @fini
|
|
e._end();
|
|
return;
|
|
}
|
|
window.requestAnimationFrame(do_main_update);
|
|
}
|
|
|
|
window.requestAnimationFrame(do_main_update);
|
|
},
|
|
print: (function() {
|
|
var element = document.getElementById("output");
|
|
if (element) element.value = ''; // clear browser cache
|
|
return function(text) {
|
|
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
|
console.log(text);
|
|
if (element) {
|
|
element.value += text + "\n";
|
|
element.scrollTop = element.scrollHeight; // focus on bottom
|
|
}
|
|
};
|
|
})(),
|
|
canvas: (function() {
|
|
return document.getElementById("canvas");
|
|
})()
|
|
};
|
|
</script>
|
|
|
|
<!-- Emscripten injects its javascript here -->
|
|
{{{ SCRIPT }}}
|
|
</body>
|
|
</html>
|