diff --git a/src/web/alerts/www/src/alerts/alertManager.ts b/src/web/alerts/www/src/alerts/alertManager.ts index 128df49..4f23e31 100644 --- a/src/web/alerts/www/src/alerts/alertManager.ts +++ b/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); }; }; diff --git a/src/web/alerts/www/src/alerts/index.ts b/src/web/alerts/www/src/alerts/index.ts index ae9a028..eb48264 100644 --- a/src/web/alerts/www/src/alerts/index.ts +++ b/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; +}; export default { 'userBlast': userBlast, 'userExecute': userBlast, 'grenadeExplosion': userBlast, - 'tntExplosion': userBlast -} + 'tntExplosion': userBlast, +} as AlertMap; diff --git a/src/web/alerts/www/src/alerts/userBlast.ts b/src/web/alerts/www/src/alerts/userBlast.ts index 18f159e..c318338 100644 --- a/src/web/alerts/www/src/alerts/userBlast.ts +++ b/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 { 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 = ` + ${alert.user} just blasted ${alert.target} for 60 seconds! Rip bozo! + +`; + return { blocking: false, duration, alertDiv: parentDiv }; };