mui-fy some modals

src/Locations/ui/City.tsx

@@ -37,7 +37,6 @@ function LocationLetter(location: Location): React.ReactElement {
     <span
       aria-label={location.name}
       key={location.name}
-      className="tooltip"
       style={{
         color: "white",
         whiteSpace: "nowrap",

src/Locations/ui/CompanyLocation.tsx

@@ -23,7 +23,7 @@ import { Reputation } from "../../ui/React/Reputation";
 import { Favor } from "../../ui/React/Favor";
 import { createPopup } from "../../ui/React/createPopup";
 import { use } from "../../ui/Context";
-import { QuitJobPopup } from "../../Company/ui/QuitJobPopup";
+import { QuitJobModal } from "../../Company/ui/QuitJobModal";
 
 type IProps = {
   locName: LocationName;
@@ -32,6 +32,7 @@ type IProps = {
 export function CompanyLocation(props: IProps): React.ReactElement {
   const p = use.Player();
   const router = use.Router();
+  const [quitOpen, setQuitOpen] = useState(false);
   const setRerender = useState(false)[1];
   function rerender(): void {
     setRerender((old) => !old);
@@ -179,18 +180,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
     }
   }
 
-  function quit(e: React.MouseEvent<HTMLElement>): void {
-    if (!e.isTrusted) return;
-    const popupId = `quit-job-popup`;
-    createPopup(popupId, QuitJobPopup, {
-      locName: props.locName,
-      company: company,
-      player: p,
-      onQuit: rerender,
-      popupId: popupId,
-    });
-  }
-
   const isEmployedHere = jobTitle != null;
   const favorGain = company.getFavorGain();
 
@@ -230,7 +219,14 @@ export function CompanyLocation(props: IProps): React.ReactElement {
           <br />
           <Button onClick={work}>Work</Button>
           &nbsp;&nbsp;&nbsp;&nbsp;
-          <Button onClick={quit}>Quit</Button>
+          <Button onClick={() => setQuitOpen(true)}>Quit</Button>
+          <QuitJobModal
+            locName={props.locName}
+            company={company}
+            onQuit={rerender}
+            open={quitOpen}
+            onClose={() => setQuitOpen(false)}
+          />
         </div>
       )}
       {company.hasAgentPositions() && (

src/Locations/ui/CoresButton.tsx

@@ -31,10 +31,12 @@ export function CoresButton(props: IProps): React.ReactElement {
 
   return (
     <Tooltip title={<MathComponent tex={String.raw`\large{cost = 10^9 \times 7.5 ^{\text{cores}}}`} />}>
-      <Button disabled={!props.p.canAfford(cost)} onClick={buy}>
-        Upgrade 'home' cores ({homeComputer.cpuCores} -&gt; {homeComputer.cpuCores + 1}) -&nbsp;
-        <Money money={cost} player={props.p} />
-      </Button>
+      <span>
+        <Button disabled={!props.p.canAfford(cost)} onClick={buy}>
+          Upgrade 'home' cores ({homeComputer.cpuCores} -&gt; {homeComputer.cpuCores + 1}) -&nbsp;
+          <Money money={cost} player={props.p} />
+        </Button>
+      </span>
     </Tooltip>
   );
 }

src/Locations/ui/GenericLocation.tsx

@@ -64,7 +64,7 @@ export function GenericLocation({ loc }: IProps): React.ReactElement {
     }
 
     if (loc.types.includes(LocationType.TechVendor)) {
-      content.push(<TechVendorLocation key={"techvendorlocation"} loc={loc} p={player} />);
+      content.push(<TechVendorLocation key={"techvendorlocation"} loc={loc} />);
     }
 
     if (loc.types.includes(LocationType.TravelAgency)) {

src/Locations/ui/PurchaseServerModal.tsx

@@ -0,0 +1,67 @@
+/**
+ * React Component for the popup used to purchase a new server.
+ */
+import React, { useState } from "react";
+import { purchaseServer } from "../../Server/ServerPurchases";
+import { numeralWrapper } from "../../ui/numeralFormat";
+import { Money } from "../../ui/React/Money";
+import { Modal } from "../../ui/React/Modal";
+import { StdButton } from "../../ui/React/StdButton";
+import { use } from "../../ui/Context";
+import Typography from "@mui/material/Typography";
+import TextField from "@mui/material/TextField";
+import Button from "@mui/material/Button";
+
+interface IProps {
+  open: boolean;
+  onClose: () => void;
+  ram: number;
+  cost: number;
+  rerender: () => void;
+}
+
+export function PurchaseServerModal(props: IProps): React.ReactElement {
+  const player = use.Player();
+  const [hostname, setHostname] = useState("");
+
+  function tryToPurchaseServer(): void {
+    purchaseServer(hostname, props.ram, props.cost, player);
+    props.onClose();
+  }
+
+  function onKeyUp(event: React.KeyboardEvent<HTMLInputElement>): void {
+    if (event.keyCode === 13) tryToPurchaseServer();
+  }
+
+  function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    setHostname(event.target.value);
+  }
+
+  return (
+    <Modal open={props.open} onClose={props.onClose}>
+      <Typography>
+        Would you like to purchase a new server with {numeralWrapper.formatRAM(props.ram)} of RAM for{" "}
+        <Money money={props.cost} player={player} />?
+      </Typography>
+      <br />
+      <br />
+      <Typography> Please enter the server hostname below:</Typography>
+      <br />
+
+      <TextField
+        autoFocus
+        onKeyUp={onKeyUp}
+        onChange={onChange}
+        type="text"
+        placeholder="Unique Hostname"
+        InputProps={{
+          endAdornment: (
+            <Button onClick={tryToPurchaseServer} disabled={!player.canAfford(props.cost) || hostname === ""}>
+              Buy
+            </Button>
+          ),
+        }}
+      />
+    </Modal>
+  );
+}

src/Locations/ui/PurchaseServerPopup.tsx

@@ -1,58 +0,0 @@
-/**
- * React Component for the popup used to purchase a new server.
- */
-import React, { useState } from "react";
-import { removePopup } from "../../ui/React/createPopup";
-import { purchaseServer } from "../../Server/ServerPurchases";
-import { numeralWrapper } from "../../ui/numeralFormat";
-import { Money } from "../../ui/React/Money";
-import { IPlayer } from "../../PersonObjects/IPlayer";
-import { StdButton } from "../../ui/React/StdButton";
-
-interface IPurchaseServerPopupProps {
-  ram: number;
-  cost: number;
-  p: IPlayer;
-  popupId: string;
-  rerender: () => void;
-}
-
-export function PurchaseServerPopup(props: IPurchaseServerPopupProps): React.ReactElement {
-  const [hostname, setHostname] = useState("");
-
-  function tryToPurchaseServer(): void {
-    purchaseServer(hostname, props.ram, props.cost, props.p);
-
-    removePopup(props.popupId);
-  }
-
-  function onKeyUp(event: React.KeyboardEvent<HTMLInputElement>): void {
-    if (event.keyCode === 13) tryToPurchaseServer();
-  }
-
-  function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    setHostname(event.target.value);
-  }
-
-  return (
-    <>
-      Would you like to purchase a new server with {numeralWrapper.formatRAM(props.ram)} of RAM for{" "}
-      <Money money={props.cost} player={props.p} />?
-      <br />
-      <br />
-      Please enter the server hostname below:
-      <br />
-      <div className="popup-box-input-div">
-        <input
-          autoFocus
-          onKeyUp={onKeyUp}
-          onChange={onChange}
-          className="text-input noselect"
-          type="text"
-          placeholder="Unique Hostname"
-        />
-        <StdButton onClick={tryToPurchaseServer} text="Purchase Server" disabled={!props.p.canAfford(props.cost)} />
-      </div>
-    </>
-  );
-}

src/Locations/ui/RamButton.tsx

@@ -29,10 +29,12 @@ export function RamButton(props: IProps): React.ReactElement {
 
   return (
     <Tooltip title={<MathComponent tex={String.raw`\large{cost = 3.2 \times 10^3 \times 1.58^{log_2{(ram)}}}`} />}>
-      <Button disabled={!props.p.canAfford(cost)} onClick={buy}>
-        Upgrade 'home' RAM ({homeComputer.maxRam}GB -&gt;&nbsp;{homeComputer.maxRam * 2}GB) -&nbsp;
-        <Money money={cost} player={props.p} />
-      </Button>
+      <span>
+        <Button disabled={!props.p.canAfford(cost)} onClick={buy}>
+          Upgrade 'home' RAM ({homeComputer.maxRam}GB -&gt;&nbsp;{homeComputer.maxRam * 2}GB) -&nbsp;
+          <Money money={cost} player={props.p} />
+        </Button>
+      </span>
     </Tooltip>
   );
 }

src/Locations/ui/TechVendorLocation.tsx

@@ -12,36 +12,50 @@ import { RamButton } from "./RamButton";
 import { TorButton } from "./TorButton";
 import { CoresButton } from "./CoresButton";
 
-import { IPlayer } from "../../PersonObjects/IPlayer";
 import { getPurchaseServerCost } from "../../Server/ServerPurchases";
 
-import { StdButton } from "../../ui/React/StdButton";
 import { Money } from "../../ui/React/Money";
-import { createPopup } from "../../ui/React/createPopup";
-import { PurchaseServerPopup } from "./PurchaseServerPopup";
+import { use } from "../../ui/Context";
+import { PurchaseServerModal } from "./PurchaseServerModal";
+
+interface IServerProps {
+  ram: number;
+  rerender: () => void;
+}
+
+function ServerButton(props: IServerProps): React.ReactElement {
+  const [open, setOpen] = useState(false);
+  const player = use.Player();
+  const cost = getPurchaseServerCost(props.ram);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} disabled={!player.canAfford(cost)}>
+        Purchase {props.ram}GB Server&nbsp;-&nbsp;
+        <Money money={cost} player={player} />
+      </Button>
+      <PurchaseServerModal
+        open={open}
+        onClose={() => setOpen(false)}
+        ram={props.ram}
+        cost={cost}
+        rerender={props.rerender}
+      />
+      <br />
+    </>
+  );
+}
 
 type IProps = {
   loc: Location;
-  p: IPlayer;
 };
 
 export function TechVendorLocation(props: IProps): React.ReactElement {
+  const player = use.Player();
   const setRerender = useState(false)[1];
   function rerender(): void {
     setRerender((old) => !old);
   }
 
-  function openPurchaseServer(ram: number, cost: number, p: IPlayer): void {
-    const popupId = "purchase-server-popup";
-    createPopup(popupId, PurchaseServerPopup, {
-      ram: ram,
-      cost: cost,
-      p: p,
-      popupId: popupId,
-      rerender: rerender,
-    });
-  }
-
   useEffect(() => {
     const id = setInterval(rerender, 1000);
     return () => clearInterval(id);
@@ -49,16 +63,7 @@ export function TechVendorLocation(props: IProps): React.ReactElement {
 
   const purchaseServerButtons: React.ReactNode[] = [];
   for (let i = props.loc.techVendorMinRam; i <= props.loc.techVendorMaxRam; i *= 2) {
-    const cost = getPurchaseServerCost(i);
-    purchaseServerButtons.push(
-      <>
-        <Button key={i} onClick={() => openPurchaseServer(i, cost, props.p)} disabled={!props.p.canAfford(cost)}>
-          Purchase {i}GB Server&nbsp;-&nbsp;
-          <Money money={cost} player={props.p} />
-        </Button>
-        <br />
-      </>,
-    );
+    purchaseServerButtons.push(<ServerButton key={i} ram={i} rerender={rerender} />);
   }
 
   return (
@@ -69,11 +74,11 @@ export function TechVendorLocation(props: IProps): React.ReactElement {
         <i>"You can order bigger servers via scripts. We don't take custom order in person."</i>
       </Typography>
       <br />
-      <TorButton p={props.p} rerender={rerender} />
+      <TorButton p={player} rerender={rerender} />
       <br />
-      <RamButton p={props.p} rerender={rerender} />
+      <RamButton p={player} rerender={rerender} />
       <br />
-      <CoresButton p={props.p} rerender={rerender} />
+      <CoresButton p={player} rerender={rerender} />
     </div>
   );
 }

src/Locations/ui/TorButton.tsx

@@ -25,7 +25,8 @@ export function TorButton(props: IProps): React.ReactElement {
 
   return (
     <Button disabled={!props.p.canAfford(CONSTANTS.TorRouterCost)} onClick={buy}>
-      Purchase TOR router - <Money money={CONSTANTS.TorRouterCost} player={props.p} />
+      Purchase TOR router -&nbsp;
+      <Money money={CONSTANTS.TorRouterCost} player={props.p} />
     </Button>
   );
 }