WIP: stock chat rework

resources/[gameplay]/chat-theme-gtao/style.css

@@ -85,14 +85,29 @@
 }
 
 .chat-input > div {
-    background-color: rgba(0, 0, 0, .6);
+    background-color: rgba(0, 0, 0, .6) !important;
+    border: calc(0.28vh / 2) solid rgba(180, 180, 180, .6);
+    outline: calc(0.28vh / 2) solid rgba(0, 0, 0, .8); /* to replace margin-background */
     padding: calc(0.28vh / 2);
 }
 
 .chat-input .prefix {
     margin: 0;
     margin-left: 0.7%;
     margin-top: -0.1%;
+    line-height: 2.8vh;
+}
+
+.chat-input .prefix.any {
+    opacity: 0.8;
+}
+
+.chat-input .prefix.any:before {
+    content: '[';
+}
+
+.chat-input .prefix.any:after {
+    content: ']';
 }
 
 .chat-input > div + div {
@@ -110,9 +125,7 @@
 
 textarea {
     background: transparent;
-    border: calc(0.28vh / 2) solid rgba(180, 180, 180, .6);
-    padding: calc(0.28vh / 2);
-    padding-left: calc(3.5% + (0.28vh / 2));
+    padding: 0.5vh;
 }
 
 @media screen and (min-aspect-ratio: 21/9) {

resources/[gameplay]/chat/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+yarn-error.log
+dist/

resources/[gameplay]/chat/cl_chat.lua

@@ -2,14 +2,15 @@ local isRDR = not TerraingridActivate and true or false
 
 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:addMode')
+RegisterNetEvent('chat:removeMode')
 RegisterNetEvent('chat:removeSuggestion')
 RegisterNetEvent('chat:clear')
 
@@ -47,14 +48,25 @@ AddEventHandler('__cfx_internal:serverPrint', function(msg)
   })
 end)
 
-AddEventHandler('chat:addMessage', function(message)
+-- addMessage
+local addMessage = function(message)
+  if type(message) == 'string' then
+    message = {
+      args = { message }
+    }
+  end
+
   SendNUIMessage({
     type = 'ON_MESSAGE',
     message = message
   })
-end)
+end
 
-AddEventHandler('chat:addSuggestion', function(name, help, params)
+exports('addMessage', addMessage)
+AddEventHandler('chat:addMessage', addMessage)
+
+-- addSuggestion
+local addSuggestion = function(name, help, params)
   SendNUIMessage({
     type = 'ON_SUGGESTION_ADD',
     suggestion = {
@@ -63,7 +75,10 @@ AddEventHandler('chat:addSuggestion', function(name, help, params)
       params = params or nil
     }
   })
-end)
+end
+
+exports('addSuggestion', addSuggestion)
+AddEventHandler('chat:addSuggestion', addSuggestion)
 
 AddEventHandler('chat:addSuggestions', function(suggestions)
   for _, suggestion in ipairs(suggestions) do
@@ -81,6 +96,20 @@ AddEventHandler('chat:removeSuggestion', function(name)
   })
 end)
 
+AddEventHandler('chat:addMode', function(mode)
+  SendNUIMessage({
+    type = 'ON_MODE_ADD',
+    mode = mode
+  })
+end)
+
+AddEventHandler('chat:removeMode', function(name)
+  SendNUIMessage({
+    type = 'ON_MODE_REMOVE',
+    name = name
+  })
+end)
+
 AddEventHandler('chat:addTemplate', function(id, html)
   SendNUIMessage({
     type = 'ON_TEMPLATE_ADD',
@@ -110,7 +139,7 @@ RegisterNUICallback('chatResult', function(data, cb)
     if data.message:sub(1, 1) == '/' then
       ExecuteCommand(data.message:sub(2))
     else
-      TriggerServerEvent('_chat:messageEntered', GetPlayerName(id), { r, g, b }, data.message)
+      TriggerServerEvent('_chat:messageEntered', GetPlayerName(id), { r, g, b }, data.message, data.mode)
     end
   end
 
@@ -124,7 +153,7 @@ local function refreshCommands()
     local suggestions = {}
 
     for _, command in ipairs(registeredCommands) do
-        if IsAceAllowed(('command.%s'):format(command.name)) then
+        if IsAceAllowed(('command.%s'):format(command.name)) and command.name ~= 'toggleChat' then
             table.insert(suggestions, {
                 name = '/' .. command.name,
                 help = ''
@@ -178,7 +207,7 @@ AddEventHandler('onClientResourceStop', function(resName)
 end)
 
 RegisterNUICallback('loaded', function(data, cb)
-  TriggerServerEvent('chat:init');
+  TriggerServerEvent('chat:init')
 
   refreshCommands()
   refreshThemes()
@@ -188,10 +217,43 @@ RegisterNUICallback('loaded', function(data, cb)
   cb('ok')
 end)
 
+local CHAT_HIDE_STATES = {
+  SHOW_WHEN_ACTIVE = 0,
+  ALWAYS_SHOW = 1,
+  ALWAYS_HIDE = 2
+}
+
+local kvpEntry = GetResourceKvpString('hideState')
+local chatHideState = kvpEntry and tonumber(kvpEntry) or CHAT_HIDE_STATES.SHOW_WHEN_ACTIVE
+local isFirstHide = true
+
+if not isRDR then
+  if RegisterKeyMapping then
+    RegisterKeyMapping('toggleChat', 'Toggle chat', 'keyboard', 'l')
+  end
+
+  RegisterCommand('toggleChat', function()
+    if chatHideState == CHAT_HIDE_STATES.SHOW_WHEN_ACTIVE then
+      chatHideState = CHAT_HIDE_STATES.ALWAYS_SHOW
+    elseif chatHideState == CHAT_HIDE_STATES.ALWAYS_SHOW then
+      chatHideState = CHAT_HIDE_STATES.ALWAYS_HIDE
+    elseif chatHideState == CHAT_HIDE_STATES.ALWAYS_HIDE then
+      chatHideState = CHAT_HIDE_STATES.SHOW_WHEN_ACTIVE
+    end
+
+    isFirstHide = false
+
+    SetResourceKvp('hideState', tostring(chatHideState))
+  end, false)
+end
+
 Citizen.CreateThread(function()
   SetTextChatEnabled(false)
   SetNuiFocus(false)
 
+  local lastChatHideState = -1
+  local origChatHideState = -1
+
   while true do
     Wait(0)
 
@@ -215,19 +277,30 @@ Citizen.CreateThread(function()
     end
 
     if chatLoaded then
-      local shouldBeHidden = false
+      local forceHide = IsScreenFadedOut() or IsPauseMenuActive()
+      local wasForceHide = false
 
-      if IsScreenFadedOut() or IsPauseMenuActive() then
-        shouldBeHidden = true
+      if chatHideState ~= CHAT_HIDE_STATES.ALWAYS_HIDE then
+        if forceHide then
+          origChatHideState = chatHideState
+          chatHideState = CHAT_HIDE_STATES.ALWAYS_HIDE
+        end
+      elseif not forceHide and origChatHideState ~= -1 then
+        chatHideState = origChatHideState
+        origChatHideState = -1
+        wasForceHide = true
       end
 
-      if (shouldBeHidden and not chatHidden) or (not shouldBeHidden and chatHidden) then
-        chatHidden = shouldBeHidden
+      if chatHideState ~= lastChatHideState then
+        lastChatHideState = chatHideState
 
         SendNUIMessage({
           type = 'ON_SCREEN_STATE_CHANGE',
-          shouldHide = shouldBeHidden
+          hideState = chatHideState,
+          fromUserInteraction = not forceHide and not isFirstHide and not wasForceHide
         })
+
+        isFirstHide = false
       end
     end
   end

resources/[gameplay]/chat/fxmanifest.lua

@@ -1,30 +1,17 @@
 description 'chat management stuff'
 
-ui_page 'html/index.html'
+ui_page 'dist/ui.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',
-  }
+  'dist/ui.html',
+  'dist/index.css',
+  'html/vendor/*.css',
+  'html/vendor/fonts/*.woff2',
+}
 
 fx_version 'adamant'
 games { 'rdr3', 'gta5' }
-rdr3_warning 'I acknowledge that this is a prerelease build of RedM, and I am aware my resources *will* become incompatible once RedM ships.'
+rdr3_warning 'I acknowledge that this is a prerelease build of RedM, and I am aware my resources *will* become incompatible once RedM ships.'