Updated settings UI, started work on UI JS

nui/radar.css

@@ -566,7 +566,7 @@ button:focus { outline: none; }
 
 #uiSettingsBox {
     width: 200px;
-    height: 250px;
+    height: 300px;
 
     position: absolute;
     margin: auto;
@@ -576,7 +576,8 @@ button:focus { outline: none; }
     left: 0;
 
     /* background-color: rgb( 0, 255, 55 ); */
-    background-color: transparent;
+    /* background-color: transparent; */
+    background-color: rgb( 50, 54, 45 );
 
     /* display: grid;
     grid-template-columns: 1fr 1fr;
@@ -610,7 +611,7 @@ button:focus { outline: none; }
             }
 
     #uiSettingsBox .radar_settings {
-        background-color: rgb(50, 54, 45);
+        /* background-color: rgb( 50, 54, 45 ); */
     }
         #uiSettingsBox .radar_settings .alignment {
             height: 200px;
@@ -620,7 +621,7 @@ button:focus { outline: none; }
             justify-content: space-evenly;
             align-items: center;
 
-            padding: 5px;
+            /* padding: 5px; */
         }
             #uiSettingsBox .radar_settings .alignment .aligner {
                 width: 55px;
@@ -686,4 +687,25 @@ button:focus { outline: none; }
                 width: 55px;
                 height: 55px;
                 background-color: transparent;
-            }
+            }
+
+    #uiSettingsBox .close {
+        width: 80px;
+        height: 20px;
+
+        display: block;
+
+        margin: 20px auto;
+
+        border-radius: 10px;
+        border: none;
+        background-color: rgb( 225, 225, 225 );
+    }
+        #uiSettingsBox .close:hover {
+            background-color: rgb( 255, 255, 255 );
+        }
+
+        #uiSettingsBox .close:active {
+            background-color: rgb( 190, 190, 190 );
+            padding: 0;
+        }

nui/radar.html

@@ -186,6 +186,8 @@
 					<div class="aligner"><div class="arrow bottom_right"></div><button></button></div>
 				</div>
 			</div>
+
+			<button id="closeUiSettings" class="close">CLOSE</button>
 		</div>
 
 		<!-- Load JavaScript files -->

nui/radar.js

@@ -28,6 +28,10 @@ const elements =
     toggleDisplay: $( "#toggleDisplay" ), 
     pwrBtn: $( "#pwrBtn" ), 
 
+    uiSettingsBtn: $( "#uiSettings" ), 
+    uiSettingsBox: $( "#uiSettingsBox" ), 
+    closeUiBtn: $( "#closeUiSettings" ),
+
     patrolSpeed: $( "#patrolSpeed" ),
 
     antennas: {
@@ -97,6 +101,11 @@ const dirs =
 // Hide the radar and remote, this way we can bypass setting a style of 'display: none;' in the HTML file
 elements.radar.hide(); 
 elements.remote.hide(); 
+elements.uiSettingsBox.hide(); 
+
+elements.uiSettingsBtn.click( function() {
+    toggleUISettings();
+} )
 
 elements.pwrBtn.click( function() {
     togglePower();
@@ -301,6 +310,19 @@ function sendData( name, data ) {
     } );
 }
 
+// UI stuff
+function toggleUISettings()
+{
+    elements.uiSettingsBox.fadeToggle(); 
+}
+
+function hideUISettings()
+{
+    if ( !elements.uiSettingsBox.is( ":hidden" ) ) {
+        elements.uiSettingsBox.hide(); 
+    }
+}
+
 // 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 ) {
     if ( $( this ).attr( "data-nuitype" ) ) {
@@ -321,6 +343,7 @@ document.onkeyup = function( event )
     {
         sendData( "closeRemote", null );
         toggleRemote();
+        hideUISettings();
     }
 }
 
@@ -328,6 +351,7 @@ window.oncontextmenu = function()
 {
     sendData( "closeRemote", null );
     toggleRemote();
+    hideUISettings();
 }
 
 // The main event listener, this is what the NUI messages sent by the LUA side arrive at, they are 

nui/ui.js

@@ -1,8 +0,0 @@
-/*-------------------------------------------------------------------------
-
-    Wraith ARS 2X - v1.0.0
-    Created by WolfKnight
-
-    Additional contributor: Scott_UK
-    
--------------------------------------------------------------------------*/