Merge pull request #6 from codibez/development

v1.0.0

README.md

@@ -1,24 +1,29 @@
 # streetLabel
-streetLabel adds a hud much like **[Player Location Display](https://www.gta5-mods.com/scripts/player-location-display-v3-50)** by **LtCaine**.
+streetLabel adds a slick UI on the bottom of your players display showing various information about their location on the HUD. This mod was inspired by **[Lt. Caine](https://www.gta5-mods.com/users/LtCine)**'s most popular client side mod known as **[Player Location Display](https://www.gta5-mods.com/scripts/player-location-display-v3-50)**.
+
+### Preview
+![streetlabel-preview](https://i.imgur.com/0B7OxoA.png)
 
 ### Features
-- Configuration file to change colors and position of each hud element.
-- Ability to set hud to show *only when* players are in a vehicle.
+- The left most portion of this mod will display the direction the player is currently facing.
+- The top line of text will display the name of the street the player is currently on.
+- The bottom line will show the name of the street around the player or city/town.
+- Many customizable configuration options to customize the HUD to your liking, including colors & `vehicleCheck`
 
 ## Download & Installation
 
 ### Using Git
 ```
-cd resources
+cd server-data/resources/
 git clone https://github.com/lowheartrate/streetLabel
 ```
 
 ### Manually
-- Download and insert `streetLabel` folder into your **/server-data/resources/** directory.
+- Download the most recent `.zip` file/archive from the **[releases](https://github.com/codibez/streetLabel/releases)** page.
+- Extract the contents to your `server-data/resources/` directory.
 
 ## Installation
-- Add this to your `server.cfg`:
-
+- Ensure you've added the following to your `server.cfg` file:
 ```
 start streetLabel
 ```

client.lua

@@ -0,0 +1,82 @@
+-- Variables
+local directions = {
+  N = 360, 0,
+  NE = 315,
+  E = 270,
+  SE = 225,
+  S = 180,
+  SW = 135,
+  W = 90,
+  NW = 45
+  --  N = 0, <= will result in the HUD breaking above 315deg
+}
+
+local veh = 0;
+local streetHash1, streetHash2, playerDirection;
+
+Citizen.CreateThread(function()
+
+	-- Wait a single second before sending data NUI message :? 
+	Citizen.Wait(1000);
+
+	SendNUIMessage({
+		type = 'streetLabel:DATA',
+		border = config.border,
+		direction = config.direction,
+		zone = config.current,
+		street = config.crossing,
+		offsetX = config.position.offsetX,
+		offsetY = config.position.offsetY
+	});
+
+	while true do
+		local ped = GetPlayerPed(-1);
+		local veh = GetVehiclePedIsIn(ped, false);
+
+		local coords = GetEntityCoords(PlayerPedId());
+		local zone = GetNameOfZone(coords.x, coords.y, coords.z);
+		local zoneLabel = GetLabelText(zone);
+
+		if(checkForVehicle == 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());
+
+			for k, v in pairs(directions) do
+				if (math.abs(playerDirection - v) < 22.5) then
+					playerDirection = k;
+
+					if (playerDirection == 1) then
+						playerDirection = 'N';
+						break;
+					end
+
+					break;
+				end
+			end
+
+			local street2 = '';
+			if (streetHash2 == '') then
+				street2 = zoneLabel;
+			else
+				street2 = streetHash2..', '..zoneLabel;
+			end
+
+			SendNUIMessage({
+				type = 'streetLabel:MSG',
+				active = true,
+				direction = playerDirection,
+				zone = streetHash1,
+				street = street2
+			});
+		else
+			SendNUIMessage({
+				type = 'streetLabel:MSG',
+				active = false
+			});
+		end
+		-- Wait for half a second.
+		Citizen.Wait(500);
+	end
+end)

config.lua

@@ -0,0 +1,42 @@
+config = {
+	-- Customization options
+	border = {
+		r = 255;
+		g = 255;
+		b = 255;
+		a = 0.65;
+		size = 4;
+	};
+
+	current = {
+		r = 255;
+		g = 255;
+		b = 255;
+		a = 0.9;
+		size = 1.45;
+	};
+
+	crossing = {
+		r = 240;
+		g = 220;
+		b = 80;
+		a = 0.9;
+		size = 2;
+	};
+
+	direction = {
+		r = 240;
+		g = 220;
+		b = 80;
+		a = 0.9;
+		size = 3.5;
+	};
+
+	position = {
+		-- 0:100
+		offsetX = 17;
+		offsetY = 2.5; 
+	};
+
+	vehicleCheck = true; -- Rather or not to display HUD when player(s) are inside a vehicle
+}

fxmanifest.lua

@@ -0,0 +1,21 @@
+-- Script Description
+fx_version 'cerulean'
+games { 'gta5' }
+
+author 'lowheartrate & Slyforn'
+description 'Street Label by lowheartrate'
+version '1.1.0'
+
+-- Client Scripts
+client_scripts {
+	'config.lua',
+	'client.lua'
+}
+
+ui_page('html/index.html')
+
+files({
+	'html/index.html',
+	'html/listener.js',
+	'html/style.css'
+})

html/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+
+	<title>Street Label</title>
+
+	<link rel="stylesheet" href="style.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>
+
+		<div>
+			<p id="zone"></p>
+			<p id="street"></p>
+		</div>
+	</div>
+</body>
+</html>

html/listener.js

@@ -0,0 +1,58 @@
+window.onload = (e) => {
+  window.addEventListener('message', onMessageRecieved);
+};
+
+function onMessageRecieved(event){
+  let item = event.data;
+
+	if (item && item.type === 'streetLabel:MSG') {
+		if (!item.active) {
+			$("#container").hide();
+		} else {
+      $("#container").show();
+
+			let direction	= item.direction;
+      let zone = item.zone;
+      let street = item.street;
+
+			$('#direction').text(direction);
+      $('#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');
+
+    // 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 */
+	}
+}

html/style.css

@@ -0,0 +1,37 @@
+/* googleFonts */
+@import url('https://fonts.googleapis.com/css2?family=Archivo&display=swap');
+
+/* General styling */
+* {
+	box-sizing: border-box;
+	font-family: 'Archivo', sans-serif;
+	margin: 0; padding: 0;
+}
+
+#container {
+	align-items: center;
+	color: rgb(241, 235, 235);
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	padding: 0 10px;
+	position: absolute;
+}
+
+#container > section {
+	align-items: center;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+
+#container > div {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+#direction, #zone, #street {
+	text-shadow: 2px 2px 3px rgba(0,0,0,0.45);
+	margin: 0 5px;
+}