export class PreGameplayUIC {
  private static root: HTMLElement | null = null;

  static init() {
    const ui = document.getElementById("ui");
    if (!ui) return;

    ui.classList.add("is-pre-gameplay");

    const root = document.createElement("div");
    root.className = "pre-gameplay";

    const hurry = document.createElement("p");
    hurry.className = "pre-gameplay__hurry";
    hurry.textContent = "HURRY UP";

    const bottom = document.createElement("div");
    bottom.className = "pre-gameplay__bottom";

    const drag = document.createElement("p");
    drag.className = "pre-gameplay__drag";
    drag.textContent = "DRAG TO MOVE";

    const joystick = document.createElement("div");
    joystick.className = "pre-gameplay-joystick";

    const base = document.createElement("div");
    base.className = "pre-gameplay-joystick__base";

    const knob = document.createElement("div");
    knob.className = "pre-gameplay-joystick__knob";

    joystick.append(base, knob);
    bottom.append(drag, joystick);
    root.append(hurry, bottom);
    ui.appendChild(root);
    this.root = root;
  }

  static dismiss() {
    document.getElementById("ui")?.classList.remove("is-pre-gameplay");
    this.root?.remove();
    this.root = null;
  }
}
