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

@@ -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);

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) {