From bf2230cf238d2ef25db7a61bab81ec81f03ca84b Mon Sep 17 00:00:00 2001
From: Dan <WolfKnight98@users.noreply.github.com>
Date: Tue, 28 Jan 2020 09:46:16 +0000
Subject: [PATCH] Plate text colour change and reduced changePlate call

---
 cl_radar.lua   | 17 ++++++++++++++---
 nui/radar.css  | 14 +++++++++++---
 nui/radar.html | 18 ++++++++----------
 nui/radar.js   | 19 +++++++++++++++++--
 4 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/cl_radar.lua b/cl_radar.lua
index 99bbb73..600765d 100644
--- a/cl_radar.lua
+++ b/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,10 +147,12 @@ function READER:Main()
 
                 local cam = self:GetCamFromNum( i )
 
-                self:SetPlate( cam, plate )
-                self:SetIndex( cam, index )
+                if ( self:GetPlate( cam ) ~= plate ) then 
+                    self:SetPlate( cam, plate )
+                    self:SetIndex( cam, index )
 
-                SendNUIMessage( { _type = "changePlate", cam = cam, plate = plate, index = index } )
+                    SendNUIMessage( { _type = "changePlate", cam = cam, plate = plate, index = index } )
+                end 
             end 
         end 
     end 
@@ -156,6 +166,7 @@ Citizen.CreateThread( function()
     end 
 end )
 
+
 --[[----------------------------------------------------------------------------------
 	Radar variables
 
diff --git a/nui/radar.css b/nui/radar.css
index 7954015..5feb0a4 100644
--- a/nui/radar.css
+++ b/nui/radar.css
@@ -118,7 +118,15 @@ button:focus { outline: none; }
 		transform: translateX( -1px ); 
 		background-image: url( "images/bg_right.png" );
 		background-repeat: no-repeat;
-	}
+    }
+    
+.plate_blue {
+    color: rgb(0, 0, 163);
+}
+
+.plate_yellow {
+    color: rgb(255, 255, 0);
+}
 
 .arrow {
 	width: 11px;
@@ -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;
diff --git a/nui/radar.html b/nui/radar.html
index b2ece13..4952054 100644
--- a/nui/radar.html
+++ b/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 class="text">46EEK872</p>
-                            <p class="text hilite">46EEK872</p>
-                            <p class="text lolite">46EEK872</p>
-                            <p class="text shadow">46EEK872</p>
+                            <p id="frontPlateTextFill" class="plate_blue">46EEK872</p>
+                            <p class="hilite">46EEK872</p>
+                            <p id="frontPlateTextLolite" class="lolite">46EEK872</p>
+                            <p class="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 class="text">46EEK872</p>
-                            <p class="text hilite">46EEK872</p>
-                            <p class="text lolite">46EEK872</p>
-                            <p class="text shadow">46EEK872</p>
+                            <p id="rearPlateTextFill" class="plate_blue">46EEK872</p>
+                            <p class="hilite">46EEK872</p>
+                            <p id="rearPlateTextLolite" class="lolite">46EEK872</p>
+                            <p class="shadow">46EEK872</p>
                         </div>
                     </div>
                 </div>
diff --git a/nui/radar.js b/nui/radar.js
index 37883a5..f60c06d 100644
--- a/nui/radar.js
+++ b/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 );
     } );
 }