From 0c79b2f3109352c781dd8e73a7aa8139fd2a1bd2 Mon Sep 17 00:00:00 2001 From: Vortrex <3858226+VortrexFTW@users.noreply.github.com> Date: Mon, 25 Oct 2021 12:57:04 -0500 Subject: [PATCH] GUI server-specific secondary and text colours --- scripts/client/gui.js | 221 ++++-------------------------------------- 1 file changed, 21 insertions(+), 200 deletions(-) diff --git a/scripts/client/gui.js b/scripts/client/gui.js index ddcd6ab5..de34b19c 100644 --- a/scripts/client/gui.js +++ b/scripts/client/gui.js @@ -14,40 +14,20 @@ let robotoFont = "Roboto"; let mainLogoPath = (typeof gta == "undefined") ? "files/images/mafiac-logo.png" : "files/images/gtac-logo.png"; let primaryColour = [200, 200, 200]; +let secondaryColour = [16, 16, 16]; +let primaryTextColour = [0, 0, 0]; let focusedColour = [200, 200, 200]; let invalidValueColour = [200, 200, 200]; let focusedColourOffset = 50; -let windowColour = (typeof gta == "undefined") ? [24, 24, 24, 150] : [0, 0, 0, 150]; +let windowAlpha = 200; let windowTitleAlpha = 180; let buttonAlpha = 180; let textInputAlpha = 180; let guiReady = false; -//let mexui = findResourceByName("mexui").exports.getMexUI(); - -// =========================================================================== - -let twoFactorAuth = { - window: null, - logoImage: null, - qrCode: null, - messageLabel: null, - codeLabel: null, - codeInput: null, - submitButton: null, -}; - -// =========================================================================== - -let listDialog = { - window: null, - messageLabel: null, - listGrid: null, -}; - // =========================================================================== let placesOfOrigin = [ @@ -90,175 +70,19 @@ function initGUI() { initInfoDialogGUI(); initErrorDialogGUI(); initYesNoDialogGUI(); - //initResetPasswordGUI(); + initResetPasswordGUI(); + initChangePasswordGUI(); + initTwoFactorAuthenticationGUI(); + initListGUI(); - logToConsole(LOG_DEBUG, `[VRR.GUI] Creating two factor auth GUI ...`); - twoFactorAuth.window = mexui.window(game.width/2-150, game.height/2-129, 300, 258, 'LOGIN', { - main: { - backgroundColour: toColour(windowColour[0], windowColour[1], windowColour[2], windowColour[3]), - transitionTime: 500, - }, - title: { - textSize: 0.0, - textColour: toColour(0, 0, 0, 0), - }, - icon: { - textSize: 0.0, - textColour: toColour(0, 0, 0, 0), - }, - focused: { - borderColour: toColour(0, 0, 0, 0), - }, - }); - twoFactorAuth.window.titleBarIconSize = toVector2(0,0); - twoFactorAuth.window.titleBarHeight = 0; - - twoFactorAuth.qrCode = twoFactorAuth.window.image(100, 20, 100, 100, mainLogoPath, { - focused: { - borderColour: toColour(0, 0, 0, 0), - }, - }); - - twoFactorAuth.codeLabel = twoFactorAuth.window.text(20, 135, 260, 20, 'Please enter the code from your authenticator app!', { - main: { - textSize: 10.0, - textAlign: 0.5, - textColour: toColour(200, 200, 200, 255), - textFont: robotoFont, - }, - focused: { - borderColour: toColour(0, 0, 0, 0), - }, - }); - - twoFactorAuth.codeInput = twoFactorAuth.window.textInput(20, 170, 260, 25, '', { - main: { - backgroundColour: toColour(0, 0, 0, 120), - borderColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], textInputAlpha), - textColour: toColour(200, 200, 200, 255), - textSize: 10.0, - textFont: robotoFont, - }, - caret: { - lineColour: toColour(255, 255, 255, 255), - }, - placeholder: { - textColour: toColour(200, 200, 200, 150), - textSize: 10.0, - textFont: robotoFont, - }, - focused: { - borderColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], 255), - }, - }); - twoFactorAuth.codeInput.placeholder = "Code"; - - twoFactorAuth.submitButton = twoFactorAuth.window.button(20, 205, 260, 30, 'SUBMIT', { - main: { - backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], buttonAlpha), - textColour: toColour(0, 0, 0, 255), - textSize: 10.0, - textFont: robotoFont, - textAlign: 0.5, - }, - focused: { - borderColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], buttonAlpha), - }, - }, checkTwoFactorAuth); - - logToConsole(LOG_DEBUG, `[VRR.GUI] Created two factor auth GUI`); - - // =========================================================================== - - logToConsole(LOG_DEBUG, `[VRR.GUI] Creating list dialog GUI ...`); - listDialog.window = mexui.window(game.width/2-200, game.height/2-70, 400, 500, 'List', { - main: { - backgroundColour: toColour(windowColour[0], windowColour[1], windowColour[2], windowColour[3]), - }, - title: { - textSize: 11.0, - textColour: toColour(0, 0, 0, 255), - backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], windowTitleAlpha), - }, - icon: { - textSize: 11.0, - textColour: toColour(255, 255, 255, 255), - backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], windowTitleAlpha), - hover: { - backgroundColour: toColour(205, 60, 60, windowTitleAlpha), - }, - }, - }); - - listDialog.messageLabel = infoDialog.window.text(5, 5, 390, 20, 'Select one', { - main: { - textSize: 10.0, - textAlign: 0.5, - textColour: toColour(255, 255, 255, 220), - textFont: robotoFont, - }, - focused: { - borderColour: toColour(0, 0, 0, 0), - }, - }); - - listDialog.listGrid = listDialog.window.grid(5, 25, 390, 450, { - main: { - backgroundColour: toColour(windowColour[0], windowColour[1], windowColour[2], windowColour[3]), - }, - column: { - lineColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], windowTitleAlpha), - }, - header: { - backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], windowTitleAlpha-50), - textColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], windowTitleAlpha), - }, - cell: { - backgroundColour: toColour(windowColour[0], windowColour[1], windowColour[2], windowColour[3]), - textColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], windowTitleAlpha), - }, - row: { - lineColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], windowTitleAlpha), - hover: { - backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], 120), - } - } - }); - logToConsole(LOG_DEBUG, `[VRR.GUI] Created list dialog GUI`); - - // =========================================================================== + closeAllWindows(); + guiReady = true; logToConsole(LOG_DEBUG, `[VRR.GUI] All GUI created successfully!`); - closeAllWindows(); - - guiReady = true; }; // =========================================================================== -let twoFactorAuthFailed = function(errorMessage) { - logToConsole(LOG_DEBUG, `[VRR.GUI] Server reports two-factor authentication failed. Reason: ${errorMessage}`); - login.messageLabel.text = errorMessage; - login.messageLabel.styles.main.textColour = toColour(180, 32, 32, 255); - login.passwordInput.text = ""; -} - -// =========================================================================== - -let twoFactorAuthSuccess = function() { - logToConsole(LOG_DEBUG, `[VRR.GUI] Server reports two-factor authentication was successful`); - closeAllWindows(); -} - -// =========================================================================== - -let checkTwoFactorAuth = function() { - logToConsole(LOG_DEBUG, `[VRR.GUI] Checking two-factor authentication with server ...`); - triggerNetworkEvent("vrr.checkTwoFactorAuth", twoFactorAuth.codeInput.lines[0]); -} - -// =========================================================================== - let closeAllWindows = function() { logToConsole(LOG_DEBUG, `[VRR.GUI] Closing all GUI windows`); infoDialog.window.shown = false; @@ -270,21 +94,13 @@ let closeAllWindows = function() { characterSelect.window.shown = false; twoFactorAuth.window.shown = false; listDialog.window.shown = false; + resetPassword.window.shown = false; + passwordChange.window.shown = false; mexui.setInput(false); } // =========================================================================== -let showTwoFactorAuth = function() { - closeAllWindows(); - logToConsole(LOG_DEBUG, `[VRR.GUI] Showing two-factor authentication window`); - setChatWindowEnabled(false); - mexui.setInput(true); - twoFactorAuth.window.shown = true; -} - -// =========================================================================== - let isAnyGUIActive = function() { if(!guiReady) { if(infoDialog.window.shown) { @@ -407,17 +223,22 @@ addNetworkHandler("vrr.newCharacterFailed", function(errorMessage) { // =========================================================================== -addNetworkHandler("vrr.guiColour", function(red, green, blue) { - logToConsole(LOG_DEBUG, `[VRR.GUI] Received new GUI colours from server`); - primaryColour = [red, green, blue]; - focusedColour = [red+focusedColourOffset, green+focusedColourOffset, blue+focusedColourOffset]; +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]; + secondaryColour = [red2, green2, blue2]; + primaryTextColour = [red3, green3, blue3]; + focusedColour = [red1+focusedColourOffset, green1+focusedColourOffset, blue1+focusedColourOffset]; + + initGUI(); + triggerNetworkEvent("vrr.guiReady", true); }); // =========================================================================== addNetworkHandler("vrr.guiInit", function() { logToConsole(LOG_DEBUG, `[VRR.GUI] Initializing MexUI app`); - initGUI(); + //initGUI(); triggerNetworkEvent("vrr.guiReady", true); });