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

This commit is contained in:
danielyxie 2018-09-21 14:47:33 -05:00
parent 256f15418b
commit b12739a1ba
5 changed files with 130 additions and 42 deletions

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

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

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

@ -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");
}

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