Merge pull request #10 from codibez/development

[#10]: A long overdue update... HERE IT IS!!

* Use of the original font/style entitled `Chalet Comprimé`
* **FIXED:** variable `vehicleCheck` in the configuration file not being rendered correctly.
* Restricted to a single color customization option for the *current street*
* **ADDED:** A "dynamic" view option that places the HUD on a single line
* **ADDED:** A simpler way to manage the size of the overall HUD with the `scale` variable found in the new `configuration.lua` file.

**I highly recommend** removing your old `streetLabel` folder and perform a fresh installation of this script, as many files have been renamed and entirely removed. If you attempt to merge this update to an existing installation, you very well may run into issues.

client.lua

@@ -12,7 +12,7 @@ local directions = {
 }
 
 local veh = 0;
-local streetHash1, streetHash2, playerDirection;
+local hash1, hash2, heading;
 
 Citizen.CreateThread(function()
 
@@ -21,12 +21,11 @@ Citizen.CreateThread(function()
 
 	SendNUIMessage({
 		type = 'streetLabel:DATA',
-		border = config.border,
-		direction = config.direction,
-		zone = config.current,
-		street = config.crossing,
+    color = config.color,
 		offsetX = config.position.offsetX,
-		offsetY = config.position.offsetY
+		offsetY = config.position.offsetY,
+    scale = config.scale,
+    dynamic = config.dynamic
 	});
 
 	while true do
@@ -37,46 +36,48 @@ Citizen.CreateThread(function()
 		local zone = GetNameOfZone(coords.x, coords.y, coords.z);
 		local zoneLabel = GetLabelText(zone);
 
-		if(checkForVehicle == false or veh ~= 0) then 
+		if(config.vehicleCheck == false or veh ~= 0) then 
 			local var1, var2 = GetStreetNameAtCoord(coords.x, coords.y, coords.z, Citizen.ResultAsInteger(), Citizen.ResultAsInteger())
-			streetHash1 = GetStreetNameFromHashKey(var1);
-			streetHash2 = GetStreetNameFromHashKey(var2);
-			playerDirection = GetEntityHeading(PlayerPedId());
+			hash1 = GetStreetNameFromHashKey(var1);
+			hash2 = GetStreetNameFromHashKey(var2);
+			heading = GetEntityHeading(PlayerPedId());
 
 			for k, v in pairs(directions) do
-				if (math.abs(playerDirection - v) < 22.5) then
-					playerDirection = k;
+				if (math.abs(heading - v) < 22.5) then
+					heading = k;
 
-					if (playerDirection == 1) then
-						playerDirection = 'N';
+					if (heading == 1) then
+						heading = 'N';
 						break;
 					end
 
 					break;
 				end
 			end
 
-			local street2 = '';
-			if (streetHash2 == '') then
+			local street2;
+			if (hash2 == '') then
 				street2 = zoneLabel;
 			else
-				street2 = streetHash2..', '..zoneLabel;
+				street2 = hash2..', '..zoneLabel;
 			end
 
 			SendNUIMessage({
 				type = 'streetLabel:MSG',
 				active = true,
-				direction = playerDirection,
-				zone = streetHash1,
-				street = street2
+				direction = heading,
+				street = hash1,
+				zone = street2
 			});
 		else
 			SendNUIMessage({
 				type = 'streetLabel:MSG',
 				active = false
 			});
 		end
+
 		-- Wait for half a second.
 		Citizen.Wait(500);
+
 	end
 end)

configuration.lua

@@ -0,0 +1,15 @@
+config = {
+	-- Customization options
+	color = '#f0c850';
+
+	position = {
+		-- 0:100
+		offsetX = 17;
+		offsetY = 2.5; 
+	};
+
+  scale = 1.0;
+
+	vehicleCheck = false; -- Rather or not to display HUD when player(s) are inside a vehicle
+  dynamic = false;
+}

fxmanifest.lua

@@ -8,7 +8,7 @@ version '1.1.0'
 
 -- Client Scripts
 client_scripts {
-	'config.lua',
+	'configuration.lua',
 	'client.lua'
 }
 
@@ -17,5 +17,7 @@ ui_page('html/index.html')
 files({
 	'html/index.html',
 	'html/listener.js',
-	'html/style.css'
+	'html/styles.css',
+  'html/font-face.css',
+  'html/dynamic.css'
 })

html/dynamic.css

@@ -0,0 +1,36 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
+* { box-sizing: border-box; }
+body {
+  background: transparent;
+  color: rgb(255,255,255);
+  font-family: 'Roboto', sans-serif;
+  font-size: 24px;
+  height: 100vh; width: 100vw;
+  overflow: hidden;
+  position: relative;
+  text-shadow: 1px 1px 2px rgba(0,0,0,.8);
+}
+
+div#container {
+  position: absolute;
+
+  display: flex;
+  align-items: center;
+}
+
+section#compass {
+  margin: auto 5px;
+
+  display: flex;
+  align-items: center;
+}
+span.border {
+  transform: scaleY(1.5);
+}
+span.border:first-child, span#street{ margin-right: 3px; }
+span.border:last-child { margin-left: 3px; }
+
+span#direction { 
+  font-size: 28px;
+  font-weight: 500; /* Roboto - medium */
+}

html/index.html

@@ -2,27 +2,26 @@
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<meta name="viewport" content="width=device-width" />
 	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-	<title>Street Label</title>
-
-	<link rel="stylesheet" href="style.css" />	
+	<link rel="stylesheet" href="font-face.css" type="text/css" />
+  <link id="style" rel="stylesheet" href="styles.css" type="text/css" />	
 	<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
 	<script src="./listener.js" type="text/javascript"></script>
 </head>
 <body>
 	<div id="container">
-		<section>
-			<span id="border">|</span>
-			<h4 id="direction"></h4>
-			<span id="border">|</span>
+		<section id="compass">
+			<span class="border">|</span>
+			<span id="direction"></span>
+			<span class="border">|</span>
 		</section>
 
-		<div>
-			<p id="zone"></p>
-			<p id="street"></p>
-		</div>
+		<section id="vicinity">
+			<span id="zone"></span>
+			<span id="street"></span>
+		</section>
 	</div>
 </body>
 </html>

html/listener.js

@@ -3,56 +3,36 @@ window.onload = (e) => {
 };
 
 function onMessageRecieved(event){
-  let item = event.data;
+	let item = event.data;
 
 	if (item && item.type === 'streetLabel:MSG') {
-		if (!item.active) {
+    if (!item.active) {
 			$("#container").hide();
 		} else {
-      $("#container").show();
+			$("#container").show();
 
 			let direction	= item.direction;
-      let zone = item.zone;
-      let street = item.street;
+			let zone = item.zone;
+			let street = item.street;
 
 			$('#direction').text(direction);
-      $('#zone').text(zone);
-      $('#street').text(street);
+			$('#zone').text(zone);
+			$('#street').text(street);
 		}
-  }
+	} 
 
   if (item && item.type === 'streetLabel:DATA') {
-    let container = document.getElementById('container');
-
-    /* color customization */
-    let border = [item.border.r, item.border.g, item.border.b, item.border.a];
-    let borderDOM = document.querySelectorAll('#border');
-
-    let direction = [item.direction.r, item.direction.g, item.direction.b, item.direction.a];
-    let zone = [item.zone.r, item.zone.g, item.zone.b, item.zone.a];
-		let street = [item.street.r, item.street.g, item.street.b, item.street.a];
-
-    // jQuery #direction to proper color & font-size configuration
-    $('#direction').css('color', 'rgba('+direction.join(', ')+')');
-		$('#direction').css('font-size', item.direction.size + 'vw');
+      if (item.color) { $('#street').css('color', item.color); }
+      /* Position/Scale HUD according to configuration file */
+      if (item.offsetX) { container.style.left = item.offsetX + '%'; }
+      if (item.offsetY) { container.style.bottom = item.offsetY + '%'; }
+      if (item.scale) { container.style.transform = `scale(${item.scale})`; }
 
-    // jQuery #street to proper color & font-size configuration
-    $('#street').css('color', 'rgba('+street.join(', ')+')');
-    $('#street').css('font-size', item.street.size + 'vw');
-
-    // jQuery #zone to proper color & font-size configuration
-    $('#zone').css('color', 'rgba('+zone.join(', ')+')');
-		$('#zone').css('font-size', item.zone.size + 'vw');
-
-    for (let i=0; i < borderDOM.length; i++) {
-      borderDOM[i].style.color = 'rgba('+border.join(', ')+')';
-      borderDOM[i].style.fontSize = item.border.size + 'vw';
-    }
-
-    /* HUD position */
-    if (item.offsetX) { container.style.left = item.offsetX + '%' }
-    if (item.offsetY) { container.style.bottom = item.offsetY + '%' }
-
-    /* view */
+      /* Dynamic stylesheet control */
+      if (item.dynamic) {
+        document.getElementById('style').href = 'dynamic.css';
+      } else {
+        document.getElementById('style').href = 'styles.css';
+      }
 	}
 }