feat(locales): Add locales support

config.lua

@@ -3,6 +3,9 @@
 ---------------------------------------------------------------------------------------------
 
 ac = {
+	-- Language for notifications and UI
+	locale = 'en',
+
 	-- Whether to check for newer resource version and notify in server console.
 	versionCheck = true,
 

docs/config.md

@@ -4,6 +4,7 @@ In this file you can find more detailed description of each config option.
 <details>
 <summary><b>Quick navigation</b></summary>
 
+- [locale](#locale)
 - [versionCheck](#versioncheck)
 - [useCustomNotify](#usecustomnotify)
 - [useCommand](#usecommand)
@@ -15,6 +16,17 @@ In this file you can find more detailed description of each config option.
 
 <br>
 
+## locale
+What supported language to use for notifications and UI.  
+Locale name is the same as the file name in [locales](../locales) folder without the `.lua` extension (eg. **en**, **cs**).  
+Note that some character sets may not be supported when using the default notifications (eg. `ěčřůďťň`).  
+Feel free to submit a PR with more languages!
+
+**Accepted values**  
+`'en'` = Or any other locale.
+
+
+
 ## versionCheck
 Whether to check for newer resource version and notify in server console.
 

fxmanifest.lua

@@ -9,7 +9,10 @@ description 'FiveM radio for pma-voice'
 repository 'https://github.com/antond15/ac_radio'
 
 
-shared_script 'config.lua'
+shared_scripts {
+  'config.lua',
+  'resource/locales.lua'
+}
 
 server_scripts {
   'resource/server/server.lua',
@@ -25,6 +28,7 @@ client_scripts {
 ui_page 'html/index.html'
 
 files {
+  'locales/*.lua',
   'html/index.html',
   'html/style.css',
   'html/script.js',

html/index.html

@@ -4,6 +4,7 @@
 		<meta charset='UTF-8'>
 		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
 		<meta name='viewport' content='width=device-width, initial-scale=1.0'>
+		<title></title>
 
 		<script src='nui://game/ui/jquery.js'></script>
 		<script src='script.js'></script>
@@ -14,19 +15,19 @@
 		<div class='wrapper'>
 			<div class='container'>
 				<img class='radio-image' src='assets/radio.png'>
-				<div class='button-join radio-button' onclick='toggleRadio(true)' data-hint='Join to frequency'></div>
-				<div class='button-button-preset-set radio-button' onclick='setPreset()' data-hint='Set preset'></div>
+				<div class='button' id='join' onclick='toggleRadio(true)' tooltip='Join to frequency'></div>
+				<div class='button' id='preset_set' onclick='setPreset()' tooltip='Set preset'></div>
 
-				<div class='button-leave radio-button' onclick='toggleRadio()' data-hint='Turn off'></div>
-				<div class='button-volume-mute radio-button' onclick='changeVolume("mute")' data-hint='Mute'></div>
+				<div class='button' id='leave' onclick='toggleRadio()' tooltip='Turn off'></div>
+				<div class='button' id='volume_mute' onclick='changeVolume("mute")' tooltip='Mute'></div>
 
-				<div class='button-volume-up radio-button' onclick='changeVolume("up")' data-hint='Volume up'></div>
-				<div class='button-volume-down radio-button' onclick='changeVolume("down")' data-hint='Volume down'></div>
+				<div class='button' id='volume_up' onclick='changeVolume("up")' tooltip='Volume up'></div>
+				<div class='button' id='volume_down' onclick='changeVolume("down")' tooltip='Volume down'></div>
 
-				<div class='button-preset-one radio-button' onclick='presetChannel(1)' data-hint='Preset #1'></div>
-				<div class='button-preset-two radio-button' onclick='presetChannel(2)' data-hint='Preset #2'></div>
+				<div class='button' id='preset_one' onclick='presetChannel(1)' tooltip='Preset #1'></div>
+				<div class='button' id='preset_two' onclick='presetChannel(2)' tooltip='Preset #2'></div>
 
-				<div class='text-input'>
+				<div class='channel-input'>
 					<input id='radio-channel' type='number' value='' min='0.01' max ='1000' step='0.01' placeholder='1000'>
 				</div>
 			</div>

html/script.js

@@ -18,6 +18,10 @@ window.addEventListener('message', function(event) {
 			min: data.config.step,
 			step: data.config.step
 		});
+
+		for (const [key, value] of Object.entries(data.config.locales)) {
+			$(`#${key.slice(3)}`).attr('tooltip', value);
+		}
 	}
 });
 

html/style.css

@@ -28,7 +28,7 @@
 
 /* Action buttons */
 /* Top row */
-.button-join {
+#join {
 	/* background: blue;
 	opacity: .1; */
 
@@ -39,7 +39,7 @@
 	bottom: 30%;
 }
 
-.button-button-preset-set {
+#preset_set {
 	/* background: cyan;
 	opacity: .1; */
 
@@ -51,7 +51,7 @@
 }
 
 /* First column */
-.button-leave {
+#leave {
 	/* background: pink;
 	opacity: .1; */
 
@@ -62,7 +62,7 @@
 	bottom: 6.8%;
 }
 
-.button-volume-mute {
+#volume_mute {
 	/* background: purple;
 	opacity: .1; */
 
@@ -74,7 +74,7 @@
 }
 
 /* Middle column */
-.button-volume-up {
+#volume_up {
 	/* background: lime;
 	opacity: .1; */
 
@@ -85,7 +85,7 @@
 	bottom: 6.8%;
 }
 
-.button-volume-down {
+#volume_down {
 	/* background: green;
 	opacity: .1; */
 
@@ -97,7 +97,7 @@
 }
 
 /* Last buttons */
-.button-preset-one {
+#preset_one {
 	/* background: orange;
 	opacity: .1; */
 
@@ -108,7 +108,7 @@
 	bottom: 6.8%;
 }
 
-.button-preset-two {
+#preset_two {
 	/* background: red;
 	opacity: .1; */
 
@@ -122,15 +122,15 @@
 
 
 /* Input */
-.text-input {
+.channel-input {
 	position: absolute;
 	width: 48%;
 	height: 7.1%;
 	right: 28%;
 	bottom: 13.8%;
 }
 
-.text-input input {
+.channel-input input {
 	height: 100%;
 	width: 90%;
 	padding: 0;
@@ -146,16 +146,16 @@
 	font-size: 2rem;
 }
 
-.text-input input::placeholder {
+.channel-input input::placeholder {
 	color: #5b6938;
 }
 
 
 
 /* Button tooltips */
-.radio-button:before {
+.button:before {
 	position: absolute;
-	content: attr(data-hint);
+	content: attr(tooltip);
 	opacity: 0;
 
 	transition: all .3s;
@@ -165,13 +165,14 @@
 	font-weight: 600;
 	font-size: .8rem;
 	color: #2d2427;
+	white-space: nowrap;
 }
 
-.radio-button:hover:before {
+.button:hover:before {
 	opacity: 1;
 	background: #eee;
 }
 
-[data-hint]:not([data-dummy]):before {
+[tooltip]:not([dummy]):before {
 	pointer-events: none;
 }

locales/cs.lua

@@ -0,0 +1,31 @@
+return {
+	['ui_join'] = "Naladit frekvenci",
+	['ui_leave'] = 'Vypnout',
+	['ui_preset_set'] = "Nastavit předvolbu",
+	['ui_preset_one'] = "Předvolba #1",
+	['ui_preset_two'] = "Předvolba #2",
+	['ui_volume_mute'] = "Ztlumit",
+	['ui_volume_up'] = "Zvýšit hlasitost",
+	['ui_volume_down'] = "Snížit hlasitost",
+
+	['command_open'] = "Otevře rozhraní vysílačky",
+	['command_clear'] = "Smaže všechny uložené předvolby",
+	['keymap_open'] = "Otevřít vysílačku",
+
+	['channel_join'] = "Připojil ses na frekvenci %s MHz",
+	['channel_unavailable'] = "Tato frekvence je nedostupná",
+	['channel_disconnect'] = "Odpojil ses z vysílačky",
+
+	['volume_mute'] = "Vysílačka ztlumena",
+	['volume_unmute'] = "Vysílačka zapnuta",
+	['volume_up'] = "Hlasitost zvýšena na %s%%",
+	['volume_down'] = "Hlasitost snížena na %s%%",
+	['volume_max'] = "Dosažena maximální hlasitost",
+	['volume_min'] = "Dosažena minimální hlasitost",
+
+	['preset_not_found'] = "Nenalezena žádná uložená předvolba",
+	['preset_choose'] = "Vyber si předvoblu (1 nebo 2) pro uložení aktuální frekvence.",
+	['preset_invalid'] = "Neplatná frekvence",
+	['preset_set'] = "Nastavil jsi předvolbu na %s MHz",
+	['preset_clear'] = "Předvolby vysílačky smazány",
+}

locales/en.lua

@@ -0,0 +1,31 @@
+return {
+	['ui_join'] = "Join to frequency",
+	['ui_leave'] = 'Turn off',
+	['ui_preset_set'] = "Set preset",
+	['ui_preset_one'] = "Preset #1",
+	['ui_preset_two'] = "Preset #2",
+	['ui_volume_mute'] = "Mute",
+	['ui_volume_up'] = "Volume up",
+	['ui_volume_down'] = "Volume down",
+
+	['command_open'] = "Opens the radio UI",
+	['command_clear'] = "Clears all your frequency presets",
+	['keymap_open'] = "Open radio UI",
+
+	['channel_join'] = "Joined to frequency %s MHz",
+	['channel_unavailable'] = "This frequency is unavailable",
+	['channel_disconnect'] = "You've disconnected from the radio",
+
+	['volume_mute'] = "Radio muted",
+	['volume_unmute'] = "Radio unmuted",
+	['volume_up'] = "Volume increased to %s%%",
+	['volume_down'] = "Volume reduced to %s%%",
+	['volume_max'] = "Maximum volume reached",
+	['volume_min'] = "Minimum volume reached",
+
+	['preset_not_found'] = "No saved preset found",
+	['preset_choose'] = "Choose a preset (1 or 2) to save the current frequency on.",
+	['preset_invalid'] = "Invalid frequency",
+	['preset_set'] = "You've set the preset to %s MHz",
+	['preset_clear'] = "Radio presets cleared",
+}