46 lines
1.3 KiB
HTML
46 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<!-- TODO: https://j9t.github.io/html-minifier-next/ -->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Brightstone</title>
|
|
<style>
|
|
canvas {
|
|
border: 2px solid #333;
|
|
background-color: #f0f0f0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" width="640" height="480"></canvas>
|
|
<script>
|
|
const canvas = document.getElementById('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// TODO: Throttle FPS.
|
|
|
|
async function main() {
|
|
const wasm = await WebAssembly.instantiateStreaming(fetch("player.wasm"));
|
|
const { memory, plr_draw_screen, plr_draw_get_pixel_buffer } = wasm.instance.exports;
|
|
|
|
const bufferPtr = plr_draw_get_pixel_buffer();
|
|
const wasmBuffer = new Uint8ClampedArray(
|
|
memory.buffer,
|
|
bufferPtr,
|
|
640 * 480 * 4 // TODO: Retrieve actual values.
|
|
);
|
|
const imgData = new ImageData(wasmBuffer, 640, 480);
|
|
|
|
function renderLoop() {
|
|
plr_draw_screen(bufferPtr);
|
|
ctx.putImageData(imgData, 0, 0);
|
|
requestAnimationFrame(renderLoop);
|
|
}
|
|
renderLoop(wasm);
|
|
}
|
|
|
|
main();
|
|
</script>
|
|
</body>
|
|
</html>
|