decent implementation of alert system

src/cheers/execute.ts

@@ -6,6 +6,7 @@ import { timeout } from "lib/timeout";
 import { createTimeoutRecord } from "db/dbTimeouts";
 import { parseCheerArgs } from "lib/parseCommandArgs";
 import { createCheerEventRecord } from "db/dbCheerEvents";
+import { playAlert } from "web/alerts/serverFunctions";
 
 const ITEMNAME = 'silverbullet';
 
@@ -20,7 +21,12 @@ export default new Cheer('execute', 6666, async (msg, user) => {
   if (result.status) await Promise.all([
     sendMessage(`${target.displayName} RIPBOZO RIPBOZO RIPBOZO RIPBOZO RIPBOZO RIPBOZO RIPBOZO`),
     createTimeoutRecord(user, target, ITEMNAME),
-    createCheerEventRecord(user, ITEMNAME)
+    createCheerEventRecord(user, ITEMNAME),
+    playAlert({
+      name: 'userExecution',
+      user: user.displayName,
+      target: target.displayName
+    })
   ]);
   else {
     await handleNoTarget(msg, user, ITEMNAME);

src/cheers/grenade.ts

@@ -6,6 +6,7 @@ import { getUserRecord } from "db/dbUser";
 import { createTimeoutRecord } from "db/dbTimeouts";
 import { createCheerEventRecord } from "db/dbCheerEvents";
 import { Cheer, handleNoTarget } from "cheers";
+import { playAlert } from "web/alerts/serverFunctions";
 
 const ITEMNAME = 'grenade';
 
@@ -22,6 +23,11 @@ export default new Cheer('grenade', 99, async (msg, user) => {
     redis.del(selection),
     sendMessage(`wybuh ${target?.displayName} got hit by ${user.displayName}'s grenade wybuh`),
     createTimeoutRecord(user, target!, ITEMNAME),
-    createCheerEventRecord(user, ITEMNAME)
+    createCheerEventRecord(user, ITEMNAME),
+    playAlert({
+      name: 'grenadeExplosion',
+      user: user.displayName,
+      target: target?.displayName!
+    })
   ]);
 });

src/cheers/tnt.ts

@@ -24,16 +24,15 @@ export default new Cheer('tnt', 1000, async (msg, user) => {
       redis.del(`user:${targetid}:vulnerable`),
       sendMessage(`wybuh ${target?.displayName} got hit by ${user.displayName}'s TNT wybuh`),
       createTimeoutRecord(user, target!, ITEMNAME),
-      createCheerEventRecord(user, ITEMNAME)
+      createCheerEventRecord(user, ITEMNAME),
+      playAlert({
+        name: 'tntExplosion',
+        user: user.displayName,
+        targets
+      })
     ]);
   }));
 
-  playAlert({
-    name: 'tntExplosion',
-    user: user.displayName,
-    targets
-  });
-
   await sendMessage(`RIPBOZO ${user.displayName} exploded ${targets.length} chatter${targets.length === 1 ? '' : 's'} with their TNT RIPBOZO`);
 });
 

src/items/grenade.ts

@@ -6,6 +6,7 @@ import User from "user";
 import { getUserRecord } from "db/dbUser";
 import { createTimeoutRecord } from "db/dbTimeouts";
 import { createUsedItemRecord } from "db/dbUsedItems";
+import { playAlert } from "web/alerts/serverFunctions";
 
 const ITEMNAME = 'grenade';
 
@@ -30,7 +31,12 @@ export default new Item(ITEMNAME, 'Grenade', 's',
       sendMessage(`wybuh ${target?.displayName} got hit by ${user.displayName}'s grenade wybuh`),
       changeItemCount(user, userObj, ITEMNAME),
       createTimeoutRecord(user, target!, ITEMNAME),
-      createUsedItemRecord(user, ITEMNAME)
+      createUsedItemRecord(user, ITEMNAME),
+      playAlert({
+        name: 'grenadeExplosion',
+        user: user.displayName,
+        target: target?.displayName!
+      })
     ]);
     await user.clearLock();
   }

src/items/silverbullet.ts

@@ -5,6 +5,7 @@ import { createUsedItemRecord } from "db/dbUsedItems";
 import { getUserRecord } from "db/dbUser";
 import parseCommandArgs from "lib/parseCommandArgs";
 import { timeout } from "lib/timeout";
+import { playAlert } from "web/alerts/serverFunctions";
 import User from "user";
 
 const ITEMNAME = 'silverbullet';
@@ -28,7 +29,12 @@ export default new Item(ITEMNAME, 'Silver bullet', 's',
       sendMessage(`${target.displayName} RIPBOZO RIPBOZO RIPBOZO RIPBOZO RIPBOZO RIPBOZO RIPBOZO`),
       changeItemCount(user, userObj, ITEMNAME),
       createTimeoutRecord(user, target, ITEMNAME),
-      createUsedItemRecord(user, ITEMNAME)
+      createUsedItemRecord(user, ITEMNAME),
+      playAlert({
+        name: 'userExecution',
+        user: user.displayName,
+        target: target.displayName
+      })
     ]);
     else {
       switch (result.reason) {

src/items/tnt.ts

@@ -31,6 +31,11 @@ export default new Item(ITEMNAME, 'TNT', 's',
         redis.del(`user:${targetid}:vulnerable`),
         sendMessage(`wybuh ${target?.displayName} got hit by ${user.displayName}'s TNT wybuh`),
         createTimeoutRecord(user, target!, ITEMNAME),
+        playAlert({
+          name: 'tntExplosion',
+          user: user.displayName,
+          targets
+        })
       ]);
     }));
 

src/web/alerts/www/src/alerts/grenadeExplosion.ts

@@ -0,0 +1,57 @@
+import { grenadeExplosionAlert } from "web/alerts/types";
+import { AlertRunner } from "./index";
+
+const duration = 500;
+
+export default async function execute(alert: grenadeExplosionAlert): Promise<AlertRunner> {
+  const audio = new Audio("/alerts/public/explosion2.ogg");
+
+  const parentDiv = document.createElement('div');
+  parentDiv.className = 'grenadeExplosionAlert';
+  parentDiv.innerHTML = `
+    <img src="/alerts/public/getrekt.jpg">
+    <span class="thrower">
+      ${alert.user}
+    </span>
+    <span class="target">
+      ${alert.target}
+    </span>
+    <style>
+      .grenadeExplosionAlert {
+        font-family: "Jersey 15";
+        position: absolute;
+        justify-content: center;
+        align-content: center;
+        text-align: center;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+
+        .thrower {
+          top: 50%;
+          left: 55%;
+          position: absolute;
+          color: white;
+        }
+        
+        .target {
+          top: 30%;
+          left: 18%;
+          position: absolute;
+        }
+      }
+    </style>
+  `;
+
+  const randomX = Math.floor(Math.random() * (window.innerWidth - 300));
+  const randomY = Math.floor(Math.random() * (window.innerHeight - 300));
+
+  parentDiv.style.left = `${randomX}px`;
+  parentDiv.style.top = `${randomY}px`;
+
+  audio.play();
+
+  return { blocking: false, duration, alertDiv: parentDiv };
+};

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

@@ -1,5 +1,7 @@
 import { alert } from "web/alerts/types";
 import userBlast from "./userBlast";
+import userExecution from "./userExecution";
+import grenadeExplosion from "./grenadeExplosion";
 import tntExplosion from "./tntExplosion";
 
 export type AlertRunner = {
@@ -14,7 +16,7 @@ type AlertMap = {
 
 export default {
   'userBlast': userBlast,
-  'userExecute': userBlast,
-  'grenadeExplosion': userBlast,
+  'userExecution': userExecution,
+  'grenadeExplosion': grenadeExplosion,
   'tntExplosion': tntExplosion,
 } as AlertMap;

src/web/alerts/www/src/alerts/tntExplosion.ts

@@ -1,9 +1,9 @@
-import { userBlastAlert } from "web/alerts/types";
+import { tntExplosionAlert } from "web/alerts/types";
 import { AlertRunner } from "./index";
 
 const duration = 1500;
 
-export default async function execute(alert: userBlastAlert): Promise<AlertRunner> {
+export default async function execute(alert: tntExplosionAlert): Promise<AlertRunner> {
   const parentDiv = document.createElement('div');
   parentDiv.className = 'tntExplosionAlert';
   parentDiv.innerHTML = `

src/web/alerts/www/src/alerts/userExecution.ts

@@ -0,0 +1,64 @@
+import { userExecutionAlert } from "web/alerts/types";
+import { AlertRunner } from "./index";
+
+const duration = 3000;
+
+export default async function execute(alert: userExecutionAlert): Promise<AlertRunner> {
+  const parentDiv = document.createElement('div');
+  parentDiv.className = 'userExecutionAlert';
+  parentDiv.innerHTML = `
+    <img src="/alerts/public/getrekt.jpg" height="800" width="800">
+    <span class="shooter">
+      ${alert.user}
+    </span>
+    <span class="target">
+      ${alert.target}
+    </span>
+    <style>
+      .userExecutionAlert {
+        font-family: "Jersey 15";
+        position: absolute;
+        justify-content: center;
+        align-content: center;
+        text-align: center;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+
+        .shooter {
+          top: 50%;
+          left: 55%;
+          position: absolute;
+          color: white;
+        }
+        
+        .target {
+          top: 30%;
+          left: 18%;
+          position: absolute;
+        }
+      }
+    </style>
+     `;
+
+  const randomX = Math.floor(Math.random() * (window.innerWidth - 800));
+  const randomY = Math.floor(Math.random() * (window.innerHeight - 800));
+
+  const audio1 = new Audio("/alerts/public/explosion1.ogg");
+  const audio2 = new Audio("/alerts/public/explosion2.ogg");
+  const audio3 = new Audio("/alerts/public/explosion3.ogg");
+
+  audio1.volume = 1.0;
+  audio2.volume = 1.0;
+  audio3.volume = 1.0;
+  audio1.play();
+  audio2.play();
+  audio3.play();
+
+  parentDiv.style.left = `${randomX}px`;
+  parentDiv.style.top = `${randomY}px`;
+
+  return { blocking: false, duration, alertDiv: parentDiv };
+};