breakout71/src/asyncAlert.ts

import { t } from "./i18n/i18n";

export let alertsOpen = 0,
  closeModal: null | (() => void) = null;

export type AsyncAlertAction<t> = {
  text?: string;
  value?: t;
  help?: string;
  disabled?: boolean;
  icon?: string;
  className?: string;
};

export function asyncAlert<t>({
  title,
  text,
  actions,
  allowClose = true,
  textAfterButtons = "",
  actionsAsGrid = false,
}: {
  title?: string;
  text?: string;
  actions?: AsyncAlertAction<t>[];
  textAfterButtons?: string;
  allowClose?: boolean;
  actionsAsGrid?: boolean;
}): Promise<t | void> {
  alertsOpen++;
  return new Promise((resolve) => {
    const popupWrap = document.createElement("div");
    document.body.appendChild(popupWrap);
    popupWrap.className = "popup " + (actionsAsGrid ? "actionsAsGrid " : "");

    function closeWithResult(value: t | undefined) {
      resolve(value);
      // Doing this async lets the menu scroll persist if it's shown a second time
      setTimeout(() => {
        document.body.removeChild(popupWrap);
      });
    }

    if (allowClose) {
      const closeButton = document.createElement("button");
      closeButton.title = t("play.close_modale_window_tooltip");
      closeButton.className = "close-modale";
      closeButton.addEventListener("click", (e) => {
        e.preventDefault();
        closeWithResult(undefined);
      });
      closeModal = () => {
        closeWithResult(undefined);
      };
      popupWrap.appendChild(closeButton);
    }

    const popup = document.createElement("div");

    if (title) {
      const p = document.createElement("h2");
      p.innerHTML = title;
      popup.appendChild(p);
    }

    if (text) {
      const p = document.createElement("div");
      p.innerHTML = text;
      popup.appendChild(p);
    }

    const buttons = document.createElement("section");
    popup.appendChild(buttons);

    actions
      ?.filter((i) => i)
      .forEach(({ text, value, help, disabled, className = "", icon = "" }) => {
        const button = document.createElement("button");

        button.innerHTML = `
${icon}
<div>
                    <strong>${text}</strong>
                    <em>${help || ""}</em>
            </div>`;

        if (disabled) {
          button.setAttribute("disabled", "disabled");
        } else {
          button.addEventListener("click", (e) => {
            e.preventDefault();
            closeWithResult(value);
          });
        }
        button.className = className;
        buttons.appendChild(button);
      });

    if (textAfterButtons) {
      const p = document.createElement("div");
      p.className = "textAfterButtons";
      p.innerHTML = textAfterButtons;
      popup.appendChild(p);
    }

    popupWrap.appendChild(popup);
    (
      popup.querySelector("button:not([disabled])") as HTMLButtonElement
    )?.focus();
  }).then(
    (v: unknown) => {
      alertsOpen--;
      closeModal = null;
      return v as t | undefined;
    },
    () => {
      closeModal = null;
      alertsOpen--;
    },
  );
}