Plate text colour change and reduced changePlate call

cl_radar.lua

@@ -106,10 +106,18 @@ READER.vars =
     }
 }
 
+function READER:GetPlate( cam )
+    return self.vars[cam].plate 
+end 
+
 function READER:SetPlate( cam, plate )
     self.vars.cams[cam].plate = plate 
 end 
 
+function READER:GetIndex( cam )
+    return self.vars[cam].index
+end 
+
 function READER:SetIndex( cam, index )
     self.vars.cams[cam].index = index 
 end 
@@ -139,6 +147,7 @@ function READER:Main()
 
                 local cam = self:GetCamFromNum( i )
 
+                if ( self:GetPlate( cam ) ~= plate ) then 
                     self:SetPlate( cam, plate )
                     self:SetIndex( cam, index )
 
@@ -147,6 +156,7 @@ function READER:Main()
             end 
         end 
     end 
+end 
 
 Citizen.CreateThread( function()
     while ( true ) do
@@ -156,6 +166,7 @@ Citizen.CreateThread( function()
     end 
 end )
 
+
 --[[----------------------------------------------------------------------------------
 	Radar variables
 

nui/radar.css

@@ -120,6 +120,14 @@ button:focus { outline: none; }
 		background-repeat: no-repeat;
     }
     
+.plate_blue {
+    color: rgb(0, 0, 163);
+}
+
+.plate_yellow {
+    color: rgb(255, 255, 0);
+}
+
 .arrow {
 	width: 11px;
 	height: 15.4px;
@@ -705,13 +713,13 @@ button:focus { outline: none; }
                 grid-template-columns: 1fr;
                 justify-content: center;
             }
-                #plateReader .plates .plate_container .text_container .text {
+                #plateReader .plates .plate_container .text_container p {
                     display: block;
                     font-family: "Plate-Font";
                     font-size: 58px;
                     text-align: center;
                     letter-spacing: -3px;
-                    color: rgb(0, 0, 163);
+                    /* color: rgb(0, 0, 163); */
                     padding-top: 5px;
                     margin: 0;
                     grid-column: 1;

nui/radar.html

@@ -176,11 +176,10 @@
                         <img id="frontPlate" class="plate" src="images/plates/0.png">
                         
                         <div id="frontPlateText" class="text_container">
-                            <!-- <p id="frontPlateText" class="text">46EEK872</p> -->
+                            <p id="frontPlateTextFill" class="plate_blue">46EEK872</p>
-                            <p class="text">46EEK872</p>
+                            <p class="hilite">46EEK872</p>
-                            <p class="text hilite">46EEK872</p>
+                            <p id="frontPlateTextLolite" class="lolite">46EEK872</p>
-                            <p class="text lolite">46EEK872</p>
+                            <p class="shadow">46EEK872</p>
-                            <p class="text shadow">46EEK872</p>
                         </div>
                     </div>
 
@@ -188,11 +187,10 @@
                         <img id="rearPlate" class="plate" src="images/plates/0.png">
 
                         <div id="rearPlateText" class="text_container">
-                            <!-- <p id="rearPlateText" class="text">46EEK872</p> -->
+                            <p id="rearPlateTextFill" class="plate_blue">46EEK872</p>
-                            <p class="text">46EEK872</p>
+                            <p class="hilite">46EEK872</p>
-                            <p class="text hilite">46EEK872</p>
+                            <p id="rearPlateTextLolite" class="lolite">46EEK872</p>
-                            <p class="text lolite">46EEK872</p>
+                            <p class="shadow">46EEK872</p>
-                            <p class="text shadow">46EEK872</p>
                         </div>
                     </div>
                 </div>

nui/radar.js

@@ -78,11 +78,15 @@ const elements =
     plates: {
         front: {
             text: $( "#frontPlateText" ),
+            fill: $( "#frontPlateTextFill" ),
+            lolite: $( "#frontPlateTextLolite" ),
             img: $( "#frontPlate" )
         },
 
         rear: {
             text: $( "#rearPlateText" ), 
+            fill: $( "#rearPlateTextFill" ), 
+            lolite: $( "#rearPlateTextLolite" ),
             img: $( "#rearPlate" )
         }
     },
@@ -249,9 +253,20 @@ function setAntennaDirs( ant, dir, fastDir )
 
 function setPlate( cam, plate, index )
 {
-    elements.plates[cam].img.attr( "src", "images/plates/" + index + ".png" );
+    // Get the plate items
+    let pl = elements.plates[cam]; 
 
-    elements.plates[cam].text.find( "p" ).each( function( i, obj ) {
+    // Change the plate image 
+    pl.img.attr( "src", "images/plates/" + index + ".png" );
+
+    // Change the plate text colour depending on the plate itself
+    ( index == 1 || index == 2 ) ? pl.fill.removeClass( "plate_blue" ).addClass( "plate_yellow" ) : pl.fill.removeClass( "plate_yellow" ).addClass( "plate_blue" ); 
+    
+    // If the plate is black or blue then we hide the lolite effect 
+    ( index == 1 || index == 2 ) ? pl.lolite.hide() : pl.lolite.show(); 
+
+    // Update all of the p elements with the new plate 
+    pl.text.find( "p" ).each( function( i, obj ) {
         $( this ).html( plate );
     } );
 }