build dev

src/ui/CharacterStats.tsx

@@ -14,6 +14,8 @@ import { StatsTable } from "./React/StatsTable";
 import { Money } from "./React/Money";
 import { use } from "./Context";
 
+import Typography from "@mui/material/Typography";
+
 function LastEmployer(): React.ReactElement {
   const player = use.Player();
   if (player.companyName) {
@@ -162,7 +164,7 @@ function CurrentBitNode(): React.ReactElement {
   return <></>;
 }
 
-export function CharacterInfo(): React.ReactElement {
+export function CharacterStats(): React.ReactElement {
   const player = use.Player();
   const setRerender = useState(false)[1];
   function rerender(): void {

src/ui/GameRoot.tsx

@@ -53,7 +53,7 @@ import { TutorialRoot } from "../Tutorial/ui/TutorialRoot";
 import { ActiveScriptsRoot } from "../ui/ActiveScripts/ActiveScriptsRoot";
 import { FactionsRoot } from "../Faction/ui/FactionsRoot";
 import { FactionRoot } from "../Faction/ui/FactionRoot";
-import { CharacterInfo } from "./CharacterInfo";
+import { CharacterStats } from "./CharacterStats";
 import { TravelAgencyRoot } from "../Locations/ui/TravelAgencyRoot";
 import { StockMarketRoot } from "../StockMarket/ui/StockMarketRoot";
 import { BitverseRoot } from "../BitNode/ui/BitverseRoot";
@@ -100,7 +100,7 @@ export let Router: IRouter = {
   toBladeburner: () => {
     throw new Error("Router called before initialization");
   },
-  toCharacterInfo: () => {
+  toStats: () => {
     throw new Error("Router called before initialization");
   },
   toCity: () => {
@@ -179,7 +179,6 @@ function determineStartPage(player: IPlayer): Page {
 export function GameRoot({ player, engine, terminal }: IProps): React.ReactElement {
   const classes = useStyles();
   const [page, setPage] = useState(determineStartPage(player));
-  const contentRef = useRef<HTMLDivElement>(null);
   const [faction, setFaction] = useState<Faction>(
     player.currentWorkFactionName ? Factions[player.currentWorkFactionName] : (undefined as unknown as Faction),
   );
@@ -199,7 +198,7 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
     toActiveScripts: () => setPage(Page.ActiveScripts),
     toAugmentations: () => setPage(Page.Augmentations),
     toBladeburner: () => setPage(Page.Bladeburner),
-    toCharacterInfo: () => setPage(Page.Stats),
+    toStats: () => setPage(Page.Stats),
     toCorporation: () => setPage(Page.Corporation),
     toCreateProgram: () => setPage(Page.CreateProgram),
     toDevMenu: () => setPage(Page.DevMenu),
@@ -256,6 +255,7 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
   useEffect(() => {
     filename = "";
     code = "";
+    window.scrollTo(0, 0);
   });
 
   return (
@@ -273,21 +273,13 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
         ) : (
           <Box display="flex" flexDirection="row" width="100%">
             <SidebarRoot player={player} router={Router} page={page} />
-            <Box
-              ref={contentRef}
-              className={classes.root}
-              flexGrow={1}
-              display="block"
-              width="100%"
-              px={1}
-              height="100vh"
-            >
+            <Box className={classes.root} flexGrow={1} display="block" width="100%" px={1} height="100vh">
               {page === Page.Terminal ? (
                 <TerminalRoot terminal={terminal} router={Router} player={player} />
               ) : page === Page.Sleeves ? (
                 <SleeveRoot player={player} />
               ) : page === Page.Stats ? (
-                <CharacterInfo />
+                <CharacterStats />
               ) : page === Page.CreateScript ? (
                 <ScriptEditorRoot filename={filename} code={code} player={player} router={Router} />
               ) : page === Page.ActiveScripts ? (

src/ui/React/CharacterOverview.tsx

@@ -13,9 +13,11 @@ import Paper from "@mui/material/Paper";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
 import Collapse from "@mui/material/Collapse";
 import Fab from "@mui/material/Fab";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import SaveAltIcon from "@mui/icons-material/SaveAlt";
 
 import { colors } from "./Theme";
 import { Settings } from "../../Settings/Settings";
@@ -222,9 +224,9 @@ export function CharacterOverview({ save }: IProps): React.ReactElement {
 
                   <TableRow>
                     <TableCell align="center" colSpan={2} classes={{ root: classes.cellNone }}>
-                      <Button color={Settings.AutosaveInterval !== 0 ? "primary" : "secondary"} onClick={save}>
-                        SAVE
-                      </Button>
+                      <IconButton onClick={save}>
+                        <SaveAltIcon color={Settings.AutosaveInterval !== 0 ? "primary" : "error"} />
+                      </IconButton>
                     </TableCell>
                   </TableRow>
                 </TableBody>

src/ui/React/GameOptionsRoot.tsx

@@ -13,12 +13,16 @@ import Switch from "@mui/material/Switch";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import MenuItem from "@mui/material/MenuItem";
 import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
 import Box from "@mui/material/Box";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
 
+import DownloadIcon from "@mui/icons-material/Download";
+import UploadIcon from "@mui/icons-material/Upload";
+
 import { FileDiagnosticModal } from "../../Diagnostic/FileDiagnosticModal";
 import { ConfirmationModal } from "./ConfirmationModal";
 
@@ -461,8 +465,16 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
             <Button onClick={() => setDeleteOpen(true)}>Delete Game</Button>
           </Box>
           <Box>
-            <Button onClick={() => props.export()}>Export Game</Button>
-            <Button onClick={() => props.import()}>Import Game</Button>
+            <Tooltip title={<Typography>export</Typography>}>
+              <IconButton onClick={() => props.export()}>
+                <DownloadIcon color="primary" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title={<Typography>import</Typography>}>
+              <IconButton onClick={() => props.import()}>
+                <UploadIcon color="primary" />
+              </IconButton>
+            </Tooltip>
           </Box>
           <Box>
             <Tooltip

src/ui/Router.ts

@@ -50,7 +50,7 @@ export interface IRouter {
   toAugmentations(): void;
   toBitVerse(flume: boolean, quick: boolean): void;
   toBladeburner(): void;
-  toCharacterInfo(): void;
+  toStats(): void;
   toCity(): void; // travel ? city ?
   toCorporation(): void;
   toCreateProgram(): void;

src/ui/WorkInProgressRoot.tsx

@@ -337,13 +337,18 @@ export function WorkInProgressRoot(): React.ReactElement {
           % complete. <br />
           If you cancel, your work will be saved and you can come back to complete the program later.
         </p>
-        <button className="work-button" onClick={() => player.finishCreateProgramWork(true)}>
+        <button
+          className="work-button"
+          onClick={() => {
+            player.finishCreateProgramWork(true);
+            router.toTerminal();
+          }}
+        >
           Cancel work on creating program
         </button>
       </div>
     );
   }
 
-  setTimeout(() => router.toCity(), 50);
   return <></>;
 }