mirror of
https://github.com/Michatec/wk_wars2x.git
synced 2026-04-01 08:26:27 +02:00
Init
This commit is contained in:
Dan
BIN
nui/digital-7.regular.ttf
Normal file
BIN
nui/digital-7.regular.ttf
Normal file
Binary file not shown.
302
nui/radar.css
Normal file
302
nui/radar.css
Normal file
@@ -0,0 +1,302 @@
|
||||
/*-------------------------------------------------------------------------
|
||||
|
||||
Wraith Radar System - v1.0.3
|
||||
Created by WolfKnight
|
||||
|
||||
Just a word of warning, I'm not the best at CSS structure, so this
|
||||
could probably be 10x better, but fuck it.
|
||||
|
||||
-------------------------------------------------------------------------*/
|
||||
|
||||
@font-face {
|
||||
font-family: "Digital-7";
|
||||
src: url( "digital-7.regular.ttf" );
|
||||
}
|
||||
|
||||
/* Police Radar */
|
||||
#policeradar {
|
||||
/* To change the scale of the radar, change the value in the 'scale' function below.
|
||||
Examples:
|
||||
- 1.0 = default size
|
||||
- 2.0 = twice the original size
|
||||
- 0.5 = half the original size */
|
||||
transform: scale( 2.0 );
|
||||
|
||||
width: 495px;
|
||||
height: 202px;
|
||||
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
bottom: 10px;
|
||||
|
||||
/* Below is the configuration for whether you want the radar in the bottom right
|
||||
hand corner, or the bottom middle. */
|
||||
|
||||
/* Bottom right */
|
||||
right: 10px;
|
||||
|
||||
/* Bottom middle */
|
||||
/*right: 0;
|
||||
left: 0; */
|
||||
|
||||
color: white;
|
||||
background: rgba( 20, 20, 20, 0.97 );
|
||||
background: linear-gradient( to bottom, rgb( 50, 50, 50 ), rgb( 25, 25, 25 ) );
|
||||
border-radius: 10px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
#policeradar .antennalabel {
|
||||
font-family: Verdana;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#policeradar .antennalabeltop {
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
#policeradar .antennalabelbottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#policeradar .logo {
|
||||
font-family: Verdana;
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
bottom: 15px;
|
||||
right: 20px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#policeradar .main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#policeradar .patrolcontainer {
|
||||
background-color: black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#policeradar .typecontainer {
|
||||
background-color: black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 0;
|
||||
}
|
||||
#policeradar .typecontainer .text {
|
||||
font-family: Verdana;
|
||||
font-size: 10px;
|
||||
line-height: 27px;
|
||||
margin-left: 13px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#policeradar .typecontainer .active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#policeradar .container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
justify-content: space-around;
|
||||
}
|
||||
#policeradar .container .label {
|
||||
font-family: Verdana;
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#policeradar .container .speedsourcecontainer {
|
||||
width: 135px;
|
||||
height: 58px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
#policeradar .container .speedsourcecontainer .speednumber {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#policeradar .container .speedsourcecontainer .text {
|
||||
font-family: "Digital-7";
|
||||
font-size: 58px;
|
||||
line-height: 58px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#policeradar .container .target {
|
||||
background: rgb( 200, 0, 0 );
|
||||
background: linear-gradient( to bottom, rgb( 220, 0, 40 ), rgb( 90, 0, 0 ) );
|
||||
}
|
||||
|
||||
#policeradar .container .patrol {
|
||||
background: rgb( 0, 125, 0 );
|
||||
background: linear-gradient( to bottom, rgb( 0, 150, 0 ), rgb( 0, 75, 0 ) );
|
||||
}
|
||||
|
||||
#policeradar .container .locked {
|
||||
color: rgb( 50, 0, 0 );
|
||||
}
|
||||
|
||||
#policeradar .container .speedfastcontainer {
|
||||
width: 99px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
#policeradar .container .speedfastcontainer .speednumber {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#policeradar .container .speedfastcontainer .text {
|
||||
font-family: "Digital-7";
|
||||
font-size: 50px;
|
||||
line-height: 50px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#policeradar .arrowbox {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#policeradar .arrowbox i {
|
||||
font-size: 20px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#policeradar .arrowbox .active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#policeradar .arrowbox .inactive {
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
/* Police Radar - Remote Control */
|
||||
#policeradarrc {
|
||||
width: 290px;
|
||||
height: 380px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
padding: 10px 5px;
|
||||
|
||||
color: white;
|
||||
background-color: rgba( 20, 20, 20, 0.95 );
|
||||
border-radius: 5px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#policeradarrc .breakline {
|
||||
width: 230px;
|
||||
height: 10px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#policeradarrc .label {
|
||||
font-family: Verdana;
|
||||
}
|
||||
|
||||
#policeradarrc .container {
|
||||
font-family: Verdana;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#policeradarrc .container button {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#policeradarrc .container button:hover {
|
||||
background-color: #6cd3f9;
|
||||
}
|
||||
|
||||
#policeradarrc .container button:active {
|
||||
background-color: #56a8c7;
|
||||
}
|
||||
|
||||
#policeradarrc .container .toggle {
|
||||
padding: 5px 15px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: black;
|
||||
background-color: white;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#policeradarrc .container .limit {
|
||||
padding: 5px 15px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: black;
|
||||
background-color: white;
|
||||
border-radius: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#policeradarrc .container .close {
|
||||
padding: 3px 7px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#policeradarrc .container .rowbutton {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
#policeradarrc .container .frontopp {
|
||||
border-top-left-radius: 50%;
|
||||
}
|
||||
|
||||
#policeradarrc .container .frontsame {
|
||||
border-top-right-radius: 50%;
|
||||
}
|
||||
|
||||
#policeradarrc .container .rearopp {
|
||||
border-bottom-left-radius: 50%;
|
||||
}
|
||||
|
||||
#policeradarrc .container .rearsame {
|
||||
border-bottom-right-radius: 50%;
|
||||
}
|
||||
158
nui/radar.html
Normal file
158
nui/radar.html
Normal file
@@ -0,0 +1,158 @@
|
||||
<!--
|
||||
|
||||
Wraith Radar System - v1.0.3
|
||||
Created by WolfKnight
|
||||
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
||||
<script src="radar.js" type="text/javascript"></script>
|
||||
<link href="radar.css" rel="stylesheet" type="text/css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
</head>
|
||||
|
||||
<body onselectstart="return false;" ondragstart="return false;">
|
||||
<!-- Police Radar -->
|
||||
<div id="policeradar" style="display: none;">
|
||||
<div class="antennalabel antennalabeltop">Front Antenna</div>
|
||||
|
||||
<div class="logo">WraithRS</div>
|
||||
|
||||
<div class="main">
|
||||
<div class="container">
|
||||
<div class="typecontainer">
|
||||
<div class="text"><span class="fwdsame">SAME</span></div>
|
||||
<div class="text"><span class="fwdopp">OPP</span></div>
|
||||
<div class="text"><span class="fwdxmit">XMIT</span></div>
|
||||
</div>
|
||||
|
||||
<div class="typecontainer">
|
||||
<div class="text"><span class="bwdsame">SAME</span></div>
|
||||
<div class="text"><span class="bwdopp">OPP</span></div>
|
||||
<div class="text"><span class="bwdxmit">XMIT</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="patrolcontainer">
|
||||
<div class="speedsourcecontainer target" data-target="fwdspeed">
|
||||
<div class="speednumber text"></div>
|
||||
<div class="speednumber text"></div>
|
||||
<div class="speednumber text"></div>
|
||||
</div>
|
||||
|
||||
<div class="label">FWD</div>
|
||||
</div>
|
||||
|
||||
<div class="patrolcontainer">
|
||||
<div class="speedsourcecontainer target" data-target="bwdspeed">
|
||||
<div class="speednumber text"></div>
|
||||
<div class="speednumber text"></div>
|
||||
<div class="speednumber text"></div>
|
||||
</div>
|
||||
|
||||
<div class="label">BWD</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="width: 5px;">
|
||||
<div class="arrowbox">
|
||||
<i class="fa fa-arrow-up fwdarrowfront"></i>
|
||||
<i class="fa fa-arrow-down fwdarrowback"></i>
|
||||
</div>
|
||||
|
||||
<div class="arrowbox">
|
||||
<i class="fa fa-arrow-up bwdarrowfront"></i>
|
||||
<i class="fa fa-arrow-down bwdarrowback"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="patrolcontainer" style="margin-top: 20px;">
|
||||
<div class="speedfastcontainer target" data-target="fwdfast">
|
||||
<div class="speednumber text"></div>
|
||||
<div class="speednumber text"></div>
|
||||
<div class="speednumber text"></div>
|
||||
</div>
|
||||
|
||||
<div class="label">FWD FAST</div>
|
||||
</div>
|
||||
|
||||
<div class="patrolcontainer" style="margin-bottom: 20px;">
|
||||
<div class="speedfastcontainer target" data-target="bwdfast">
|
||||
<div class="speednumber text"></div>
|
||||
<div class="speednumber text"></div>
|
||||
<div class="speednumber text"></div>
|
||||
</div>
|
||||
|
||||
<div class="label">BWD FAST</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="patrolcontainer">
|
||||
<div class="speedfastcontainer patrol" data-target="patrolspeed">
|
||||
<div class="speednumber text"></div>
|
||||
<div class="speednumber text"></div>
|
||||
<div class="speednumber text"></div>
|
||||
</div>
|
||||
|
||||
<div class="label">PATROL SPEED</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="antennalabel antennalabelbottom">Rear Antenna</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Police Radar - Remote control -->
|
||||
<div id="policeradarrc" style="display: none;">
|
||||
<div class="container">
|
||||
<button class="toggle" data-action="radar_toggle">TOGGLE RADAR</button>
|
||||
</div>
|
||||
|
||||
<div class="label">FRONT ANTENNA</div>
|
||||
|
||||
<div class="container">
|
||||
<button class="rowbutton frontopp" data-action="radar_frontopp">OPP</button>
|
||||
<button class="rowbutton frontxmit" data-action="radar_frontxmit">XMIT</button>
|
||||
<button class="rowbutton frontsame" data-action="radar_frontsame">SAME</button>
|
||||
</div>
|
||||
|
||||
<div class="breakline"></div>
|
||||
|
||||
<div class="container">
|
||||
<button class="rowbutton rearopp" data-action="radar_rearopp">OPP</button>
|
||||
<button class="rowbutton rearxmit" data-action="radar_rearxmit">XMIT</button>
|
||||
<button class="rowbutton rearsame" data-action="radar_rearsame">SAME</button>
|
||||
</div>
|
||||
|
||||
<div class="label">REAR ANTENNA</div>
|
||||
|
||||
<div class="container">
|
||||
<button class="limit" data-action="radar_setlimit">SET FAST LIMIT</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<button class="limit" data-action="radar_speedtype" style="margin-top: 0px;">TOGGLE SPEED TYPE</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<button class="limit" data-action="radar_lockbeep" style="margin-top: 0px;">TOGGLE LOCK BEEP</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<button class="close" data-action="close">CLOSE</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Police Radar - Set Fast Limit Numpad -->
|
||||
<div id="policeradarnumpad" style="display: none;">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
197
nui/radar.js
Normal file
197
nui/radar.js
Normal file
@@ -0,0 +1,197 @@
|
||||
/*-------------------------------------------------------------------------
|
||||
|
||||
Wraith Radar System - v1.0.3
|
||||
Created by WolfKnight
|
||||
|
||||
-------------------------------------------------------------------------*/
|
||||
|
||||
var resourceName = "";
|
||||
var radarEnabled = false;
|
||||
var targets = [];
|
||||
|
||||
$( function() {
|
||||
radarInit();
|
||||
|
||||
var radarContainer = $( "#policeradar" );
|
||||
|
||||
var fwdArrowFront = radarContainer.find( ".fwdarrowfront" );
|
||||
var fwdArrowBack = radarContainer.find( ".fwdarrowback" );
|
||||
var bwdArrowFront = radarContainer.find( ".bwdarrowfront" );
|
||||
var bwdArrowBack = radarContainer.find( ".bwdarrowback" );
|
||||
|
||||
var fwdSame = radarContainer.find( ".fwdsame" );
|
||||
var fwdOpp = radarContainer.find( ".fwdopp" );
|
||||
var fwdXmit = radarContainer.find( ".fwdxmit" );
|
||||
|
||||
var bwdSame = radarContainer.find( ".bwdsame" );
|
||||
var bwdOpp = radarContainer.find( ".bwdopp" );
|
||||
var bwdXmit = radarContainer.find( ".bwdxmit" );
|
||||
|
||||
var radarRCContainer = $( "#policeradarrc" );
|
||||
|
||||
window.addEventListener( 'message', function( event ) {
|
||||
var item = event.data;
|
||||
|
||||
// change this to a switch/case instead of multiple if statements
|
||||
if ( item.resourcename ) {
|
||||
resourceName = item.resourcename;
|
||||
}
|
||||
|
||||
if ( item.toggleradar ) {
|
||||
radarEnabled = !radarEnabled;
|
||||
radarContainer.fadeToggle();
|
||||
}
|
||||
|
||||
if ( item.hideradar ) {
|
||||
radarContainer.fadeOut();
|
||||
} else if ( item.hideradar == false ) {
|
||||
radarContainer.fadeIn();
|
||||
}
|
||||
|
||||
if ( item.patrolspeed ) {
|
||||
updateSpeed( "patrolspeed", item.patrolspeed );
|
||||
}
|
||||
|
||||
if ( item.fwdspeed ) {
|
||||
updateSpeed( "fwdspeed", item.fwdspeed );
|
||||
}
|
||||
|
||||
if ( item.fwdfast ) {
|
||||
updateSpeed( "fwdfast", item.fwdfast );
|
||||
}
|
||||
|
||||
if ( item.lockfwdfast == true || item.lockfwdfast == false ) {
|
||||
lockSpeed( "fwdfast", item.lockfwdfast )
|
||||
}
|
||||
|
||||
if ( item.bwdspeed ) {
|
||||
updateSpeed( "bwdspeed", item.bwdspeed );
|
||||
}
|
||||
|
||||
if ( item.bwdfast ) {
|
||||
updateSpeed( "bwdfast", item.bwdfast );
|
||||
}
|
||||
|
||||
if ( item.lockbwdfast == true || item.lockbwdfast == false ) {
|
||||
lockSpeed( "bwdfast", item.lockbwdfast )
|
||||
}
|
||||
|
||||
if ( item.fwddir || item.fwddir == false || item.fwddir == null ) {
|
||||
updateArrowDir( fwdArrowFront, fwdArrowBack, item.fwddir )
|
||||
}
|
||||
|
||||
if ( item.bwddir || item.bwddir == false || item.bwddir == null ) {
|
||||
updateArrowDir( bwdArrowFront, bwdArrowBack, item.bwddir )
|
||||
}
|
||||
|
||||
if ( item.fwdxmit ) {
|
||||
fwdXmit.addClass( "active" );
|
||||
} else if ( item.fwdxmit == false ) {
|
||||
fwdXmit.removeClass( "active" );
|
||||
}
|
||||
|
||||
if ( item.bwdxmit ) {
|
||||
bwdXmit.addClass( "active" );
|
||||
} else if ( item.bwdxmit == false ) {
|
||||
bwdXmit.removeClass( "active" );
|
||||
}
|
||||
|
||||
if ( item.fwdmode ) {
|
||||
modeSwitch( fwdSame, fwdOpp, item.fwdmode );
|
||||
}
|
||||
|
||||
if ( item.bwdmode ) {
|
||||
modeSwitch( bwdSame, bwdOpp, item.bwdmode );
|
||||
}
|
||||
|
||||
if ( item.toggleradarrc ) {
|
||||
radarRCContainer.toggle();
|
||||
}
|
||||
} );
|
||||
} )
|
||||
|
||||
function radarInit() {
|
||||
$( '.container' ).each( function( i, obj ) {
|
||||
$( this ).find( '[data-target]' ).each( function( subi, subobj ) {
|
||||
targets[ $( this ).attr( "data-target" ) ] = $( this )
|
||||
} )
|
||||
} );
|
||||
|
||||
$( "#policeradarrc" ).find( "button" ).each( function( i, obj ) {
|
||||
if ( $( this ).attr( "data-action" ) ) {
|
||||
$( this ).click( function() {
|
||||
var data = $( this ).data( "action" );
|
||||
|
||||
sendData( "RadarRC", data );
|
||||
} )
|
||||
}
|
||||
} );
|
||||
|
||||
/* With the new scaling option in the css file, it can cause the radar to go off the screen if
|
||||
the transform-origin property is not set according to where the radar is positioned. The below
|
||||
code is a simple workaround that sets the origin depending on what the user has configured for
|
||||
the position of the radar from the two available options in the css file. */
|
||||
var left = $( "#policeradar" ).css( "left" );
|
||||
|
||||
if ( left == "auto" ) {
|
||||
$( "#policeradar" ).css( "transform-origin", "bottom right" );
|
||||
} else {
|
||||
$( "#policeradar" ).css( "transform-origin", "bottom center" );
|
||||
}
|
||||
}
|
||||
|
||||
// function dbgFunc()
|
||||
// {
|
||||
// var left = $( "#policeradar" ).css( "left" );
|
||||
// sendData( "debug", "Left: " + left );
|
||||
// }
|
||||
|
||||
function updateSpeed( attr, data ) {
|
||||
targets[ attr ].find( ".speednumber" ).each( function( i, obj ) {
|
||||
$( obj ).html( data[i] );
|
||||
} );
|
||||
}
|
||||
|
||||
function lockSpeed( attr, state ) {
|
||||
targets[ attr ].find( ".speednumber" ).each( function( i, obj ) {
|
||||
if ( state == true ) {
|
||||
$( obj ).addClass( "locked" );
|
||||
} else {
|
||||
$( obj ).removeClass( "locked" );
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
function modeSwitch( sameEle, oppEle, state ) {
|
||||
if ( state == "same" ) {
|
||||
sameEle.addClass( "active" );
|
||||
oppEle.removeClass( "active" );
|
||||
} else if ( state == "opp" ) {
|
||||
oppEle.addClass( "active" );
|
||||
sameEle.removeClass( "active" );
|
||||
} else if ( state == "none" ) {
|
||||
oppEle.removeClass( "active" );
|
||||
sameEle.removeClass( "active" );
|
||||
}
|
||||
}
|
||||
|
||||
function updateArrowDir( fwdEle, bwdEle, state ) {
|
||||
if ( state == true ) {
|
||||
fwdEle.addClass( "active" );
|
||||
bwdEle.removeClass( "active" );
|
||||
} else if ( state == false ) {
|
||||
bwdEle.addClass( "active" );
|
||||
fwdEle.removeClass( "active" );
|
||||
} else if ( state == null ) {
|
||||
fwdEle.removeClass( "active" );
|
||||
bwdEle.removeClass( "active" );
|
||||
}
|
||||
}
|
||||
|
||||
function sendData( name, data ) {
|
||||
$.post( "http://" + resourceName + "/" + name, JSON.stringify( data ), function( datab ) {
|
||||
if ( datab != "ok" ) {
|
||||
console.log( datab );
|
||||
}
|
||||
} );
|
||||
}
|
||||
Reference in New Issue
Block a user