Add theme browser page accessible from game options

Removed the themes buttons that were in the ThemeEditorModal and only
left a "Revert to Default" button along with a link to the ThemeBrowser
page.

Split off the buttons into reusable components since they are now used
in two pages.

Display the themes in big cards with a zoomable screenshot. Applying the
theme now shows a toast with an option to undo the action.

The snackbar now allows ReactNode instead of only strings.

- Add link with details on how to create a new theme in the game.
- Add link to the theme-sharing discord channel.
- Add icons to the theme & style buttons in GameOptions
- Add "Theme Editor" button to ThemeBrowser
- Add "Style Editor" button to ThemeBrowser
- Move Styles related files into Themes folder
- Includes a modal that shows a bigger version of the screenshot.
- Change Snackbar to allow for ReactNode as the message

src/NetscriptFunctions/UserInterface.ts

@@ -6,7 +6,7 @@ import { GameInfo, IStyleSettings, UserInterface as IUserInterface, UserInterfac
 import { Settings } from "../Settings/Settings";
 import { ThemeEvents } from "../Themes/ui/Theme";
 import { defaultTheme } from "../Themes/Themes";
-import { defaultStyles } from "../Settings/Styles";
+import { defaultStyles } from "../Themes/Styles";
 import { CONSTANTS } from "../Constants";
 import { hash } from "../hash/hash";
 

src/Settings/Settings.ts

@@ -1,7 +1,7 @@
 import { ISelfInitializer, ISelfLoading } from "../types";
 import { OwnedAugmentationsOrderSetting, PurchaseAugmentationsOrderSetting } from "./SettingEnums";
 import { defaultTheme, ITheme } from "../Themes/Themes";
-import { defaultStyles } from "./Styles";
+import { defaultStyles } from "../Themes/Styles";
 import { WordWrapOptions } from "../ScriptEditor/ui/Options";
 import { OverviewSettings } from "../ui/React/Overview";
 import { IStyleSettings } from "../ScriptEditor/NetscriptDefinitions";

src/Themes/README.md

@@ -8,7 +8,8 @@ See [CONTRIBUTING.md](/CONTRIBUTING.md) for details.
 
 1. Duplicate one of the folders in `/src/Themes/data` and give it a new name (keep the hyphenated format)
 2. Modify the data in the new `/src/Themes/data/new-folder/index.ts` file
-3. Add the import/export into the `/src/Themes/data/index.ts` file
+3. Replace the screenshot.png with one of your theme
+4. Add the import/export into the `/src/Themes/data/index.ts` file
 
 The themes are ordered according to the export order in `index.ts`
 

src/Themes/ui/StyleEditorButton.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
+import TextFormatIcon from "@mui/icons-material/TextFormat";
+import { StyleEditorModal } from "./StyleEditorModal";
+
+export function StyleEditorButton(): React.ReactElement {
+  const [styleEditorOpen, setStyleEditorOpen] = useState(false);
+  return (
+    <>
+      <Tooltip title="The style editor allows you to modify certain CSS rules used by the game.">
+        <Button startIcon={<TextFormatIcon />} onClick={() => setStyleEditorOpen(true)}>
+          Style Editor
+        </Button>
+      </Tooltip>
+      <StyleEditorModal open={styleEditorOpen} onClose={() => setStyleEditorOpen(false)} />
+    </>
+  );
+}

src/Themes/ui/StyleEditorModal.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Modal } from "./Modal";
+import { Modal } from "../../ui/React/Modal";
 
 import Button from "@mui/material/Button";
 import ButtonGroup from "@mui/material/ButtonGroup";
@@ -9,9 +9,9 @@ import TextField from "@mui/material/TextField";
 import ReplyIcon from "@mui/icons-material/Reply";
 import SaveIcon from "@mui/icons-material/Save";
 
-import { ThemeEvents } from "../../Themes/ui/Theme";
+import { ThemeEvents } from "./Theme";
 import { Settings } from "../../Settings/Settings";
-import { defaultStyles } from "../../Settings/Styles";
+import { defaultStyles } from "../Styles";
 import { Tooltip } from "@mui/material";
 import { IStyleSettings } from "../../ScriptEditor/NetscriptDefinitions";
 

src/Themes/ui/ThemeBrowser.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from "react";
+import Typography from "@mui/material/Typography";
+import Paper from "@mui/material/Paper";
+import { ThemeEvents } from "./Theme";
+import { Settings } from "../../Settings/Settings";
+import { getPredefinedThemes, IPredefinedTheme } from "../Themes";
+import { Box, ButtonGroup, Button } from "@mui/material";
+import { IRouter } from "../../ui/Router";
+import { ThemeEditorButton } from "./ThemeEditorButton";
+import { StyleEditorButton } from "./StyleEditorButton";
+import { ThemeEntry } from "./ThemeEntry";
+import { ThemeCollaborate } from "./ThemeCollaborate";
+import { Modal } from "../../ui/React/Modal";
+import { SnackbarEvents } from "../../ui/React/Snackbar";
+
+interface IProps {
+  router: IRouter;
+}
+
+// Everything dies when the theme gets reloaded, so we'll keep the current scroll to not jump around.
+let previousScrollY = 0;
+
+export function ThemeBrowser({ router }: IProps): React.ReactElement {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalImageSrc, setModalImageSrc] = useState<string | undefined>();
+  const predefinedThemes = getPredefinedThemes();
+  const themes = (predefinedThemes &&
+    Object.entries(predefinedThemes).map(([key, templateTheme]) => (
+      <ThemeEntry
+        key={key}
+        theme={templateTheme}
+        onActivated={() => setTheme(templateTheme)}
+        onImageClick={handleZoom}
+      />
+    ))) || <></>;
+
+  function setTheme(theme: IPredefinedTheme): void {
+    previousScrollY = window.scrollY;
+    const previousColors = { ...Settings.theme };
+    Object.assign(Settings.theme, theme.colors);
+    ThemeEvents.emit();
+    SnackbarEvents.emit(
+      <>
+        Updated theme to "<strong>{theme.name}</strong>"
+        <Button
+          sx={{ ml: 1 }}
+          color="secondary"
+          size="small"
+          onClick={() => {
+            Object.assign(Settings.theme, previousColors);
+            ThemeEvents.emit();
+          }}
+        >
+          UNDO
+        </Button>
+      </>,
+      "info",
+      30000,
+    );
+  }
+
+  function handleZoom(src: string): void {
+    previousScrollY = window.scrollY;
+    setModalImageSrc(src);
+    setModalOpen(true);
+  }
+
+  function handleCloseZoom(): void {
+    previousScrollY = window.scrollY;
+    setModalOpen(false);
+  }
+
+  useEffect(() => {
+    requestAnimationFrame(() => window.scrollTo(0, previousScrollY));
+  });
+
+  return (
+    <Box sx={{ mx: 2 }}>
+      <Typography variant="h4">Theme Browser</Typography>
+      <Paper sx={{ px: 2, py: 1, my: 1 }}>
+        <ThemeCollaborate />
+        <ButtonGroup sx={{ mb: 2, display: "block" }}>
+          <ThemeEditorButton router={router} />
+          <StyleEditorButton />
+        </ButtonGroup>
+        <Box sx={{ display: "flex", flexWrap: "wrap" }}>{themes}</Box>
+        <Modal open={modalOpen} onClose={handleCloseZoom}>
+          <img src={modalImageSrc} style={{ width: "100%" }} />
+        </Modal>
+      </Paper>
+    </Box>
+  );
+}

src/Themes/ui/ThemeCollaborate.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import Typography from "@mui/material/Typography";
+import { Link } from "@mui/material";
+
+export function ThemeCollaborate(): React.ReactElement {
+  return (
+    <>
+      <Typography sx={{ my: 1 }}>
+        If you've created a theme that you believe should be added in game's theme browser, feel free to{" "}
+        <Link href="https://github.com/danielyxie/bitburner/tree/dev/src/Themes/README.md" target="_blank">
+          create a pull request
+        </Link>
+        .
+      </Typography>
+      <Typography sx={{ my: 1 }}>
+        Head over to the{" "}
+        <Link href="https://discord.com/channels/415207508303544321/921991895230611466" target="_blank">
+          theme-sharing
+        </Link>{" "}
+        discord channel for more.
+      </Typography>
+    </>
+  );
+}

src/Themes/ui/ThemeEditorButton.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
+import { ThemeEditorModal } from "./ThemeEditorModal";
+import { IRouter } from "../../ui/Router";
+import ColorizeIcon from "@mui/icons-material/Colorize";
+
+interface IProps {
+  router: IRouter;
+}
+
+export function ThemeEditorButton({ router }: IProps): React.ReactElement {
+  const [themeEditorOpen, setThemeEditorOpen] = useState(false);
+  return (
+    <>
+      <Tooltip title="The theme editor allows you to modify the colors the game uses.">
+        <Button startIcon={<ColorizeIcon />} onClick={() => setThemeEditorOpen(true)}>
+          Theme Editor
+        </Button>
+      </Tooltip>
+      <ThemeEditorModal open={themeEditorOpen} onClose={() => setThemeEditorOpen(false)} router={router} />
+    </>
+  );
+}

src/Themes/ui/ThemeEditorModal.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Modal } from "../../ui/React/Modal";
 import Button from "@mui/material/Button";
+import ButtonGroup from "@mui/material/ButtonGroup";
 import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
 import Paper from "@mui/material/Paper";
@@ -8,15 +9,19 @@ 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 HistoryIcon from '@mui/icons-material/History';
 import { Color, ColorPicker } from "material-ui-color";
 import { ThemeEvents } from "./Theme";
 import { Settings, defaultSettings } from "../../Settings/Settings";
-import { getPredefinedThemes } from "../Themes";
+import { defaultTheme } from "../Themes";
 import { UserInterfaceTheme } from "../../ScriptEditor/NetscriptDefinitions";
+import { IRouter } from "../../ui/Router";
+import { ThemeCollaborate } from "./ThemeCollaborate";
 
 interface IProps {
   open: boolean;
   onClose: () => void;
+  router: IRouter;
 }
 
 interface IColorEditorProps {
@@ -68,28 +73,6 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
     ...Settings.theme,
   });
 
-  const predefinedThemes = getPredefinedThemes();
-  const themes = predefinedThemes && Object.entries(predefinedThemes)
-    .map(([key, templateTheme]) => {
-      const name = templateTheme.name || key;
-      let inner = <Typography>{name}</Typography>;
-      let toolTipTitle;
-      if (templateTheme.credit) {
-        toolTipTitle = <Typography>{templateTheme.description || name} <em>by {templateTheme.credit}</em></Typography>;
-      } else if (templateTheme.description) {
-        toolTipTitle = <Typography>{templateTheme.description}</Typography>;
-      }
-      if (toolTipTitle) {
-        inner = <Tooltip title={toolTipTitle}>{inner}</Tooltip>
-      }
-      return (
-        <Button onClick={() => setTemplateTheme(templateTheme.colors)}
-          startIcon={<PaletteSharpIcon />} key={key} sx={{ mr: 1, mb: 1 }}>
-            {inner}
-        </Button>
-      );
-    }) || <></>;
-
   function setTheme(theme: UserInterfaceTheme): void {
     setCustomTheme(theme);
     Object.assign(Settings.theme, theme);
@@ -372,8 +355,18 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
         />
           <>
             <Typography sx={{ my: 1 }}>Backup your theme or share it with others by copying the string above.</Typography>
-            <Typography sx={{ my: 1 }}>Replace the current theme with a pre-built template using the buttons below.</Typography>
+            <ThemeCollaborate />
-            {themes}
+            <ButtonGroup>
+              <Tooltip title="Reverts all modification back to the default theme. This is permanent.">
+                <Button onClick={() => setTemplateTheme(defaultTheme)}
+                  startIcon={<HistoryIcon />}>
+                    Revert to Default
+                </Button>
+              </Tooltip>
+              <Tooltip title="Move over to the theme browser's page to use one of our predefined themes.">
+                <Button startIcon={<PaletteSharpIcon />} onClick={() => props.router.toThemeBrowser()}>See more themes</Button>
+              </Tooltip>
+            </ButtonGroup>
           </>
       </Paper>
     </Modal>

src/Themes/ui/ThemeEntry.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import Typography from "@mui/material/Typography";
+import Tooltip from "@mui/material/Tooltip";
+import PaletteSharpIcon from "@mui/icons-material/PaletteSharp";
+import { Settings } from "../../Settings/Settings";
+import { IPredefinedTheme } from "../Themes";
+import { Link, Card, CardHeader, CardContent, CardMedia, Button } from "@mui/material";
+
+interface IProps {
+  theme: IPredefinedTheme;
+  onActivated: () => void;
+  onImageClick: (src: string) => void;
+}
+
+export function ThemeEntry({ theme, onActivated, onImageClick }: IProps): React.ReactElement {
+  if (!theme) return <></>;
+  return (
+    <Card key={theme.screenshot} sx={{ width: 400, mr: 1, mb: 1 }}>
+      <CardHeader
+        action={
+          <Tooltip title="Use this theme">
+            <Button startIcon={<PaletteSharpIcon />} onClick={onActivated} variant="outlined">
+              Use
+            </Button>
+          </Tooltip>
+        }
+        title={theme.name}
+        subheader={
+          <>
+            by {theme.credit}{" "}
+            {theme.reference && (
+              <>
+                (
+                <Link href={theme.reference} target="_blank">
+                  ref
+                </Link>
+                )
+              </>
+            )}
+          </>
+        }
+        sx={{
+          color: Settings.theme.primary,
+          "& .MuiCardHeader-subheader": {
+            color: Settings.theme.secondarydark,
+          },
+          "& .MuiButton-outlined": {
+            backgroundColor: "transparent",
+          },
+        }}
+      />
+      <CardMedia
+        component="img"
+        width="400"
+        image={theme.screenshot}
+        alt={`Theme Screenshot of "${theme.name}"`}
+        sx={{
+          borderTop: `1px solid ${Settings.theme.welllight}`,
+          borderBottom: `1px solid ${Settings.theme.welllight}`,
+          cursor: "zoom-in",
+        }}
+        onClick={() => onImageClick(theme.screenshot)}
+      />
+      <CardContent>
+        <Typography
+          variant="body2"
+          color="text.secondary"
+          sx={{
+            color: Settings.theme.primarydark,
+          }}
+        >
+          {theme.description}
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+}

src/ui/GameRoot.tsx

@@ -79,6 +79,7 @@ import { RecoveryMode, RecoveryRoot } from "./React/RecoveryRoot";
 import { AchievementsRoot } from "../Achievements/AchievementsRoot";
 import { ErrorBoundary } from "./ErrorBoundary";
 import { Settings } from "../Settings/Settings";
+import { ThemeBrowser } from "../Themes/ui/ThemeBrowser";
 
 const htmlLocation = location;
 
@@ -194,6 +195,9 @@ export let Router: IRouter = {
   toAchievements: () => {
     throw new Error("Router called before initialization");
   },
+  toThemeBrowser: () => {
+    throw new Error("Router called before initialization");
+  },
 };
 
 function determineStartPage(player: IPlayer): Page {
@@ -307,6 +311,9 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
     toAchievements: () => {
       setPage(Page.Achievements);
     },
+    toThemeBrowser: () => {
+      setPage(Page.ThemeBrowser);
+    }
   };
 
   useEffect(() => {
@@ -471,6 +478,7 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
       mainPage = (
         <GameOptionsRoot
           player={player}
+          router={Router}
           save={() => saveObject.saveGame()}
           export={() => {
             // Apply the export bonus before saving the game
@@ -503,6 +511,10 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
       mainPage = <AchievementsRoot />;
       break;
     }
+    case Page.ThemeBrowser: {
+      mainPage = <ThemeBrowser router={Router} />;
+      break;
+    }
   }
 
   return (

src/ui/React/GameOptionsRoot.tsx

@@ -22,12 +22,11 @@ import TextField from "@mui/material/TextField";
 import DownloadIcon from "@mui/icons-material/Download";
 import UploadIcon from "@mui/icons-material/Upload";
 import SaveIcon from "@mui/icons-material/Save";
+import PaletteIcon from '@mui/icons-material/Palette';
 
 import { FileDiagnosticModal } from "../../Diagnostic/FileDiagnosticModal";
 import { dialogBoxCreate } from "./DialogBox";
 import { ConfirmationModal } from "./ConfirmationModal";
-import { ThemeEditorModal } from "../../Themes/ui/ThemeEditorModal";
-import { StyleEditorModal } from "./StyleEditorModal";
 
 import { SnackbarEvents } from "./Snackbar";
 
@@ -37,6 +36,9 @@ import { formatTime } from "../../utils/helpers/formatTime";
 import { OptionSwitch } from "./OptionSwitch";
 import { DeleteGameButton } from "./DeleteGameButton";
 import { SoftResetButton } from "./SoftResetButton";
+import { IRouter } from "../Router";
+import { ThemeEditorButton } from "../../Themes/ui/ThemeEditorButton";
+import { StyleEditorButton } from "../../Themes/ui/StyleEditorButton";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -50,6 +52,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 interface IProps {
   player: IPlayer;
+  router: IRouter;
   save: () => void;
   export: () => void;
   forceKill: () => void;
@@ -74,8 +77,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
   const [timestampFormat, setTimestampFormat] = useState(Settings.TimestampsFormat);
   const [locale, setLocale] = useState(Settings.Locale);
   const [diagnosticOpen, setDiagnosticOpen] = useState(false);
-  const [themeEditorOpen, setThemeEditorOpen] = useState(false);
-  const [styleEditorOpen, setStyleEditorOpen] = useState(false);
   const [importSaveOpen, setImportSaveOpen] = useState(false);
   const [importData, setImportData] = useState<ImportData | null>(null);
 
@@ -642,9 +643,14 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
               <Button onClick={() => setDiagnosticOpen(true)}>Diagnose files</Button>
             </Tooltip>
           </Box>
-          <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
+          <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr" }}>
-            <Button onClick={() => setThemeEditorOpen(true)}>Theme editor</Button>
+            <Tooltip title="Head to the theme browser to see a collection of prebuilt themes.">
-            <Button onClick={() => setStyleEditorOpen(true)}>Style editor</Button>
+              <Button startIcon={<PaletteIcon />} onClick={() => props.router.toThemeBrowser()}>
+                Theme Browser
+              </Button>
+            </Tooltip>
+            <ThemeEditorButton router={props.router} />
+            <StyleEditorButton />
           </Box>
           <Box>
             <Link href="https://github.com/danielyxie/bitburner/issues/new" target="_blank">
@@ -669,8 +675,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
         </Box>
       </Grid>
       <FileDiagnosticModal open={diagnosticOpen} onClose={() => setDiagnosticOpen(false)} />
-      <ThemeEditorModal open={themeEditorOpen} onClose={() => setThemeEditorOpen(false)} />
-      <StyleEditorModal open={styleEditorOpen} onClose={() => setStyleEditorOpen(false)} />
     </div>
   );
 }

src/ui/React/Snackbar.tsx

@@ -14,6 +14,10 @@ const useStyles = makeStyles(() => ({
   snackbar: {
     // Log popup z-index increments, so let's add a padding to be well above them.
     zIndex: `${logBoxBaseZIndex + 1000} !important` as any,
+
+    "& .MuiAlert-icon": {
+      alignSelf: 'center',
+    },
   }
 }));
 
@@ -27,7 +31,7 @@ export function SnackbarProvider(props: IProps): React.ReactElement {
   );
 }
 
-export const SnackbarEvents = new EventEmitter<[string, "success" | "warning" | "error" | "info", number]>();
+export const SnackbarEvents = new EventEmitter<[string | React.ReactNode, "success" | "warning" | "error" | "info", number]>();
 
 export function Snackbar(): React.ReactElement {
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();

src/ui/Router.ts

@@ -37,6 +37,7 @@ export enum Page {
   StaneksGift,
   Recovery,
   Achievements,
+  ThemeBrowser,
 }
 
 export interface ScriptEditorRouteOptions {
@@ -82,4 +83,5 @@ export interface IRouter {
   toLocation(location: Location): void;
   toStaneksGift(): void;
   toAchievements(): void;
+  toThemeBrowser(): void;
 }