From f3a8266c992b692d2d4b55eb50a9c3b451515c89 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sat, 11 Dec 2021 16:44:39 -0800
Subject: [PATCH] Fix some chat event types breaking.

- User moderator message was no longer showing
- Name change event was breaking chat
---
 webroot/js/components/chat/chat.js    | 10 +++++++++-
 webroot/js/components/chat/message.js |  5 +++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/webroot/js/components/chat/chat.js b/webroot/js/components/chat/chat.js
index 2f5d956d7..94c1fa873 100644
--- a/webroot/js/components/chat/chat.js
+++ b/webroot/js/components/chat/chat.js
@@ -15,7 +15,15 @@ import {
   MESSAGE_JUMPTOBOTTOM_BUFFER,
 } from '../../utils/constants.js';
 
-const renderableChatStyleMessages = ['CHAT', 'SYSTEM', 'USER_JOINED'];
+// Add message types that should be displayed in chat to this array.
+const renderableChatStyleMessages = [
+  SOCKET_MESSAGE_TYPES.NAME_CHANGE,
+  SOCKET_MESSAGE_TYPES.CONNECTED_USER_INFO,
+  SOCKET_MESSAGE_TYPES.USER_JOINED,
+  SOCKET_MESSAGE_TYPES.SYSTEM,
+  SOCKET_MESSAGE_TYPES.CHAT,
+];
+
 export default class Chat extends Component {
   constructor(props, context) {
     super(props, context);
diff --git a/webroot/js/components/chat/message.js b/webroot/js/components/chat/message.js
index 95ef67223..41c3a4556 100644
--- a/webroot/js/components/chat/message.js
+++ b/webroot/js/components/chat/message.js
@@ -35,12 +35,13 @@ export default function Message(props) {
   ) {
     return html`<${ChatMessageView} ...${props} />`;
   } else if (type === SOCKET_MESSAGE_TYPES.NAME_CHANGE) {
+    // User changed their name
     const { displayName } = user;
     const contents = html`
-      <>
+      <div>
         <span class="font-bold">${oldName}</span> is now known as ${' '}
         <span class="font-bold">${displayName}</span>.
-      </>
+      </div>
     `;
     return html`<${SystemMessage} contents=${contents} />`;
   } else if (type === SOCKET_MESSAGE_TYPES.USER_JOINED) {