dom

Source: dom.js:17

DOM glue layer: collects every DOM element the app interacts with into a single els object, and provides a handful of small utilities for status indicators, overlay clearing, and effect-button state.

Why a dedicated module: separating element lookup from feature code keeps the rest of the app free of document.getElementById calls scattered everywhere, makes the set of touched DOM nodes auditable in one place, and lets tests replace els with a stub for unit testing.

Element resolution happens at module-load time, so this module must be imported after the corresponding DOM nodes exist (i.e. after the HTML <script type="module"> defer ordering has parsed them).

Static Methods

setStatus(kind: string, text: string)

Update the status indicator in the header. The kind argument selects the dot colour class (live = green, error = red, anything else = default grey) and text populates the adjacent label. Centralising the logic here keeps the indicator visually consistent regardless of which module triggered the change.

Parameters

• kind (string) — One of 'live', 'init', 'error', or any other string (defaults to neutral styling). Only 'live' and 'error' apply a CSS class.
• text (string) — Human-readable status text shown to the right of the dot.

• See:
  • scripts/camera.js – sets `('live', …)` once the webcam stream starts.
  • scripts/main.js – sets `('init', …)` while models load, `('error', …)` on failure.

clearOverlay()

Clear the main overlay canvas and reset its visual state. Also cancels any pending fade-out timer set by engine.triggerOverlayFadeout so a stale timer doesn't fade out a freshly drawn frame. Called between detection passes and on effect changes.

• See:
  • scripts/engine.js – `detectFaceInCam()` clears the overlay before drawing the new detection result.
  • scripts/ghostyles-manager.js – `toggleEffect()` uses this indirectly via `clearActiveEffect()` when switching off an effect.

clearActiveEffect()

Reset UI and runtime state after an effect is deactivated: drop the active class from every preview button, undo the scan-button styling, blank the "effect name" / "tracking" labels, null out the cached detection result and last composited canvas, disable the copy-makeup button, and clear the overlay canvas. Side-effect only — no event is dispatched.

• See:
  • scripts/ghostyles-manager.js – `toggleEffect()` calls this when the user deactivates the currently active effect.

effectSelected(button: HTMLButtonElement)

Apply UI styling after a ghostyle button is selected: mark the chosen button active and clear the others, hide any preview image still on screen, restyle the scan button to the "armed" appearance, cancel any pending overlay fade, and update the "effect name" / "tracking" labels from the active ghostyle record. Reads state.activeEffect directly, so callers must set it before invoking this.

Parameters

• button (HTMLButtonElement) — The button that was just clicked.

• See:
  • scripts/ghostyles-manager.js – `toggleEffect()` calls this after setting `state.activeEffect`.

Other

els

Single source of truth for the DOM nodes touched by the app. Populated once at module load. Some entries may be null if the markup omits them (e.g. mirrorToggle is kept as a fallback for non-mobile builds).