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

nui/radar.css

@@ -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;

nui/radar.html

@@ -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>
 

nui/radar.js

@@ -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();
+    state ? elements.radar.fadeIn() : elements.radar.fadeOut();
-    elements.radar.fadeToggle(); 
 }
 
-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();
+        setRemoteVisible( false );
-        hideUISettings();
+        setUISettingsVisible( false, false );
     }
 }
 
 window.oncontextmenu = function()
 {
     sendData( "closeRemote", null );
-    toggleRemote();
+    setRemoteVisible( false );
-    hideUISettings();
+    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 );
+            setRadarVisible( item.state );
-            break; 
-        case "hideDisplay":
-            item.state ? elements.radar.fadeOut() : elements.radar.fadeIn();
             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":