Feature: HUD Update

TrevorBarns · Mar 13, 2021 · b4f74c8 · b4f74c8
1 parent 3eb47a5
commit b4f74c8
Show file tree

Hide file tree

Showing 15 changed files with 54 additions and 41 deletions.
diff --git a/UI/cl_ragemenu.lua b/UI/cl_ragemenu.lua
@@ -315,7 +315,7 @@ Citizen.CreateThread(function()
 					HUD:SetMoveMode(true, true)
 				end,
 			  });		
-			RageUI.Slider('Scale', (HUD:GetHudScale()*4), 3, 0.2, "Change opacity of of the HUD background rectangle.", false, {}, hud_state, {
+			RageUI.Slider('Scale', (HUD:GetHudScale()*4), 6, 0.2, "Change opacity of of the HUD background rectangle.", false, {}, hud_state, {
 			  onSliderChange = function(Index)
 				HUD:SetHudScale(Index/4)
 			  end,

diff --git a/UI/html/index.html b/UI/html/index.html
@@ -3,22 +3,24 @@
 	    <link rel="stylesheet" href="style.css">
     </head>
 	<body>
-	<div id="sirenboxhud">
-		<div class="switch">
-		  <img src="../textures/lux_switch_1_hud.png" id="switch">
-		</div>		
-		<div class="button">
-		  <img src="../textures/lux_siren_off_hud.png" id="siren">
-		</div>		
-		<div class="button">
-		  <img src="../textures/lux_horn_off_hud.png" id="horn">
-		</div>		
-		<div class="button">
-		  <img src="../textures/lux_tkd_off_hud.png" id="tkd">
-		</div>	
-		<div class="button">
-		  <img src="../textures/lux_lock_off_hud.png" id="lock">
+	<div id="sirenbox">
+		<div id="buttonbox">
+			<div class="button">
+			  <img src="../textures/lux_siren_off.png" id="siren">
+			</div>		
+			<div class="button">
+			  <img src="../textures/lux_horn_off.png" id="horn">
+			</div>		
+			<div class="button">
+			  <img src="../textures/lux_tkd_off.png" id="tkd">
+			</div>	
+			<div class="button">
+			  <img src="../textures/lux_lock_off.png" id="lock">
+			</div>
 		</div>
+		<div class="slide">
+		  <img src="../textures/lux_slide_off.png" id="slide">
+		</div>		
 	</div>
 	  <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
 	  <script src="lvc.js" type="text/javascript"></script>

diff --git a/UI/html/lvc.js b/UI/html/lvc.js
@@ -10,13 +10,13 @@ var resourceName = "";
 var folder_prefix = "../textures/";
 var audioPlayer = null;
 var soundID = 0;
-var scale = 0.55;
+var scale = 0.6;
 var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
 
 const elements = 
 {
-	sirenbox: 	document.getElementById("sirenboxhud"),
-	lswitch: 	document.getElementById("switch"),
+	sirenbox: 	document.getElementById("sirenbox"),
+	lswitch: 	document.getElementById("slide"),
 	siren: 		document.getElementById("siren"),
 	horn: 		document.getElementById("horn"),
 	tkd: 		document.getElementById("tkd"),
@@ -44,44 +44,44 @@ window.addEventListener('message', function(event) {
 		switch ( item ){
 			case "hud":
 				if ( state == true ) {
-					elements.sirenbox.style.display = "grid";
+					elements.sirenbox.style.display = "inline";
 				}else{
 					elements.sirenbox.style.display = "none";
 				}
 				break;
 			case "switch":
 				if ( state == true ) {
-					elements.lswitch.src= folder_prefix +"lux_switch_3_hud.png";
+					elements.lswitch.src= folder_prefix +"lux_slide_on.png";
 				}else{
-					elements.lswitch.src= folder_prefix +"lux_switch_1_hud.png";					
+					elements.lswitch.src= folder_prefix +"lux_slide_off.png";					
 				}
 				break;
 			case "siren":
 				if ( state == true ) {
-					elements.siren.src= folder_prefix +"lux_siren_on_hud.png";
+					elements.siren.src= folder_prefix +"lux_siren_on.png";
 				}else{
-					elements.siren.src= folder_prefix +"lux_siren_off_hud.png";					
+					elements.siren.src= folder_prefix +"lux_siren_off.png";					
 				}			
 				break;
 			case "horn":
 				if ( state == true ) {
-					elements.horn.src= folder_prefix +"lux_horn_on_hud.png";					
+					elements.horn.src= folder_prefix +"lux_horn_on.png";					
 				}else{
-					elements.horn.src= folder_prefix +"lux_horn_off_hud.png";
+					elements.horn.src= folder_prefix +"lux_horn_off.png";
 				}				
 				break;
 			case "tkd":
 				if ( state == true ) {
-					elements.tkd.src= folder_prefix +"lux_tkd_on_hud.png";					
+					elements.tkd.src= folder_prefix +"lux_tkd_on.png";					
 				}else{
-					elements.tkd.src= folder_prefix +"lux_tkd_off_hud.png";
+					elements.tkd.src= folder_prefix +"lux_tkd_off.png";
 				}			
 				break;			
 			case "lock":
 				if ( state == true ) {
-					elements.lock.src= folder_prefix +"lux_lock_on_hud.png";					
+					elements.lock.src= folder_prefix +"lux_lock_on.png";					
 				}else{
-					elements.lock.src= folder_prefix +"lux_lock_off_hud.png";
+					elements.lock.src= folder_prefix +"lux_lock_off.png";
 				}				
 				break;
 			default:

diff --git a/UI/html/style.css b/UI/html/style.css
@@ -4,23 +4,34 @@ body {
     overflow: hidden;
 }
 
-.switch {
+.slide {
+	padding-top: 52px;
+	z-index: 950;
 }
 
 .button {
-	transform: scale( 0.9 );
+
 }
 
-#sirenboxhud {
+#buttonbox {
+	display: grid;
+	grid-template-areas: 'siren horn tkd lock';
 	position: absolute;
-    width: absolute;
-	left: 0%;
-	top: 70%;
+	float: right;
+	right: 2.5%;
+	top: 10%;
+	z-index: 900;
+}
+
+#sirenbox {
 	display: none;
-	float: left;
-	grid-template-areas: 'switch siren horn tkd lock';
-	transform: scale( 0.55 );
+	position: absolute;
+	overflow: hidden;
+	width: 625px;
+	height: 143px;
+	left: 0%;
+	top: 68%;
 	transform-origin: left top;
-	background-color: #141414;
-	padding: 0.15%;
+	transform: scale(0.6);
+	background-image: url("../textures/background.png");
 }
diff --git a/UI/textures/background.png b/UI/textures/background.png
diff --git a/UI/textures/lux_horn_off.png b/UI/textures/lux_horn_off.png
diff --git a/UI/textures/lux_horn_on.png b/UI/textures/lux_horn_on.png
diff --git a/UI/textures/lux_lock_off.png b/UI/textures/lux_lock_off.png
diff --git a/UI/textures/lux_lock_on.png b/UI/textures/lux_lock_on.png
diff --git a/UI/textures/lux_siren_off.png b/UI/textures/lux_siren_off.png
diff --git a/UI/textures/lux_siren_on.png b/UI/textures/lux_siren_on.png
diff --git a/UI/textures/lux_slide_off.png b/UI/textures/lux_slide_off.png
diff --git a/UI/textures/lux_slide_on.png b/UI/textures/lux_slide_on.png
diff --git a/UI/textures/lux_tkd_off.png b/UI/textures/lux_tkd_off.png
diff --git a/UI/textures/lux_tkd_on.png b/UI/textures/lux_tkd_on.png