reorganize resource directories

resources/[gameplay]/chat/README.md

@@ -0,0 +1 @@
+# Chat

resources/[gameplay]/chat/__resource.lua

@@ -0,0 +1,26 @@
+description 'chat management stuff'
+
+ui_page 'html/index.html'
+
+client_script 'cl_chat.lua'
+server_script 'sv_chat.lua'
+
+files {
+    'html/index.html',
+    'html/index.css',
+    'html/config.default.js',
+    'html/config.js',
+    'html/App.js',
+    'html/Message.js',
+    'html/Suggestions.js',
+    'html/vendor/vue.2.3.3.min.js',
+    'html/vendor/flexboxgrid.6.3.1.min.css',
+    'html/vendor/animate.3.5.2.min.css',
+    'html/vendor/latofonts.css',
+    'html/vendor/fonts/LatoRegular.woff2',
+    'html/vendor/fonts/LatoRegular2.woff2',
+    'html/vendor/fonts/LatoLight2.woff2',
+    'html/vendor/fonts/LatoLight.woff2',
+    'html/vendor/fonts/LatoBold.woff2',
+    'html/vendor/fonts/LatoBold2.woff2',
+  }

resources/[gameplay]/chat/cl_chat.lua

@@ -0,0 +1,232 @@
+local chatInputActive = false
+local chatInputActivating = false
+local chatHidden = true
+local chatLoaded = false
+
+RegisterNetEvent('chatMessage')
+RegisterNetEvent('chat:addTemplate')
+RegisterNetEvent('chat:addMessage')
+RegisterNetEvent('chat:addSuggestion')
+RegisterNetEvent('chat:addSuggestions')
+RegisterNetEvent('chat:removeSuggestion')
+RegisterNetEvent('chat:clear')
+
+-- internal events
+RegisterNetEvent('__cfx_internal:serverPrint')
+
+RegisterNetEvent('_chat:messageEntered')
+
+--deprecated, use chat:addMessage
+AddEventHandler('chatMessage', function(author, color, text)
+  local args = { text }
+  if author ~= "" then
+    table.insert(args, 1, author)
+  end
+  SendNUIMessage({
+    type = 'ON_MESSAGE',
+    message = {
+      color = color,
+      multiline = true,
+      args = args
+    }
+  })
+end)
+
+AddEventHandler('__cfx_internal:serverPrint', function(msg)
+  print(msg)
+
+  SendNUIMessage({
+    type = 'ON_MESSAGE',
+    message = {
+      templateId = 'print',
+      multiline = true,
+      args = { msg }
+    }
+  })
+end)
+
+AddEventHandler('chat:addMessage', function(message)
+  SendNUIMessage({
+    type = 'ON_MESSAGE',
+    message = message
+  })
+end)
+
+AddEventHandler('chat:addSuggestion', function(name, help, params)
+  SendNUIMessage({
+    type = 'ON_SUGGESTION_ADD',
+    suggestion = {
+      name = name,
+      help = help,
+      params = params or nil
+    }
+  })
+end)
+
+AddEventHandler('chat:addSuggestions', function(suggestions)
+  for _, suggestion in ipairs(suggestions) do
+    SendNUIMessage({
+      type = 'ON_SUGGESTION_ADD',
+      suggestion = suggestion
+    })
+  end
+end)
+
+AddEventHandler('chat:removeSuggestion', function(name)
+  SendNUIMessage({
+    type = 'ON_SUGGESTION_REMOVE',
+    name = name
+  })
+end)
+
+AddEventHandler('chat:addTemplate', function(id, html)
+  SendNUIMessage({
+    type = 'ON_TEMPLATE_ADD',
+    template = {
+      id = id,
+      html = html
+    }
+  })
+end)
+
+AddEventHandler('chat:clear', function(name)
+  SendNUIMessage({
+    type = 'ON_CLEAR'
+  })
+end)
+
+RegisterNUICallback('chatResult', function(data, cb)
+  chatInputActive = false
+  SetNuiFocus(false)
+
+  if not data.canceled then
+    local id = PlayerId()
+
+    --deprecated
+    local r, g, b = 0, 0x99, 255
+
+    if data.message:sub(1, 1) == '/' then
+      ExecuteCommand(data.message:sub(2))
+    else
+      TriggerServerEvent('_chat:messageEntered', GetPlayerName(id), { r, g, b }, data.message)
+    end
+  end
+
+  cb('ok')
+end)
+
+local function refreshCommands()
+  if GetRegisteredCommands then
+    local registeredCommands = GetRegisteredCommands()
+
+    local suggestions = {}
+
+    for _, command in ipairs(registeredCommands) do
+        if IsAceAllowed(('command.%s'):format(command.name)) then
+            table.insert(suggestions, {
+                name = '/' .. command.name,
+                help = ''
+            })
+        end
+    end
+
+    TriggerEvent('chat:addSuggestions', suggestions)
+  end
+end
+
+local function refreshThemes()
+  local themes = {}
+
+  for resIdx = 0, GetNumResources() - 1 do
+    local resource = GetResourceByFindIndex(resIdx)
+
+    if GetResourceState(resource) == 'started' then
+      local numThemes = GetNumResourceMetadata(resource, 'chat_theme')
+
+      if numThemes > 0 then
+        local themeName = GetResourceMetadata(resource, 'chat_theme')
+        local themeData = json.decode(GetResourceMetadata(resource, 'chat_theme_extra') or 'null')
+
+        if themeName and themeData then
+          themeData.baseUrl = 'nui://' .. resource .. '/'
+          themes[themeName] = themeData
+        end
+      end
+    end
+  end
+
+  SendNUIMessage({
+    type = 'ON_UPDATE_THEMES',
+    themes = themes
+  })
+end
+
+AddEventHandler('onClientResourceStart', function(resName)
+  Wait(500)
+
+  refreshCommands()
+  refreshThemes()
+end)
+
+AddEventHandler('onClientResourceStop', function(resName)
+  Wait(500)
+
+  refreshCommands()
+  refreshThemes()
+end)
+
+RegisterNUICallback('loaded', function(data, cb)
+  TriggerServerEvent('chat:init');
+
+  refreshCommands()
+  refreshThemes()
+
+  chatLoaded = true
+
+  cb('ok')
+end)
+
+Citizen.CreateThread(function()
+  SetTextChatEnabled(false)
+  SetNuiFocus(false)
+
+  while true do
+    Wait(0)
+
+    if not chatInputActive then
+      if IsControlPressed(0, 245) --[[ INPUT_MP_TEXT_CHAT_ALL ]] then
+        chatInputActive = true
+        chatInputActivating = true
+
+        SendNUIMessage({
+          type = 'ON_OPEN'
+        })
+      end
+    end
+
+    if chatInputActivating then
+      if not IsControlPressed(0, 245) then
+        SetNuiFocus(true)
+
+        chatInputActivating = false
+      end
+    end
+
+    if chatLoaded then
+      local shouldBeHidden = false
+
+      if IsScreenFadedOut() or IsPauseMenuActive() then
+        shouldBeHidden = true
+      end
+
+      if (shouldBeHidden and not chatHidden) or (not shouldBeHidden and chatHidden) then
+        chatHidden = shouldBeHidden
+
+        SendNUIMessage({
+          type = 'ON_SCREEN_STATE_CHANGE',
+          shouldHide = shouldBeHidden
+        })
+      end
+    end
+  end
+end)

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

@@ -0,0 +1,255 @@
+window.APP = {
+  template: '#app_template',
+  name: 'app',
+  data() {
+    return {
+      style: CONFIG.style,
+      showInput: false,
+      showWindow: false,
+      shouldHide: true,
+      backingSuggestions: [],
+      removedSuggestions: [],
+      templates: CONFIG.templates,
+      message: '',
+      messages: [],
+      oldMessages: [],
+      oldMessagesIndex: -1,
+      tplBackups: [],
+      msgTplBackups: []
+    };
+  },
+  destroyed() {
+    clearInterval(this.focusTimer);
+    window.removeEventListener('message', this.listener);
+  },
+  mounted() {
+    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]) {
+        this[item.type](item);
+      }
+    });
+  },
+  watch: {
+    messages() {
+      if (this.showWindowTimer) {
+        clearTimeout(this.showWindowTimer);
+      }
+      this.showWindow = true;
+      this.resetShowWindowTimer();
+
+      const messagesObj = this.$refs.messages;
+      this.$nextTick(() => {
+        messagesObj.scrollTop = messagesObj.scrollHeight;
+      });
+    },
+  },
+  computed: {
+    suggestions() {
+      return this.backingSuggestions.filter((el) => this.removedSuggestions.indexOf(el.name) <= -1);
+    },
+  },
+  methods: {
+    ON_SCREEN_STATE_CHANGE({ shouldHide }) {
+      this.shouldHide = shouldHide;
+    },
+    ON_OPEN() {
+      this.showInput = true;
+      this.showWindow = true;
+      if (this.showWindowTimer) {
+        clearTimeout(this.showWindowTimer);
+      }
+      this.focusTimer = setInterval(() => {
+        if (this.$refs.input) {
+          this.$refs.input.focus();
+        } else {
+          clearInterval(this.focusTimer);
+        }
+      }, 100);
+    },
+    ON_MESSAGE({ message }) {
+      this.messages.push(message);
+    },
+    ON_CLEAR() {
+      this.messages = [];
+      this.oldMessages = [];
+      this.oldMessagesIndex = -1;
+    },
+    ON_SUGGESTION_ADD({ suggestion }) {
+      const duplicateSuggestion = this.backingSuggestions.find(a => a.name == suggestion.name);
+      if (duplicateSuggestion) {
+        if(suggestion.help || suggestion.params) {
+          duplicateSuggestion.help = suggestion.help || "";
+          duplicateSuggestion.params = suggestion.params || [];
+        }
+        return;
+      }
+      if (!suggestion.params) {
+        suggestion.params = []; //TODO Move somewhere else
+      }
+      this.backingSuggestions.push(suggestion);
+    },
+    ON_SUGGESTION_REMOVE({ name }) {
+      if(this.removedSuggestions.indexOf(name) <= -1) {
+        this.removedSuggestions.push(name);
+      }
+    },
+    ON_TEMPLATE_ADD({ template }) {
+      if (this.templates[template.id]) {
+        this.warn(`Tried to add duplicate template '${template.id}'`)
+      } else {
+        this.templates[template.id] = template.html;
+      }
+    },
+    ON_UPDATE_THEMES({ themes }) {
+      this.removeThemes();
+
+      this.setThemes(themes);
+    },
+    removeThemes() {
+      for (let i = 0; i < document.styleSheets.length; i++) {
+        const styleSheet = document.styleSheets[i];
+        const node = styleSheet.ownerNode;
+        
+        if (node.getAttribute('data-theme')) {
+          node.parentNode.removeChild(node);
+        }
+      }
+
+      this.tplBackups.reverse();
+
+      for (const [ elem, oldData ] of this.tplBackups) {
+        elem.innerText = oldData;
+      }
+
+      this.tplBackups = [];
+
+      this.msgTplBackups.reverse();
+
+      for (const [ id, oldData ] of this.msgTplBackups) {
+        this.templates[id] = oldData;
+      }
+
+      this.msgTplBackups = [];
+    },
+    setThemes(themes) {
+      for (const [ id, data ] of Object.entries(themes)) {
+        if (data.style) {
+          const style = document.createElement('style');
+          style.type = 'text/css';
+          style.setAttribute('data-theme', id);
+          style.appendChild(document.createTextNode(data.style));
+
+          document.head.appendChild(style);
+        }
+        
+        if (data.styleSheet) {
+          const link = document.createElement('link');
+          link.rel = 'stylesheet';
+          link.type = 'text/css';
+          link.href = data.baseUrl + data.styleSheet;
+          link.setAttribute('data-theme', id);
+
+          document.head.appendChild(link);
+        }
+
+        if (data.templates) {
+          for (const [ tplId, tpl ] of Object.entries(data.templates)) {
+            const elem = document.getElementById(tplId);
+
+            if (elem) {
+              this.tplBackups.push([ elem, elem.innerText ]);
+              elem.innerText = tpl;
+            }
+          }
+        }
+
+        if (data.script) {
+          const script = document.createElement('script');
+          script.type = 'text/javascript';
+          script.src = data.baseUrl + data.script;
+
+          document.head.appendChild(script);
+        }
+
+        if (data.msgTemplates) {
+          for (const [ tplId, tpl ] of Object.entries(data.msgTemplates)) {
+            this.msgTplBackups.push([ tplId, this.templates[tplId] ]);
+            this.templates[tplId] = tpl;
+          }
+        }
+      }
+    },
+    warn(msg) {
+      this.messages.push({
+        args: [msg],
+        template: '^3<b>CHAT-WARN</b>: ^0{0}',
+      });
+    },
+    clearShowWindowTimer() {
+      clearTimeout(this.showWindowTimer);
+    },
+    resetShowWindowTimer() {
+      this.clearShowWindowTimer();
+      this.showWindowTimer = setTimeout(() => {
+        if (!this.showInput) {
+          this.showWindow = false;
+        }
+      }, CONFIG.fadeTimeout);
+    },
+    keyUp() {
+      this.resize();
+    },
+    keyDown(e) {
+      if (e.which === 38 || e.which === 40) {
+        e.preventDefault();
+        this.moveOldMessageIndex(e.which === 38);
+      } else if (e.which == 33) {
+        var buf = document.getElementsByClassName('chat-messages')[0];
+        buf.scrollTop = buf.scrollTop - 100;
+      } else if (e.which == 34) {
+        var buf = document.getElementsByClassName('chat-messages')[0];
+        buf.scrollTop = buf.scrollTop + 100;
+      }
+    },
+    moveOldMessageIndex(up) {
+      if (up && this.oldMessages.length > this.oldMessagesIndex + 1) {
+        this.oldMessagesIndex += 1;
+        this.message = this.oldMessages[this.oldMessagesIndex];
+      } else if (!up && this.oldMessagesIndex - 1 >= 0) {
+        this.oldMessagesIndex -= 1;
+        this.message = this.oldMessages[this.oldMessagesIndex];
+      } else if (!up && this.oldMessagesIndex - 1 === -1) {
+        this.oldMessagesIndex = -1;
+        this.message = '';
+      }
+    },
+    resize() {
+      const input = this.$refs.input;
+      input.style.height = '5px';
+      input.style.height = `${input.scrollHeight + 2}px`;
+    },
+    send(e) {
+      if(this.message !== '') {
+        post('http://chat/chatResult', JSON.stringify({
+          message: this.message,
+        }));
+        this.oldMessages.unshift(this.message);
+        this.oldMessagesIndex = -1;
+        this.hideInput();
+      } else {
+        this.hideInput(true);
+      }
+    },
+    hideInput(canceled = false) {
+      if (canceled) {
+        post('http://chat/chatResult', JSON.stringify({ canceled }));
+      }
+      this.message = '';
+      this.showInput = false;
+      clearInterval(this.focusTimer);
+      this.resetShowWindowTimer();
+    },
+  },
+};

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

@@ -0,0 +1,86 @@
+Vue.component('message', {
+  template: '#message_template',
+  data() {
+    return {};
+  },
+  computed: {
+    textEscaped() {
+      let s = this.template ? this.template : this.templates[this.templateId];
+
+      if (this.template) {
+        //We disable templateId since we are using a direct raw template
+        this.templateId = -1;
+      }
+
+      //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) {
+          //color is deprecated, use templates or ^1 etc.
+          return this.colorizeOld(argEscaped);
+        }
+        return argEscaped;
+      });
+      return this.colorize(s);
+    },
+  },
+  methods: {
+    colorizeOld(str) {
+      return `<span style="color: rgb(${this.color[0]}, ${this.color[1]}, ${this.color[2]})">${str}</span>`
+    },
+    colorize(str) {
+      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) {
+      return String(unsafe)
+       .replace(/&/g, '&amp;')
+       .replace(/</g, '&lt;')
+       .replace(/>/g, '&gt;')
+       .replace(/"/g, '&quot;')
+       .replace(/'/g, '&#039;');
+    },
+  },
+  props: {
+    templates: {
+      type: Object,
+    },
+    args: {
+      type: Array,
+    },
+    template: {
+      type: String,
+      default: null,
+    },
+    templateId: {
+      type: String,
+      default: CONFIG.defaultTemplateId,
+    },
+    multiline: {
+      type: Boolean,
+      default: false,
+    },
+    color: { //deprecated
+      type: Array,
+      default: false,
+    },
+  },
+});

resources/[gameplay]/chat/html/Suggestions.js

@@ -0,0 +1,44 @@
+Vue.component('suggestions', {
+  template: '#suggestions_template',
+  props: ['message', 'suggestions'],
+  data() {
+    return {};
+  },
+  computed: {
+    currentSuggestions() {
+      if (this.message === '') {
+        return [];
+      }
+      const currentSuggestions = this.suggestions.filter((s) => {
+        if (!s.name.startsWith(this.message)) {
+          const suggestionSplitted = s.name.split(' ');
+          const messageSplitted = this.message.split(' ');
+          for (let i = 0; i < messageSplitted.length; i += 1) {
+            if (i >= suggestionSplitted.length) {
+              return i < suggestionSplitted.length + s.params.length;
+            }
+            if (suggestionSplitted[i] !== messageSplitted[i]) {
+              return false;
+            }
+          }
+        }
+        return true;
+      }).slice(0, CONFIG.suggestionLimit);
+
+      currentSuggestions.forEach((s) => {
+        // eslint-disable-next-line no-param-reassign
+        s.disabled = !s.name.startsWith(this.message);
+
+        s.params.forEach((p, index) => {
+          const wType = (index === s.params.length - 1) ? '.' : '\\S';
+          const regex = new RegExp(`${s.name} (?:\\w+ ){${index}}(?:${wType}*)$`, 'g');
+
+          // eslint-disable-next-line no-param-reassign
+          p.disabled = this.message.match(regex) == null;
+        });
+      });
+      return currentSuggestions;
+    },
+  },
+  methods: {},
+});

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

@@ -0,0 +1,19 @@
+// DO NOT EDIT THIS FILE
+// Copy it to `config.js` and edit it
+window.CONFIG = {
+  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}',
+    'print': '<pre>{0}</pre>',
+    'example:important': '<h1>^2{0}</h1>'
+  },
+  fadeTimeout: 7000,
+  suggestionLimit: 5,
+  style: {
+    background: 'rgba(52, 73, 94, 0.7)',
+    width: '38%',
+    height: '22%',
+  }
+};

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

@@ -0,0 +1,127 @@
+.color-0{color: #ffffff;}
+.color-1{color: #ff4444;}
+.color-2{color: #99cc00;}
+.color-3{color: #ffbb33;}
+.color-4{color: #0099cc;}
+.color-5{color: #33b5e5;}
+.color-6{color: #aa66cc;}
+.color-8{color: #cc0000;}
+.color-9{color: #cc0068;}
+
+* {
+  font-family: 'Lato', sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.no-grow {
+  flex-grow: 0;
+}
+
+em {
+  font-style: normal;
+}
+
+#app {
+  font-family: 'Lato', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: white;
+}
+
+.chat-window {
+  position: absolute;
+  top: 1.5%;
+  left: 0.8%;
+  width: 38%;
+  height: 22%;
+  max-width: 1000px;
+  background-color: rgba(52, 73, 94, 0.7);
+  -webkit-animation-duration: 2s;
+}
+
+
+.chat-messages {
+  position: relative;
+  height: 95%;
+  font-size: 1.8vh;
+  margin: 1%;
+
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+
+.chat-input {
+  font-size: 1.65vh;
+  position: absolute;
+
+  top: 23.8%;
+  left: 0.8%;
+  width: 38%;
+  max-width: 1000px;
+  box-sizing: border-box;
+}
+
+.prefix {
+  font-size: 1.8vh;
+  position: absolute;
+  margin-top: 0.5%;
+  left: 0.208%;
+}
+
+textarea {
+  font-size: 1.65vh;
+  display: block;
+  box-sizing: border-box;
+  padding: 1%;
+  padding-left: 3.5%;
+  color: white;
+  background-color: rgba(44, 62, 80, 1.0);
+  width: 100%;
+  border-width: 0;
+  height: 3.15%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+textarea:focus, input:focus {
+    outline: none;
+}
+
+.msg {
+  margin-bottom: 0.28%;
+}
+
+.multiline {
+  margin-left: 4%;
+  text-indent: -1.2rem;
+  white-space: pre-line;
+}
+
+.suggestions {
+  list-style-type: none;
+  padding: 0.5%;
+  padding-left: 1.4%;
+  font-size: 1.65vh;
+  box-sizing: border-box;
+  color: white;
+  background-color: rgba(44, 62, 80, 1.0);
+  width: 100%;
+}
+
+.help {
+  color: #b0bbbd;
+}
+
+.disabled {
+  color: #b0bbbd;
+}
+
+.suggestion {
+  margin-bottom: 0.5%;
+}
+
+.hidden {
+  display: none;
+}

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

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title></title>
+  <link href="vendor/latofonts.css" rel="stylesheet">
+  <link href="vendor/flexboxgrid.6.3.1.min.css" rel="stylesheet"></link>
+  <link href="vendor/animate.3.5.2.min.css" rel="stylesheet"></link>
+  <link href="index.css" rel="stylesheet"></link>
+
+  <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>
+</head>
+<body>
+  <div id="app"></div>
+
+  <!-- App Template -->
+  <script type="text/x-template" id="app_template">
+    <div id="app">
+      <div class="chat-window" :style="this.style" :class="{ 'fadeOut animated': !showWindow, 'hidden': shouldHide }">
+        <div class="chat-messages" ref="messages">
+          <message v-for="msg in messages"
+                   :templates="templates"
+                   :multiline="msg.multiline"
+                   :args="msg.args"
+                   :color="msg.color"
+                   :template="msg.template"
+                   :template-id="msg.templateId"
+                   :key="msg">
+          </message>
+        </div>
+      </div>
+      <div class="chat-input" v-show="showInput">
+        <div>
+          <span class="prefix">➤</span>
+          <textarea v-model="message"
+                    ref="input"
+                    type="text"
+                    autofocus
+                    spellcheck="false"
+                    @keyup.esc="hideInput"
+                    @keyup="keyUp"
+                    @keydown="keyDown"
+                    @keypress.enter.prevent="send">
+          </textarea>
+        </div>
+        <suggestions :message="message" :suggestions="suggestions">
+        </suggestions>
+      </div>
+    </div>
+  </script>
+
+  <!-- Message Template -->
+  <script type="text/x-template" id="message_template">
+    <div class="msg" :class="{ multiline }">
+      <span v-html="textEscaped"></span>
+    </div>
+  </script>
+
+  <!-- Suggestions Template -->
+  <script type="text/x-template" id="suggestions_template">
+    <div class="suggestions-wrap" v-show="currentSuggestions.length > 0">
+      <ul class="suggestions">
+        <li class="suggestion" v-for="s in currentSuggestions">
+          <p>
+            <span :class="{ 'disabled': s.disabled }">
+              {{s.name}}
+            </span>
+            <span class="param"
+                  v-for="(p, index) in s.params"
+                  :class="{ 'disabled': p.disabled }">
+              [{{p.name}}]
+            </span>
+          </p>
+          <small class="help">
+            <template v-if="!s.disabled">
+              {{s.help}}
+            </template>
+            <template v-for="p in s.params" v-if="!p.disabled">
+              {{p.help}}
+            </template>
+          </small>
+        </li>
+      </ul>
+    </div>
+  </script>
+
+  <!-- Scripts -->
+  <script type="text/javascript" src="./Suggestions.js"></script>
+  <script type="text/javascript" src="./Message.js"></script>
+  <script type="text/javascript" src="./App.js"></script>
+
+  <!-- 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),
+  });
+
+  window.emulate = (type, detail = {}) => {
+    detail.type = type;
+    window.dispatchEvent(new CustomEvent('message', {
+      detail,
+    }));
+  };
+  </script>
+
+</body>
+</html>

resources/[gameplay]/chat/html/vendor/latofonts.css

@@ -0,0 +1,48 @@
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Lato Light'), local('Lato-Light'), url(fonts/LatoLight.woff2);
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Lato Light'), local('Lato-Light'), url(fonts/LatoLight2.woff2);
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato Regular'), local('Lato-Regular'), url(fonts/LatoRegular.woff2);
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato Regular'), local('Lato-Regular'), url(fonts/LatoRegular2.woff2);
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Lato Bold'), local('Lato-Bold'), url(fonts/LatoBold.woff2);
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Lato Bold'), local('Lato-Bold'), url(fonts/LatoBold2.woff2);
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}

resources/[gameplay]/chat/sv_chat.lua

@@ -0,0 +1,79 @@
+RegisterServerEvent('chat:init')
+RegisterServerEvent('chat:addTemplate')
+RegisterServerEvent('chat:addMessage')
+RegisterServerEvent('chat:addSuggestion')
+RegisterServerEvent('chat:removeSuggestion')
+RegisterServerEvent('_chat:messageEntered')
+RegisterServerEvent('chat:clear')
+RegisterServerEvent('__cfx_internal:commandFallback')
+
+AddEventHandler('_chat:messageEntered', function(author, color, message)
+    if not message or not author then
+        return
+    end
+
+    TriggerEvent('chatMessage', source, author, message)
+
+    if not WasEventCanceled() then
+        TriggerClientEvent('chatMessage', -1, author,  { 255, 255, 255 }, message)
+    end
+
+    print(author .. '^7: ' .. message .. '^7')
+end)
+
+AddEventHandler('__cfx_internal:commandFallback', function(command)
+    local name = GetPlayerName(source)
+
+    TriggerEvent('chatMessage', source, name, '/' .. command)
+
+    if not WasEventCanceled() then
+        TriggerClientEvent('chatMessage', -1, name, { 255, 255, 255 }, '/' .. command) 
+    end
+
+    CancelEvent()
+end)
+
+-- player join messages
+AddEventHandler('chat:init', function()
+    TriggerClientEvent('chatMessage', -1, '', { 255, 255, 255 }, '^2* ' .. GetPlayerName(source) .. ' joined.')
+end)
+
+AddEventHandler('playerDropped', function(reason)
+    TriggerClientEvent('chatMessage', -1, '', { 255, 255, 255 }, '^2* ' .. GetPlayerName(source) ..' left (' .. reason .. ')')
+end)
+
+RegisterCommand('say', function(source, args, rawCommand)
+    TriggerClientEvent('chatMessage', -1, (source == 0) and 'console' or GetPlayerName(source), { 255, 255, 255 }, rawCommand:sub(5))
+end)
+
+-- command suggestions for clients
+local function refreshCommands(player)
+    if GetRegisteredCommands then
+        local registeredCommands = GetRegisteredCommands()
+
+        local suggestions = {}
+
+        for _, command in ipairs(registeredCommands) do
+            if IsPlayerAceAllowed(player, ('command.%s'):format(command.name)) then
+                table.insert(suggestions, {
+                    name = '/' .. command.name,
+                    help = ''
+                })
+            end
+        end
+
+        TriggerClientEvent('chat:addSuggestions', player, suggestions)
+    end
+end
+
+AddEventHandler('chat:init', function()
+    refreshCommands(source)
+end)
+
+AddEventHandler('onServerResourceStart', function(resName)
+    Wait(500)
+
+    for _, player in ipairs(GetPlayers()) do
+        refreshCommands(player)
+    end
+end)