mui stuff

src/Faction/ui/FactionsRoot.tsx

@@ -39,9 +39,7 @@ export function FactionsRoot(props: IProps): React.ReactElement {
 
   return (
     <>
-      <Typography variant="h5" color="primary">
+      <Typography variant="h4">Factions</Typography>
-        Factions
-      </Typography>
       <Typography>Lists all factions you have joined</Typography>
       <br />
       <Box display="flex" flexDirection="column">

src/Locations/ui/TravelAgencyRoot.tsx

@@ -3,10 +3,10 @@
  *
  * TThis subcomponent renders all of the buttons for traveling to different cities
  */
-import * as React from "react";
+import React, { useState, useEffect } from "react";
 
 import { CityName } from "../data/CityNames";
-import { TravelConfirmationPopup } from "./TravelConfirmationPopup";
+import { TravelConfirmationModal } from "./TravelConfirmationModal";
 
 import { CONSTANTS } from "../../Constants";
 import { IPlayer } from "../../PersonObjects/IPlayer";
@@ -14,11 +14,15 @@ import { IRouter } from "../../ui/Router";
 import { Settings } from "../../Settings/Settings";
 
 import { StdButton } from "../../ui/React/StdButton";
-import { createPopup } from "../../ui/React/createPopup";
+import { use } from "../../ui/Context";
 import { Money } from "../../ui/React/Money";
 import { WorldMap } from "../../ui/React/WorldMap";
 import { dialogBoxCreate } from "../../../utils/DialogBox";
 
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+
 type IProps = {
   p: IPlayer;
   router: IRouter;
@@ -27,7 +31,6 @@ type IProps = {
 function travel(p: IPlayer, router: IRouter, to: CityName): void {
   const cost = CONSTANTS.TravelCost;
   if (!p.canAfford(cost)) {
-    dialogBoxCreate(`You cannot afford to travel to ${to}`);
     return;
   }
 
@@ -37,69 +40,69 @@ function travel(p: IPlayer, router: IRouter, to: CityName): void {
   router.toCity();
 }
 
-function createTravelPopup(p: IPlayer, router: IRouter, city: CityName): void {
-  if (Settings.SuppressTravelConfirmation) {
-    travel(p, router, city);
-    return;
-  }
-  const popupId = `travel-confirmation`;
-  createPopup(popupId, TravelConfirmationPopup, {
-    player: p,
-    city: city,
-    travel: () => travel(p, router, city),
-    popupId: popupId,
-  });
-}
-
-function ASCIIWorldMap(props: IProps): React.ReactElement {
-  return (
-    <div className="noselect">
-      <p>
-        From here, you can travel to any other city! A ticket costs{" "}
-        <Money money={CONSTANTS.TravelCost} player={props.p} />.
-      </p>
-      <WorldMap
-        currentCity={props.p.city}
-        onTravel={(city: CityName) => createTravelPopup(props.p, props.router, city)}
-      />
-    </div>
-  );
-}
-
-function ListWorldMap(props: IProps): React.ReactElement {
-  return (
-    <div>
-      <p>
-        From here, you can travel to any other city! A ticket costs{" "}
-        <Money money={CONSTANTS.TravelCost} player={props.p} />.
-      </p>
-      {Object.values(CityName)
-        .filter((city: string) => city != props.p.city)
-        .map((city: string) => {
-          const match = Object.entries(CityName).find((entry) => entry[1] === city);
-          if (match === undefined) throw new Error(`could not find key for city '${city}'`);
-          return (
-            <StdButton
-              key={city}
-              onClick={() => createTravelPopup(props.p, props.router, city as CityName)}
-              style={{ display: "block" }}
-              text={`Travel to ${city}`}
-            />
-          );
-        })}
-    </div>
-  );
-}
-
 export function TravelAgencyRoot(props: IProps): React.ReactElement {
+  const player = use.Player();
+  const router = use.Router();
+  const setRerender = useState(false)[1];
+  const [open, setOpen] = useState(false);
+  const [destination, setDestination] = useState(CityName.Sector12);
+  function rerender(): void {
+    setRerender((o) => !o);
+  }
+
+  useEffect(() => {
+    const id = setInterval(rerender, 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  function startTravel(city: CityName): void {
+    const cost = CONSTANTS.TravelCost;
+    if (!player.canAfford(cost)) {
+      return;
+    }
+    if (Settings.SuppressTravelConfirmation) {
+      travel(player, router, city);
+      return;
+    }
+    setOpen(true);
+    setDestination(city);
+  }
+
   return (
     <>
-      <h1>Travel Agency</h1>
+      <Typography variant="h4">Travel Agency</Typography>
-      {Settings.DisableASCIIArt ? (
+      <Box mx={2}>
-        <ListWorldMap p={props.p} router={props.router} />
+        <Typography>
-      ) : (
+          From here, you can travel to any other city! A ticket costs{" "}
-        <ASCIIWorldMap p={props.p} router={props.router} />
+          <Money money={CONSTANTS.TravelCost} player={props.p} />.
-      )}
+        </Typography>
+        {Settings.DisableASCIIArt ? (
+          <div>
+            {Object.values(CityName)
+              .filter((city: string) => city != props.p.city)
+              .map((city: string) => {
+                const match = Object.entries(CityName).find((entry) => entry[1] === city);
+                if (match === undefined) throw new Error(`could not find key for city '${city}'`);
+                return (
+                  <React.Fragment key={city}>
+                    <Button onClick={() => startTravel(city as CityName)} sx={{ m: 2 }}>
+                      <Typography>Travel to {city}</Typography>
+                    </Button>
+                    <br />
+                  </React.Fragment>
+                );
+              })}
+          </div>
+        ) : (
+          <WorldMap currentCity={props.p.city} onTravel={(city: CityName) => startTravel(city)} />
+        )}
+      </Box>
+      <TravelConfirmationModal
+        city={destination}
+        travel={() => travel(player, router, destination)}
+        open={open}
+        onClose={() => setOpen(false)}
+      />
     </>
   );
 }

src/Locations/ui/TravelConfirmationModal.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { CONSTANTS } from "../../Constants";
+import { Money } from "../../ui/React/Money";
+import { Modal } from "../../ui/React/Modal";
+import { use } from "../../ui/Context";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+
+interface IProps {
+  city: string;
+  travel: () => void;
+
+  open: boolean;
+  onClose: () => void;
+}
+
+export function TravelConfirmationModal(props: IProps): React.ReactElement {
+  const player = use.Player();
+  const cost = CONSTANTS.TravelCost;
+  function travel(): void {
+    props.travel();
+  }
+
+  return (
+    <Modal open={props.open} onClose={props.onClose}>
+      <Typography>
+        Would you like to travel to {props.city}? The trip will cost <Money money={cost} player={player} />.
+      </Typography>
+      <br />
+      <br />
+      <Button onClick={travel}>
+        <Typography>Travel</Typography>
+      </Button>
+    </Modal>
+  );
+}

src/Locations/ui/TravelConfirmationPopup.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import { IPlayer } from "../../PersonObjects/IPlayer";
-import { CONSTANTS } from "../../Constants";
-import { Money } from "../../ui/React/Money";
-import { removePopup } from "../../ui/React/createPopup";
-
-interface IProps {
-  player: IPlayer;
-  city: string;
-  travel: () => void;
-  popupId: string;
-}
-
-export function TravelConfirmationPopup(props: IProps): React.ReactElement {
-  const cost = CONSTANTS.TravelCost;
-  function travel(): void {
-    props.travel();
-    removePopup(props.popupId);
-  }
-
-  return (
-    <>
-      <span>
-        Would you like to travel to {props.city}? The trip will cost <Money money={cost} player={props.player} />.
-      </span>
-      <br />
-      <br />
-      <button className="std-button" onClick={travel}>
-        Travel
-      </button>
-    </>
-  );
-}

src/Programs/ui/ProgramsRoot.tsx

@@ -20,37 +20,34 @@ export function ProgramsRoot(): React.ReactElement {
 
   return (
     <>
-      <div>
+      <Typography variant="h4">Create program</Typography>
-        <Box>
+      <Typography>
-          <Typography>
+        This page displays any programs that you are able to create. Writing the code for a program takes time, which
-            This page displays any programs that you are able to create. Writing the code for a program takes time,
+        can vary based on how complex the program is. If you are working on creating a program you can cancel at any
-            which can vary based on how complex the program is. If you are working on creating a program you can cancel
+        time. Your progress will be saved and you can continue later.
-            at any time. Your progress will be saved and you can continue later.
+      </Typography>
-          </Typography>
-        </Box>
 
-        {getAvailableCreatePrograms(player).map((program) => {
+      {getAvailableCreatePrograms(player).map((program) => {
-          const create = program.create;
+        const create = program.create;
-          if (create === null) return <></>;
+        if (create === null) return <></>;
 
-          return (
+        return (
-            <React.Fragment key={program.name}>
+          <React.Fragment key={program.name}>
-              <Tooltip title={create.tooltip}>
+            <Tooltip title={create.tooltip}>
-                <Button
+              <Button
-                  sx={{ my: 1 }}
+                sx={{ my: 1 }}
-                  onClick={(event) => {
+                onClick={(event) => {
-                    if (!event.isTrusted) return;
+                  if (!event.isTrusted) return;
-                    player.startCreateProgramWork(router, program.name, create.time, create.level);
+                  player.startCreateProgramWork(router, program.name, create.time, create.level);
-                  }}
+                }}
-                >
+              >
-                  {program.name}
+                {program.name}
-                </Button>
+              </Button>
-              </Tooltip>
+            </Tooltip>
-              <br />
+            <br />
-            </React.Fragment>
+          </React.Fragment>
-          );
+        );
-        })}
+      })}
-      </div>
     </>
   );
 }

src/Tutorial/ui/TutorialRoot.tsx

@@ -6,7 +6,7 @@ import Box from "@mui/material/Box";
 export function TutorialRoot(): React.ReactElement {
   return (
     <>
-      <Typography variant="h4">Tutorial (AKA Links to Documentation)</Typography>
+      <Typography variant="h4">Tutorial / Documentation</Typography>
       <Box m={2}>
         <Link
           color="primary"

src/ui/ActiveScripts/ActiveScriptsRoot.tsx

@@ -28,6 +28,7 @@ export function ActiveScriptsRoot(props: IProps): React.ReactElement {
 
   return (
     <>
+      <Typography variant="h4">Active Scripts</Typography>
       <Typography>
         This page displays a list of all of your scripts that are currently running across every machine. It also
         provides information about each script's production. The scripts are categorized by the hostname of the servers

src/ui/CharacterStats.tsx

@@ -145,7 +145,7 @@ function CurrentBitNode(): React.ReactElement {
     const index = "BitNode" + player.bitNodeN;
     return (
       <>
-        <Typography variant="h5" color="primary">
+        <Typography variant="h4">
           BitNode {player.bitNodeN}: {BitNodes[index].name}
         </Typography>
         <Typography sx={{ mx: 2 }} style={{ whiteSpace: "pre-wrap", overflowWrap: "break-word" }}>
@@ -270,9 +270,7 @@ export function CharacterStats(): React.ReactElement {
 
   return (
     <>
-      <Typography variant="h5" color="primary">
+      <Typography variant="h4">General</Typography>
-        General
-      </Typography>
       <Box sx={{ mx: 2 }}>
         <Typography>Current City: {player.city}</Typography>
         <LastEmployer />
@@ -287,9 +285,7 @@ export function CharacterStats(): React.ReactElement {
         </Typography>
       </Box>
       <br />
-      <Typography variant="h5" color="primary">
+      <Typography variant="h4">Stats</Typography>
-        Stats
-      </Typography>
       <Box sx={{ mx: 2 }}>
         <Table size="small" padding="none">
           <TableBody>
@@ -365,9 +361,7 @@ export function CharacterStats(): React.ReactElement {
         <br />
       </Box>
       <br />
-      <Typography variant="h5" color="primary">
+      <Typography variant="h4">Multipliers</Typography>
-        Multipliers
-      </Typography>
       <Box sx={{ mx: 2 }}>
         <MultiplierTable
           rows={[
@@ -477,9 +471,7 @@ export function CharacterStats(): React.ReactElement {
       </Box>
       <br />
 
-      <Typography variant="h5" color="primary">
+      <Typography variant="h4">Misc</Typography>
-        Misc
-      </Typography>
       <Box sx={{ mx: 2 }}>
         <Typography>{`Servers owned: ${player.purchasedServers.length} / ${getPurchaseServerLimit()}`}</Typography>
         <Hacknet />

src/ui/React/WorldMap.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { CityName } from "../../Locations/data/CityNames";
+import Typography from "@mui/material/Typography";
+import Tooltip from "@mui/material/Tooltip";
 
 interface ICityProps {
   currentCity: CityName;
@@ -10,19 +12,11 @@ interface ICityProps {
 function City(props: ICityProps): React.ReactElement {
   if (props.city !== props.currentCity) {
     return (
-      <span
+      <Tooltip title={props.city}>
-        className="tooltip"
+        <span onClick={() => props.onTravel(props.city)} style={{ color: "white", whiteSpace: "pre" }}>
-        style={{
+          {props.city[0]}
-          color: "white",
+        </span>
-          whiteSpace: "nowrap",
+      </Tooltip>
-          margin: "0px",
-          padding: "0px",
-        }}
-        onClick={() => props.onTravel(props.city)}
-      >
-        <span className="tooltiptext">{props.city}</span>
-        <b>{props.city[0]}</b>
-      </span>
     );
   }
   return <span>{props.city[0]}</span>;
@@ -37,28 +31,28 @@ export function WorldMap(props: IProps): React.ReactElement {
   // prettier-ignore
   return (
     <div className="noselect">
-        <pre>               ,_   .  ._. _.  .</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>               ,_   .  ._. _.  .</Typography>
-        <pre>           , _-\','|~\~      ~/      ;-'_   _-'     ,;_;_,    ~~-</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>           , _-\','|~\~      ~/      ;-'_   _-'     ,;_;_,    ~~-</Typography>
-        <pre>  /~~-\_/-'~'--' \~~| ',    ,'      /  / ~|-_\_/~/~      ~~--~~~~'--_</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>  /~~-\_/-'~'--' \~~| ',    ,'      /  / ~|-_\_/~/~      ~~--~~~~'--_</Typography>
-        <pre>  /              ,/'-/~ '\ ,' _  , '<City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Volhaven} />,'|~                   ._/-, /~</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>  /              ,/'-/~ '\ ,' _  , '<City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Volhaven} />,'|~                   ._/-, /~</Typography>
-        <pre>  ~/-'~\_,       '-,| '|. '   ~  ,\ /'~                /    /_  /~</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>  ~/-'~\_,       '-,| '|. '   ~  ,\ /'~                /    /_  /~</Typography>
-        <pre>.-~      '|        '',\~|\       _\~     ,_  ,     <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Chongqing} />         /,</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>.-~      '|        '',\~|\       _\~     ,_  ,     <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Chongqing} />         /,</Typography>
-        <pre>          '\     <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Sector12} />  /'~          |_/~\\,-,~  \ "         ,_,/ |</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>          '\     <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Sector12} />  /'~          |_/~\\,-,~  \ "         ,_,/ |</Typography>
-        <pre>           |       /            ._-~'\_ _~|              \ ) <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.NewTokyo} /></pre>
+        <Typography sx={{whiteSpace: 'pre'}}>           |       /            ._-~'\_ _~|              \ ) <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.NewTokyo} /></Typography>
-        <pre>            \   __-\           '/      ~ |\  \_          /  ~</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>            \   __-\           '/      ~ |\  \_          /  ~</Typography>
-        <pre>  .,         '\ |,  ~-_      - |          \\_' ~|  /\  \~ ,</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>  .,         '\ |,  ~-_      - |          \\_' ~|  /\  \~ ,</Typography>
-        <pre>               ~-_'  _;       '\           '-,   \,' /\/  |</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>               ~-_'  _;       '\           '-,   \,' /\/  |</Typography>
-        <pre>                 '\_,~'\_       \_ _,       /'    '  |, /|'</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>                 '\_,~'\_       \_ _,       /'    '  |, /|'</Typography>
-        <pre>                   /     \_       ~ |      /         \  ~'; -,_.</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>                   /     \_       ~ |      /         \  ~'; -,_.</Typography>
-        <pre>                   |       ~\        |    |  ,        '-_, ,; ~ ~\</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>                   |       ~\        |    |  ,        '-_, ,; ~ ~\</Typography>
-        <pre>                    \,   <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Aevum} />  /        \    / /|            ,-, ,   -,</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>                    \,   <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Aevum} />  /        \    / /|            ,-, ,   -,</Typography>
-        <pre>                     |    ,/          |  |' |/          ,-   ~ \   '.</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>                     |    ,/          |  |' |/          ,-   ~ \   '.</Typography>
-        <pre>                    ,|   ,/           \ ,/              \   <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Ishima} />   |</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>                    ,|   ,/           \ ,/              \   <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Ishima} />   |</Typography>
-        <pre>                    /    |             ~                 -~~-, /   _</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>                    /    |             ~                 -~~-, /   _</Typography>
-        <pre>                    | ,-'                                    ~    /</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>                    | ,-'                                    ~    /</Typography>
-        <pre>                    / ,'                                      ~</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>                    / ,'                                      ~</Typography>
-        <pre>                    ',|  ~</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>                    ',|  ~</Typography>
-        <pre>                      ~'</pre>
+        <Typography sx={{whiteSpace: 'pre'}}>                      ~'</Typography>
     </div>
   );
 }