add some better alerts, TODO: grenade and executions

src/cheers/timeout.ts

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

src/cheers/tnt.ts

@@ -7,6 +7,7 @@ import { createTimeoutRecord } from "db/dbTimeouts";
 import { createCheerEventRecord } from "db/dbCheerEvents";
 import { getTNTTargets } from "items/tnt";
 import { redis } from "bun";
+import { playAlert } from "web/alerts/serverFunctions";
 
 const ITEMNAME = 'tnt';
 
@@ -27,6 +28,12 @@ export default new Cheer('tnt', 1000, async (msg, user) => {
     ]);
   }));
 
+  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/blaster.ts

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

src/items/tnt.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 = 'tnt';
 
@@ -35,6 +36,11 @@ export default new Item(ITEMNAME, 'TNT', 's',
 
     await Promise.all([
       createUsedItemRecord(user, ITEMNAME),
+      playAlert({
+        name: 'tntExplosion',
+        user: user.displayName,
+        targets
+      }),
       changeItemCount(user, userObj, ITEMNAME)
     ]);
     await user.clearLock();

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

@@ -1,5 +1,5 @@
 import { alert } from "web/alerts/types";
-import alerts from "./index";
+import alerts from "./alerts/index";
 
 function generateRandomCSSIdentifier() {
   const firstChar = String.fromCharCode(97 + Math.floor(Math.random() * 26));

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

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

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

@@ -0,0 +1,31 @@
+import { userBlastAlert } from "web/alerts/types";
+import { AlertRunner } from "./index";
+
+const duration = 1500;
+
+export default async function execute(alert: userBlastAlert): Promise<AlertRunner> {
+  const parentDiv = document.createElement('div');
+  parentDiv.className = 'tntExplosionAlert';
+  parentDiv.innerHTML = `
+    <style>
+      .tntExplosionAlert {
+        font-family: "Jersey 15";
+        position: absolute;
+        justify-content: center;
+        align-content: center;
+        text-align: center;
+      }
+    </style>
+    <video autoplay height="800" width="450">
+      <source src="/alerts/public/tnt.mp4">
+    </video>
+  `;
+
+  const randomX = Math.floor(Math.random() * (window.innerWidth - 450 - 300)) + 150;
+  const randomY = Math.floor(Math.random() * (window.innerHeight - 800 - 300)) + 150;
+
+  parentDiv.style.left = `${randomX}px`;
+  parentDiv.style.top = `${randomY}px`;
+
+  return { blocking: false, duration, alertDiv: parentDiv };
+};

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

@@ -1,20 +1,57 @@
 import { userBlastAlert } from "web/alerts/types";
 import { AlertRunner } from "./index";
 
-const duration = 10000;
+const duration = 500;
 
 export default async function execute(alert: userBlastAlert): Promise<AlertRunner> {
+  const audio = new Audio("/alerts/public/explosion1.ogg");
+
   const parentDiv = document.createElement('div');
   parentDiv.className = 'userBlastAlert';
   parentDiv.innerHTML = `
-    <span>${alert.user} just blasted ${alert.target} for 60 seconds! Rip bozo!</span>
+    <img src="/alerts/public/getrekt.jpg">
+    <span class="shooter">
+      ${alert.user}
+    </span>
+    <span class="target">
+      ${alert.target}
+    </span>
     <style>
       .userBlastAlert {
-        position: fixed;
+        font-family: "Jersey 15";
-        top: 20px;
+        position: absolute;
-        left: 20px;
+        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 - 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/main.ts

@@ -1,6 +1,7 @@
 import { serverInstruction } from "web/serverTypes";
 import { alertEventData } from "web/alerts/types";
-import alertManager from "./alerts/alertManager";
+import alertManager from "./alertManager";
+import "@fontsource/jersey-15";
 
 const socket = new WebSocket(`ws://${location.host}`);
 

src/web/index.ts

@@ -18,7 +18,13 @@ export default Bun.serve({
     "/chat/getBadges": getBadges,
     "/chat/getEmotes": getExternalEmotes,
 
-    "/alerts": alerts
+    "/alerts": alerts,
+    "/alerts/public/:filename": async req => {
+      const target = req.params.filename;
+      const file = Bun.file(`${import.meta.dir}/alerts/www/public/${target}`);
+      if (!await file.exists()) return new Response(`${target} not found`, { status: 404 });
+      return new Response(file);
+    }
   },
   websocket: {
     message(ws, omessage) {