diff --git a/__resource.lua b/__resource.lua
index 0bdca3b..5e2948a 100644
--- a/__resource.lua
+++ b/__resource.lua
@@ -10,7 +10,7 @@ resource_manifest_version '44febabe-d386-4d18-afbe-5e627f4af937'
name 'Wraith ARS 2X'
description 'An advanced radar system for FiveM'
author 'WolfKnight'
-version 'beta2fh1'
+version 'beta3'
files {
"nui/radar.html",
diff --git a/docs/version.txt b/docs/version.txt
index bee34ed..74a9481 100644
--- a/docs/version.txt
+++ b/docs/version.txt
@@ -1 +1 @@
-beta2fh1
\ No newline at end of file
+beta3
\ No newline at end of file
diff --git a/nui/radar.css b/nui/radar.css
index 3b24d43..4664bd7 100644
--- a/nui/radar.css
+++ b/nui/radar.css
@@ -580,7 +580,7 @@ button:focus { outline: none; }
#uiSettingsBox {
width: 250px;
- height: 230px;
+ height: 325px;
position: absolute;
margin: auto;
@@ -659,15 +659,56 @@ button:focus { outline: none; }
#uiSettingsBox .scaling .plus {
clip-path: polygon( 0 35%, 35% 35%, 35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65% );
- }
+ }
+
+ #uiSettingsBox .safezone_container {
+ width: 85%;
+ margin: 0 auto;
+ }
+ #uiSettingsBox .safezone_container p,
+ #uiSettingsBox .safezone_container span {
+ font-size: 18px;
+ margin: 0 auto;
+ text-align: center;
+ color: rgb( 255, 255, 255 );
+ }
+
+ #uiSettingsBox .safezone_container .slider {
+ width: 100%;
+ height: 10px;
+ margin: 10px 0;
+
+ border-radius: 5px;
+
+ -webkit-appearance: none;
+
+ background-color: rgb( 180, 180, 180 );
+ }
+ #uiSettingsBox .safezone_container .slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 15px;
+ height: 25px;
+ background: rgb( 84, 210, 255 );
+ cursor: pointer;
+ }
+
+ #uiSettingsBox .safezone_container .slider::-moz-range-thumb {
+ width: 15px;
+ height: 25px;
+ background: rgb( 84, 210, 255 );
+ cursor: pointer;
+ }
#uiSettingsBox .close {
width: 80px;
height: 20px;
- display: block;
-
- margin: 5px auto;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 30px;
+ margin: auto;
border-radius: 10px;
border: none;
diff --git a/nui/radar.html b/nui/radar.html
index df31446..b192090 100644
--- a/nui/radar.html
+++ b/nui/radar.html
@@ -190,7 +190,12 @@
-
+
+
+
diff --git a/nui/radar.js b/nui/radar.js
index 1995943..ca35866 100644
--- a/nui/radar.js
+++ b/nui/radar.js
@@ -65,6 +65,9 @@ const elements =
decrease: $( "#remoteDecreaseScale" ),
display: $( "#remoteScaleDisplay" )
},
+
+ safezoneSlider: $( "#safezone" ),
+ safezoneDisplay: $( "#safezoneDisplay" ),
keyLock: $( "#keyLockLabel" ),
@@ -401,6 +404,10 @@ var radarScale = 1.0;
var radarMoving = false;
var radarOffset = [ 0, 0 ];
+var windowWidth = 0;
+var windowHeight = 0;
+var safezone = 0;
+
// Close the UI settings window when the 'Close' button is pressed
elements.closeUiBtn.click( function() {
setUISettingsVisible( false, true );
@@ -408,24 +415,20 @@ elements.closeUiBtn.click( function() {
// Set the remote scale buttons to change the remote's scale
elements.remoteScaling.increase.click( function() {
- remoteScale = changeScale( elements.remote, remoteScale, 0.05 );
- elements.remoteScaling.display.html( remoteScale.toFixed( 2 ) + "x" );
+ remoteScale = changeEleScale( elements.remote, remoteScale, 0.05, elements.remoteScaling.display );
} )
elements.remoteScaling.decrease.click( function() {
- remoteScale = changeScale( elements.remote, remoteScale, -0.05 );
- elements.remoteScaling.display.html( remoteScale.toFixed( 2 ) + "x" );
+ remoteScale = changeEleScale( elements.remote, remoteScale, -0.05, elements.remoteScaling.display );
} )
// Set the radar scale buttons to change the radar's scale
elements.radarScaling.increase.click( function() {
- radarScale = changeScale( elements.radar, radarScale, 0.05 );
- elements.radarScaling.display.html( radarScale.toFixed( 2 ) + "x" );
+ radarScale = changeEleScale( elements.radar, radarScale, 0.05, elements.radarScaling.display );
} )
elements.radarScaling.decrease.click( function() {
- radarScale = changeScale( elements.radar, radarScale, -0.05 );
- elements.radarScaling.display.html( radarScale.toFixed( 2 ) + "x" );
+ radarScale = changeEleScale( elements.radar, radarScale, -0.05, elements.radarScaling.display );
} )
// Remote mouse down and up event
@@ -434,14 +437,7 @@ elements.remote.mousedown( function( event ) {
let offset = $( this ).offset();
- remoteOffset = [
- offset.left - event.clientX,
- offset.top - event.clientY
- ]
-} )
-
-elements.remote.mouseup( function( event ) {
- remoteMoving = false;
+ remoteOffset = getOffset( offset, event.clientX, event.clientY );
} )
// Radar mouse down and up event
@@ -450,47 +446,94 @@ elements.radar.mousedown( function( event ) {
let offset = $( this ).offset();
- radarOffset = [
- offset.left - event.clientX,
- offset.top - event.clientY
- ]
+ radarOffset = getOffset( offset, event.clientX, event.clientY );
} )
-elements.radar.mouseup( function( event ) {
+$( document ).mouseup( function( event ) {
+ remoteMoving = false;
radarMoving = false;
} )
$( document ).mousemove( function( event ) {
- event.preventDefault();
-
let x = event.clientX;
let y = event.clientY;
if ( remoteMoving )
{
- let maxWidth = $( window ).width() - ( elements.remote.outerWidth() * remoteScale );
- let maxHeight = $( window ).height() - ( elements.remote.outerHeight() * remoteScale );
+ event.preventDefault();
- let left = clamp( x + remoteOffset[0], 0, maxWidth );
- let top = clamp( y + remoteOffset[1], 0, maxHeight );
-
- elements.remote.css( "left", left + "px" );
- elements.remote.css( "top", top + "px" );
+ calculatePos( elements.remote, x, y, windowWidth, windowHeight, remoteOffset, remoteScale, safezone );
}
if ( radarMoving )
{
- let maxWidth = $( window ).width() - ( elements.radar.outerWidth() * radarScale );
- let maxHeight = $( window ).height() - ( elements.radar.outerHeight() * radarScale );
+ event.preventDefault();
- let left = clamp( x + radarOffset[0], 0, maxWidth );
- let top = clamp( y + radarOffset[1], 0, maxHeight );
-
- elements.radar.css( "left", left + "px" );
- elements.radar.css( "top", top + "px" );
+ calculatePos( elements.radar, x, y, windowWidth, windowHeight, radarOffset, radarScale, safezone );
}
} )
+$( window ).resize( function() {
+ windowWidth = $( this ).width();
+ windowHeight = $( this ).height();
+} )
+
+$( document ).ready( function() {
+ windowWidth = $( window ).width();
+ windowHeight = $( window ).height();
+} )
+
+elements.safezoneSlider.on( "input", function() {
+ let val = $( this ).val();
+ safezone = parseInt( val, 10 );
+
+ elements.safezoneDisplay.html( val + "px" );
+} )
+
+function calculatePos( ele, x, y, w, h, offset, scale, safezone )
+{
+ let eleWidth = ( ele.outerWidth() * scale );
+ let eleHeight = ( ele.outerHeight() * scale );
+ let eleWidthPerct = ( eleWidth / w ) * 100;
+ let eleHeightPerct = ( eleHeight / h ) * 100;
+
+ let maxWidth = w - eleWidth;
+ let maxHeight = h - eleHeight;
+
+ let left = clamp( x + offset[0], 0 + safezone, maxWidth - safezone );
+ let top = clamp( y + offset[1], 0 + safezone, maxHeight - safezone );
+
+ let leftPos = ( left / w ) * 100;
+ let topPos = ( top / h ) * 100;
+
+ // Lock pos check
+ if ( ( leftPos + ( eleWidthPerct / 2 ) ) >= 49.0 && ( leftPos + ( eleWidthPerct / 2 ) ) <= 51.0 )
+ {
+ leftPos = 50.0 - ( eleWidthPerct / 2 );
+ }
+
+ if ( ( topPos + ( eleHeightPerct / 2 ) ) >= 49.0 && ( topPos + ( eleHeightPerct / 2 ) ) <= 51.0 )
+ {
+ topPos = 50.0 - ( eleHeightPerct / 2 );
+ }
+
+ updatePosition( ele, leftPos, topPos );
+}
+
+function updatePosition( ele, left, top )
+{
+ ele.css( "left", left + "%" );
+ ele.css( "top", top + "%" );
+}
+
+function getOffset( offset, x, y )
+{
+ return [
+ offset.left - x,
+ offset.top - y
+ ]
+}
+
function setUISettingsVisible( state, remote )
{
state ? elements.uiSettingsBox.fadeIn() : elements.uiSettingsBox.fadeOut();
@@ -504,6 +547,14 @@ function hideUISettings()
}
}
+function changeEleScale( ele, scaleVar, amount, display )
+{
+ let scale = changeScale( ele, scaleVar, amount );
+ display.html( scale.toFixed( 2 ) + "x" );
+
+ return scale;
+}
+
function changeScale( ele, current, amount )
{
let scale = clamp( current + amount, 0.25, 2.5 );