/** Tiny DOM helpers. The UI is an overlay; the game is the 3D scene. */

export function el<K extends keyof HTMLElementTagNameMap>(
  tag: K,
  cls?: string,
  parent?: HTMLElement,
  text?: string,
): HTMLElementTagNameMap[K] {
  const e = document.createElement(tag);
  if (cls) e.className = cls;
  if (text !== undefined) e.textContent = text;
  if (parent) parent.appendChild(e);
  return e;
}

export function clear(e: HTMLElement): void {
  while (e.firstChild) e.removeChild(e.firstChild);
}

export const ui = document.getElementById('ui') as HTMLElement;

/** A panel that owns a chunk of the overlay and can be shown/hidden as a unit. */
export class Panel {
  readonly root: HTMLElement;
  constructor(cls: string) {
    this.root = el('div', cls, ui);
  }
  show(v = true): void {
    this.root.style.display = v ? '' : 'none';
  }
  hide(): void {
    this.show(false);
  }
  dispose(): void {
    this.root.remove();
  }
}