chore(client+nui); Add support for locales; modify character info appearance

client/main.lua

@@ -120,26 +120,25 @@ if ESX.GetConfig().Multichar then
 			end)
 		else
 			for i=1, #Characters+1 do
-				local label = 'Create new character'
 				if Characters[i] then
 					if Spawned == false then SetupCharacter(i) end
-					label = Characters[i].firstname..' '..Characters[i].lastname
+					local label = Characters[i].firstname..' '..Characters[i].lastname
 					if Characters[i].sex == 'Female' then Characters[i].model = `mp_f_freemode_01` else Characters[i].model = `mp_m_freemode_01` end
 					elements[#elements+1] = {label = label, value = Characters[i].id, new = false}
-				else elements[#elements+1] = {label = label, new = true} end
+				else elements[#elements+1] = {label = _('create_char'), new = true} end
 			end
 		
 			ESX.UI.Menu.Open('default', GetCurrentResourceName(), 'selectchar', {
-				title    = 'Select character',
+				title    = _('select_char'),
 				align    = 'top-left',
 				elements = elements
 			}, function(data, menu)
 				local elements = { }
 				if not data.current.new then
-					elements[1] = {label = 'Play this character', action = 'play', value = data.current.value}
-					elements[2] = {label = 'Delete this character', action = 'delete', value = data.current.value}
+					elements[1] = {label = _('char_play'), action = 'play', value = data.current.value}
+					elements[2] = {label = _('char_delete'), action = 'delete', value = data.current.value}
 					ESX.UI.Menu.Open('default', GetCurrentResourceName(), 'choosechar', {
-						title = 'Select character',
+						title = _('select_char'),
 						align = 'top-left',
 						elements = elements
 					}, function(data, menu)
@@ -153,10 +152,10 @@ if ESX.GetConfig().Multichar then
 							Citizen.Wait(300)
 						else
 							local elements2 = {}
-							elements2[1] = {label = 'Return'}
-							elements2[2] = {label = 'Confirm', value = data.current.value}
+							elements2[1] = {label = _('cancel')}
+							elements2[2] = {label = _('confirm'), value = data.current.value}
 							ESX.UI.Menu.Open('default', GetCurrentResourceName(), 'deletechar', {
-								title = 'Delete '..Characters[data.current.value].firstname..' '..Characters[data.current.value].lastname..'?',
+								title = _('delete_label', Characters[data.current.value].firstname, Characters[data.current.value].lastname),
 								align = 'center',
 								elements = elements2
 							}, function(data, menu)

config.lua

@@ -1,4 +1,5 @@
 Config = {}
+Config.Locale = 'en'
 
 Config.Slots = 4
 Config.Spawn = vector4(-113.7, 565.3, 196, 0)

fxmanifest.lua

@@ -13,7 +13,9 @@ server_scripts {
 }
 
 client_scripts {
+	'@es_extended/locale.lua',
     'client/main.lua',
+    'locales/*.lua',
 }
 
 ui_page {

html/css/main.css

@@ -1,12 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;600&display=swap');
 * {
-    font-family: 'Raleway';
     margin: 0;
     padding: 0;
     user-select: none;
     color: rgb(255, 255, 255);
 	font-weight: 300;
-	font-size: 1.5vh;
+	font-size: 1.6vh;
+    font-family: Calibri, "Helvetica", san-serif;
 }
 
 html {
@@ -36,6 +36,7 @@ body {
 	top: 5%;
     left: 50%;
     transform: translate(-50%);
+	font-size: 1.1rem;
 }
 
 .footer {
@@ -43,6 +44,7 @@ body {
 	bottom: 5%;
     left: 50%;
     transform: translate(-50%);
+	font-size: 1.1rem;
 }
 
 .character-box {
@@ -61,6 +63,7 @@ body {
 }
 
 h1 {
+    font-family: 'Raleway', sans-serif;
 	padding-top: 2rem;
 	display: block;
 	font-size: 1.3rem;

html/locales/en.js

@@ -6,9 +6,3 @@ translate.bank = "Bank";
 translate.money = "Cash";
 translate.gender = "Gender";
 translate.dob = "Date of birth";
-translate.new = "";
-translate.delete = "DELETE";
-translate.play = "PLAY";
-translate.playNew = "CREATE CHARACTER";
-translate.modalTitle = "Are You Sure?";
-translate.modalText = "By deleting your account we won't be able to recover it, all properties, cars etc. will be deleted";

html/locales/fr.js

@@ -6,9 +6,3 @@ translate.bank = "Banque";
 translate.money = "Argent";
 translate.gender = "Sexe";
 translate.dob = "Date de naissance";
-translate.new = "Créer un personnage";
-translate.delete = "SUPPRIMER";
-translate.play = "JOUER";
-translate.playNew = "CRÉER UN PERSONNAGE";
-translate.modalTitle = "Êtes-vous sûr?";
-translate.modalText = "En supprimant votre personnage, vous ne pourrez pas le récupérer. Toutes les informations seront supprimées.";

html/locales/pl.js

@@ -6,9 +6,3 @@ translate.bank = "Bank";
 translate.money = "Gotówka";
 translate.gender = "Seks";
 translate.dob = "Data urodzenia";
-translate.new = "Utwórz nową postać";
-translate.delete = "KASOWAĆ";
-translate.play = "GRAĆ";
-translate.playNew = "TWORZYĆ POSTAĆ";
-translate.modalTitle = "Jesteś pewny?";
-translate.modalText = "Po usunięciu konta nie będziemy mogli go odzyskać, wszystkie nieruchomości, samochody itp. Zostaną usunięte";

html/ui.html

@@ -21,4 +21,4 @@
     <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
     <script src="js/app.js" type="text/javascript"></script>
     </body>
-</html>
+</html>

locales/en.lua

@@ -0,0 +1,9 @@
+Locales['en'] = {
+	['delete_label'] = "Delete %s %s?",
+	['select_char'] = "Select Character",
+	['create_char'] = "Create new character",
+	['char_play'] = "Play this character",
+	['char_delete'] = "Delete this character",
+	['return'] = "Return",
+	['confirm'] = "Confirm",
+}