Michatec/wk_wars2x
1
1
Fork 0
mirror of https://github.com/Michatec/wk_wars2x.git synced 2026-04-01 00:16:27 +02:00
Code Issues Packages Projects Releases Activity

BOLO hits now make the plate flash for 3 seconds

Browse Source
This commit is contained in:
Dan
2020-02-22 11:21:42 +00:00
parent 16c59802fc
commit ab479eb3f3
3 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
nui/radar.css
View File

@@ -719,6 +719,16 @@ button:focus { outline: none; }
color: rgb( 100, 100, 100 ); 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 { #plateReaderBox {
width: 225px; width: 225px;
height: 300px; height: 300px;

8
nui/radar.html
View File

@@ -172,8 +172,8 @@
</div> </div>
<div class="plates"> <div class="plates">
<div class="plate_container"> <div id="frontPlate" class="plate_container">
<img id="frontPlate" class="plate" src="images/plates/0.png"> <img id="frontPlateImg" class="plate" src="images/plates/0.png">
<div id="frontPlateText" class="text_container"> <div id="frontPlateText" class="text_container">
<p id="frontPlateTextFill" class="plate_blue"></p> <p id="frontPlateTextFill" class="plate_blue"></p>
@@ -183,8 +183,8 @@
</div> </div>
</div> </div>
<div class="plate_container"> <div id="rearPlate" class="plate_container">
<img id="rearPlate" class="plate" src="images/plates/0.png"> <img id="rearPlateImg" class="plate" src="images/plates/0.png">
<div id="rearPlateText" class="text_container"> <div id="rearPlateText" class="text_container">
<p id="rearPlateTextFill" class="plate_blue"></p> <p id="rearPlateTextFill" class="plate_blue"></p>

19
nui/radar.js
View File

@@ -92,18 +92,20 @@ const elements =
plates: { plates: {
front: { front: {
plate: $( "#frontPlate" ),
text: $( "#frontPlateText" ), text: $( "#frontPlateText" ),
fill: $( "#frontPlateTextFill" ), fill: $( "#frontPlateTextFill" ),
lolite: $( "#frontPlateTextLolite" ), lolite: $( "#frontPlateTextLolite" ),
img: $( "#frontPlate" ), img: $( "#frontPlateImg" ),
lock: $( "#frontPlateLock" ) lock: $( "#frontPlateLock" )
}, },
rear: { rear: {
plate: $( "#rearPlate" ),
text: $( "#rearPlateText" ), text: $( "#rearPlateText" ),
fill: $( "#rearPlateTextFill" ), fill: $( "#rearPlateTextFill" ),
lolite: $( "#rearPlateTextLolite" ), lolite: $( "#rearPlateTextLolite" ),
img: $( "#rearPlate" ), img: $( "#rearPlateImg" ),
lock: $( "#rearPlateLock" ) lock: $( "#rearPlateLock" )
} }
}, },
@@ -305,13 +307,20 @@ function setAntennaDirs( ant, dir, fastDir )
function setPlateLock( cam, state ) function setPlateLock( cam, state )
{ {
// Get the plate reader lock object // Get the plate reader lock object
let obj = elements.plates[cam].lock; let obj = elements.plates[cam];
// Add or remove the active class // Add or remove the active class
if ( state ) { 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 { } else {
obj.removeClass( "active" ); obj.lock.removeClass( "active" );
} }
} }