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'
description 'An advanced radar system for FiveM'
author 'WolfKnight'
version 'beta2e'
version 'beta2f'
files {
"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 */
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 {
width: 715px;
height: 230px;
@@ -377,7 +367,11 @@ button:focus { outline: none; }
/* background-color: rgb( 50, 50, 50 ); */
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;
}
@@ -585,8 +579,8 @@ button:focus { outline: none; }
}
#uiSettingsBox {
width: 200px;
height: 350px;
width: 250px;
height: 230px;
position: absolute;
margin: auto;
@@ -614,111 +608,26 @@ button:focus { outline: none; }
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 {
width: 100%;
}
#uiSettingsBox .radar_settings .alignment {
height: 200px;
display: flex;
flex-wrap: wrap;
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_container {
height: 150px;
display: grid;
grid-template-rows: 1fr 1fr;
}
#uiSettingsBox .scaling {
height: 70px;
display: flex;
/* display: flex;
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 {
font-size: 18px;
@@ -731,8 +640,8 @@ button:focus { outline: none; }
}
#uiSettingsBox .scaling .symbol {
width: 45px;
height: 45px;
width: 40px;
height: 40px;
background-color: rgb( 225, 225, 225 );
}

83
nui/radar.html
View File

@@ -164,73 +164,32 @@
</div>
<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">
<p class="title">Radar 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>
<p class="title">UI Settings</p>
</div>
<div class="scaling">
<div id="decreaseScale" class="symbol minus"></div>
<div class="scaling_container">
<div class="scaling">
<div id="radarDecreaseScale" class="symbol minus"></div>
<div class="info">
<p>Scale</p>
<p id="scaleDisplay" class="multiplier">1.00x</p>
</div>
<div class="info">
<p>Radar Scale</p>
<p id="radarScaleDisplay" class="multiplier">1.00x</p>
</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>
<button id="closeUiSettings" class="close">CLOSE</button>

37
nui/radar.js
View File

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