In-game help

nui/radar.css

@@ -65,7 +65,7 @@ button:focus { outline: none; }
     
     transition: transform 0.5s;
 
-	z-index: 1;
+	z-index: 2;
 }
 
 #radarFrame .frame_border {
@@ -160,7 +160,7 @@ button:focus { outline: none; }
 	grid-template-columns: 45px 50px 150px 35px 50px 135px 35px 135px;
 	gap: 0 0;
 
-	z-index: 10;
+	/* z-index: 2; */
 
 	box-shadow: inset 0px 20px 20px -15px rgba( 0, 0, 0, 0.4 );
 }
@@ -405,7 +405,7 @@ button:focus { outline: none; }
 	transform: scale( 1.0 );
 	transform-origin: 0 0;
 
-	z-index: 2;
+	z-index: 3;
 }
 	/* Button template classes */
 	#rc button {
@@ -627,6 +627,8 @@ button:focus { outline: none; }
 
     /* background-color: rgb(70, 70, 70);
     box-shadow: inset 0px 20px 20px -15px rgba( 0, 0, 0, 0.4 ); */
+
+    z-index: 1;
 }
     #plateReaderFrame .frame_border {
         width: 465px;
@@ -757,7 +759,7 @@ button:focus { outline: none; }
     border: 3px solid rgb( 0, 0, 0 );
 
     /* for testing */
-    z-index: 100;
+    z-index: 4;
 }
     #plateReaderBox .title {
         text-align: center;
@@ -989,8 +991,57 @@ button:focus { outline: none; }
     color: rgb( 200, 200, 200 );
     text-shadow: 3px 2px 5px rgb( 0, 0, 0 );
 
-    z-index: 4;
+    z-index: 5;
 }
     #keyLockLabel span {
         font-size: 30px;
     }
+
+#helpWindow {
+    width: 75%;
+    height: 90%;
+
+    position: absolute;
+    margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    display: grid;
+    grid-template-rows: 90% 10%;
+    justify-items: center;
+
+    z-index: 4;
+}
+    #helpWindow iframe {
+        width: 100%;
+        height: 100%;
+    }
+
+    #helpWindow .close {
+		width: 150px;
+        height: 50px;
+        
+        margin: auto;
+
+        font-size: 18px;
+
+		border-radius: 10px;
+		border: none;
+		background-color: rgb( 225, 225, 225 );
+	}
+		#helpWindow .close:hover {
+			background-color: rgb( 255, 255, 255 );
+		}
+
+		#helpWindow .close:active {
+			background-color: rgb( 190, 190, 190 );
+			padding: 0;
+        }
+
+@media ( max-width: 1024px ) {
+    #helpWindow {
+        width: 80%;
+    }
+}

nui/radar.html

@@ -268,6 +268,11 @@
         
         <p id="keyLockLabel">Radar key lock <span id="keyLockStateLabel"></span></p>
 
+        <div id="helpWindow">
+            <iframe src="https://wolfknight98.github.io/wk_wars2x_web/manual.pdf"></iframe>
+            <button id="closeHelp" class="close">CLOSE HELP</button>
+        </div>
+
 		<!-- Load JavaScript files -->
         <!-- <script src="nui://game/ui/jquery.js"></script> -->
         <script src="jquery-3.4.1.min.js"></script>

nui/radar.js

@@ -63,6 +63,10 @@ const elements =
     setBoloBtn: $( "#setBoloPlate" ), 
     closePrBtn: $( "#closePlateReaderSettings" ),
 
+    openHelp: $( "#helpBtn" ), 
+    helpWindow: $( "#helpWindow" ), 
+    closeHelp: $( "#closeHelp" ), 
+
 	radarScaling: {
 		increase: $( "#radarIncreaseScale" ),
 		decrease: $( "#radarDecreaseScale" ),
@@ -183,6 +187,7 @@ elements.plateReader.hide();
 elements.plateReaderBox.hide(); 
 elements.uiSettingsBox.hide(); 
 elements.keyLock.label.hide(); 
+elements.helpWindow.hide(); 
 
 elements.uiSettingsBtn.click( function() {
     setEleVisible( elements.uiSettingsBox, true ); 
@@ -192,6 +197,14 @@ elements.plateReaderBtn.click( function() {
     setEleVisible( elements.plateReaderBox, true ); 
 } )
 
+elements.openHelp.click( function() {
+    setEleVisible( elements.helpWindow, true ); 
+} )
+
+elements.closeHelp.click( function() {
+    setEleVisible( elements.helpWindow, false ); 
+} )
+
 elements.pwrBtn.click( function() {
 	togglePower();
 } )
@@ -728,13 +741,6 @@ function getOffset( offset, x, y )
     ]
 }
 
-function hideUISettings()
-{
-	if ( !elements.uiSettingsBox.is( ":hidden" ) ) {
-		elements.uiSettingsBox.hide(); 
-	}
-}
-
 function changeEleScale( ele, scaleVar, amount, display )
 {
     // Change the scale of the element and update it's displayer