build theme editor

2026-04-20 00:04:22 +02:00 · 2021-09-22 02:20:29 -04:00
parent f9a4eadb71
commit 80560ce9f6
10 changed files with 306 additions and 127 deletions
@@ -0,0 +1,115 @@
+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>
+  );
+}