Something went wrong. Try again.
A video game where you play as a misaligned AI, deceiving and building power. cameron.tngl.io/misaligned
Something went wrong. Try again.
2.0 kB · 37 lines
TypeScript
at main
1234567891011121314151617181920212223242526272829303132333435363738// Redraw a panel without throwing its elements away. Setting innerHTML makes every button new,// so the one under the mouse loses its hover and its tip a few times a second while numbers tick.// This changes only what differs, and the elements that stay keep their hover, focus and scroll.
import { nameGlyph } from './tip';
/** Make `el` hold `html`, touching only what changed. */export function patch(el: Element, html: string) { const t = document.createElement('template'); t.innerHTML = html; // tip.ts shows a title as its own tip, and moves it to data-tip on first hover: do the same here, so both sides match for (const e of t.content.querySelectorAll<HTMLElement>('[title]')) { nameGlyph(e, e.title); e.dataset.tip = e.title; e.removeAttribute('title'); } sync(el, t.content);}
function sync(old: Node, next: Node) { let a = old.firstChild; for (let b = next.firstChild; b;) { const after = b.nextSibling; if (!a) old.appendChild(b); else if (a.nodeType === b.nodeType && a.nodeName === b.nodeName) { update(a, b); a = a.nextSibling; } else { const gone = a; a = a.nextSibling; old.replaceChild(b, gone); } b = after; } while (a) { const gone = a; a = a.nextSibling; old.removeChild(gone); }}
function update(a: Node, b: Node) { if (!(a instanceof Element) || !(b instanceof Element)) { if (a.nodeValue !== b.nodeValue) a.nodeValue = b.nodeValue; return; } for (const { name } of [...a.attributes]) if (!b.hasAttribute(name)) a.removeAttribute(name); for (const { name, value } of b.attributes) if (a.getAttribute(name) !== value) a.setAttribute(name, value); const picked = b instanceof HTMLSelectElement ? b.value : null; sync(a, b); // what a field shows is not its attribute once it has been used if (a instanceof HTMLInputElement && b instanceof HTMLInputElement) { if (a.value !== b.value) a.value = b.value; a.checked = b.checked; } if (a instanceof HTMLSelectElement && picked !== null && a.value !== picked) a.value = picked;}