mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-22 15:43:49 +01:00
Add easily switchable predefined themes
Includes the default theme and a Monokai-ish variant
This commit is contained in:
Martin Fournier
parent
853125009b
commit
db64d9869c
@ -1,5 +1,6 @@
|
||||
import { ISelfInitializer, ISelfLoading } from "../types";
|
||||
import { OwnedAugmentationsOrderSetting, PurchaseAugmentationsOrderSetting } from "./SettingEnums";
|
||||
import { defaultTheme, ITheme } from "./Themes";
|
||||
|
||||
/**
|
||||
* Represents the default settings the player could customize.
|
||||
@ -111,42 +112,7 @@ interface IDefaultSettings {
|
||||
/*
|
||||
* Theme colors
|
||||
*/
|
||||
theme: {
|
||||
[key: string]: string | undefined;
|
||||
primarylight: string;
|
||||
primary: string;
|
||||
primarydark: string;
|
||||
successlight: string;
|
||||
success: string;
|
||||
successdark: string;
|
||||
errorlight: string;
|
||||
error: string;
|
||||
errordark: string;
|
||||
secondarylight: string;
|
||||
secondary: string;
|
||||
secondarydark: string;
|
||||
warninglight: string;
|
||||
warning: string;
|
||||
warningdark: string;
|
||||
infolight: string;
|
||||
info: string;
|
||||
infodark: string;
|
||||
welllight: string;
|
||||
well: string;
|
||||
white: string;
|
||||
black: string;
|
||||
hp: string;
|
||||
money: string;
|
||||
hack: string;
|
||||
combat: string;
|
||||
cha: string;
|
||||
int: string;
|
||||
rep: string;
|
||||
disabled: string;
|
||||
backgroundprimary: string;
|
||||
backgroundsecondary: string;
|
||||
button: string;
|
||||
};
|
||||
theme: ITheme;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -193,41 +159,7 @@ export const defaultSettings: IDefaultSettings = {
|
||||
SuppressTIXPopup: false,
|
||||
SuppressSavedGameToast: false,
|
||||
|
||||
theme: {
|
||||
primarylight: "#0f0",
|
||||
primary: "#0c0",
|
||||
primarydark: "#090",
|
||||
successlight: "#0f0",
|
||||
success: "#0c0",
|
||||
successdark: "#090",
|
||||
errorlight: "#f00",
|
||||
error: "#c00",
|
||||
errordark: "#900",
|
||||
secondarylight: "#AAA",
|
||||
secondary: "#888",
|
||||
secondarydark: "#666",
|
||||
warninglight: "#ff0",
|
||||
warning: "#cc0",
|
||||
warningdark: "#990",
|
||||
infolight: "#69f",
|
||||
info: "#36c",
|
||||
infodark: "#039",
|
||||
welllight: "#444",
|
||||
well: "#222",
|
||||
white: "#fff",
|
||||
black: "#000",
|
||||
hp: "#dd3434",
|
||||
money: "#ffd700",
|
||||
hack: "#adff2f",
|
||||
combat: "#faffdf",
|
||||
cha: "#a671d1",
|
||||
int: "#6495ed",
|
||||
rep: "#faffdf",
|
||||
disabled: "#66cfbc",
|
||||
backgroundprimary: "#000",
|
||||
backgroundsecondary: "#000",
|
||||
button: "#333",
|
||||
},
|
||||
theme: defaultTheme,
|
||||
};
|
||||
|
||||
/**
|
||||
@ -262,41 +194,7 @@ export const Settings: ISettings & ISelfInitializer & ISelfLoading = {
|
||||
MonacoInsertSpaces: false,
|
||||
MonacoFontSize: 20,
|
||||
|
||||
theme: {
|
||||
primarylight: defaultSettings.theme.primarylight,
|
||||
primary: defaultSettings.theme.primary,
|
||||
primarydark: defaultSettings.theme.primarydark,
|
||||
successlight: defaultSettings.theme.successlight,
|
||||
success: defaultSettings.theme.success,
|
||||
successdark: defaultSettings.theme.successdark,
|
||||
errorlight: defaultSettings.theme.errorlight,
|
||||
error: defaultSettings.theme.error,
|
||||
errordark: defaultSettings.theme.errordark,
|
||||
secondarylight: defaultSettings.theme.secondarylight,
|
||||
secondary: defaultSettings.theme.secondary,
|
||||
secondarydark: defaultSettings.theme.secondarydark,
|
||||
warninglight: defaultSettings.theme.warninglight,
|
||||
warning: defaultSettings.theme.warning,
|
||||
warningdark: defaultSettings.theme.warningdark,
|
||||
infolight: defaultSettings.theme.infolight,
|
||||
info: defaultSettings.theme.info,
|
||||
infodark: defaultSettings.theme.infodark,
|
||||
welllight: defaultSettings.theme.welllight,
|
||||
well: defaultSettings.theme.well,
|
||||
white: defaultSettings.theme.white,
|
||||
black: defaultSettings.theme.black,
|
||||
hp: defaultSettings.theme.hp,
|
||||
money: defaultSettings.theme.money,
|
||||
hack: defaultSettings.theme.hack,
|
||||
combat: defaultSettings.theme.combat,
|
||||
cha: defaultSettings.theme.cha,
|
||||
int: defaultSettings.theme.int,
|
||||
rep: defaultSettings.theme.rep,
|
||||
disabled: defaultSettings.theme.disabled,
|
||||
backgroundprimary: defaultSettings.theme.backgroundprimary,
|
||||
backgroundsecondary: defaultSettings.theme.backgroundsecondary,
|
||||
button: defaultSettings.theme.button,
|
||||
},
|
||||
theme: { ...defaultTheme },
|
||||
init() {
|
||||
Object.assign(Settings, defaultSettings);
|
||||
},
|
||||
|
||||
110
src/Settings/Themes.ts
Normal file
110
src/Settings/Themes.ts
Normal file
@ -0,0 +1,110 @@
|
||||
export interface ITheme {
|
||||
[key: string]: string | undefined;
|
||||
primarylight: string;
|
||||
primary: string;
|
||||
primarydark: string;
|
||||
successlight: string;
|
||||
success: string;
|
||||
successdark: string;
|
||||
errorlight: string;
|
||||
error: string;
|
||||
errordark: string;
|
||||
secondarylight: string;
|
||||
secondary: string;
|
||||
secondarydark: string;
|
||||
warninglight: string;
|
||||
warning: string;
|
||||
warningdark: string;
|
||||
infolight: string;
|
||||
info: string;
|
||||
infodark: string;
|
||||
welllight: string;
|
||||
well: string;
|
||||
white: string;
|
||||
black: string;
|
||||
hp: string;
|
||||
money: string;
|
||||
hack: string;
|
||||
combat: string;
|
||||
cha: string;
|
||||
int: string;
|
||||
rep: string;
|
||||
disabled: string;
|
||||
backgroundprimary: string;
|
||||
backgroundsecondary: string;
|
||||
button: string;
|
||||
}
|
||||
|
||||
export const defaultTheme: ITheme = {
|
||||
primarylight: "#0f0",
|
||||
primary: "#0c0",
|
||||
primarydark: "#090",
|
||||
successlight: "#0f0",
|
||||
success: "#0c0",
|
||||
successdark: "#090",
|
||||
errorlight: "#f00",
|
||||
error: "#c00",
|
||||
errordark: "#900",
|
||||
secondarylight: "#AAA",
|
||||
secondary: "#888",
|
||||
secondarydark: "#666",
|
||||
warninglight: "#ff0",
|
||||
warning: "#cc0",
|
||||
warningdark: "#990",
|
||||
infolight: "#69f",
|
||||
info: "#36c",
|
||||
infodark: "#039",
|
||||
welllight: "#444",
|
||||
well: "#222",
|
||||
white: "#fff",
|
||||
black: "#000",
|
||||
hp: "#dd3434",
|
||||
money: "#ffd700",
|
||||
hack: "#adff2f",
|
||||
combat: "#faffdf",
|
||||
cha: "#a671d1",
|
||||
int: "#6495ed",
|
||||
rep: "#faffdf",
|
||||
disabled: "#66cfbc",
|
||||
backgroundprimary: "#000",
|
||||
backgroundsecondary: "#000",
|
||||
button: "#333",
|
||||
};
|
||||
|
||||
export interface IPredefinedThemes {
|
||||
'Default': ITheme;
|
||||
'Monokai': ITheme;
|
||||
}
|
||||
|
||||
export const getPredefinedThemes = (): IPredefinedThemes => ({
|
||||
'Default': defaultTheme,
|
||||
'Monokai': {
|
||||
...defaultTheme,
|
||||
|
||||
backgroundprimary: '#272822',
|
||||
backgroundsecondary: '#1B1C18',
|
||||
primary: '#F8F8F2',
|
||||
primarylight: '#FFF',
|
||||
primarydark: '#FAFAEB',
|
||||
success: '#A6E22E',
|
||||
successlight: '#ADE146',
|
||||
successdark: '#98E104',
|
||||
error: '#F92672',
|
||||
errorlight: '#FF69A0',
|
||||
errordark: '#D10F56',
|
||||
warning: '#E6DB74',
|
||||
warninglight: '#E1D992',
|
||||
warningdark: '#EDDD54',
|
||||
info: '#66D9EF',
|
||||
infolight: '#92E1F1',
|
||||
infodark: '#31CDED',
|
||||
|
||||
hp: '#F92672',
|
||||
money: '#E6DB74',
|
||||
hack: '#A6E22E',
|
||||
combat: '#75715E',
|
||||
cha: '#AE81FF',
|
||||
int: '#66D9EF',
|
||||
rep: '#E69F66',
|
||||
}
|
||||
});
|
||||
@ -7,9 +7,11 @@ import Paper from "@mui/material/Paper";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import ReplyIcon from "@mui/icons-material/Reply";
|
||||
import PaletteSharpIcon from "@mui/icons-material/PaletteSharp";
|
||||
import { Color, ColorPicker } from "material-ui-color";
|
||||
import { ThemeEvents } from "./Theme";
|
||||
import { Settings, defaultSettings } from "../../Settings/Settings";
|
||||
import { ITheme, getPredefinedThemes } from "../../Settings/Themes";
|
||||
|
||||
interface IProps {
|
||||
open: boolean;
|
||||
@ -64,11 +66,18 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
|
||||
...Settings.theme,
|
||||
});
|
||||
|
||||
function resetTheme(): void {
|
||||
setCustomTheme({
|
||||
...defaultSettings.theme,
|
||||
});
|
||||
Object.assign(Settings.theme, defaultSettings.theme);
|
||||
const predefinedThemes = getPredefinedThemes();
|
||||
const themes = predefinedThemes && Object.entries(predefinedThemes)
|
||||
.map(([name, templateTheme]) => (
|
||||
<Button onClick={() => setTemplateTheme(templateTheme)}
|
||||
startIcon={<PaletteSharpIcon />} key={name} sx={{ mr: 1 }}>
|
||||
<Typography>{name}</Typography>
|
||||
</Button>
|
||||
)) || <></>;
|
||||
|
||||
function setTheme(theme: ITheme): void {
|
||||
setCustomTheme(theme);
|
||||
Object.assign(Settings.theme, theme);
|
||||
ThemeEvents.emit();
|
||||
}
|
||||
|
||||
@ -96,23 +105,32 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
|
||||
ThemeEvents.emit();
|
||||
}
|
||||
|
||||
function setTemplateTheme(theme: ITheme): void {
|
||||
setTheme(theme);
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal open={props.open} onClose={props.onClose}>
|
||||
<Paper>
|
||||
<Paper sx={{ px: 1, py: 1, my: 1 }}>
|
||||
<Tooltip open={true} placement={"top"} title={<Typography>Example tooltip</Typography>}>
|
||||
<Button color="primary">primary button</Button>
|
||||
<Button color="primary" size="small">primary button</Button>
|
||||
</Tooltip>
|
||||
<Button color="secondary">secondary button</Button>
|
||||
<Button color="warning">warning button</Button>
|
||||
<Button color="info">info button</Button>
|
||||
<Button color="error">error button</Button>
|
||||
<Button disabled>disabled button</Button>
|
||||
<Typography color="primary">text with primary color</Typography>
|
||||
<Typography color="secondary">text with secondary color</Typography>
|
||||
<Typography color="error">text with error color</Typography>
|
||||
<TextField value={"Text field"} />
|
||||
</Paper>
|
||||
<Button color="secondary" size="small">secondary button</Button>
|
||||
<Button color="warning" size="small">warning button</Button>
|
||||
<Button color="info" size="small">info button</Button>
|
||||
<Button color="error" size="small">error button</Button>
|
||||
<Button disabled size="small">disabled button</Button>
|
||||
|
||||
<br />
|
||||
<Typography color="primary" variant="caption">text with primary color</Typography>
|
||||
<Typography color="secondary" variant="caption">text with secondary color</Typography>
|
||||
<Typography color="error" variant="caption">text with error color</Typography>
|
||||
|
||||
<br />
|
||||
<TextField value={"Text field"} size="small" />
|
||||
</Paper>
|
||||
|
||||
<Paper sx={{ py: 1, my: 1 }}>
|
||||
<ColorEditor
|
||||
name="primarylight"
|
||||
onColorChange={onColorChange}
|
||||
@ -133,7 +151,6 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
|
||||
/>
|
||||
|
||||
<br />
|
||||
|
||||
<ColorEditor
|
||||
name="successlight"
|
||||
onColorChange={onColorChange}
|
||||
@ -326,20 +343,24 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
|
||||
color={customTheme["disabled"]}
|
||||
defaultColor={defaultSettings.theme["disabled"]}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
</Paper>
|
||||
|
||||
<Paper sx={{ px: 1, py: 1, my: 1 }}>
|
||||
<TextField
|
||||
sx={{ mb: 1 }}
|
||||
multiline
|
||||
fullWidth
|
||||
maxRows={3}
|
||||
label={"import / export theme"}
|
||||
value={JSON.stringify(customTheme)}
|
||||
onChange={onThemeChange}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<IconButton onClick={resetTheme} size="large">
|
||||
<ReplyIcon />
|
||||
</IconButton>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<>
|
||||
<Typography sx={{ my: 1 }}>Copy the string above if you want to backup or share your theme with others.</Typography>
|
||||
<Typography sx={{ my: 1 }}>Use the buttons below to replace the current theme with a pre-built template</Typography>
|
||||
{themes}
|
||||
</>
|
||||
</Paper>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user