Move all Theme color settings to FconfSettings rather than Settings. Add setting for default/classic main menu style

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}

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)) {

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);
     },

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");
+                    FconfSettings.THEME_HIGHLIGHT_COLOR = document.body.style.getPropertyValue("--my-highlight-color");
-                    Settings.ThemeFontColor = document.body.style.getPropertyValue("--my-font-color");
+                    FconfSettings.THEME_FONT_COLOR = document.body.style.getPropertyValue("--my-font-color");
-                    Settings.ThemeBackgroundColor = document.body.style.getPropertyValue("--my-background-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");
+                        FconfSettings.THEME_HIGHLIGHT_COLOR = document.body.style.getPropertyValue("--my-highlight-color");
-                        Settings.ThemeFontColor = document.body.style.getPropertyValue("--my-font-color");
+                        FconfSettings.THEME_FONT_COLOR = document.body.style.getPropertyValue("--my-font-color");
-                        Settings.ThemeBackgroundColor = document.body.style.getPropertyValue("--my-background-color");
+                        FconfSettings.THEME_BACKGROUND_COLOR = document.body.style.getPropertyValue("--my-background-color");
                     } else {
                         return post("Invalid Hex Input for theme");
                     }

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 };