From d5864415c3599fca8db7a5bcfe5a7bf66198007d Mon Sep 17 00:00:00 2001
From: Jonas Dellinger <johnny@johnnycrazy.de>
Date: Sun, 28 May 2017 15:27:26 +0200
Subject: [PATCH] Finished up some chat stuff

---
 resources/[system]/chat/html/App.js     |  2 +-
 resources/[system]/chat/html/Message.js | 24 +++++++++++++++++-------
 resources/[system]/chat/html/index.css  | 12 ++++--------
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/resources/[system]/chat/html/App.js b/resources/[system]/chat/html/App.js
index 8c509da..ff9d89b 100644
--- a/resources/[system]/chat/html/App.js
+++ b/resources/[system]/chat/html/App.js
@@ -139,7 +139,6 @@ window.APP = {
             message: this.message,
           }));
           this.oldMessages.unshift(this.message);
-          this.message = '';
           this.oldMessagesIndex = -1;
           this.hideInput();
         } else {
@@ -151,6 +150,7 @@ window.APP = {
       if (canceled) {
         post('http://chat/chatResult', JSON.stringify({ canceled }));
       }
+      this.message = '';
       this.showInput = false;
       clearInterval(this.focusTimer);
       this.resetShowWindowTimer();
diff --git a/resources/[system]/chat/html/Message.js b/resources/[system]/chat/html/Message.js
index d577cb9..db7ea12 100644
--- a/resources/[system]/chat/html/Message.js
+++ b/resources/[system]/chat/html/Message.js
@@ -29,13 +29,23 @@ Vue.component('message', {
       return `<span style="color: rgb(${this.color[0]}, ${this.color[1]}, ${this.color[2]})">${str}</span>`
     },
     colorize(str) {
-      const s = "<span>" + (str.replace(/\^([0-9]+)([\*\_\~r])|\^([0-9]+)|\^([\*\_\~r])/g,
-        (match, color1, style1, color2, style2) => {
-          const color = (color1 || color2) ? `color-${color1 || color2} ` : '';
-          const style = (style1 || style2) ? `style-${style1 || style2} ` : '';
-          return `</span><span class="${color}${style}">`;
-        }
-      )) + "</span>";
+      let s = "<span>" + (str.replace(/\^([0-9]+)/g, (str, color) => `</span><span class="color-${color}">`)) + "</span>";
+
+      const styleDict = {
+        '*': 'font-weight: bold;',
+        '_': 'text-decoration: underline;',
+        '~': 'text-decoration: line-through;',
+        '=': 'text-decoration: underline line-through;',
+        'r': 'text-decoration: none;font-weight: normal;',
+      };
+
+      const styleRegex = /\^(\_|\*|\=|\~|\/|r)(.*?)(?=$|\^r|<\/em>)/;
+      while (s.match(styleRegex)) { //Any better solution would be appreciated :P
+        s = s.replace(styleRegex, (str, style, inner) => `<em style="${styleDict[style]}">${inner}</em>`)
+      }
+
+      console.log(s);
+
       return s.replace(/<span[^>]*><\/span[^>]*>/g, '');
     },
     escape(unsafe) {
diff --git a/resources/[system]/chat/html/index.css b/resources/[system]/chat/html/index.css
index 6e13ba0..dedb895 100644
--- a/resources/[system]/chat/html/index.css
+++ b/resources/[system]/chat/html/index.css
@@ -8,14 +8,6 @@
 .color-8{color: #cc0000;}
 .color-9{color: #cc0068;}
 
-.style-\*{font-weight: bold;}
-.style-\_{text-decoration: underline;}
-.style-\~{text-decoration: line-through;}
-.style-r {
-  text-decoration: none;
-  font-weight: normal;
-}
-
 * {
   font-family: 'Lato', sans-serif;
   margin: 0;
@@ -26,6 +18,10 @@
   flex-grow: 0;
 }
 
+em {
+  font-style: normal;
+}
+
 #app {
   font-family: 'Lato', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;