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

Safezone, grid align lock, beta3

Browse Source
This commit is contained in:
Dan
2019-12-31 21:06:11 +00:00
parent 60f7c13b8a
commit 823a25d808
5 changed files with 142 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
__resource.lua
View File

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

2
docs/version.txt
View File

@@ -1 +1 @@
beta2fh1
beta3

51
nui/radar.css
View File

@@ -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;

7
nui/radar.html
View File

@@ -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>

125
nui/radar.js
View File

@@ -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 );