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

Radar can now be moved, viewport clamping for remote and radar

Browse Source
This commit is contained in:
Dan
2019-12-27 22:45:06 +00:00
parent dedd32e6a1
commit 462de8d93d
3 changed files with 54 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
nui/radar.css
View File

@@ -16,7 +16,8 @@
* {
font-family: 'Heebo', Verdana, Geneva, Tahoma, sans-serif;
font-size: 13px;
box-sizing: border-box;
box-sizing: border-box;
user-select: none;
}
body {
@@ -41,13 +42,16 @@ button:focus { outline: none; }
height: 230px;
position: absolute;
margin: auto;
margin: auto;
top: calc( ( 100% - 10px ) - 230px );
left: calc( ( 100% - 10px ) - 715px );
background-image: url( "images/frame.png" );
/* Settings for scaling */
transform: scale( 1.0 );
transform-origin: bottom right;
transform-origin: 0 0;
z-index: 1;
}

8
nui/radar.html
View File

@@ -1,11 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<link href="radar.css" rel="stylesheet" type="text/css"/>
</head>
<body onselectstart="return false;" ondragstart="return false;">
<!-- <div id="radarFrame" class="unit_frame"> -->
<div id="radarFrame" class="bottom_right">
<body>
<!-- <div id="radarFrame" class="bottom_right"> -->
<div id="radarFrame">
<div class="frame_border"></div>
<div class="radar_container">

50
nui/radar.js
View File

@@ -132,7 +132,7 @@ const dirs =
/*------------------------------------------------------------------------------------
Hide elements
------------------------------------------------------------------------------------*/
elements.radar.hide();
// elements.radar.hide();
// elements.remote.hide();
elements.uiSettingsBox.hide();
elements.keyLock.hide();
@@ -429,23 +429,57 @@ elements.remote.mouseup( function( event ) {
remoteMoving = false;
} )
// Radar mouse down and up event
elements.radar.mousedown( function( event ) {
radarMoving = true;
let offset = $( this ).offset();
radarOffset = [
offset.left - event.clientX,
offset.top - event.clientY
]
} )
elements.radar.mouseup( function( event ) {
radarMoving = false;
} )
$( document ).mousemove( function( event ) {
event.preventDefault();
let x = event.clientX;
let y = event.clientY;
if ( remoteMoving )
{
let x = event.clientX;
let y = event.clientY;
let maxWidth = $( window ).width() - elements.remote.outerWidth();
let maxHeight = $( window ).height() - elements.remote.outerHeight();
elements.remote.css( "left", ( x + remoteOffset[0] ) + "px" );
elements.remote.css( "top", ( y + remoteOffset[1] ) + "px" );
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" );
}
if ( radarMoving )
{
let maxWidth = $( window ).width() - ( elements.radar.outerWidth() * radarScale );
let maxHeight = $( window ).height() - ( elements.radar.outerHeight() * radarScale );
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" );
}
} )
function setUISettingsVisible( state, remote )
{
state ? elements.uiSettingsBox.fadeIn() : elements.uiSettingsBox.fadeOut();
if ( remote ) { setRemoteVisible( !state ); }
// if ( remote ) { setRemoteVisible( !state ); }
}
function hideUISettings()
@@ -471,7 +505,7 @@ function clamp( num, min, max )
/*------------------------------------------------------------------------------------
Button click event assigning
------------------------------------------------------------------------------------*/
elements.uiSettingsBox.find( "button" ).each( function( i, obj ) {
/* elements.uiSettingsBox.find( "button" ).each( function( i, obj ) {
if ( $( this ).attr( "data-value" ) && $( this ).attr( "data-scale" ) ) {
$( this ).click( function() {
let align = $( this ).data( "value" );
@@ -481,7 +515,7 @@ elements.uiSettingsBox.find( "button" ).each( function( i, obj ) {
elements.radar.css( "transform-origin", origin );
} )
}
} );
} ); */
// This runs when the JS file is loaded, loops through all of the remote buttons and assigns them an onclick function
elements.remote.find( "button" ).each( function( i, obj ) {