rework alert system, still not really happy though

src/web/alerts/www/src/alerts/alertManager.ts

@@ -1,28 +1,49 @@
 import { alert } from "web/alerts/types";
 import alerts from "./index";
 
+function generateRandomCSSIdentifier() {
+  const firstChar = String.fromCharCode(97 + Math.floor(Math.random() * 26));
+  const secondChar = String.fromCharCode(97 + Math.floor(Math.random() * 26));
+  const randomChar = String.fromCharCode(97 + Math.floor(Math.random() * 26));
+  return firstChar + secondChar + randomChar + Math.floor(Math.random() * 1000);
+};
+
 class AlertManager {
-  #busy: boolean;
-  #alertQueue: alert[];
+  private busy: boolean;
+  private alertQueue: alert[];
+  private currentZIndex: number;
 
   constructor() {
-    this.#busy = false;
-    this.#alertQueue = [];
+    this.busy = false;
+    this.alertQueue = [];
+    this.currentZIndex = 1000;
   };
 
   private async playAlert(alert: alert) {
-    this.#busy = true;
+    this.busy = true;
 
-    await alerts[alert.name](alert);
+    const data = await alerts[alert.name](alert);
+    const div = data.alertDiv;
+    const alertId = generateRandomCSSIdentifier();
+    div.classList.add(alertId);
 
-    const nextAlert = this.#alertQueue.shift();
-    if (!nextAlert) { this.#busy = false; return; }; // if .shift has no results, we done and return
+    const removalScript = document.createElement('script');
+    removalScript.textContent = `setTimeout(() => document.querySelectorAll(".${alertId}").forEach(elem => elem.remove()), ${data.duration})`;
+    div.appendChild(removalScript);
 
+    div.style.zIndex = this.currentZIndex.toString();
+    document.body.appendChild(div);
+
+    if (data.blocking) await new Promise(async resolve => setTimeout(resolve, data.duration));
+
+    const nextAlert = this.alertQueue.shift();
+    if (!nextAlert) { this.busy = false; this.currentZIndex = 1000; return; }; // if .shift has no results, we done and return
+    this.currentZIndex -= 1;
     this.playAlert(nextAlert);
   };
 
   async queueAlert(alert: alert) {
-    if (this.#busy) { this.#alertQueue.push(alert); return; };
+    if (this.busy) { this.alertQueue.push(alert); return; };
     await this.playAlert(alert);
   };
 };

src/web/alerts/www/src/alerts/index.ts

@@ -1,14 +1,19 @@
-export function delay(time: number) {
-  return new Promise(function(resolve) {
-    setTimeout(resolve, time)
-  });
+import { alert } from "web/alerts/types";
+import userBlast from "./userBlast";
+
+export type AlertRunner = {
+  duration: number;
+  alertDiv: HTMLDivElement;
+  blocking: boolean;
 };
 
-import userBlast from "./userBlast";
+type AlertMap = {
+  [key: string]: (alert: alert) => Promise<AlertRunner>;
+};
 
 export default {
   'userBlast': userBlast,
   'userExecute': userBlast,
   'grenadeExplosion': userBlast,
-  'tntExplosion': userBlast
-}
+  'tntExplosion': userBlast,
+} as AlertMap;

src/web/alerts/www/src/alerts/userBlast.ts

@@ -1,18 +1,20 @@
 import { userBlastAlert } from "web/alerts/types";
-import { delay } from "./index";
+import { AlertRunner } from "./index";
 
-export default async function execute(alert: userBlastAlert) {
+const duration = 10000;
+
+export default async function execute(alert: userBlastAlert): Promise<AlertRunner> {
   const parentDiv = document.createElement('div');
-  const textElement = document.createElement('span');
-  textElement.textContent = `${alert.user} just blasted ${alert.target} for 60 seconds! Rip bozo!`;
-  parentDiv.appendChild(textElement);
-  Object.assign(textElement.style, {
-    position: 'fixed',
-    top: '20px',
-    left: '20px',
-    zIndex: 1000
-  });
-  document.querySelector("#app").appendChild(parentDiv);
-  await delay(10000);
-  parentDiv.remove();
+  parentDiv.className = 'userBlastAlert';
+  parentDiv.innerHTML = `
+    <span>${alert.user} just blasted ${alert.target} for 60 seconds! Rip bozo!</span>
+    <style>
+      .userBlastAlert {
+        position: fixed;
+        top: 20px;
+        left: 20px;
+      }
+    </style>
+`;
+  return { blocking: false, duration, alertDiv: parentDiv };
 };