HAXY

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

╭─────────────╮ │scroll to top│ ╰─────────────╯ ╭ script.js ────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰───────────────────────────────────────────────────────────────╯

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

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

71 if (window.location.pathname !== url) { 72 history.replaceState({}, "", url); 73 } 74 }, 75 _setOverlay: function (ptr, len) { 76 const html = readWasmString(ptr, len); 77 // diff against the previous overlay HTML; an unchanged overlay 78 // means no layout/structure has shifted (typing alone doesn't 79 // produce a diff because we deliberately omit the `value` 80 // attribute on inputs — the browser tracks that). skipping the 81 // innerHTML assignment keeps the live <form> alive across the 82 // mousedown→focusin→tick→click sequence, which is what lets 83 // the very first click on the submit button actually submit. 84 if (html === currentOverlay) return; 85 currentOverlay = html; 86 overlay.innerHTML = html; 87 }, 88 _focusInput: function (id) { 89 const target = overlay.querySelector(`[data-focus-id="${id}"]`); 90 if (target && document.activeElement !== target) target.focus(); 91 }, 92 _navigate: function (ptr, len) { 93 // a real browser navigation to another top-level page (the wasm 94 // can't render it client-side without server data). 95 window.location.assign(readWasmString(ptr, len)); 96 }, 97 _scrollToRect: function (x, y, w, h) { 98 // the rect arrives in grid cells; map it to document coordinates 99 // via the measured cell size and the grid origin, then scroll the 100 // minimum needed to bring the widget fully into view 101 if (!cellHeight) measureCell(); 102 const gridTop = grid.getBoundingClientRect().top + window.scrollY; 103 const top = gridTop + y * cellHeight; 104 const bottom = top + h * cellHeight; 105 const viewTop = window.scrollY; 106 const viewBottom = viewTop + document.documentElement.clientHeight; 107 if (top < viewTop) { 108 window.scrollTo({ top }); 109 } else if (bottom > viewBottom) { 110 window.scrollTo({ top: bottom - document.documentElement.clientHeight }); 111 } 112 }, 113 }, 114 }; 115 116 function sendTextInputValue(focusId, value) { 117 const bytes = encoder.encode(value); 118 const ptr = wasmInstance.exports._alloc(bytes.length); 119 new Uint8Array(wasmInstance.exports.memory.buffer, ptr, bytes.length).set(bytes); 120 wasmInstance.exports._setTextInputValue(focusId, ptr, bytes.length); 121 wasmInstance.exports._tick(minRows(), maxCols()); 122 } 123 124 function sendEnter(form) { 125 const btn = form.querySelector("button[type=submit][data-focus-id]"); 126 if (!btn) return; 127 wasmInstance.exports._onMouseClick(Number(btn.dataset.focusId)); 128 wasmInstance.exports._onKeyDown(13); 129 wasmInstance.exports._tick(minRows(), maxCols()); 130 } 131 132 WebAssembly.instantiateStreaming(fetch("/haxy.wasm"), importObject).then(async (result) => { 133 wasmInstance = result.instance; 134 135 // wait for the @font-face to load before measuring cell width, otherwise 136 // we get the fallback font's metrics. 137 if (document.fonts && document.fonts.ready) { 138 await document.fonts.ready; 139 } 140 141 // the page is embedded as base64 so it can sit inside the host html 142 // without worrying about characters that would terminate the script tag. 143 // decode here and hand the raw json bytes to the wasm. 144 const jsonBytes = Uint8Array.from(atob(pageJsonBase64), (c) => c.charCodeAt(0)); 145 const ptr = wasmInstance.exports._alloc(jsonBytes.length); 146 new Uint8Array(wasmInstance.exports.memory.buffer, ptr, jsonBytes.length).set(jsonBytes); 147 wasmInstance.exports._init(ptr, jsonBytes.length, minRows(), maxCols()); 148 149 document.addEventListener("keydown", (event) => { 150 // let the browser handle modifier combos. the TUI only uses unmodified keys, 151 // so intercepting these would just break normal browser navigation. 152 if (event.altKey || event.ctrlKey || event.metaKey) return; 153 // when a form element (text input or submit button) owns focus, 154 // the browser handles typing, Enter-to-submit, and Tab natively. 155 // we only forward keys into the TUI when focus is elsewhere. 156 // exception: arrow up/down on an input unfocuses it and forwards 157 // the event so the TUI can move focus between widgets. 158 if (document.activeElement) { 159 const tag = document.activeElement.tagName; 160 const isArrow = event.key === "ArrowUp" || event.key === "ArrowDown" || 161 event.key === "ArrowLeft" || event.key === "ArrowRight"; 162 if (tag === "INPUT" && (event.key === "ArrowUp" || event.key === "ArrowDown")) { 163 // up/down moves between widgets; left/right stay in the input 164 document.activeElement.blur(); 165 } else if (tag === "BUTTON" && isArrow) { 166 // arrows navigate away from a focused submit button 167 document.activeElement.blur(); 168 } else if (tag === "INPUT" || tag === "BUTTON") { 169 // Enter (submit), typing, Tab — handled natively by the browser 170 return; 171 } 172 } 173 if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(event.key)) { 174 event.preventDefault(); 175 } 176 wasmInstance.exports._onKeyDown(event.keyCode); 177 wasmInstance.exports._tick(minRows(), maxCols()); 178 }); 179 180 // listeners on document (not #grid) since the form lives outside #grid; 181 // input/focus events from form elements still bubble up to document. 182 document.addEventListener("input", (event) => { 183 const t = event.target; 184 if (!t || t.tagName !== "INPUT" || !t.dataset.focusId) return; 185 sendTextInputValue(Number(t.dataset.focusId), t.value); 186 }); 187 188 document.addEventListener("focusin", (event) => { 189 const t = event.target; 190 if (!t || !t.dataset || !t.dataset.focusId) return; 191 // sync the wasm focus to wherever the browser moved focus 192 wasmInstance.exports._setFocus(Number(t.dataset.focusId)); 193 // a click's mousedown fires this focusin before the click event. ticking 194 // here would rebuild #grid and destroy the node before its click lands, 195 // swallowing the navigation and forcing a second click — so don't 196 // re-render for a grid element. overlay controls live outside #grid and 197 // survive the diff, so they still tick. 198 if (!grid.contains(t)) wasmInstance.exports._tick(minRows(), maxCols()); 199 }); 200 201 grid.addEventListener("click", (event) => { 202 const span = event.target.closest(".clickable"); 203 if (!span) return; 204 const focusId = Number(span.dataset.focusId); 205 wasmInstance.exports._onMouseClick(focusId); 206 wasmInstance.exports._tick(minRows(), maxCols()); 207 }); 208 209 let resizeTimer = null; 210 window.addEventListener("resize", () => { 211 clearTimeout(resizeTimer); 212 resizeTimer = setTimeout(() => { 213 wasmInstance.exports._tick(minRows(), maxCols()); 214 }, 100); 215 }); 216 }); 217