From 6cb7704eed477db491250d2b30804b1216376848 Mon Sep 17 00:00:00 2001 From: danielyxie Date: Fri, 21 Sep 2018 14:47:33 -0500 Subject: [PATCH] Move all Theme color settings to FconfSettings rather than Settings. Add setting for default/classic main menu style --- src/Fconf.js | 125 ++++++++++++++++++++++++++++++++++-- src/Script.js | 2 +- src/Settings.ts | 18 ------ src/Terminal.js | 14 ++-- src/ui/setSettingsLabels.js | 13 ---- 5 files changed, 130 insertions(+), 42 deletions(-) diff --git a/src/Fconf.js b/src/Fconf.js index be3729360..9570f672e 100644 --- a/src/Fconf.js +++ b/src/Fconf.js @@ -1,8 +1,14 @@ import {parse, Node} from "../utils/acorn"; +import {dialogBoxCreate} from "../utils/DialogBox"; var FconfSettings = { ENABLE_BASH_HOTKEYS: false, ENABLE_TIMESTAMPS: false, + MAIN_MENU_STYLE: "default", + THEME_BACKGROUND_COLOR: "#000000", + THEME_FONT_COLOR: "#66ff33", + THEME_HIGHLIGHT_COLOR: "#ffffff", + THEME_PROMPT_COLOR: "#f92672", WRAP_INPUT: false, } @@ -16,6 +22,23 @@ var FconfComments = { "http://bitburner.readthedocs.io/en/latest/shortcuts.html", ENABLE_TIMESTAMPS: "Terminal commands and log entries will be timestamped. The timestamp\n" + "will have the format: M/D h:m", + MAIN_MENU_STYLE: "Customize the main navigation menu on the left-hand side. Current options:\n\n" + + "default, classic", + THEME_BACKGROUND_COLOR: "Sets the background color for not only the Terminal, but also for\n" + + "most of the game's UI.\n\n" + + "The color must be specified as a pound sign (#) followed by a \n" + + "3-digit or 6-digit hex color code (e.g. #123456). Default color: #000000", + THEME_FONT_COLOR: "Sets the font color for not only the Terminal, but also for\n" + + "most of the game's UI.\n\n" + + "The color must be specified as a pound sign (#) followed by a \n" + + "3-digit or 6-digit hex color code (e.g. #123456). Default color: #66ff33", + THEME_HIGHLIGHT_COLOR: "Sets the highlight color for not only the Terminal, but also for \n" + + "most of the game's UI.\n\n" + + "The color must be specified as a pound sign (#) followed by a \n" + + "3-digit or 6-digit hex color code (e.g. #123456). Default color: #ffffff", + THEME_PROMPT_COLOR: "Sets the prompt color in the Terminal\n\n" + + "The color must be specified as a pound sign (#) followed by a \n" + + "3-digit or 6-digit hex color code (e.g. #123456). Default color: #f92672", WRAP_INPUT: "Wrap Terminal Input. If this is enabled, then when a Terminal command is\n" + "too long and overflows, then it will wrap to the next line instead of\n" + "side-scrolling\n\n" + @@ -23,6 +46,8 @@ var FconfComments = { "before its effect takes place.", } +const MainMenuStyleOptions = ["default", "classic"]; + //Parse Fconf settings from the config text //Throws an exception if parsing fails function parseFconfSettings(config) { @@ -66,6 +91,9 @@ function parseFconfSettings(config) { } } } + + setTheme(); + setMainMenuStyle(); } function parseFconfSetting(setting, value) { @@ -76,11 +104,18 @@ function parseFconfSetting(setting, value) { return; } - //Needed to convert entered value to boolean/strings accordingly + function sanitizeString(value) { + value = value.toLowerCase(); + if (value.startsWith('"')) { value = value.slice(1); } + if (value.endsWith('"')) { value = value.slice(0, -1); } + return value; + } + switch(setting) { case "ENABLE_BASH_HOTKEYS": case "ENABLE_TIMESTAMPS": case "WRAP_INPUT": + // Need to convert entered value to boolean/strings accordingly var value = value.toLowerCase(); if (value === "1" || value === "true" || value === "y") { value = true; @@ -89,10 +124,28 @@ function parseFconfSetting(setting, value) { } FconfSettings[setting] = value; break; + case "MAIN_MENU_STYLE": + var value = sanitizeString(value); + if (MainMenuStyleOptions.includes(value)) { + FconfSettings[setting] = value; + } else { + dialogBoxCreate(`Invalid option specified for ${setting}. Options: ${MainMenuStyleOptions.toString()}`); + } + break; + case "THEME_BACKGROUND_COLOR": + case "THEME_FONT_COLOR": + case "THEME_HIGHLIGHT_COLOR": + case "THEME_PROMPT_COLOR": + var value = sanitizeString(value); + if ((/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value))) { + FconfSettings[setting] = value; + } else { + dialogBoxCreate(`Invalid color specified for ${setting}. Must be a hex color code preceded by a pound (#)`); + } + break; default: break; } - return; } //Create the .fconf file text from the settings @@ -114,9 +167,9 @@ function createFconf() { } else if (FconfSettings[setting] === false) { value = "0"; } else { - value = String(FconfSettings[setting]); + value = '"' + String(FconfSettings[setting]) + '"'; } - res += (setting + "=" + value + "\n\n"); + res += (`${setting} = ${value}\n\n`); } } return res; @@ -129,6 +182,70 @@ function loadFconf(saveString) { FconfSettings[setting] = tempFconfSettings[setting]; } } + + // Initialize themes/styles after loading + setTheme(); + setMainMenuStyle(); +} + +function setTheme() { + if (FconfSettings.THEME_HIGHLIGHT_COLOR == null || + FconfSettings.THEME_FONT_COLOR == null || + FconfSettings.THEME_BACKGROUND_COLOR == null || + FconfSettings.THEME_PROMPT_COLOR == null) { + console.log("ERROR: Cannot find Theme Settings"); + return; + } + if (/^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(FconfSettings.THEME_HIGHLIGHT_COLOR) && + /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(FconfSettings.THEME_FONT_COLOR) && + /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(FconfSettings.THEME_BACKGROUND_COLOR) && + /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(FconfSettings.THEME_PROMPT_COLOR)) { + document.body.style.setProperty('--my-highlight-color', FconfSettings.THEME_HIGHLIGHT_COLOR); + document.body.style.setProperty('--my-font-color', FconfSettings.THEME_FONT_COLOR); + document.body.style.setProperty('--my-background-color', FconfSettings.THEME_BACKGROUND_COLOR); + document.body.style.setProperty('--my-prompt-color', FconfSettings.THEME_PROMPT_COLOR); + } +} + +function setMainMenuStyle() { + const mainMenu = document.getElementById("mainmenu"); + const hackingMenuHdr = document.getElementById("hacking-menu-header"); + const characterMenuHdr = document.getElementById("character-menu-header"); + const worldMenuHdr = document.getElementById("world-menu-header"); + const helpMenuHdr = document.getElementById("help-menu-header"); + + function removeAllAccordionHeaderClasses() { + hackingMenuHdr.classList.remove("mainmenu-accordion-header", "mainmenu-accordion-header-classic"); + characterMenuHdr.classList.remove("mainmenu-accordion-header", "mainmenu-accordion-header-classic"); + worldMenuHdr.classList.remove("mainmenu-accordion-header", "mainmenu-accordion-header-classic"); + helpMenuHdr.classList.remove("mainmenu-accordion-header", "mainmenu-accordion-header-classic"); + } + + function addClassToAllAccordionHeaders(clsName) { + hackingMenuHdr.classList.add(clsName); + characterMenuHdr.classList.add(clsName); + worldMenuHdr.classList.add(clsName); + helpMenuHdr.classList.add(clsName); + } + + if (FconfSettings["MAIN_MENU_STYLE"] === "default") { + removeAllAccordionHeaderClasses(); + mainMenu.classList.remove("classic"); + addClassToAllAccordionHeaders("mainmenu-accordion-header"); + + } else if (FconfSettings["MAIN_MENU_STYLE"] === "classic") { + removeAllAccordionHeaderClasses(); + mainMenu.classList.add("classic"); + addClassToAllAccordionHeaders("mainmenu-accordion-header-classic"); + } else { + return; + } + + // Click each header twice to reset lol + hackingMenuHdr.click(); hackingMenuHdr.click(); + characterMenuHdr.click(); characterMenuHdr.click(); + worldMenuHdr.click(); worldMenuHdr.click(); + helpMenuHdr.click(); helpMenuHdr.click(); } export {FconfSettings, createFconf, parseFconfSettings, loadFconf} diff --git a/src/Script.js b/src/Script.js index 4247ec7b0..cc35e6cc7 100755 --- a/src/Script.js +++ b/src/Script.js @@ -325,7 +325,7 @@ function saveAndCloseScriptEditor() { try { parseFconfSettings(code); } catch(e) { - dialogBoxCreate("Invalid .fconf file"); + dialogBoxCreate(`Invalid .fconf file: ${e}`); return; } } else if (isScriptFilename(filename)) { diff --git a/src/Settings.ts b/src/Settings.ts index aab5931b6..a0c0fdbc6 100644 --- a/src/Settings.ts +++ b/src/Settings.ts @@ -75,21 +75,6 @@ interface ISettings extends IDefaultSettings { * TODO: This should really be an enum of allowed values. */ EditorTheme: string; - - /** - * The CSS background theme color to apply across the game. - */ - ThemeBackgroundColor: string; - - /** - * The CSS text theme color to apply across the game. - */ - ThemeFontColor: string; - - /** - * The CSS foreground theme color to apply across the game. - */ - ThemeHighlightColor: string; } const defaultSettings: IDefaultSettings = { @@ -124,9 +109,6 @@ export const Settings: ISettings & ISelfInitializer & ISelfLoading = { SuppressHospitalizationPopup: defaultSettings.SuppressHospitalizationPopup, SuppressMessages: defaultSettings.SuppressMessages, SuppressTravelConfirmation: defaultSettings.SuppressTravelConfirmation, - ThemeBackgroundColor: "#000000", - ThemeFontColor: "#66ff33", - ThemeHighlightColor: "#ffffff", init() { Object.assign(Settings, defaultSettings); }, diff --git a/src/Terminal.js b/src/Terminal.js index 38a1878cc..e58f5aae7 100644 --- a/src/Terminal.js +++ b/src/Terminal.js @@ -1543,6 +1543,7 @@ let Terminal = { document.body.style.setProperty('--my-highlight-color',"#ffffff"); document.body.style.setProperty('--my-font-color',"#66ff33"); document.body.style.setProperty('--my-background-color',"#000000"); + document.body.style.setProperty('--my-prompt-color', "#f92672"); } else if (themeName == "muted"){ document.body.style.setProperty('--my-highlight-color',"#ffffff"); document.body.style.setProperty('--my-font-color',"#66ff33"); @@ -1554,9 +1555,10 @@ let Terminal = { } else { return post("Theme not found"); } - Settings.ThemeHighlightColor = document.body.style.getPropertyValue("--my-highlight-color"); - Settings.ThemeFontColor = document.body.style.getPropertyValue("--my-font-color"); - Settings.ThemeBackgroundColor = document.body.style.getPropertyValue("--my-background-color"); + FconfSettings.THEME_HIGHLIGHT_COLOR = document.body.style.getPropertyValue("--my-highlight-color"); + FconfSettings.THEME_FONT_COLOR = document.body.style.getPropertyValue("--my-font-color"); + FconfSettings.THEME_BACKGROUND_COLOR = document.body.style.getPropertyValue("--my-background-color"); + FconfSettings.THEME_PROMPT_COLOR = document.body.style.getPropertyValue("--my-prompt-color"); } else { var inputBackgroundHex = args[0]; var inputTextHex = args[1]; @@ -1567,9 +1569,9 @@ let Terminal = { document.body.style.setProperty('--my-highlight-color',inputHighlightHex); document.body.style.setProperty('--my-font-color',inputTextHex); document.body.style.setProperty('--my-background-color',inputBackgroundHex); - Settings.ThemeHighlightColor = document.body.style.getPropertyValue("--my-highlight-color"); - Settings.ThemeFontColor = document.body.style.getPropertyValue("--my-font-color"); - Settings.ThemeBackgroundColor = document.body.style.getPropertyValue("--my-background-color"); + FconfSettings.THEME_HIGHLIGHT_COLOR = document.body.style.getPropertyValue("--my-highlight-color"); + FconfSettings.THEME_FONT_COLOR = document.body.style.getPropertyValue("--my-font-color"); + FconfSettings.THEME_BACKGROUND_COLOR = document.body.style.getPropertyValue("--my-background-color"); } else { return post("Invalid Hex Input for theme"); } diff --git a/src/ui/setSettingsLabels.js b/src/ui/setSettingsLabels.js index cfa7dccbf..1db13e005 100644 --- a/src/ui/setSettingsLabels.js +++ b/src/ui/setSettingsLabels.js @@ -103,19 +103,6 @@ function setSettingsLabels() { } Settings.Locale = locale.value; } - - //Theme - if (Settings.ThemeHighlightColor == null || Settings.ThemeFontColor == null || Settings.ThemeBackgroundColor == null) { - console.log("ERROR: Cannot find Theme Settings"); - return; - } - if (/^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(Settings.ThemeHighlightColor) && - /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(Settings.ThemeFontColor) && - /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(Settings.ThemeBackgroundColor)) { - document.body.style.setProperty('--my-highlight-color', Settings.ThemeHighlightColor); - document.body.style.setProperty('--my-font-color', Settings.ThemeFontColor); - document.body.style.setProperty('--my-background-color', Settings.ThemeBackgroundColor); - } } export { setSettingsLabels };