Merge: refactor(esx_multicharacter): complete UI/Backend overhaul

refactor(esx_multicharacter): complete UI/Backend overhaul

Author: Mycroft-Studios

[core]/esx_multicharacter/client/main.lua

@@ -1,13 +1,3 @@
-
--- Connection Logic
-
-local function AwaitContext()
-    while GetResourceState("esx_context") ~= "started" do
-        Wait(100)
-    end
-    return true
-end
-
 CreateThread(function()
 
     while not ESX.PlayerLoaded do
@@ -16,13 +6,8 @@ CreateThread(function()
         if NetworkIsPlayerActive(ESX.playerId) then
             ESX.DisableSpawnManager()
             DoScreenFadeOut(0)
-
-            local ready = AwaitContext()
-            if ready then
-
-                Multicharacter:SetupCharacters()
-                break
-            end
+            Multicharacter:SetupCharacters()
+            break
         end
     end
 end)

[core]/esx_multicharacter/client/modules/menu.lua

@@ -1,15 +1,4 @@
 Menu = {}
-Menu._index = Menu
-Menu.currentElements = {}
-
-function Menu:OpenMenu()
-    ESX.OpenContext("left", self.currentElements, self.onUse, nil, false)
-end
-
-function Menu:Close()
-    self.currentElements = {}
-    ESX.CloseContext()
-end
 
 function Menu:CheckModel(character)
     if not character.model and character.skin then
@@ -23,18 +12,6 @@ function Menu:CheckModel(character)
     end
 end
 
-function Menu:AddCharacters()
-    for _, v in pairs(Multicharacter.Characters) do
-        self:CheckModel(v)
-
-        local label = ("%s %s"):format(v.firstname, v.lastname)
-        self.currentElements[#self.currentElements + 1] = { title = label, icon = "fa-regular fa-user", value = v.id}
-    end
-    if #self.currentElements - 1 < Multicharacter.slots then
-        self.currentElements[#self.currentElements + 1] = { title = TranslateCap("create_char"), icon = "fa-solid fa-plus", value = (#self.currentElements + 1), new = true }
-    end
-end
-
 local GetSlot = function()
     for i = 1, Multicharacter.slots do
         if not Multicharacter.Characters[i] then
@@ -44,7 +21,6 @@ local GetSlot = function()
 end
 
 function Menu:NewCharacter()
-    self:Close()
     local slot = GetSlot()
 
     TriggerServerEvent("esx_multicharacter:CharacterChosen", slot, true)
@@ -59,133 +35,43 @@ function Menu:NewCharacter()
 end
 
 
-function Menu:SelectCharacter()
+function Menu:InitCharacter()
     local Characters = Multicharacter.Characters
     local Character = next(Characters)
     self:CheckModel(Characters[Character])
 
     if not Multicharacter.spawned then
         Multicharacter:SetupCharacter(Character)
     end
-
-    self.currentElements = {
-        {
-            title = TranslateCap("select_char"),
-            icon = "fa-solid fa-users",
-            description = TranslateCap("select_char_description"),
-            unselectable = true
+    Wait(500)
+    
+    SendNUIMessage({
+        action = "ToggleMulticharacter",
+        data = {
+            show = true,
+            Characters = Characters,
+            CanDelete = Config.CanDelete,
+            AllowedSlot = Multicharacter.slots,
+            Locale = Locales[Config.Locale].UI,
         }
-    }
-
-    self:AddCharacters()
-    self.onUse = function(_, SelectedCharacter)
-        if SelectedCharacter.new then
-           self:NewCharacter()
-        else
-            if SelectedCharacter.value ~= Multicharacter.spawned then
-                Multicharacter:SetupCharacter(SelectedCharacter.value)
-                local playerPed = PlayerPedId()
-                SetPedAoBlobRendering(playerPed, true)
-                ResetEntityAlpha(playerPed)
-            end
-            self:CharacterOptions()
-        end
-    end
+    })
 
-    self:OpenMenu()
+    SetNuiFocus(true, true)
 end
 
-
-function Menu:CharacterOptions()
-    local currentCharacter = Multicharacter.Characters[Multicharacter.spawned]
-    local elements = {
-        {
-            title = TranslateCap("character", currentCharacter.firstname .. " " .. currentCharacter.lastname),
-            icon = "fa-regular fa-user",
-            unselectable = true
-        },
-        {
-            title = TranslateCap("return"),
-            unselectable = false,
-            icon = "fa-solid fa-arrow-left",
-            description = TranslateCap("return_description"),
-            action = "return"
-        },
-    }
-
-    if not currentCharacter.disabled then
-        elements[3] = {
-            title = TranslateCap("char_play"),
-            description = TranslateCap("char_play_description"),
-            icon = "fa-solid fa-play",
-            action = "play",
-        }
-    else
-        elements[3] = {
-            title = TranslateCap("char_disabled"),
-            icon = "fa-solid fa-xmark",
-            description = TranslateCap("char_disabled_description")
-        }
-    end
-    if Config.CanDelete then
-        elements[4] = {
-            title = TranslateCap("char_delete"),
-            icon = "fa-solid fa-xmark",
-            description = TranslateCap("char_delete_description"),
-            action = "delete",
-        }
-    end
-
-    self.currentElements = elements
-    self.onUse = function(_, Action)
-        if Action.action == "play" then
-            Multicharacter:CloseUI()
-            self:Close()
-
-            TriggerServerEvent("esx_multicharacter:CharacterChosen", Multicharacter.spawned, false)
-        elseif Action.action == "delete" then
-            self:ConfirmDeletion()
-        elseif Action.action == "return" then
-            self:SelectCharacter()
-        end
-    end
-
-    self:OpenMenu()
+function Menu:SelectCharacter(index)
+    Multicharacter:SetupCharacter(index)
+    local playerPed = PlayerPedId()
+    SetPedAoBlobRendering(playerPed, true)
+    ResetEntityAlpha(playerPed)
 end
 
-function Menu:ConfirmDeletion()
-    self.currentElements = {
-        {
-            title = TranslateCap("char_delete_confirmation"),
-            icon = "fa-solid fa-users",
-            description = TranslateCap("char_delete_confirmation_description"),
-            unselectable = true
-        },
-        {
-            title = TranslateCap("char_delete"),
-            icon = "fa-solid fa-xmark",
-            description = TranslateCap("char_delete_yes_description"),
-            action = "delete",
-        },
-        {
-            title = TranslateCap("return"),
-            unselectable = false,
-            icon = "fa-solid fa-arrow-left",
-            description = TranslateCap("char_delete_no_description"),
-            action = "return"
-        },
-    }
-
-    self.onUse = function(_, Action)
-        if Action.action == "delete" then
-            self:Close()
-
-            TriggerServerEvent("esx_multicharacter:DeleteCharacter", Multicharacter.spawned)
-            Multicharacter.spawned = false
-        elseif Action.action == "return" then
-            self:CharacterOptions()
-        end
-    end
+function Menu:PlayCharacter()
+    Multicharacter:CloseUI()
+    TriggerServerEvent("esx_multicharacter:CharacterChosen", Multicharacter.spawned, false)
+end
 
-    self:OpenMenu()
+function Menu:DeleteCharacter()
+    TriggerServerEvent("esx_multicharacter:DeleteCharacter", Multicharacter.spawned)
+    Multicharacter.spawned = false
 end

[core]/esx_multicharacter/client/modules/multicharacter.lua

@@ -12,8 +12,8 @@ function Multicharacter:SetupCamera()
 
     local offset = GetOffsetFromEntityInWorldCoords(self.playerPed, 0, 1.7, 0.4)
 
-    SetCamCoord(self.cam, offset.x, offset.y, offset.z)
-    PointCamAtCoord(self.cam, self.spawnCoords.x, self.spawnCoords.y, self.spawnCoords.z + 1.3)
+    SetCamCoord(self.cam, offset.x + 0.7, offset.y , offset.z)
+    PointCamAtCoord(self.cam, self.spawnCoords.x + 0.4, self.spawnCoords.y, self.spawnCoords.z + 1.3)
 end
 
 function Multicharacter:AwaitFadeIn()
@@ -116,14 +116,17 @@ function Multicharacter:ChangeExistingPed()
     local newCharacter = self.Characters[self.tempIndex]
     local spawnedCharacter = self.Characters[self.spawned]
 
+    if not newCharacter.model then
+        newCharacter.model = newCharacter.sex == TranslateCap("male") and `mp_m_freemode_01` or `mp_f_freemode_01`
+    end
+
     if spawnedCharacter and spawnedCharacter.model then
         local model = ESX.Streaming.RequestModel(newCharacter.model)
         if model then
             SetPlayerModel(ESX.playerId, newCharacter.model)
             SetModelAsNoLongerNeeded(newCharacter.model)
         end
     end
-
     TriggerEvent("skinchanger:loadSkin", newCharacter.skin)
 end
 
@@ -135,8 +138,12 @@ end
 
 function Multicharacter:CloseUI()
     SendNUIMessage({
-        action = "closeui",
+        action = "ToggleMulticharacter",
+        data = {
+            show = false
+        }
     })
+    SetNuiFocus(false, false)
 end
 
 function Multicharacter:SetupCharacter(index)
@@ -152,10 +159,6 @@ function Multicharacter:SetupCharacter(index)
     self.spawned = index
     self.playerPed = PlayerPedId()
     self:PrepForUI()
-    SendNUIMessage({
-        action = "openui",
-        character = character,
-    })
 end
 
 function Multicharacter:SetupUI(characters, slots)
@@ -180,7 +183,7 @@ function Multicharacter:SetupUI(characters, slots)
             TriggerEvent("esx_identity:showRegisterIdentity")
         end)
     else
-        Menu:SelectCharacter()
+        Menu:InitCharacter()
     end
 end
 

[core]/esx_multicharacter/client/modules/nui.lua

@@ -0,0 +1,23 @@
+RegisterNuiCallback('SelectCharacter', function (data, cb)
+    local selectedIndex = tonumber(data.id)
+    
+    if selectedIndex then
+        Menu:SelectCharacter(selectedIndex)
+    end
+    cb('ok')
+end)
+
+RegisterNuiCallback('PlayCharacter', function (data, cb)
+    Menu:PlayCharacter()
+    cb('ok')
+end)
+
+RegisterNuiCallback('DeleteCharacter', function (data, cb)
+    Menu:DeleteCharacter()
+    cb('ok')
+end)
+
+RegisterNuiCallback('CreateCharacter', function (data, cb)
+    Menu:NewCharacter()
+    cb('ok')
+end)

[core]/esx_multicharacter/config.lua

@@ -7,7 +7,7 @@ Config.CanDelete = true
 if IsDuplicityVersion() then
     -- This is the default number of slots for EVERY player
     -- If you want to manage extra slots for specific players you can do it by using '/setslots' and '/remslots' commands
-    Config.Slots = 4
+    Config.Slots = 3
     --------------------
 
     -- Text to prepend to each character (char#:identifier) - keep it short

[core]/esx_multicharacter/fxmanifest.lua

@@ -1,5 +1,4 @@
 fx_version 'cerulean'
-
 game 'gta5'
 author 'ESX-Framework - Linden - KASH'
 description 'Allows players to have multiple characters on the same account.'
@@ -21,6 +20,6 @@ client_scripts {
    'client/*.lua'
 }
 
-ui_page { 'html/ui.html' }
+ui_page 'web/build/index.html'
 
-files { 'html/ui.html', 'html/css/main.css', 'html/js/app.js', 'html/locales/*.js' }
+files { 'web/build/index.html', 'web/build/**/*.*'}