hudlisted

# HUD The whole overlay of a game HUD is a few dozen DOM nodes that change a few times a second. A virtual DOM would be more code than the UI it manages, so there is not one. **The package ships no stylesheet at all.** It writes structure, `pointer-events`, and `--lattice-*` custom properties, and holds no opinion about anything else. So your `<style>` block *is* the HUD's art direction — that is a feature, and it is why there is no theme to fight. --- ## The whole thing ```ts import { fmtCompact } from '@latticekit/core'; import { browserFrames, createLoop } from '@latticekit/loop'; import { createOverlay, drive, el, interactive, roll, setText, toasts } from '@latticekit/ui'; interface Model { readonly coin: number; readonly price: number; readonly affordable: boolean; readonly objective: string; } export function createHud(read: () => Model, onBuy: () => void) { const now = (): number => performance.now(); const loop = createLoop({ clock: { now }, frames: browserFrames() }); const ui = createOverlay({ now }); // the SAME clock. Two clocks in one HUD is the bug below const coin = roll(ui, { format: fmtCompact }); const objective = el('p', { class: 'objective' }); const buy = interactive(el('button', { class: 'buy' }, 'Build')); buy.addEventListener('click', onBuy); ui.mount(el('div', { class: 'hud' }, objective, 'Coin ', coin.node, buy), { interactive: true }); // State on UPDATE. If `render` never runs — a hidden tab — every number here