mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-10-23 18:23:15 +02:00
116 lines
3.3 KiB
TypeScript
116 lines
3.3 KiB
TypeScript
|
import React, { useState } from "react";
|
||
|
import { Modal } from "./Modal";
|
||
|
import Button from "@mui/material/Button";
|
||
|
import Typography from "@mui/material/Typography";
|
||
|
import TextField from "@mui/material/TextField";
|
||
|
import DoneIcon from "@mui/icons-material/Done";
|
||
|
import IconButton from "@mui/material/IconButton";
|
||
|
import ReplyIcon from "@mui/icons-material/Reply";
|
||
|
import { ThemeEvents } from "./Theme";
|
||
|
import { Settings, defaultSettings } from "../../Settings/Settings";
|
||
|
|
||
|
interface IProps {
|
||
|
open: boolean;
|
||
|
onClose: () => void;
|
||
|
}
|
||
|
|
||
|
function ColorEditor({ name }: { name: string }): React.ReactElement {
|
||
|
const [color, setColor] = useState(Settings.theme[name]);
|
||
|
if (color === undefined) return <></>;
|
||
|
const valid = color.match(/#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})/g);
|
||
|
|
||
|
function set(): void {
|
||
|
if (!valid) return;
|
||
|
Settings.theme[name] = color;
|
||
|
ThemeEvents.emit();
|
||
|
}
|
||
|
|
||
|
function revert(): void {
|
||
|
Settings.theme[name] = defaultSettings.theme[name];
|
||
|
setColor(defaultSettings.theme[name]);
|
||
|
ThemeEvents.emit();
|
||
|
}
|
||
|
function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
|
||
|
setColor(event.target.value);
|
||
|
}
|
||
|
return (
|
||
|
<>
|
||
|
<TextField
|
||
|
sx={{ mx: 1 }}
|
||
|
label={name}
|
||
|
value={color}
|
||
|
onChange={onChange}
|
||
|
variant="standard"
|
||
|
InputProps={{
|
||
|
endAdornment: (
|
||
|
<>
|
||
|
<IconButton onClick={set} disabled={!valid}>
|
||
|
<DoneIcon color={valid ? "primary" : "error"} />
|
||
|
</IconButton>
|
||
|
<IconButton onClick={revert}>
|
||
|
<ReplyIcon color="primary" />
|
||
|
</IconButton>
|
||
|
</>
|
||
|
),
|
||
|
}}
|
||
|
/>
|
||
|
</>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
export function ThemeEditorModal(props: IProps): React.ReactElement {
|
||
|
return (
|
||
|
<Modal open={props.open} onClose={props.onClose}>
|
||
|
<Button color="primary">primary</Button>
|
||
|
<Button color="secondary">secondary</Button>
|
||
|
<Button color="warning">warning</Button>
|
||
|
<Button color="info">info</Button>
|
||
|
<Button color="error">error</Button>
|
||
|
<Typography color="primary">primary</Typography>
|
||
|
<Typography color="secondary">secondary</Typography>
|
||
|
<Typography color="warning">warning</Typography>
|
||
|
<Typography color="info">info</Typography>
|
||
|
<Typography color="error">error</Typography>
|
||
|
<br />
|
||
|
<ColorEditor name="primarylight" />
|
||
|
<ColorEditor name="primary" />
|
||
|
<ColorEditor name="primarydark" />
|
||
|
|
||
|
<br />
|
||
|
<ColorEditor name="errorlight" />
|
||
|
<ColorEditor name="error" />
|
||
|
<ColorEditor name="errordark" />
|
||
|
|
||
|
<br />
|
||
|
<ColorEditor name="secondarylight" />
|
||
|
<ColorEditor name="secondary" />
|
||
|
<ColorEditor name="secondarydark" />
|
||
|
|
||
|
<br />
|
||
|
<ColorEditor name="warninglight" />
|
||
|
<ColorEditor name="warning" />
|
||
|
<ColorEditor name="warningdark" />
|
||
|
|
||
|
<br />
|
||
|
<ColorEditor name="infolight" />
|
||
|
<ColorEditor name="info" />
|
||
|
<ColorEditor name="infodark" />
|
||
|
|
||
|
<br />
|
||
|
<ColorEditor name="welllight" />
|
||
|
<ColorEditor name="well" />
|
||
|
<ColorEditor name="white" />
|
||
|
<ColorEditor name="black" />
|
||
|
|
||
|
<br />
|
||
|
<ColorEditor name="hp" />
|
||
|
<ColorEditor name="money" />
|
||
|
<ColorEditor name="hack" />
|
||
|
<ColorEditor name="combat" />
|
||
|
<ColorEditor name="cha" />
|
||
|
<ColorEditor name="int" />
|
||
|
<ColorEditor name="rep" />
|
||
|
</Modal>
|
||
|
);
|
||
|
}
|