diff --git a/web/src/base.wasm b/web/src/base.wasm index 2182ab7..191b814 100644 Binary files a/web/src/base.wasm and b/web/src/base.wasm differ diff --git a/web/src/index.html b/web/src/index.html index b3411ae..4fff53f 100644 --- a/web/src/index.html +++ b/web/src/index.html @@ -3,13 +3,19 @@ MicroW8 + + - -
- - +
+ +
+ +
+ \ No newline at end of file diff --git a/web/src/main.js b/web/src/main.js index f88dae5..6df65fb 100644 --- a/web/src/main.js +++ b/web/src/main.js @@ -16,6 +16,14 @@ function setMessage(size, error) { document.getElementById('message').innerHTML = html; } +let framebufferCanvas = document.createElement("canvas"); +framebufferCanvas.width = 320; +framebufferCanvas.height = 256; +let framebufferCanvasCtx = framebufferCanvas.getContext("2d"); +let imageData = framebufferCanvasCtx.createImageData(320, 256); +let canvasCtx = document.getElementById('screen').getContext('2d'); +canvasCtx.imageSmoothingEnabled = false; + let cancelFunction; async function runModule(data) { @@ -41,19 +49,18 @@ async function runModule(data) { } newURL += '#' + btoa(dataString); } - if(newURL != window.location.href) { - history.replaceState(null, null, newURL); + if(newURL != window.location.pathname + window.location.hash) { history.pushState(null, null, newURL); } try { let loaderImport = { - uw8: { - ram: new WebAssembly.Memory({ initial: 8 }) + env: { + memory: new WebAssembly.Memory({ initial: 8 }) } }; - let loadMem = loaderImport.uw8.ram.buffer; + let loadMem = loaderImport.env.memory.buffer; let loader = await loadWasm(loaderUrl, loaderImport); let baseModule = await (await fetch(baseUrl)).arrayBuffer(); @@ -70,27 +77,20 @@ async function runModule(data) { } let importObject = { - uw8: { - ram: new WebAssembly.Memory({ initial: 8, maximum: 8 }), + env: { + memory: new WebAssembly.Memory({ initial: 8, maximum: 8 }), } }; let instance = new WebAssembly.Instance(await WebAssembly.compile(data), importObject); - let canvasCtx = document.getElementById('screen').getContext('2d'); - let imageData = canvasCtx.createImageData(320, 256); - let buffer = imageData.data; - for(let i = 0; i < 320*256; ++i) { - buffer[i * 4 + 3] = 255; - } let startTime = Date.now(); let keepRunning = true; cancelFunction = () => keepRunning = false; - function mainloop() { if(!keepRunning) { return; @@ -99,13 +99,15 @@ async function runModule(data) { try { instance.exports.tic(Date.now() - startTime); - let framebuffer = new Uint8Array(importObject.uw8.ram.buffer.slice(120, 120 + 320*256)); + let framebuffer = new Uint8Array(importObject.env.memory.buffer.slice(120, 120 + 320*256)); for(let i = 0; i < 320*256; ++i) { buffer[i * 4] = framebuffer[i]; buffer[i * 4 + 1] = framebuffer[i]; buffer[i * 4 + 2] = framebuffer[i]; + buffer[i * 4 + 3] = 255; } - canvasCtx.putImageData(imageData, 0, 0); + framebufferCanvasCtx.putImageData(imageData, 0, 0); + canvasCtx.drawImage(framebufferCanvas, 0, 0, 640, 512); window.requestAnimationFrame(mainloop); } catch(err) { @@ -127,6 +129,8 @@ function runModuleFromHash() { let base64Data = window.location.hash.slice(1); if(base64Data.length > 0) { runModuleFromURL('data:;base64,' + base64Data); + } else { + runModule(new ArrayBuffer(0)); } } diff --git a/web/src/style.css b/web/src/style.css new file mode 100644 index 0000000..dc8f265 --- /dev/null +++ b/web/src/style.css @@ -0,0 +1,22 @@ +html { + font-family: 'Josefin Sans', sans-serif; + background-color: #202024; + color: #808070; + height: 100%; +} + +body { + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +canvas { + margin: 8px; + box-shadow: 5px 5px 20px black; +} + +.error { + color: red; +} diff --git a/web/src/uw8loader.wasm b/web/src/uw8loader.wasm index 9b9ac4f..1703682 100644 Binary files a/web/src/uw8loader.wasm and b/web/src/uw8loader.wasm differ