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 {
+export function TravelAgencyRoot(props: IProps): React.ReactElement {
-  if (Settings.SuppressTravelConfirmation) {
+  const player = use.Player();
-    travel(p, router, city);
+  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;
     }
-  const popupId = `travel-confirmation`;
+    if (Settings.SuppressTravelConfirmation) {
-  createPopup(popupId, TravelConfirmationPopup, {
+      travel(player, router, city);
-    player: p,
+      return;
-    city: city,
+    }
-    travel: () => travel(p, router, city),
+    setOpen(true);
-    popupId: popupId,
+    setDestination(city);
-  });
   }
 
-function ASCIIWorldMap(props: IProps): React.ReactElement {
   return (
-    <div className="noselect">
+    <>
-      <p>
+      <Typography variant="h4">Travel Agency</Typography>
+      <Box mx={2}>
+        <Typography>
           From here, you can travel to any other city! A ticket costs{" "}
           <Money money={CONSTANTS.TravelCost} player={props.p} />.
-      </p>
+        </Typography>
-      <WorldMap
+        {Settings.DisableASCIIArt ? (
-        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
+                  <React.Fragment key={city}>
-              key={city}
+                    <Button onClick={() => startTravel(city as CityName)} sx={{ m: 2 }}>
-              onClick={() => createTravelPopup(props.p, props.router, city as CityName)}
+                      <Typography>Travel to {city}</Typography>
-              style={{ display: "block" }}
+                    </Button>
-              text={`Travel to ${city}`}
+                    <br />
-            />
+                  </React.Fragment>
                 );
               })}
           </div>
-  );
-}
-
-export function TravelAgencyRoot(props: IProps): React.ReactElement {
-  return (
-    <>
-      <h1>Travel Agency</h1>
-      {Settings.DisableASCIIArt ? (
-        <ListWorldMap p={props.p} router={props.router} />
         ) : (
-        <ASCIIWorldMap p={props.p} router={props.router} />
+          <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,14 +20,12 @@ export function ProgramsRoot(): React.ReactElement {
 
   return (
     <>
-      <div>
+      <Typography variant="h4">Create program</Typography>
-        <Box>
       <Typography>
-            This page displays any programs that you are able to create. Writing the code for a program takes time,
+        This page displays any programs that you are able to create. Writing the code for a program takes time, which
-            which can vary based on how complex the program is. If you are working on creating a program you can cancel
+        can vary based on how complex the program is. If you are working on creating a program you can cancel at any
-            at any time. Your progress will be saved and you can continue later.
+        time. Your progress will be saved and you can continue later.
       </Typography>
-        </Box>
 
       {getAvailableCreatePrograms(player).map((program) => {
         const create = program.create;
@@ -50,7 +48,6 @@ export function ProgramsRoot(): React.ReactElement {
           </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",
-          whiteSpace: "nowrap",
-          margin: "0px",
-          padding: "0px",
-        }}
-        onClick={() => props.onTravel(props.city)}
-      >
-        <span className="tooltiptext">{props.city}</span>
-        <b>{props.city[0]}</b>
         </span>
+      </Tooltip>
     );
   }
   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>
   );
 }