Michatec/wk_wars2x
1
1
Fork 0
mirror of https://github.com/Michatec/wk_wars2x.git synced 2026-04-01 08:26: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

6
nui/radar.css
View File

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

8
nui/radar.html
View File

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

50
nui/radar.js
View File

@@ -132,7 +132,7 @@ const dirs =
/*------------------------------------------------------------------------------------ /*------------------------------------------------------------------------------------
Hide elements Hide elements
------------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------------*/
elements.radar.hide(); // elements.radar.hide();
// elements.remote.hide(); // elements.remote.hide();
elements.uiSettingsBox.hide(); elements.uiSettingsBox.hide();
elements.keyLock.hide(); elements.keyLock.hide();
@@ -429,23 +429,57 @@ elements.remote.mouseup( function( event ) {
remoteMoving = false; 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 ) { $( document ).mousemove( function( event ) {
event.preventDefault(); event.preventDefault();
if ( remoteMoving )
{
let x = event.clientX; let x = event.clientX;
let y = event.clientY; let y = event.clientY;
elements.remote.css( "left", ( x + remoteOffset[0] ) + "px" ); if ( remoteMoving )
elements.remote.css( "top", ( y + remoteOffset[1] ) + "px" ); {
let maxWidth = $( window ).width() - elements.remote.outerWidth();
let maxHeight = $( window ).height() - elements.remote.outerHeight();
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 ) function setUISettingsVisible( state, remote )
{ {
state ? elements.uiSettingsBox.fadeIn() : elements.uiSettingsBox.fadeOut(); state ? elements.uiSettingsBox.fadeIn() : elements.uiSettingsBox.fadeOut();
if ( remote ) { setRemoteVisible( !state ); } // if ( remote ) { setRemoteVisible( !state ); }
} }
function hideUISettings() function hideUISettings()
@@ -471,7 +505,7 @@ function clamp( num, min, max )
/*------------------------------------------------------------------------------------ /*------------------------------------------------------------------------------------
Button click event assigning 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" ) ) { if ( $( this ).attr( "data-value" ) && $( this ).attr( "data-scale" ) ) {
$( this ).click( function() { $( this ).click( function() {
let align = $( this ).data( "value" ); let align = $( this ).data( "value" );
@@ -481,7 +515,7 @@ elements.uiSettingsBox.find( "button" ).each( function( i, obj ) {
elements.radar.css( "transform-origin", origin ); 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 // 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 ) { elements.remote.find( "button" ).each( function( i, obj ) {