Safezone, grid align lock, beta3

__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", 

docs/version.txt

@@ -1 +1 @@
-beta2fh1
+beta3

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;
+        position: absolute;
-
+        left: 0;
-		margin: 5px auto;
+        right: 0;
+        bottom: 30px;
+        margin: auto;
 
 		border-radius: 10px;
 		border: none;

nui/radar.html

@@ -190,7 +190,12 @@
 
                     <div id="remoteIncreaseScale" class="symbol plus"></div>
                 </div>
-			</div>
+            </div>
+            
+            <div class="safezone_container">
+                <p>Safezone: <span id="safezoneDisplay">0px</span></p>
+                <input type="range" min="0" max="100" value="0" step="5" class="slider" id="safezone">
+            </div>
 
 			<button id="closeUiSettings" class="close">CLOSE</button>
         </div>

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 ); 
+    remoteScale = changeEleScale( elements.remote, remoteScale, 0.05, elements.remoteScaling.display ); 
-    elements.remoteScaling.display.html( remoteScale.toFixed( 2 ) + "x" ); 
 } )
 
 elements.remoteScaling.decrease.click( function() {
-    remoteScale = changeScale( elements.remote, remoteScale, -0.05 ); 
+    remoteScale = changeEleScale( elements.remote, remoteScale, -0.05, elements.remoteScaling.display ); 
-    elements.remoteScaling.display.html( remoteScale.toFixed( 2 ) + "x" ); 
 } )
 
 // Set the radar scale buttons to change the radar's scale 
 elements.radarScaling.increase.click( function() {
-    radarScale = changeScale( elements.radar, radarScale, 0.05 ); 
+    radarScale = changeEleScale( elements.radar, radarScale, 0.05, elements.radarScaling.display ); 
-    elements.radarScaling.display.html( radarScale.toFixed( 2 ) + "x" ); 
 } )
 
 elements.radarScaling.decrease.click( function() {
-    radarScale = changeScale( elements.radar, radarScale, -0.05 ); 
+    radarScale = changeEleScale( elements.radar, radarScale, -0.05, elements.radarScaling.display ); 
-    elements.radarScaling.display.html( radarScale.toFixed( 2 ) + "x" ); 
 } )
 
 // Remote mouse down and up event
@@ -434,14 +437,7 @@ elements.remote.mousedown( function( event ) {
 
     let offset = $( this ).offset();
 
-    remoteOffset = [
+    remoteOffset = getOffset( offset, event.clientX, event.clientY );
-        offset.left - event.clientX, 
-        offset.top - event.clientY
-    ]
-} )
-
-elements.remote.mouseup( function( event ) {
-    remoteMoving = false; 
 } )
 
 // Radar mouse down and up event
@@ -450,47 +446,94 @@ elements.radar.mousedown( function( event ) {
 
     let offset = $( this ).offset();
 
-    radarOffset = [
+    radarOffset = getOffset( offset, event.clientX, event.clientY );
-        offset.left - event.clientX, 
-        offset.top - 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 );
+        event.preventDefault();
-        let maxHeight = $( window ).height() - ( elements.remote.outerHeight() * remoteScale );
 
-        let left = clamp( x + remoteOffset[0], 0, maxWidth );
+        calculatePos( elements.remote, x, y, windowWidth, windowHeight, remoteOffset, remoteScale, safezone );
-        let top = clamp( y + remoteOffset[1], 0, maxHeight ); 
-
-        elements.remote.css( "left", left + "px" );
-        elements.remote.css( "top", top + "px" );
     }
 
     if ( radarMoving )
     {
-        let maxWidth = $( window ).width() - ( elements.radar.outerWidth() * radarScale );
+        event.preventDefault(); 
-        let maxHeight = $( window ).height() - ( elements.radar.outerHeight() * radarScale );
 
-        let left = clamp( x + radarOffset[0], 0, maxWidth );
+        calculatePos( elements.radar, x, y, windowWidth, windowHeight, radarOffset, radarScale, safezone );
-        let top = clamp( y + radarOffset[1], 0, maxHeight ); 
-
-        elements.radar.css( "left", left + "px" );
-        elements.radar.css( "top", top + "px" );
     }
 } )
 
+$( 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 );