From 83b7af4fde1af4b710df42dcbb82493d58c8bdf6 Mon Sep 17 00:00:00 2001 From: Vortrex <3858226+VortrexFTW@users.noreply.github.com> Date: Fri, 7 Jan 2022 19:50:04 -0600 Subject: [PATCH] GUI style changes and key press handling --- scripts/client/event.js | 1 + scripts/client/gui.js | 113 +++++++++++++++++++++++-------- scripts/client/gui/2fa.js | 2 + scripts/client/gui/charselect.js | 22 +++--- scripts/client/gui/error.js | 2 +- scripts/client/gui/info.js | 2 +- scripts/client/gui/login.js | 19 ++++-- scripts/client/gui/newchar.js | 20 +++--- scripts/client/gui/register.js | 4 +- scripts/client/gui/yesno.js | 4 +- 10 files changed, 126 insertions(+), 63 deletions(-) diff --git a/scripts/client/event.js b/scripts/client/event.js index d62e331e..76a2d258 100644 --- a/scripts/client/event.js +++ b/scripts/client/event.js @@ -102,6 +102,7 @@ function onProcess(event, deltaTime) { function onKeyUp(event, keyCode, scanCode, keyModifiers) { processSkinSelectKeyPress(keyCode); //processKeyDuringAnimation(); + processGUIKeyPress(keyCode); } // =========================================================================== diff --git a/scripts/client/gui.js b/scripts/client/gui.js index 4cdc7bc7..8d0c8852 100644 --- a/scripts/client/gui.js +++ b/scripts/client/gui.js @@ -28,6 +28,12 @@ let textInputAlpha = 180; let guiReady = false; +let guiSubmitKey = false; +let guiLeftKey = false; +let guiRightKey = false; +let guiUpKey = false; +let guiDownKey = false; + // =========================================================================== let placesOfOrigin = [ @@ -70,10 +76,10 @@ function initGUI() { initInfoDialogGUI(); initErrorDialogGUI(); initYesNoDialogGUI(); - initResetPasswordGUI(); - initChangePasswordGUI(); initTwoFactorAuthenticationGUI(); initListGUI(); + initResetPasswordGUI(); + initChangePasswordGUI(); closeAllWindows(); guiReady = true; @@ -98,47 +104,64 @@ let closeAllWindows = function() { resetPassword.window.shown = false; passwordChange.window.shown = false; mexui.setInput(false); + mexui.focusedControl = false; + + guiSubmitKey = false; + guiLeftKey = false; + guiRightKey = false; + guiUpKey = false; + guiDownKey = false; } // =========================================================================== let isAnyGUIActive = function() { if(!guiReady) { - if(infoDialog.window.shown) { - return true; - } + return false; + } - if(yesNoDialog.window.shown) { - return true; - } + if(infoDialog.window.shown == true) { + return true; + } - if(errorDialog.window.shown) { - return true; - } + if(yesNoDialog.window.shown == true) { + return true; + } - if(register.window.shown) { - return true; - } + if(errorDialog.window.shown == true) { + return true; + } - if(login.window.shown) { - return true; - } + if(register.window.shown == true) { + return true; + } - if(newCharacter.window.shown) { - return true; - } + if(login.window.shown == true) { + return true; + } - if(characterSelect.window.shown) { - return true; - } + if(newCharacter.window.shown == true) { + return true; + } - if(twoFactorAuth.window.shown) { - return true; - } + if(characterSelect.window.shown == true) { + return true; + } - if(listDialog.window.shown) { - return true; - } + if(twoFactorAuth.window.shown == true) { + return true; + } + + if(listDialog.window.shown == true) { + return true; + } + + if(resetPassword.window.shown == true) { + return true; + } + + if(passwordChange.window.shown == true) { + return true; } return false; @@ -224,6 +247,13 @@ addNetworkHandler("vrr.newCharacterFailed", function(errorMessage) { // =========================================================================== +addNetworkHandler("vrr.changePassword", function() { + logToConsole(LOG_DEBUG, `[VRR.GUI] Received signal to change password from server`); + showChangePasswordGUI(); +}); + +// =========================================================================== + addNetworkHandler("vrr.guiColour", function(red1, green1, blue1, red2, green2, blue2, red3, green3, blue3) { logToConsole(LOG_DEBUG, `[VRR.GUI] Received new GUI colours from server: ${red1}, ${green1}, ${blue1} / ${red2}, ${green2}, ${blue2} / ${red3}, ${green3}, ${blue3}`); primaryColour = [red1, green1, blue1]; @@ -247,6 +277,29 @@ addNetworkHandler("vrr.guiInit", function() { function hideAllGUI() { closeAllWindows(); setChatWindowEnabled(true); + guiSubmitKey = false; } -// =========================================================================== \ No newline at end of file +// =========================================================================== + +function processGUIKeyPress(keyCode) { + if(!isAnyGUIActive()) { + return false; + } + + if(keyCode == SDLK_RETURN || keyCode == SDLK_RETURN2) { + if(guiSubmitKey != false) { + guiSubmitKey(); + } + } else if(keyCode == SDLK_LEFT) { + if(guiLeftKey != false) { + guiLeftKey(); + } + } else if(keyCode == SDLK_RIGHT) { + if(guiRightKey != false) { + guiRightKey(); + } + } +} + +// =========================================================================== diff --git a/scripts/client/gui/2fa.js b/scripts/client/gui/2fa.js index 16c092c2..986ebe90 100644 --- a/scripts/client/gui/2fa.js +++ b/scripts/client/gui/2fa.js @@ -105,6 +105,8 @@ function showTwoFactorAuthGUI() { setChatWindowEnabled(false); mexui.setInput(true); twoFactorAuth.window.shown = true; + mexui.focusedControl = twoFactorAuth.codeInput; + guiSubmitKey = checkTwoFactorAuth; } // =========================================================================== diff --git a/scripts/client/gui/charselect.js b/scripts/client/gui/charselect.js index f7b7ea1d..6a5b5241 100644 --- a/scripts/client/gui/charselect.js +++ b/scripts/client/gui/charselect.js @@ -29,16 +29,16 @@ function initCharacterSelectGUI() { backgroundColour: toColour(secondaryColour[0], secondaryColour[1], secondaryColour[2], windowAlpha), }, title: { - textSize: 11.0, - textColour: toColour(primaryTextColour[0], primaryTextColour[1], primaryTextColour[2], 255), - backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], windowTitleAlpha), + textSize: 0.0, + textColour: toColour(0, 0, 0, 0), }, icon: { textSize: 0.0, textColour: toColour(0, 0, 0, 0), - backgroundColour: toColour(0, 0, 0, 0), - } + }, }); + characterSelect.window.titleBarIconSize = toVector2(0,0); + characterSelect.window.titleBarHeight = 0; characterSelect.nameText = characterSelect.window.text(5, 40, 200, 25, 'Lastname, Firstname', { main: { @@ -88,7 +88,7 @@ function initCharacterSelectGUI() { } }); - characterSelect.selectCharacterButton = characterSelect.window.button(85, 130, 260, 25, 'SELECT', { + characterSelect.selectCharacterButton = characterSelect.window.button(85, 130, 260, 25, 'PLAY', { main: { backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], buttonAlpha), textColour: toColour(primaryTextColour[0], primaryTextColour[1], primaryTextColour[2], 255), @@ -168,12 +168,7 @@ function showCharacterSelectGUI(firstName, lastName, cash, clan, lastPlayed, ski function showNewCharacter() { closeAllWindows(); logToConsole(LOG_DEBUG, `[VRR.GUI] Showing new character dialog window`); - setChatWindowEnabled(false); - mexui.setInput(true); - setHUDEnabled(false); - newCharacter.window.shown = true; - - showSmallGameMessage(`If you don't have a mouse cursor, press ${toUpperCase(getKeyNameFromId(disableGUIKey))} to disable GUI`, COLOUR_WHITE, 7500); + showNewCharacterGUI(); } // =========================================================================== @@ -209,6 +204,9 @@ function switchCharacterSelectGUI(firstName, lastName, cash, clan, lastPlayed, s characterSelect.lastPlayedText.text = `Last Played: ${lastPlayed}`; characterSelect.skinImage = characterSelect.window.image(310, 32, 100, 90, "files/images/skins/none.png"); characterSelect.window.shown = true; + guiSubmitKey = selectThisCharacter; + guiLeftKey = selectPreviousCharacter; + guiRightKey = selectNextCharacter; } // =========================================================================== diff --git a/scripts/client/gui/error.js b/scripts/client/gui/error.js index d26f90d0..529701bc 100644 --- a/scripts/client/gui/error.js +++ b/scripts/client/gui/error.js @@ -46,7 +46,7 @@ function initErrorDialogGUI() { }, }); - errorDialog.okayButton = errorDialog.window.button(20, 95, 360, 30, 'OK', { + errorDialog.okayButton = errorDialog.window.button(5, 105, 395, 30, 'OK', { main: { backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], buttonAlpha), textColour: toColour(primaryTextColour[0], primaryTextColour[1], primaryTextColour[2], 255), diff --git a/scripts/client/gui/info.js b/scripts/client/gui/info.js index 1a958849..611de94a 100644 --- a/scripts/client/gui/info.js +++ b/scripts/client/gui/info.js @@ -45,7 +45,7 @@ function initInfoDialogGUI() { }, }); - infoDialog.okayButton = infoDialog.window.button(20, 95, 360, 30, 'OK', { + infoDialog.okayButton = infoDialog.window.button(5, 105, 395, 30, 'OK', { main: { backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], buttonAlpha), textColour: toColour(primaryTextColour[0], primaryTextColour[1], primaryTextColour[2], 255), diff --git a/scripts/client/gui/login.js b/scripts/client/gui/login.js index 9b72ee14..709ea025 100644 --- a/scripts/client/gui/login.js +++ b/scripts/client/gui/login.js @@ -96,8 +96,7 @@ function initLoginGUI() { }, }, checkLogin); - /* - login.forgotPasswordButton = login.window.button(200, 240, 60, 15, 'FORGOT PASSWORD', { + login.forgotPasswordButton = login.window.button(200, 240, 60, 15, 'RESET PASS', { main: { backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], buttonAlpha), textColour: toColour(0, 0, 0, 255), @@ -110,7 +109,7 @@ function initLoginGUI() { }, }, switchToPasswordResetGUI); - login.resetPasswordLabel = login.window.text(20, 140, 60, 15, 'Need to reset your password? Click here >', { + login.resetPasswordLabel = login.window.text(20, 140, 60, 15, 'Forgot your password?', { main: { textSize: 8.0, textAlign: 1.0, @@ -121,7 +120,6 @@ function initLoginGUI() { borderColour: toColour(0, 0, 0, 0), }, }); - */ logToConsole(LOG_DEBUG, `[VRR.GUI] Created login GUI`); } @@ -134,7 +132,8 @@ function showLoginGUI() { setChatWindowEnabled(false); mexui.setInput(true); login.window.shown = true; - + mexui.focusedControl = login.passwordInput; + guiSubmitKey = checkLogin; showSmallGameMessage(`If you don't have a mouse cursor, press ${toUpperCase(getKeyNameFromId(disableGUIKey))} to disable GUI`, COLOUR_WHITE, 7500); } @@ -158,7 +157,15 @@ function loginFailed(errorMessage) { function loginSuccess() { logToConsole(LOG_DEBUG, `[VRR.GUI] Server reports login was successful`); + guiSubmitKey = false; closeAllWindows(); } -// =========================================================================== \ No newline at end of file +// =========================================================================== + +function switchToPasswordResetGUI() { + closeAllWindows(); + logToConsole(LOG_DEBUG, `[VRR.GUI] Showing password reset dialog window`); + showResetPasswordGUI(); + return false; +} \ No newline at end of file diff --git a/scripts/client/gui/newchar.js b/scripts/client/gui/newchar.js index 07f0c7c9..81179e1c 100644 --- a/scripts/client/gui/newchar.js +++ b/scripts/client/gui/newchar.js @@ -26,16 +26,14 @@ function initNewCharacterGUI() { backgroundColour: toColour(secondaryColour[0], secondaryColour[1], secondaryColour[2], windowAlpha), transitionTime: 500, }, - title: { - textSize: 0.0, - textColour: toColour(0, 0, 0, 0), - backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], windowTitleAlpha), - }, - icon: { - textSize: 0.0, - textColour: toColour(0, 0, 0, 0), - backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], windowTitleAlpha), - } + title: { + textSize: 0.0, + textColour: toColour(0, 0, 0, 0), + }, + icon: { + textSize: 0.0, + textColour: toColour(0, 0, 0, 0), + }, }); newCharacter.window.titleBarIconSize = toVector2(0,0); newCharacter.window.titleBarHeight = 0; @@ -157,6 +155,8 @@ function showNewCharacterGUI() { setChatWindowEnabled(false); mexui.setInput(true); newCharacter.window.shown = true; + mexui.focusedInput = newCharacter.firstNameInput; + guiSubmitButton = checkNewCharacter; } // =========================================================================== \ No newline at end of file diff --git a/scripts/client/gui/register.js b/scripts/client/gui/register.js index 62900123..f8792037 100644 --- a/scripts/client/gui/register.js +++ b/scripts/client/gui/register.js @@ -158,7 +158,8 @@ function showRegistrationGUI() { setChatWindowEnabled(false); mexui.setInput(true); register.window.shown = true; - + mexui.focusedControl = register.passwordInput; + guiSubmitKey = checkRegistration; showSmallGameMessage(`If you don't have a mouse cursor, press ${toUpperCase(getKeyNameFromId(disableGUIKey))} to disable GUI`, COLOUR_WHITE, 7500); } @@ -166,6 +167,7 @@ function showRegistrationGUI() { function registrationSuccess() { logToConsole(LOG_DEBUG, `[VRR.GUI] Server reports registration was successful`); + guiSubmitKey = false; closeAllWindows(); } diff --git a/scripts/client/gui/yesno.js b/scripts/client/gui/yesno.js index 4d7b2c10..131501d5 100644 --- a/scripts/client/gui/yesno.js +++ b/scripts/client/gui/yesno.js @@ -48,7 +48,7 @@ function initYesNoDialogGUI() { }, }); - yesNoDialog.yesButton = yesNoDialog.window.button(20, 95, 175, 30, 'YES', { + yesNoDialog.yesButton = yesNoDialog.window.button(5, 105, 197, 30, 'YES', { main: { backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], buttonAlpha), textColour: toColour(primaryTextColour[0], primaryTextColour[1], primaryTextColour[2], 255), @@ -61,7 +61,7 @@ function initYesNoDialogGUI() { }, }, yesNoDialogAnswerYes); - yesNoDialog.noButton = yesNoDialog.window.button(205, 95, 175, 30, 'NO', { + yesNoDialog.noButton = yesNoDialog.window.button(207, 105, 197, 30, 'NO', { main: { backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], buttonAlpha), textColour: toColour(primaryTextColour[0], primaryTextColour[1], primaryTextColour[2], 255),