Michatec/wk_wars2x
1
1
Fork 0
mirror of https://github.com/Michatec/wk_wars2x.git synced 2026-04-01 16:36:26 +02:00
Code Issues Packages Projects Releases Activity

The radar ui can now be moved

Browse Source
This commit is contained in:
Dan
2019-12-05 19:31:13 +00:00
parent 4184138e24
commit 624ac969cd
3 changed files with 66 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
nui/radar.css
View File

@@ -22,16 +22,22 @@
/* Removes the outline when buttons have been clicked */ /* Removes the outline when buttons have been clicked */
button:focus { outline: none; } button:focus { outline: none; }
.unit_frame { /* 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; width: 715px;
height: 230px; height: 230px;
position: absolute; position: absolute;
margin: auto; margin: auto;
/* top: 0; */
right: 10px;
bottom: 10px;
/* left: 0; */
background-image: url( "frame.png" ); background-image: url( "frame.png" );

51
nui/radar.html
View File

@@ -4,7 +4,8 @@
</head> </head>
<body onselectstart="return false;" ondragstart="return false;"> <body onselectstart="return false;" ondragstart="return false;">
<div id="radarFrame" class="unit_frame"> <!-- <div id="radarFrame" class="unit_frame"> -->
<div id="radarFrame" class="bottom_right">
<div class="frame_border"></div> <div class="frame_border"></div>
<div class="radar_container"> <div class="radar_container">
@@ -175,15 +176,47 @@
<p class="title">Radar Position</p> <p class="title">Radar Position</p>
<div class="alignment"> <div class="alignment">
<div class="aligner"><div class="arrow top_left"></div><button></button></div> <div class="aligner">
<div class="aligner"><div class="arrow"></div><button></button></div> <div class="arrow top_left"></div>
<div class="aligner"><div class="arrow top_right"></div><button></button></div> <button data-value="top_left"></button>
<div class="aligner"><div class="arrow left"></div><button></button></div> </div>
<div class="aligner">
<div class="arrow"></div>
<button data-value="top_middle"></button>
</div>
<div class="aligner">
<div class="arrow top_right"></div>
<button data-value="top_right"></button>
</div>
<div class="aligner">
<div class="arrow left"></div>
<button data-value="middle_left"></button>
</div>
<div class="holo"></div> <div class="holo"></div>
<div class="aligner"><div class="arrow right"></div><button></button></div>
<div class="aligner"><div class="arrow bottom_left"></div><button></button></div> <div class="aligner">
<div class="aligner"><div class="arrow bottom"></div><button></button></div> <div class="arrow right"></div>
<div class="aligner"><div class="arrow bottom_right"></div><button></button></div> <button data-value="middle_right"></button>
</div>
<div class="aligner">
<div class="arrow bottom_left"></div>
<button data-value="bottom_left"></button>
</div>
<div class="aligner">
<div class="arrow bottom"></div>
<button data-value="bottom_middle"></button>
</div>
<div class="aligner">
<div class="arrow bottom_right"></div>
<button data-value="bottom_right"></button>
</div>
</div> </div>
</div> </div>

13
nui/radar.js
View File

@@ -311,6 +311,10 @@ function sendData( name, data ) {
} }
// UI stuff // UI stuff
elements.closeUiBtn.click( function() {
toggleUISettings();
} )
function toggleUISettings() function toggleUISettings()
{ {
elements.uiSettingsBox.fadeToggle(); elements.uiSettingsBox.fadeToggle();
@@ -323,6 +327,15 @@ function hideUISettings()
} }
} }
elements.uiSettingsBox.find( "button" ).each( function( i, obj ) {
if ( $( this ).attr( "data-value" ) ) {
$( this ).click( function() {
let align = $( this ).data( "value" );
elements.radar.removeClass().addClass( align );
} )
}
} );
// 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 ) {
if ( $( this ).attr( "data-nuitype" ) ) { if ( $( this ).attr( "data-nuitype" ) ) {