Added channel-wide !announce command

www/css/channel.css

@@ -147,6 +147,7 @@ p.panel-head-element{
 
 .chat-entry{
     display: flex;
+    align-content: center;
 }
 
 .chat-entry-username{
@@ -156,6 +157,7 @@ p.panel-head-element{
 
 .chat-entry-body{
     margin: 0.2em;
+    align-content: center;
 }
 
 .user-list-high-level{
@@ -194,6 +196,16 @@ span.user-entry{
     font-size: 0.7em;
 }
 
+.announcement{
+    font-size: 1.5em;
+    flex-direction: column;
+    text-align: center;
+}
+
+.announcement-title{
+    margin: 0;
+}
+
 #media-panel-aspect-lock-icon{
     display: none;
 }

www/css/theme/movie-night.css

@@ -293,6 +293,11 @@ select.panel-head-element{
     border-bottom: solid 1px var(--accent0);
 }
 
+.announcement-title{
+    background-color: var(--danger0-alt0);
+    color: var(--accent1);
+}
+
 /* popup */
 
 .popup-backer{

www/js/channel/chat.js

@@ -27,7 +27,7 @@ class chatBox{
         
         //Preprocessor objects
         this.commandPreprocessor = new commandPreprocessor(client);
-        this.chatPreprocessor = new chatPreprocessor();
+        this.chatPostprocessor = new chatPostprocessor();
 
         //Element Nodes
         this.chatPanel = document.querySelector("#chat-panel-div");
@@ -112,7 +112,7 @@ class chatBox{
         chatEntry.appendChild(chatBody);
 
 
-        this.chatBuffer.appendChild(this.chatPreprocessor.preprocess(chatEntry, data));
+        this.chatBuffer.appendChild(this.chatPostprocessor.preprocess(chatEntry, data));
 
         //Set size to aspect on launch
         this.resizeAspect();

www/js/channel/chatPostprocessor.js

@@ -1,4 +1,4 @@
-class chatPreprocessor{
+class chatPostprocessor{
     constructor(){
     }
 
@@ -14,7 +14,7 @@ class chatPreprocessor{
         //Inject whitespace into un-processed words
         this.addWhitespace();
 
-        //Sush chat if it's a whisper
+        //Handle non-standard chat types
         this.handleChatType();
         
         //Inject the pre-processed chat into the chatEntry node
@@ -81,6 +81,18 @@ class chatPreprocessor{
     handleChatType(){
         if(this.rawData.type == "whisper"){
             this.chatBody.classList.add('whisper');
+        }else if(this.rawData.type == "announcement"){
+            //Squash the high-level
+            this.chatEntry.querySelector('.high-level').remove();
+
+            //Get the username and make it into an announcement title (little hacky but this *IS* postprocessing)
+            const userNode = this.chatEntry.querySelector('.chat-entry-username');
+            userNode.innerHTML = `${userNode.innerHTML.slice(0,-2)} Announcement`;
+            //Add/remove relevant classes
+            userNode.classList.remove('chat-entry-username');
+            userNode.classList.add('announcement-title');
+            this.chatBody.classList.add('announcement-body');
+            this.chatEntry.classList.add('announcement');
         }
     }
 }

www/js/channel/commandPreprocessor.js

@@ -26,12 +26,12 @@ class commandPreprocessor{
         //If this is a local command
         if(this.commandArray[0] == '/'){
             //If the command exists
-            if(this.argumentArray != null && this.commandProcessor[this.argumentArray[0]] != null){
+            if(this.argumentArray != null && this.commandProcessor[this.argumentArray[0].toLowerCase()] != null){
                 //Don't send it to the server
                 this.sendFlag = false;
 
                 //Call the command with the argument array
-                this.commandProcessor[this.argumentArray[0]](this.argumentArray, this.commandArray);
+                this.commandProcessor[this.argumentArray[0].toLowerCase()](this.argumentArray, this.commandArray);
             }
         }
     }