Added first time quick start video with config option

cl_radar.lua

@@ -411,6 +411,17 @@ function RADAR:OpenRemote()
 		-- Tell the NUI side to open the remote
 		SendNUIMessage( { _type = "openRemote" } )
 
+		if ( CONFIG.allow_quick_start_video ) then 
+			-- Display the new user popup if we can
+			local show = GetResourceKvpInt( "wk_wars2x_new_user" )
+
+			if ( show == 0 ) then 
+				SendNUIMessage( { _type = "showNewUser" } )
+
+				SetResourceKvpInt( "wk_wars2x_new_user", 1 )
+			end 
+		end 
+
 		-- Bring focus to the NUI side 
 		SetNuiFocus( true, true )
 	end

config.lua

@@ -38,6 +38,11 @@ CONFIG = {}
 -- exceeds the fast limit, it will be locked into the fast box. Default setting is disabled to maintain realism
 CONFIG.allow_fast_limit = false 
 
+-- In-game first time quick start video
+-- When enabled, the player will be asked if they'd like to view the quick start video the first time they 
+-- open the remote. 
+CONFIG.allow_quick_start_video = true 
+
 -- Sets all of the controls
 CONFIG.keys =
 {

nui/radar.css

@@ -1069,3 +1069,106 @@ button:focus { outline: none; }
 		width: 80%;
 	}
 }
+
+#quickStart {
+	width: 50%;
+	height: 62.5%;
+
+	position: absolute;
+	margin: auto;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	display: grid;
+	grid-template-rows: 80% 20%;
+
+	z-index: 8;
+}
+	#quickStart iframe {
+		width: 100%;
+		height: 100%;
+	}
+
+	#quickStart .close {
+		width: 150px;
+		height: 50px;
+		
+		margin: auto;
+
+		font-size: 18px;
+
+		border-radius: 10px;
+		border: none;
+		background-color: rgb( 225, 225, 225 );
+	}
+		#quickStart .close:hover {
+			background-color: rgb( 255, 255, 255 );
+		}
+
+		#quickStart .close:active {
+			background-color: rgb( 190, 190, 190 );
+			padding: 0;
+		}
+
+@media ( max-width: 1280px ) {
+	#quickStart {
+		width: 80%;
+	}
+}
+
+#newUser {
+	width: 400px;
+	height: 150px;
+
+	position: absolute;
+	margin: auto;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	background: linear-gradient( to bottom, rgb( 70, 70, 70 ), rgb( 45, 45, 45 ) );
+	border: 3px solid rgb( 0, 0, 0 );
+	color: rgb( 255, 255, 255 );
+
+	display: grid;
+	grid-template-columns: 20% 30% 30% 20%;
+	grid-template-rows: 65% 35%;
+	justify-items: center;
+	align-items: center;
+
+	z-index: 7;
+}
+	#newUser .msg {
+		grid-column: 1 / 5;
+		font-size: 18px;
+		text-align: center;
+		margin: 10px;
+	}
+
+	#newUser button {
+		width: 100px;
+		height: 30px;
+		font-size: 18px;
+		border-radius: 10px;
+		border: none;
+		background-color: rgb( 225, 225, 225 );
+	}
+		#newUser button:hover {
+			background-color: rgb( 255, 255, 255 );
+		}
+
+		#newUser button:active {
+			background-color: rgb( 190, 190, 190 );
+			padding: 0;
+		}
+
+	#newUser .btn_yes {
+		grid-column: 2;
+	}
+
+	#newUser .btn_no {
+		grid-column: 3;
+	}

nui/radar.html

@@ -306,6 +306,17 @@
 			<button id="closeHelp" class="close">CLOSE HELP</button>
 		</div>
 
+		<div id="newUser">
+			<p class="msg">Hey, it appears this is your first time using the Wraith ARS 2X. Would you like to view the quick start video?</p>
+			<button id="showQuickStartVideo" class="btn_yes">Yes</button>
+			<button id="closeNewUserMsg" class="btn_no">No</button>
+		</div>
+
+		<div id="quickStart">
+			<iframe id="quickStartVideo" src="about:blank" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
+			<button id="closeQuickStart" class="close">CLOSE VIDEO</button>
+		</div>
+
 		<!-- Load JavaScript files -->
 		<script src="jquery-3.4.1.min.js"></script>
 		<script src="radar.js"></script>

nui/radar.js

@@ -97,6 +97,13 @@ const elements =
 	helpWeb: $( "#helpWeb" ), 
 	closeHelp: $( "#closeHelp" ), 
 
+	closeNewUser: $( "#closeNewUserMsg" ),
+	newUser: $( "#newUser" ),
+	openQsv: $( "#showQuickStartVideo" ),
+	qsvWindow: $( "#quickStart" ), 
+	qsvWeb: $( "#quickStartVideo" ),
+	closeQsv: $( "#closeQuickStart" ),
+
 	radarScaling: {
 		increase: $( "#radarIncreaseScale" ),
 		decrease: $( "#radarDecreaseScale" ),
@@ -228,6 +235,8 @@ elements.uiSettingsBox.hide();
 elements.keyLock.label.hide(); 
 elements.keyBinds.label.hide(); 
 elements.helpWindow.hide(); 
+elements.qsvWindow.hide();
+elements.newUser.hide(); 
 
 // Sets the action for the "UI SETTINGS" button on the remote to open the UI settings box
 elements.uiSettingsBtn.click( function() {
@@ -251,6 +260,24 @@ elements.closeHelp.click( function() {
 	loadHelp( false ); 
 } )
 
+// Sets the action for the "No" button on the new user popup to close the popup
+elements.closeNewUser.click( function() {
+	setEleVisible( elements.newUser, false ); 
+} )
+
+// Sets the action for the "Yes" button on the new user popup to open the quick start window and load the video
+elements.openQsv.click( function() {
+	setEleVisible( elements.newUser, false ); 
+	setEleVisible( elements.qsvWindow, true ); 
+	loadQuickStartVideo( true );
+} )
+
+// Sets the action for the "Close Video" button under the quick start window to close the quick start window and unload the video 
+elements.closeQsv.click( function() {
+	setEleVisible( elements.qsvWindow, false ); 
+	loadQuickStartVideo( false ); 
+} )
+
 
 /*------------------------------------------------------------------------------------
 	Setters
@@ -773,6 +800,15 @@ function loadHelp( state )
 	}
 }
 
+function loadQuickStartVideo( state )
+{
+	if ( state ) {
+		elements.qsvWeb.attr( "src", "https://www.youtube-nocookie.com/embed/B-6VD8pXNYE" ); 
+	} else {
+		elements.qsvWeb.attr( "src", "about:blank" ); 
+	}
+}
+
 
 /*------------------------------------------------------------------------------------
 	UI scaling and positioning 
@@ -1064,6 +1100,9 @@ window.addEventListener( "message", function( event ) {
 		case "displayKeybindChange":
 			displayKeybindState( item.state );
 			return; 
+		case "showNewUser":
+			setEleVisible( elements.newUser, true );
+			break; 
 
 		// Radar events
 		case "openRemote":