diff --git a/nui/radar.css b/nui/radar.css index af18424..07c44d3 100644 --- a/nui/radar.css +++ b/nui/radar.css @@ -719,6 +719,16 @@ button:focus { outline: none; } color: rgb( 100, 100, 100 ); } +.plate_hit { + animation: plate_flash linear 0.75s infinite; +} + +@keyframes plate_flash { + 0% { opacity: 1.0; } + 50% { opacity: 0.0; } + 100% { opacity: 1.0; } +} + #plateReaderBox { width: 225px; height: 300px; diff --git a/nui/radar.html b/nui/radar.html index 0fbe564..bec5011 100644 --- a/nui/radar.html +++ b/nui/radar.html @@ -172,8 +172,8 @@
-
- +
+

@@ -183,8 +183,8 @@
-
- +
+

diff --git a/nui/radar.js b/nui/radar.js index 7e3ae9d..073021f 100644 --- a/nui/radar.js +++ b/nui/radar.js @@ -92,18 +92,20 @@ const elements = plates: { front: { + plate: $( "#frontPlate" ), text: $( "#frontPlateText" ), fill: $( "#frontPlateTextFill" ), lolite: $( "#frontPlateTextLolite" ), - img: $( "#frontPlate" ), + img: $( "#frontPlateImg" ), lock: $( "#frontPlateLock" ) }, rear: { + plate: $( "#rearPlate" ), text: $( "#rearPlateText" ), fill: $( "#rearPlateTextFill" ), lolite: $( "#rearPlateTextLolite" ), - img: $( "#rearPlate" ), + img: $( "#rearPlateImg" ), lock: $( "#rearPlateLock" ) } }, @@ -305,13 +307,20 @@ function setAntennaDirs( ant, dir, fastDir ) function setPlateLock( cam, state ) { // Get the plate reader lock object - let obj = elements.plates[cam].lock; + let obj = elements.plates[cam]; // Add or remove the active class if ( state ) { - obj.addClass( "active" ); + obj.lock.addClass( "active" ); + + // Make the hit plate flash for 3 seconds, acts as a visual aid + obj.plate.addClass( "plate_hit" ); + + setTimeout( function() { + obj.plate.removeClass( "plate_hit" ); + }, 3000 ); } else { - obj.removeClass( "active" ); + obj.lock.removeClass( "active" ); } }