Merge pull request #2 from JohnnyCrazy/chat_patch_1

Chat patch 1

resources/[system]/chat/cl_chat.lua

@@ -13,15 +13,16 @@ RegisterNetEvent('_chat:messageEntered')
 
 --deprecated, use chat:addMessage
 AddEventHandler('chatMessage', function(author, color, text)
-  if author == "" then
-    author = false
+  local args = { text }
+  if author ~= "" then
+    table.insert(args, 1, author)
   end
   SendNUIMessage({
     type = 'ON_MESSAGE',
     message = {
       color = color,
       multiline = true,
-      args = { author, text }
+      args = args
     }
   })
 end)

resources/[system]/chat/html/App.js

@@ -19,7 +19,7 @@ window.APP = {
     window.removeEventListener('message', this.listener);
   },
   mounted() {
-    $.post('http://chat/loaded', JSON.stringify({}));
+    post('http://chat/loaded', JSON.stringify({}));
     this.listener = window.addEventListener('message', (event) => {
       const item = event.data || event.detail; //'detail' is for debuging via browsers
       if (this[item.type]) {
@@ -135,11 +135,10 @@ window.APP = {
         this.resize();
       } else {
         if(this.message !== '') {
-          $.post('http://chat/chatResult', JSON.stringify({
+          post('http://chat/chatResult', JSON.stringify({
             message: this.message,
           }));
           this.oldMessages.unshift(this.message);
-          this.message = '';
           this.oldMessagesIndex = -1;
           this.hideInput();
         } else {
@@ -149,8 +148,9 @@ window.APP = {
     },
     hideInput(canceled = false) {
       if (canceled) {
-        $.post('http://chat/chatResult', JSON.stringify({ canceled }));
+        post('http://chat/chatResult', JSON.stringify({ canceled }));
       }
+      this.message = '';
       this.showInput = false;
       clearInterval(this.focusTimer);
       this.resetShowWindowTimer();

resources/[system]/chat/html/Message.js

@@ -6,6 +6,13 @@ Vue.component('message', {
   computed: {
     textEscaped() {
       let s = this.template ? this.template : this.templates[this.templateId];
+
+      //This hack is required to preserve backwards compatability
+      if (this.templateId == CONFIG.defaultTemplateId
+          && this.args.length == 1) {
+        s = this.templates[CONFIG.defaultAltTemplateId] //Swap out default template :/
+      }
+
       s = s.replace(/{(\d+)}/g, (match, number) => {
         const argEscaped = this.args[number] != undefined ? this.escape(this.args[number]) : match
         if (number == 0 && this.color) {
@@ -19,10 +26,23 @@ Vue.component('message', {
   },
   methods: {
     colorizeOld(str) {
-      return `<strong style="color: rgb(${this.color[0]}, ${this.color[1]}, ${this.color[2]})">${str}</strong>`
+      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]+)/g, (str, color) => `</span><span class="color-${color}">`)) + "</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>`)
+      }
       return s.replace(/<span[^>]*><\/span[^>]*>/g, '');
     },
     escape(unsafe) {

resources/[system]/chat/html/config.default.js

@@ -1,9 +1,11 @@
 // DO NOT EDIT THIS FILE
 // Copy it to `config.js` and edit it
 window.CONFIG = {
-  defaultTemplateId: 'default', //This template will be used for normal chat messages
+  defaultTemplateId: 'default', //This is the default template for 2 args1
+  defaultAltTemplateId: 'defaultAlt', //This one for 1 arg
   templates: { //You can add static templates here
     'default': '<b>{0}</b>: {1}',
+    'defaultAlt': '{0}',
     'example:important': '<h1>^2{0}</h1>'
   },
   fadeTimeout: 7000,

resources/[system]/chat/html/index.css

@@ -18,6 +18,10 @@
   flex-grow: 0;
 }
 
+em {
+  font-style: normal;
+}
+
 #app {
   font-family: 'Lato', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

resources/[system]/chat/html/index.html

@@ -8,9 +8,6 @@
   <link href="vendor/animate.3.5.2.min.css" rel="stylesheet"></link>
   <link href="index.css" rel="stylesheet"></link>
 
-  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script> -->
-
-  <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
   <script src="vendor/vue.2.3.3.min.js" type="text/javascript"></script>
   <script src="config.default.js" type="text/javascript"></script>
   <script src="config.js" type="text/javascript"></script>
@@ -91,6 +88,13 @@
 
   <!-- Main Entry -->
   <script type="text/javascript">
+  window.post = (url, data) => {
+    var request = new XMLHttpRequest();
+    request.open('POST', url, true);
+    request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+    request.send(data);
+  }
+
   const instance = new Vue({
     el: '#app',
     render: h => h(APP),