merge v0.56.0

src/ui/React/GameOptionsRoot.tsx

@@ -77,6 +77,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
   const [disableTextEffects, setDisableTextEffects] = useState(Settings.DisableTextEffects);
   const [enableBashHotkeys, setEnableBashHotkeys] = useState(Settings.EnableBashHotkeys);
   const [enableTimestamps, setEnableTimestamps] = useState(Settings.EnableTimestamps);
+  const [saveGameOnFileSave, setSaveGameOnFileSave] = useState(Settings.SaveGameOnFileSave);
 
   const [locale, setLocale] = useState(Settings.Locale);
   const [diagnosticOpen, setDiagnosticOpen] = useState(false);
@@ -165,6 +166,10 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
     setEnableTimestamps(event.target.checked);
     Settings.EnableTimestamps = event.target.checked;
   }
+  function handleSaveGameOnFile(event: React.ChangeEvent<HTMLInputElement>): void {
+    setSaveGameOnFileSave(event.target.checked);
+    Settings.SaveGameOnFileSave = event.target.checked;
+  }
 
   function startImport(): void {
     if (!window.File || !window.FileReader || !window.FileList || !window.Blob) return;
@@ -505,6 +510,19 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
               />
             </ListItem>
 
+            <ListItem>
+              <FormControlLabel
+                control={<Switch checked={saveGameOnFileSave} onChange={handleSaveGameOnFile} />}
+                label={
+                  <Tooltip
+                    title={<Typography>Save your game any time a file is saved in the script editor.</Typography>}
+                  >
+                    <Typography>Save game on file save</Typography>
+                  </Tooltip>
+                }
+              />
+            </ListItem>
+
             <ListItem>
               <Tooltip title={<Typography>Sets the locale for displaying numbers.</Typography>}>
                 <Typography>Locale&nbsp;</Typography>

src/ui/React/ServerDropdown.tsx

@@ -11,6 +11,7 @@ import { BaseServer } from "../../Server/BaseServer";
 import { HacknetServer } from "../../Hacknet/HacknetServer";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import MenuItem from "@mui/material/MenuItem";
+import Button from "@mui/material/Button";
 
 // TODO make this an enum when this gets converted to TypeScript
 export const ServerType = {
@@ -21,6 +22,8 @@ export const ServerType = {
 };
 
 interface IProps {
+  purchase: () => void;
+  canPurchase: boolean;
   serverType: number;
   onChange: (event: SelectChangeEvent<string>) => void;
   value: string;
@@ -61,7 +64,16 @@ export function ServerDropdown(props: IProps): React.ReactElement {
   }
 
   return (
-    <Select sx={{ mx: 1 }} value={props.value} onChange={props.onChange}>
+    <Select
+      startAdornment={
+        <Button onClick={props.purchase} disabled={!props.canPurchase}>
+          Buy
+        </Button>
+      }
+      sx={{ mx: 1 }}
+      value={props.value}
+      onChange={props.onChange}
+    >
       {servers}
     </Select>
   );

src/ui/React/TablePaginationActionsAll.tsx

@@ -36,24 +36,16 @@ export function TablePaginationActionsAll(props: TablePaginationActionsProps): R
 
   return (
     <Box sx={{ flexShrink: 0, ml: 2.5 }}>
-      <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label="first page">
+      <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0}>
         {theme.direction === "rtl" ? <LastPageIcon /> : <FirstPageIcon />}
       </IconButton>
-      <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
+      <IconButton onClick={handleBackButtonClick} disabled={page === 0}>
         {theme.direction === "rtl" ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
       </IconButton>
-      <IconButton
-        onClick={handleNextButtonClick}
-        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-        aria-label="next page"
-      >
+      <IconButton onClick={handleNextButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1}>
         {theme.direction === "rtl" ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
       </IconButton>
-      <IconButton
-        onClick={handleLastPageButtonClick}
-        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-        aria-label="last page"
-      >
+      <IconButton onClick={handleLastPageButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1}>
         {theme.direction === "rtl" ? <FirstPageIcon /> : <LastPageIcon />}
       </IconButton>
     </Box>

src/ui/React/Theme.tsx

@@ -276,6 +276,12 @@ export function refreshTheme(): void {
           select: {
             color: Settings.theme.primary,
           },
+          selectLabel: {
+            color: Settings.theme.primary,
+          },
+          displayedRows: {
+            color: Settings.theme.primary,
+          },
         },
       },
       MuiTab: {

src/ui/React/ThemeEditorModal.tsx

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import { Modal } from "./Modal";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
+import Tooltip from "@mui/material/Tooltip";
+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";
@@ -87,17 +89,22 @@ 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>
+      <Paper>
+        <Tooltip open={true} placement={"top"} title={<Typography>Example tooltip</Typography>}>
+          <Button color="primary">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>
       <br />
+      <Typography>Warning: Editing the theme is very slow.</Typography>
       <ColorEditor
         name="primarylight"
         onColorChange={onColorChange}