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

Remote moving and scaling, fixed remote going off screen

Browse Source
This commit is contained in:
Dan
2019-12-28 00:53:04 +00:00
parent 462de8d93d
commit 2e52874642
5 changed files with 71 additions and 188 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' name 'Wraith ARS 2X'
description 'An advanced radar system for FiveM' description 'An advanced radar system for FiveM'
author 'WolfKnight' author 'WolfKnight'
version 'beta2e' version 'beta2f'
files { files {
"nui/radar.html", "nui/radar.html",

2
docs/version.txt
View File

@@ -1 +1 @@
beta2e beta2f

135
nui/radar.css
View File

@@ -27,16 +27,6 @@ body {
/* Removes the outline when buttons have been clicked */ /* Removes the outline when buttons have been clicked */
button:focus { outline: none; } button:focus { outline: none; }
/* The alignment classes for the dynamic repositioning system */
#radarFrame.top_left { top: 10px; left: 10px; }
#radarFrame.top_middle { top: 10px; left: 0; right: 0; }
#radarFrame.top_right { top: 10px; right: 10px; }
#radarFrame.middle_right { top: 0; bottom: 0; right: 10px; }
#radarFrame.middle_left { top: 0; bottom: 0; left: 10px; }
#radarFrame.bottom_left { bottom: 10px; left: 10px; }
#radarFrame.bottom_middle { bottom: 10px; left: 0; right: 0; }
#radarFrame.bottom_right { bottom: 10px; right: 10px; }
#radarFrame { #radarFrame {
width: 715px; width: 715px;
height: 230px; height: 230px;
@@ -377,7 +367,11 @@ button:focus { outline: none; }
/* background-color: rgb( 50, 50, 50 ); */ /* background-color: rgb( 50, 50, 50 ); */
background-image: url( "images/rc_bg.png" ); background-image: url( "images/rc_bg.png" );
/* clip-path: polygon( 5% 0, 95% 0, 100% 25%, 90% 100%, 10% 100%, 0 25% ); */ /* clip-path: polygon( 5% 0, 95% 0, 100% 25%, 90% 100%, 10% 100%, 0 25% ); */
/* Settings for scaling */
transform: scale( 1.0 );
transform-origin: 0 0;
z-index: 2; z-index: 2;
} }
@@ -585,8 +579,8 @@ button:focus { outline: none; }
} }
#uiSettingsBox { #uiSettingsBox {
width: 200px; width: 250px;
height: 350px; height: 230px;
position: absolute; position: absolute;
margin: auto; margin: auto;
@@ -614,111 +608,26 @@ button:focus { outline: none; }
background-color: rgb( 20, 22, 18 ); background-color: rgb( 20, 22, 18 );
} }
#uiSettingsBox .remote_settings {
background-color: rgb( 20, 22, 18 );
}
#uiSettingsBox .remote_settings .alignment {
height: 200px;
background-color: purple;
display: flex;
justify-content: space-evenly;
align-items: center;
}
#uiSettingsBox .remote_settings .alignment .aligner {
height: 85%;
width: 25%;
}
#uiSettingsBox .radar_settings { #uiSettingsBox .radar_settings {
width: 100%; width: 100%;
} }
#uiSettingsBox .radar_settings .alignment {
height: 200px; #uiSettingsBox .scaling_container {
height: 150px;
display: flex; display: grid;
flex-wrap: wrap; grid-template-rows: 1fr 1fr;
justify-content: space-evenly; }
align-items: center;
/* padding: 5px; */
}
#uiSettingsBox .radar_settings .alignment .aligner {
width: 55px;
height: 55px;
position: relative;
background-color: rgb( 225, 225, 225 );
border-radius: 10px;
}
#uiSettingsBox .radar_settings .alignment .aligner:hover {
width: 55px;
height: 55px;
background-color: rgb( 255, 255, 255 );
position: relative;
}
#uiSettingsBox .radar_settings .alignment .aligner:active {
background-color: rgb( 190, 190, 190 );
}
#uiSettingsBox .radar_settings .alignment .aligner .arrow {
width: 45px;
height: 45px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: rgb( 0, 0, 0 );
clip-path: polygon( 50% 0, 10% 30%, 10% 50%, 40% 30%, 40% 100%, 60% 100%, 60% 30%, 90% 50%, 90% 30% );
}
#uiSettingsBox .radar_settings .alignment .aligner .top_left { transform: rotate( -45deg ); }
#uiSettingsBox .radar_settings .alignment .aligner .top_right { transform: rotate( 45deg ); }
#uiSettingsBox .radar_settings .alignment .aligner .left { transform: rotate( -90deg ); }
#uiSettingsBox .radar_settings .alignment .aligner .right { transform: rotate( 90deg ); }
#uiSettingsBox .radar_settings .alignment .aligner .bottom_left { transform: rotate( -135deg ); }
#uiSettingsBox .radar_settings .alignment .aligner .bottom { transform: rotate( 180deg ); }
#uiSettingsBox .radar_settings .alignment .aligner .bottom_right { transform: rotate( 135deg ); }
#uiSettingsBox .radar_settings .alignment .aligner button {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: none;
background-color: transparent;
}
#uiSettingsBox .radar_settings .alignment .holo {
width: 55px;
height: 55px;
background-color: transparent;
}
#uiSettingsBox .scaling { #uiSettingsBox .scaling {
height: 70px; height: 70px;
display: flex; /* display: flex;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center; */
display: grid;
grid-template-columns: 1fr 2fr 1fr;
place-items: center center;
} }
#uiSettingsBox .scaling p { #uiSettingsBox .scaling p {
font-size: 18px; font-size: 18px;
@@ -731,8 +640,8 @@ button:focus { outline: none; }
} }
#uiSettingsBox .scaling .symbol { #uiSettingsBox .scaling .symbol {
width: 45px; width: 40px;
height: 45px; height: 40px;
background-color: rgb( 225, 225, 225 ); background-color: rgb( 225, 225, 225 );
} }

83
nui/radar.html
View File

@@ -164,73 +164,32 @@
</div> </div>
<div id="uiSettingsBox"> <div id="uiSettingsBox">
<!-- <div class="remote_settings">
<p class="title">Remote</p>
<div class="alignment">
<button id="remoteAlignLeft" class="aligner"></button>
<button id="remoteAlignCentre" class="aligner"></button>
<button id="remoteAlignRight" class="aligner"></button>
</div>
</div> -->
<div class="radar_settings"> <div class="radar_settings">
<p class="title">Radar UI Settings</p> <p class="title">UI Settings</p>
<div class="alignment">
<div class="aligner">
<div class="arrow top_left"></div>
<button data-value="top_left" data-scale="top left"></button>
</div>
<div class="aligner">
<div class="arrow"></div>
<button data-value="top_middle" data-scale="top center"></button>
</div>
<div class="aligner">
<div class="arrow top_right"></div>
<button data-value="top_right" data-scale="top right"></button>
</div>
<div class="aligner">
<div class="arrow left"></div>
<button data-value="middle_left" data-scale="center left"></button>
</div>
<div class="holo"></div>
<div class="aligner">
<div class="arrow right"></div>
<button data-value="middle_right" data-scale="center right"></button>
</div>
<div class="aligner">
<div class="arrow bottom_left"></div>
<button data-value="bottom_left" data-scale="bottom left"></button>
</div>
<div class="aligner">
<div class="arrow bottom"></div>
<button data-value="bottom_middle" data-scale="bottom center"></button>
</div>
<div class="aligner">
<div class="arrow bottom_right"></div>
<button data-value="bottom_right" data-scale="bottom right"></button>
</div>
</div>
</div> </div>
<div class="scaling"> <div class="scaling_container">
<div id="decreaseScale" class="symbol minus"></div> <div class="scaling">
<div id="radarDecreaseScale" class="symbol minus"></div>
<div class="info"> <div class="info">
<p>Scale</p> <p>Radar Scale</p>
<p id="scaleDisplay" class="multiplier">1.00x</p> <p id="radarScaleDisplay" class="multiplier">1.00x</p>
</div> </div>
<div id="increaseScale" class="symbol plus"></div> <div id="radarIncreaseScale" class="symbol plus"></div>
</div>
<div class="scaling">
<div id="remoteDecreaseScale" class="symbol minus"></div>
<div class="info">
<p>Remote Scale</p>
<p id="remoteScaleDisplay" class="multiplier">1.00x</p>
</div>
<div id="remoteIncreaseScale" class="symbol plus"></div>
</div>
</div> </div>
<button id="closeUiSettings" class="close">CLOSE</button> <button id="closeUiSettings" class="close">CLOSE</button>

37
nui/radar.js
View File

@@ -55,10 +55,16 @@ const elements =
closeUiBtn: $( "#closeUiSettings" ), closeUiBtn: $( "#closeUiSettings" ),
radarScaling: { radarScaling: {
increase: $( "#increaseScale" ), increase: $( "#radarIncreaseScale" ),
decrease: $( "#decreaseScale" ), decrease: $( "#radarDecreaseScale" ),
display: $( "#scaleDisplay" ) display: $( "#radarScaleDisplay" )
}, },
remoteScaling: {
increase: $( "#remoteIncreaseScale" ),
decrease: $( "#remoteDecreaseScale" ),
display: $( "#remoteScaleDisplay" )
},
keyLock: $( "#keyLockLabel" ), keyLock: $( "#keyLockLabel" ),
@@ -387,28 +393,37 @@ function sendData( name, data ) {
/*------------------------------------------------------------------------------------ /*------------------------------------------------------------------------------------
UI scaling and positioning UI scaling and positioning
------------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------------*/
var radarScale = 1.0;
var radarMoving = false;
var radarOffset = [ 0, 0 ];
var remoteScale = 1.0; var remoteScale = 1.0;
var remoteMoving = false; var remoteMoving = false;
var remoteOffset = [ 0, 0 ]; var remoteOffset = [ 0, 0 ];
var radarScale = 1.0;
var radarMoving = false;
var radarOffset = [ 0, 0 ];
// Close the UI settings window when the 'Close' button is pressed // Close the UI settings window when the 'Close' button is pressed
elements.closeUiBtn.click( function() { elements.closeUiBtn.click( function() {
setUISettingsVisible( false, true ); setUISettingsVisible( false, true );
} ) } )
// 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" );
} )
elements.remoteScaling.decrease.click( function() {
remoteScale = changeScale( elements.remote, remoteScale, -0.05 );
elements.remoteScaling.display.html( remoteScale.toFixed( 2 ) + "x" );
} )
// Set the radar scale buttons to change the radar's scale // Set the radar scale buttons to change the radar's scale
elements.radarScaling.increase.click( function() { elements.radarScaling.increase.click( function() {
// changeScale( 0.05 );
radarScale = changeScale( elements.radar, radarScale, 0.05 ); radarScale = changeScale( elements.radar, radarScale, 0.05 );
elements.radarScaling.display.html( radarScale.toFixed( 2 ) + "x" ); elements.radarScaling.display.html( radarScale.toFixed( 2 ) + "x" );
} ) } )
elements.radarScaling.decrease.click( function() { elements.radarScaling.decrease.click( function() {
// changeScale( -0.05 );
radarScale = changeScale( elements.radar, radarScale, -0.05 ); radarScale = changeScale( elements.radar, radarScale, -0.05 );
elements.radarScaling.display.html( radarScale.toFixed( 2 ) + "x" ); elements.radarScaling.display.html( radarScale.toFixed( 2 ) + "x" );
} ) } )
@@ -453,8 +468,8 @@ $( document ).mousemove( function( event ) {
if ( remoteMoving ) if ( remoteMoving )
{ {
let maxWidth = $( window ).width() - elements.remote.outerWidth(); let maxWidth = $( window ).width() - ( elements.remote.outerWidth() * remoteScale );
let maxHeight = $( window ).height() - elements.remote.outerHeight(); let maxHeight = $( window ).height() - ( elements.remote.outerHeight() * remoteScale );
let left = clamp( x + remoteOffset[0], 0, maxWidth ); let left = clamp( x + remoteOffset[0], 0, maxWidth );
let top = clamp( y + remoteOffset[1], 0, maxHeight ); let top = clamp( y + remoteOffset[1], 0, maxHeight );