diff --git a/cl_radar.lua b/cl_radar.lua index 86275b0..b68d043 100644 --- a/cl_radar.lua +++ b/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 diff --git a/config.lua b/config.lua index 0e5700a..1648f99 100644 --- a/config.lua +++ b/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 = { diff --git a/nui/radar.css b/nui/radar.css index 360d1ae..602a601 100644 --- a/nui/radar.css +++ b/nui/radar.css @@ -1068,4 +1068,107 @@ button:focus { outline: none; } #helpWindow { width: 80%; } -} \ No newline at end of file +} + +#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; + } \ No newline at end of file diff --git a/nui/radar.html b/nui/radar.html index 37c1194..6301d62 100644 --- a/nui/radar.html +++ b/nui/radar.html @@ -306,6 +306,17 @@ +
+

Hey, it appears this is your first time using the Wraith ARS 2X. Would you like to view the quick start video?

+ + +
+ +
+ + +
+ diff --git a/nui/radar.js b/nui/radar.js index c82aeaa..73e87d9 100644 --- a/nui/radar.js +++ b/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":