Fix HTML chars bug

static/main.css

@@ -30,6 +30,7 @@ body {
 
 .text {
     padding-right: 0.5rem;
+    word-wrap: break-word;
 }
 
 .name {
@@ -44,6 +45,14 @@ body {
     width: 2rem;
 }
 
+.badges {
+    display: inline-block;
+}
+
+.badges+span+span:after {
+    display: block;
+}
+
 @keyframes slide {
     from {  }
     to   { bottom: 0rem; }

static/main.js

@@ -14,26 +14,29 @@ class Message {
         this.element.style.position = "relative";
 
         let badges = document.createElement('span');
+        badges.className = 'badges';
         for (let key in this.context.badges) {
             let badge = document.createElement('span');
             badge.className = "badge";
             badge.innerHTML = '<img src="/static/' + key + '.png">';
             badges.appendChild(badge);
         }
-        this.element.appendChild(badges);
 
         let name = document.createElement('span');
         name.className = "text name";
         name.style.color = readableColor(this.context.color);
         name.innerHTML = escapeHtml(this.context["display-name"]);
-        this.element.appendChild(name);
+        badges.appendChild(name);
 
-        let message = document.createElement('span');
+        this.element.appendChild(badges);
-        let text = formatEmotes(this.message, this.context.emotes);
+
+        let messageSpan = document.createElement('span');
+        let {message, emotes} = fixEmotes(this.message, this.context.emotes);
+        let text = formatEmotes(message, emotes);
         text = replaceAll(text, "DragonRck", '<img class="emoticon" src="/static/dragonrck.png">');
-        message.innerHTML = text;
+        messageSpan.innerHTML = text;
-        message.className = "text message";
+        messageSpan.className = "text message";
-        this.element.appendChild(message);
+        this.element.appendChild(messageSpan);
 
         setTimeout(() => this.destroy(), timeout);
         return this.element;
@@ -53,8 +56,79 @@ function escapeHtml(unsafe) {
         .replace(/'/g, "&#039;");
 }
 
+function fixEmotes(message, emotes) {
+    let offsets = [[0, 0]];
+
+    let len = message.length;
+    let newMessage = '';
+
+
+    let currentCharIndex = 0;
+    let currentOffset = 0;
+    while (currentCharIndex < len) {
+        let character = message.charAt(currentCharIndex);
+        switch (character) {
+            case '&':
+                newMessage += '&amp;';
+                currentOffset += 4;
+                offsets.push([currentCharIndex, currentOffset]);
+                break;
+            case '<':
+                newMessage += '&lt;';
+                currentOffset += 3;
+                offsets.push([currentCharIndex, currentOffset]);
+                break;
+            case '>':
+                newMessage += '&gt;';
+                currentOffset += 3;
+                offsets.push([currentCharIndex, currentOffset]);
+                break;
+            case '"':
+                newMessage += '&quot;';
+                currentOffset += 5;
+                offsets.push([currentCharIndex, currentOffset]);
+                break;
+            case "'":
+                newMessage += '&#039;';
+                currentOffset += 5;
+                offsets.push([currentCharIndex, currentOffset]);
+                break;
+            default:
+                newMessage += character;
+        }
+
+        currentCharIndex++;
+    }
+
+    for (let emoteType in emotes) {
+        let emoteSet = emotes[emoteType];
+        for (let emoteKey in emoteSet) {
+            let boundaries = emoteSet[emoteKey].split('-').map(x => parseInt(x, 10));
+
+            for (let i = 0; i < 2; i++) {
+                // Find floor entry
+
+                let entryIndex = 0;
+                while (entryIndex + 1 < offsets.length && offsets[entryIndex + 1][0] < boundaries[i]) {
+                    entryIndex++;
+                }
+
+                boundaries[i] += offsets[entryIndex][1];
+
+            }
+
+            emoteSet[emoteKey] = boundaries.map(x => x + "").join('-');
+
+        }
+    }
+
+    return {message: newMessage, emotes};
+
+
+}
+
 function formatEmotes(text, emotes) {
-    var splitText = escapeHtml(text).split('');
+    var splitText = text.split('');
     for(var i in emotes) {
         var e = emotes[i];
         for(var j in e) {
@@ -107,7 +181,12 @@ function addMessage(object) {
     messages.className = "slide";
 };
 
+function onWindowResize() {
+    messages.style.width = window.innerWidth + 'px';
+}
+
 let messages = document.getElementById('messages');
 let socket = io();
 socket.on('message', addMessage);
-
+window.addEventListener('resize', onWindowResize, false);
+onWindowResize();