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

UI can be scaled, changed some of the JS toggles to states

Browse Source
This commit is contained in:
Dan
2019-12-06 09:30:47 +00:00
parent 624ac969cd
commit 34d850a278
3 changed files with 122 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
nui/radar.css
View File

@@ -19,6 +19,10 @@
box-sizing: border-box;
}
body {
overflow: hidden;
}
/* Removes the outline when buttons have been clicked */
button:focus { outline: none; }
@@ -41,6 +45,10 @@ button:focus { outline: none; }
background-image: url( "frame.png" );
/* Settings for scaling */
transform: scale( 1.0 );
transform-origin: bottom right;
z-index: 1;
}
@@ -572,7 +580,7 @@ button:focus { outline: none; }
#uiSettingsBox {
width: 200px;
height: 300px;
height: 350px;
position: absolute;
margin: auto;
@@ -617,7 +625,7 @@ button:focus { outline: none; }
}
#uiSettingsBox .radar_settings {
/* background-color: rgb( 50, 54, 45 ); */
width: 100%;
}
#uiSettingsBox .radar_settings .alignment {
height: 200px;
@@ -648,6 +656,10 @@ button:focus { outline: none; }
position: relative;
}
#uiSettingsBox .radar_settings .alignment .aligner:active {
background-color: rgb( 190, 190, 190 );
}
#uiSettingsBox .radar_settings .alignment .aligner .arrow {
width: 45px;
height: 45px;
@@ -694,6 +706,45 @@ button:focus { outline: none; }
height: 55px;
background-color: transparent;
}
#uiSettingsBox .scaling {
height: 70px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
#uiSettingsBox .scaling p {
font-size: 18px;
margin: 0 auto;
text-align: center;
color: rgb( 255, 255, 255 );
}
#uiSettingsBox .scaling .multiplier {
font-size: 16px;
}
#uiSettingsBox .scaling .symbol {
width: 45px;
height: 45px;
background-color: rgb( 225, 225, 225 );
}
#uiSettingsBox .scaling .symbol:hover {
background-color: rgb( 255, 255, 255 );
}
#uiSettingsBox .scaling .symbol:active {
background-color: rgb( 190, 190, 190 );
}
#uiSettingsBox .scaling .minus {
clip-path: polygon( 0 35%, 100% 35%, 100% 65%, 0 65% );
}
#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 .close {
width: 80px;
@@ -701,7 +752,7 @@ button:focus { outline: none; }
display: block;
margin: 20px auto;
margin: 5px auto;
border-radius: 10px;
border: none;

29
nui/radar.html
View File

@@ -173,53 +173,64 @@
</div> -->
<div class="radar_settings">
<p class="title">Radar Position</p>
<p class="title">Radar UI Settings</p>
<div class="alignment">
<div class="aligner">
<div class="arrow top_left"></div>
<button data-value="top_left"></button>
<button data-value="top_left" data-scale="top left"></button>
</div>
<div class="aligner">
<div class="arrow"></div>
<button data-value="top_middle"></button>
<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"></button>
<button data-value="top_right" data-scale="top right"></button>
</div>
<div class="aligner">
<div class="arrow left"></div>
<button data-value="middle_left"></button>
<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"></button>
<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"></button>
<button data-value="bottom_left" data-scale="bottom left"></button>
</div>
<div class="aligner">
<div class="arrow bottom"></div>
<button data-value="bottom_middle"></button>
<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"></button>
<button data-value="bottom_right" data-scale="bottom right"></button>
</div>
</div>
</div>
<div class="scaling">
<div id="decreaseScale" class="symbol minus"></div>
<div class="info">
<p>Scale</p>
<p id="scaleDisplay" class="multiplier">1.00x</p>
</div>
<div id="increaseScale" class="symbol plus"></div>
</div>
<button id="closeUiSettings" class="close">CLOSE</button>
</div>

68
nui/radar.js
View File

@@ -32,6 +32,12 @@ const elements =
uiSettingsBox: $( "#uiSettingsBox" ),
closeUiBtn: $( "#closeUiSettings" ),
scale: {
increase: $( "#increaseScale" ),
decrease: $( "#decreaseScale" ),
display: $( "#scaleDisplay" )
},
patrolSpeed: $( "#patrolSpeed" ),
antennas: {
@@ -104,22 +110,22 @@ elements.remote.hide();
elements.uiSettingsBox.hide();
elements.uiSettingsBtn.click( function() {
toggleUISettings();
setUISettingsVisible( true, true );
} )
elements.pwrBtn.click( function() {
togglePower();
} )
function toggleRadar( state )
function setRadarVisible( state )
{
// state ? elements.radar.fadeIn() : elements.radar.fadeOut();
elements.radar.fadeToggle();
state ? elements.radar.fadeIn() : elements.radar.fadeOut();
}
function toggleRemote()
function setRemoteVisible( state )
{
elements.remote.toggle();
// elements.remote.toggle();
state ? elements.remote.fadeIn() : elements.remote.fadeOut();
}
function togglePower()
@@ -311,13 +317,24 @@ function sendData( name, data ) {
}
// UI stuff
var scale = 1.0
elements.closeUiBtn.click( function() {
toggleUISettings();
setUISettingsVisible( false, true );
} )
function toggleUISettings()
elements.scale.increase.click( function() {
changeScale( 0.05 );
} )
elements.scale.decrease.click( function() {
changeScale( -0.05 );
} )
function setUISettingsVisible( state, remote )
{
elements.uiSettingsBox.fadeToggle();
state ? elements.uiSettingsBox.fadeIn() : elements.uiSettingsBox.fadeOut();
if ( remote ) { setRemoteVisible( !state ); }
}
function hideUISettings()
@@ -327,11 +344,26 @@ function hideUISettings()
}
}
function changeScale( amount )
{
scale = clamp( scale + amount, 0.25, 2.5 );
elements.radar.css( "transform", "scale(" + scale + ")" );
elements.scale.display.html( scale.toFixed( 2 ) + "x" );
}
function clamp( num, min, max )
{
return num < min ? min : num > max ? max : num;
}
elements.uiSettingsBox.find( "button" ).each( function( i, obj ) {
if ( $( this ).attr( "data-value" ) ) {
if ( $( this ).attr( "data-value" ) && $( this ).attr( "data-scale" ) ) {
$( this ).click( function() {
let align = $( this ).data( "value" );
let origin = $( this ).data( "scale" );
elements.radar.removeClass().addClass( align );
elements.radar.css( "transform-origin", origin );
} )
}
} );
@@ -355,16 +387,16 @@ document.onkeyup = function( event )
if ( event.keyCode == 27 )
{
sendData( "closeRemote", null );
toggleRemote();
hideUISettings();
setRemoteVisible( false );
setUISettingsVisible( false, false );
}
}
window.oncontextmenu = function()
{
sendData( "closeRemote", null );
toggleRemote();
hideUISettings();
setRemoteVisible( false );
setUISettingsVisible( false, false );
}
// The main event listener, this is what the NUI messages sent by the LUA side arrive at, they are
@@ -378,13 +410,10 @@ window.addEventListener( "message", function( event ) {
resourceName = item.pathName
break;
case "openRemote":
toggleRemote();
setRemoteVisible( true );
break;
case "toggleDisplay":
toggleRadar( item.state );
break;
case "hideDisplay":
item.state ? elements.radar.fadeOut() : elements.radar.fadeIn();
setRadarVisible( item.state );
break;
case "radarPower":
radarPower( item.state );
@@ -396,7 +425,6 @@ window.addEventListener( "message", function( event ) {
updateDisplays( item.speed, item.antennas );
break;
case "antennaXmit":
// setAntennaXmit( item.ant, item.on, item.on ? item.mode : 0 );
setAntennaXmit( item.ant, item.on );
break;
case "antennaMode":