- Add doc comments for structs

- Small cleanup of the js file

ChatTwo/Http/MessageProtocol/DataStructure.cs

@@ -3,33 +3,69 @@
 namespace ChatTwo.Http.MessageProtocol;
 
 #region Outgoing SSE
+/// <summary>
+/// Contains the current channel name
+/// </summary>
 public struct SwitchChannel(MessageTemplate[] channelName)
 {
     [JsonProperty("channelName")] public MessageTemplate[] ChannelName = channelName;
 }
 
+/// <summary>
+/// Contains one or multiple channels that are valid for the user to pick from
+/// </summary>
 public struct ChannelList(Dictionary<string, uint> channels)
 {
     [JsonProperty("channels")] public Dictionary<string, uint> Channels = channels;
 }
 
+/// <summary>
+/// Contains one or multiple messages
+/// </summary>
 public struct Messages(MessageResponse[] set)
 {
     [JsonProperty("messages")] public MessageResponse[] Set = set;
 }
 
+/// <summary>
+/// Contains a single message with all its templates and a timestamp
+/// </summary>
 public struct MessageResponse()
 {
     [JsonProperty("timestamp")] public string Timestamp = "";
     [JsonProperty("templates")] public MessageTemplate[] Templates;
 }
 
+/// <summary>
+/// Template that is used for the channel name or any message posted to the chatlog
+/// </summary>
 public struct MessageTemplate()
 {
+    /// <summary>
+    /// Template type
+    ///
+    /// icon = a game icon
+    /// emote = BetterTTV emote
+    /// url = Simple url that should be clickable
+    /// text = Simple text content of the message
+    ///
+    /// empty = Ignore
+    /// </summary>
     [JsonProperty("payload")] public required string Payload;
 
+    /// <summary>
+    /// Used for text and emote.
+    /// </summary>
     [JsonProperty("content")] public string Content = "";
+
+    /// <summary>
+    /// Used for icon.
+    /// </summary>
     [JsonProperty("id")] public uint Id;
+
+    /// <summary>
+    /// Used for text and url
+    /// </summary>
     [JsonProperty("color")] public uint Color;
 
     public static MessageTemplate Empty => new() {Payload = "empty"};
@@ -49,11 +85,19 @@ public struct ErrorResponse(string reason)
 #endregion
 
 #region Incoming POST
+/// <summary>
+/// Message must fulfill the posting requirement
+/// Greater than or equal 2 characters
+/// Less than or equal 500 characters
+/// </summary>
 public struct IncomingMessage()
 {
     [JsonProperty("message")] public string Message = string.Empty;
 }
 
+/// <summary>
+/// Channel must be a valid uint number
+/// </summary>
 public struct IncomingChannel()
 {
     [JsonProperty("channel")] public uint Channel = uint.MaxValue;

ChatTwo/Http/static/start.js

@@ -74,10 +74,7 @@
 
     updateChannelHint(templates) {
         this.elements.channelHint.innerHTML = '';
-
-        for(const template of templates) {
-            this.elements.channelHint.appendChild(this.processTemplate(template));
-        }
+        this.elements.channelHint.appendChild(this.processTemplate(templates));
     }
 
     updateChannels(channels) {
@@ -131,14 +128,11 @@
         const liMessage = document.createElement('li');
         const spanTimestamp = document.createElement('span');
         spanTimestamp.classList.add('timestamp');
-        const spanMessage = document.createElement('span');
-        spanMessage.classList.add('message');
-
         spanTimestamp.innerText = messageData.timestamp;
 
-        for(const template of messageData.templates) {
-            spanMessage.appendChild(this.processTemplate(template));
-        }
+        const spanMessage = document.createElement('span');
+        spanMessage.classList.add('message');
+        spanMessage.appendChild(this.processTemplate(messageData.templates))
 
         liMessage.appendChild(spanTimestamp);
         liMessage.appendChild(spanMessage);
@@ -149,27 +143,32 @@
         }
     }
 
-    processTemplate(template) {
-        const spanElement = document.createElement('span');
-        switch (template.payload) {
-            case 'text':
-                this.processTextTemplate(template, spanElement);
-                break;
-            case 'url':
-                this.processUrlTemplate(template, spanElement);
-                break;
-            case 'emote':
-                this.processEmote(template, spanElement);
-                break;
-            case 'icon':
-                this.processIcon(template, spanElement);
-                break;
-            case 'empty':
-                // Do nothing
-                break;
+    processTemplate(templates) {
+        const frag = document.createDocumentFragment();
+
+        for( const template of templates ) {
+            const spanElement = frag.createElement('span');
+            switch (template.payload) {
+                case 'text':
+                    this.processTextTemplate(template, spanElement);
+                    break;
+                case 'url':
+                    this.processUrlTemplate(template, spanElement);
+                    break;
+                case 'emote':
+                    this.processEmote(template, spanElement);
+                    break;
+                case 'icon':
+                    this.processIcon(template, spanElement);
+                    break;
+                case 'empty':
+                    continue;
+            }
+
+            frag.appendChild(this.processTemplate(template));
         }
 
-        return spanElement;
+        return frag;
     }
 
     processTextTemplate(template, spanContent) {
@@ -178,27 +177,26 @@
     }
 
     processUrlTemplate(template, spanContent) {
-        // TODO Sanitize href?
-        let urlElement = document.createElement('a');
+        const urlElement = document.createElement('a');
         urlElement.innerText = template.content;
-        urlElement.href = template.content;
+        urlElement.href = encodeURI(template.content);
         urlElement.target = '_blank'
 
         this.processColor(template, spanContent);
     }
 
+    // converts a RGBA uint number to components
     processColor(template, spanContent) {
-        let r = (template.color & 0xFF000000) >>> 24;
-        let g = (template.color & 0xFF0000) >>> 16;
-        let b = (template.color & 0xFF00) >>> 8;
-        let a = (template.color & 0xFF) / 255.0;
+        const r = (template.color & 0xFF000000) >>> 24;
+        const g = (template.color & 0xFF0000) >>> 16;
+        const b = (template.color & 0xFF00) >>> 8;
+        const a = (template.color & 0xFF) / 255.0;
 
         spanContent.style.color = `rgba(${r}, ${g}, ${b}, ${a})`;
     }
 
     processEmote(template, spanContent) {
-        // TODO Sanitize url?
-        let imgElement = document.createElement('img');
+        const imgElement = document.createElement('img');
         imgElement.src = `/emote/${template.content}`;
 
         spanContent.classList.add('emote-icon');