Add /die and DEATH events/messages (#384)

* feat: add death messages

* feat: add a lil command icon to the death message

* fix: death msgs not getting the user properly

---------

Co-authored-by: Farhad Jay <effejaye@gmail.com>

assets/chat/css/style.scss

@@ -737,6 +737,21 @@ hr {
   }
 }
 
+.msg-death {
+  .text {
+    font-style: italic;
+  }
+
+  .user:before {
+    content: '';
+    display: inline-block;
+    vertical-align: text-top;
+    margin-right: $gutter-sm;
+
+    @extend .icon-command;
+  }
+}
+
 /* Highlight */
 .msg-highlight {
   color: $color-chat-text1;
@@ -845,7 +860,8 @@ hr {
 
 .watching-focus {
   .msg-emote,
-  .msg-user {
+  .msg-user,
+  .msg-death {
     opacity: 0.3;
 
     &.watching-same,

assets/chat/js/chat.js

@@ -143,6 +143,7 @@ class Chat {
     this.source.on('MASSGIFT', (data) => this.onMASSGIFT(data));
     this.source.on('DONATION', (data) => this.onDONATION(data));
     this.source.on('UPDATEUSER', (data) => this.onUPDATEUSER(data));
+    this.source.on('DEATH', (data) => this.onDEATH(data));
 
     this.control.on('SEND', (data) => this.cmdSEND(data));
     this.control.on('HINT', (data) => this.cmdHINT(data));
@@ -206,6 +207,9 @@ class Chat {
     this.control.on('UNMOTD', () => this.cmdUNPIN());
     this.control.on('HOST', (data) => this.cmdHOST(data));
     this.control.on('UNHOST', () => this.cmdUNHOST());
+    this.control.on('DIE', () => this.cmdDIE());
+    this.control.on('SUICIDE', () => this.cmdDIE());
+    this.control.on('BITLY', () => this.cmdDIE());
   }
 
   setUser(user) {
@@ -737,11 +741,13 @@ class Chat {
         MessageTypes.MASSGIFT,
         MessageTypes.DONATION,
         MessageTypes.BROADCAST,
+        MessageTypes.DEATH,
       ].includes(message.type)
     ) {
-      // check if message is `/me `
+      // check if message is `/me ` or a death message
       message.slashme =
-        message.message.substring(0, 4).toLowerCase() === '/me ';
+        message.message.substring(0, 4).toLowerCase() === '/me ' ||
+        message.type === MessageTypes.DEATH;
       // check if this is the current users message
       message.isown = message.user?.username === this.user.username;
       // get mentions from message
@@ -1444,6 +1450,19 @@ class Chat {
     }
   }
 
+  onDEATH(data) {
+    const user =
+      this.users.get(data.nick.toLowerCase()) ?? new ChatUser(data.nick);
+    if (this.user.username === data.nick.toLowerCase()) {
+      if (isMuteActive(data)) {
+        this.mutedtimer.setTimer(data.duration);
+        this.mutedtimer.startTimer();
+      }
+    }
+    this.censor(data.nick);
+    MessageBuilder.death(data.data, user, data.timestamp).into(this);
+  }
+
   cmdSHOWPOLL() {
     if (this.chatpoll.poll) {
       this.chatpoll.show();
@@ -2235,6 +2254,10 @@ class Chat {
     this.source.send('PIN', { data: '' });
   }
 
+  cmdDIE() {
+    this.source.send('DIE', { data: '' });
+  }
+
   openConversation(nick) {
     const normalized = nick.toLowerCase();
     const conv = this.whispers.get(normalized);

assets/chat/js/commands.js

@@ -24,6 +24,11 @@ const CHAT_COMMANDS = [
     name: 'baninfo',
     description: 'Check your ban status.',
   },
+  {
+    name: 'die',
+    description: 'Mute yourself for 10 minutes.',
+    alias: ['suicide', 'bitly'],
+  },
   {
     name: 'embed',
     description: 'Embed a video to bigscreen.',

assets/chat/js/const.js

@@ -79,6 +79,7 @@ const errorstrings = new Map(
     alreadyvoted: 'You have already voted!',
     nochatting:
       "You aren't allowed to chat. Either you haven't picked a username, or a mod disabled your privileges.",
+    cantbanprotected: "Protected users can't die.",
   }),
 );
 

assets/chat/js/focus.js

@@ -47,6 +47,7 @@ class ChatUserFocus {
       rule = `.msg-user.${value}{opacity:1 !important;}`;
     } else if (this.chat.settings.get('focusmentioned')) {
       rule = `
+        .msg-death[data-username="${value}"], .msg-death[data-mentioned~="${value}"],
         .msg-broadcast[data-username="${value}"], .msg-broadcast[data-mentioned~="${value}"],
         .msg-subscription[data-username="${value}"], .msg-subscription[data-mentioned~="${value}"],
         .msg-giftsub[data-username="${value}"], .msg-giftsub[data-mentioned~="${value}"], .msg-giftsub[data-giftee="${value}"],
@@ -59,6 +60,7 @@ class ChatUserFocus {
       `;
     } else {
       rule = `
+        .msg-death[data-username="${value}"],
         .msg-broadcast[data-username="${value}"], 
         .msg-subscription[data-username="${value}"], 
         .msg-giftsub[data-username="${value}"], .msg-giftsub[data-giftee="${value}"], 

assets/chat/js/messages/ChatDeathMessage.js

@@ -0,0 +1,13 @@
+import ChatUserMessage from './ChatUserMessage';
+import MessageTypes from './MessageTypes';
+
+export default class ChatDeathMessage extends ChatUserMessage {
+  constructor(message, user, timestamp = null) {
+    super(message, user, timestamp);
+    this.type = MessageTypes.DEATH;
+  }
+
+  html(chat = null) {
+    return super.html(chat);
+  }
+}

assets/chat/js/messages/MessageBuilder.js

@@ -10,6 +10,7 @@ import ChatRegularSubscriptionMessage from './subscriptions/ChatRegularSubscript
 import ChatGiftedSubscriptionMessage from './subscriptions/ChatGiftedSubscriptionMessage';
 import ChatMassSubscriptionMessage from './subscriptions/ChatMassSubscriptionMessage';
 import ChatBroadcastMessage from './ChatBroadcastMessage';
+import ChatDeathMessage from './ChatDeathMessage';
 
 export default class MessageBuilder {
   static element(message, classes = []) {
@@ -106,4 +107,8 @@ export default class MessageBuilder {
       data.uuid,
     );
   }
+
+  static death(message, user, timestamp = null) {
+    return new ChatDeathMessage(message, user, timestamp);
+  }
 }

assets/chat/js/messages/MessageTypes.js

@@ -13,4 +13,5 @@ export default {
   GIFTSUB: 'GIFTSUB',
   MASSGIFT: 'MASSGIFT',
   DONATION: 'DONATION',
+  DEATH: 'DEATH',
 };

assets/chat/js/messages/index.js

@@ -13,3 +13,4 @@ export {
   checkIfPinWasDismissed,
 } from './PinnedMessage';
 export { default as ChatBroadcastMessage } from './ChatBroadcastMessage';
+export { default as ChatDeathMessage } from './ChatDeathMessage';