HAXY

▀ ▄▄▄ ▀ ▀▀ ▄▀ ▀▀▀▀▀▄ ▀▀▀▀▀▀▀▀▀▄ ▀▀▀▀▀▀▀ ▄▀▀▀▀▀▀▀▀▀▀▄▀ ▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▄ ▀▀▀▀▀▀▀▀▀ ▄▀▀▀▀▀▀▀▀▀▀▀▀▀▄ ▀▀▀▀▀▀▀▀▀▀ ▀▀▄▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▄ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀▀▀▀▀▀▀▀▀ ▀▀ ▀▀▀▀▀▄▀▀▀▀▀▀▄▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▄▀ ▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀ ▄▄ ▀▀▀ ▀▀▀▀▀▀▀▀▀ ▀ ▀▀▀▀ ▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀ ▄▀▀ ▀▀▀▀▀▀▀▀▀▀▄▀▄ ▄▀▀▀▀▀▀▀▀▄▀▀▀▀▀▀▀▀▀▄▄ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▄▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▄ ▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀

╭ script.js ────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰───────────────────────────────────────────────────────────────╯

╭────╮ ╭ clone ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │http│ ssh │ │ ╰────╯ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯

.. haxy.wasm index.html ╭─────────────────────────────────╮ │script.js │ ╰─────────────────────────────────╯ term.ttf

1 const grid = document.getElementById("grid"); 2 const pageJsonBase64 = document.getElementById("page").textContent; 3 4 let wasmInstance; 5 const decoder = new TextDecoder(); 6 let currentHtml = ""; 7 8 const MIN_COLS = 30; 9 10 // measured once after the font is loaded. recomputed lazily if they ever 11 // read back as zero (e.g. measured before the font was actually ready). 12 let cellWidth = null; 13 let cellHeight = null; 14 15 function measureCellSize() { 16 const probe = document.createElement("span"); 17 probe.style.position = "absolute"; 18 probe.style.visibility = "hidden"; 19 probe.style.whiteSpace = "pre"; 20 probe.textContent = "X".repeat(100); 21 grid.appendChild(probe); 22 const rect = probe.getBoundingClientRect(); 23 probe.remove(); 24 cellWidth = rect.width / 100; 25 cellHeight = rect.height; 26 } 27 28 function maxCols() { 29 if (!cellWidth) measureCellSize(); 30 return Math.max(MIN_COLS, Math.floor(document.body.clientWidth / cellWidth)); 31 } 32 33 function readWasmString(ptr, len) { 34 const memory = wasmInstance.exports.memory; 35 return decoder.decode(new Uint8Array(memory.buffer, ptr, len)); 36 } 37 38 const importObject = { 39 env: { 40 _consoleLog: function (ptr, len) { 41 console.log(readWasmString(ptr, len)); 42 }, 43 _setHtml: function (ptr, len) { 44 const html = readWasmString(ptr, len); 45 if (html !== currentHtml) { 46 currentHtml = html; 47 grid.innerHTML = html; 48 } 49 }, 50 }, 51 }; 52 53 WebAssembly.instantiateStreaming(fetch("haxy.wasm"), importObject).then(async (result) => { 54 wasmInstance = result.instance; 55 56 // wait for the @font-face to load before measuring cell width, otherwise 57 // we get the fallback font's metrics. 58 if (document.fonts && document.fonts.ready) { 59 await document.fonts.ready; 60 } 61 62 // the page is embedded as base64 so it can sit inside the host html 63 // without worrying about characters that would terminate the script tag. 64 // decode here and hand the raw json bytes to the wasm. 65 const jsonBytes = Uint8Array.from(atob(pageJsonBase64), (c) => c.charCodeAt(0)); 66 const ptr = wasmInstance.exports._alloc(jsonBytes.length); 67 new Uint8Array(wasmInstance.exports.memory.buffer, ptr, jsonBytes.length).set(jsonBytes); 68 wasmInstance.exports._start(ptr, jsonBytes.length, maxCols()); 69 70 document.addEventListener("keydown", (event) => { 71 if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(event.key)) { 72 event.preventDefault(); 73 } 74 wasmInstance.exports._onKeyDown(event.keyCode); 75 wasmInstance.exports._tick(maxCols()); 76 }); 77 78 grid.addEventListener("click", (event) => { 79 // ensure cellWidth/cellHeight are measured before converting pixels to grid cells 80 maxCols(); 81 const rect = grid.getBoundingClientRect(); 82 const col = Math.floor((event.clientX - rect.left) / cellWidth); 83 const row = Math.floor((event.clientY - rect.top) / cellHeight); 84 if (col < 0 || row < 0) return; 85 wasmInstance.exports._onMouseClick(col, row); 86 wasmInstance.exports._tick(maxCols()); 87 }); 88 89 let resizeTimer = null; 90 window.addEventListener("resize", () => { 91 clearTimeout(resizeTimer); 92 resizeTimer = setTimeout(() => { 93 wasmInstance.exports._tick(maxCols()); 94 }, 100); 95 }); 96 }); 97