Work on hacknet to mui

css/popupboxes.scss

@@ -19,12 +19,13 @@
 .popup-box-content {
   background-color: var(--my-background-color);
   padding: 12px;
-  border: 5px solid var(--my-highlight-color);
+  border: 2px solid $hacker-green;
   width: 70%;
   max-height: 80%;
   overflow-y: auto;
   z-index: 11; /* Sit on top of the container */
   color: var(--my-font-color);
+  box-shadow: 0px 3px 5px -1px #090, 0px 5px 8px 0px #090, 0px 1px 14px 0px #090;
 }
 
 .popup-box-input-div {
@@ -89,13 +90,13 @@
   max-height: 50%;
   z-index: 10;
   background-color: var(--my-background-color);
-  border: 2px solid var(--my-highlight-color);
+  border: 2px solid $hacker-green;
 }
 
 .log-box-header {
   z-index: 1300;
   background-color: #333;
-  border: 1px solid var(--my-highlight-color);
+  border: 2px solid $hacker-green;
   display: flex;
   flex: row nowrap;
   align-items: center;

src/Hacknet/ui/HacknetRoot.tsx

@@ -7,7 +7,7 @@ import { GeneralInfo } from "./GeneralInfo";
 import { HacknetNodeElem } from "./HacknetNodeElem";
 import { HacknetServerElem } from "./HacknetServerElem";
 import { HacknetNode } from "../HacknetNode";
-import { HashUpgradePopup } from "./HashUpgradePopup";
+import { HashUpgradeModal } from "./HashUpgradeModal";
 import { MultiplierButtons } from "./MultiplierButtons";
 import { PlayerInfo } from "./PlayerInfo";
 import { PurchaseButton } from "./PurchaseButton";
@@ -24,8 +24,6 @@ import { IPlayer } from "../../PersonObjects/IPlayer";
 import { AllServers } from "../../Server/AllServers";
 import { Server } from "../../Server/Server";
 
-import { createPopup } from "../../ui/React/createPopup";
-
 import Typography from "@mui/material/Typography";
 import Grid from "@mui/material/Grid";
 import Button from "@mui/material/Button";
@@ -35,6 +33,7 @@ interface IProps {
 }
 
 export function HacknetRoot(props: IProps): React.ReactElement {
+  const [open, setOpen] = useState(false);
   const setRerender = useState(false)[1];
   function rerender(): void {
     setRerender((old) => !old);
@@ -46,13 +45,6 @@ export function HacknetRoot(props: IProps): React.ReactElement {
     return () => clearInterval(id);
   }, []);
 
-  function createHashUpgradesPopup(): void {
-    const id = "hacknet-server-hash-upgrades-popup";
-    createPopup(id, HashUpgradePopup, {
-      player: props.player,
-    });
-  }
-
   let totalProduction = 0;
   for (let i = 0; i < props.player.hacknetNodes.length; ++i) {
     const node = props.player.hacknetNodes[i];
@@ -142,9 +134,10 @@ export function HacknetRoot(props: IProps): React.ReactElement {
         </Grid>
       </Grid>
 
-      {hasHacknetServers(props.player) && <Button onClick={createHashUpgradesPopup}>Spend Hashes on Upgrades</Button>}
+      {hasHacknetServers(props.player) && <Button onClick={() => setOpen(true)}>Spend Hashes on Upgrades</Button>}
 
       <Grid container>{nodes}</Grid>
+      <HashUpgradeModal open={open} onClose={() => setOpen(false)} />
     </>
   );
 }

src/Hacknet/ui/HacknetUpgradeElem.tsx

@@ -12,6 +12,11 @@ import { dialogBoxCreate } from "../../../utils/DialogBox";
 import { CopyableText } from "../../ui/React/CopyableText";
 import { Hashes } from "../../ui/React/Hashes";
 
+import Typography from "@mui/material/Typography";
+import Paper from "@mui/material/Paper";
+import Button from "@mui/material/Button";
+import { SelectChangeEvent } from "@mui/material/Select";
+
 interface IProps {
   player: IPlayer;
   hashManager: HashManager;
@@ -21,7 +26,7 @@ interface IProps {
 
 export function HacknetUpgradeElem(props: IProps): React.ReactElement {
   const [selectedServer, setSelectedServer] = useState("ecorp");
-  function changeTargetServer(event: React.ChangeEvent<HTMLSelectElement>): void {
+  function changeTargetServer(event: SelectChangeEvent<string>): void {
     setSelectedServer(event.target.value);
   }
 
@@ -47,24 +52,25 @@ export function HacknetUpgradeElem(props: IProps): React.ReactElement {
 
   // Purchase button
   const canPurchase = hashManager.hashes >= cost;
-  const btnClass = canPurchase ? "std-button" : "std-button-disabled";
 
   // We'll reuse a Bladeburner css class
   return (
-    <div className={"bladeburner-action"}>
+    <Paper sx={{ p: 1 }}>
-      <CopyableText value={upg.name} />
+      <Typography>
-      <p>
+        <CopyableText value={upg.name} />
+      </Typography>
+      <Typography>
         Cost: {Hashes(cost)}, Bought: {level} times
-      </p>
+      </Typography>
 
-      <p>{upg.desc}</p>
+      <Typography>{upg.desc}</Typography>
-      <button className={btnClass} onClick={purchase}>
+      <Button onClick={purchase} disabled={!canPurchase}>
         Purchase
-      </button>
+      </Button>
-      {level > 0 && effect && <p>{effect}</p>}
+      {level > 0 && effect && <Typography>{effect}</Typography>}
       {upg.hasTargetServer && (
-        <ServerDropdown serverType={ServerType.Foreign} onChange={changeTargetServer} style={{ margin: "5px" }} />
+        <ServerDropdown value={selectedServer} serverType={ServerType.Foreign} onChange={changeTargetServer} />
       )}
-    </div>
+    </Paper>
   );
 }

src/Hacknet/ui/HashUpgradeModal.tsx

@@ -0,0 +1,59 @@
+/**
+ * Create the pop-up for purchasing upgrades with hashes
+ */
+import React, { useState, useEffect } from "react";
+
+import { HashManager } from "../HashManager";
+import { HashUpgrades } from "../HashUpgrades";
+
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+import { Hashes } from "../../ui/React/Hashes";
+import { HacknetUpgradeElem } from "./HacknetUpgradeElem";
+import { Modal } from "../../ui/React/Modal";
+import { use } from "../../ui/Context";
+import Typography from "@mui/material/Typography";
+
+interface IProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function HashUpgradeModal(props: IProps): React.ReactElement {
+  const player = use.Player();
+  const setRerender = useState(false)[1];
+  function rerender(): void {
+    setRerender((old) => !old);
+  }
+
+  useEffect(() => {
+    const id = setInterval(() => setRerender((old) => !old), 200);
+    return () => clearInterval(id);
+  }, []);
+
+  const hashManager = player.hashManager;
+  if (!(hashManager instanceof HashManager)) {
+    throw new Error(`Player does not have a HashManager)`);
+  }
+
+  return (
+    <Modal open={props.open} onClose={props.onClose}>
+      <>
+        <Typography>Spend your hashes on a variety of different upgrades</Typography>
+        <Typography>Hashes: {Hashes(player.hashManager.hashes)}</Typography>
+        {Object.keys(HashUpgrades).map((upgName) => {
+          const upg = HashUpgrades[upgName];
+          return (
+            <HacknetUpgradeElem
+              player={player}
+              upg={upg}
+              hashManager={hashManager}
+              key={upg.name}
+              rerender={rerender}
+            />
+          );
+        })}
+      </>
+    </Modal>
+  );
+}

src/Hacknet/ui/HashUpgradePopup.tsx

@@ -1,54 +0,0 @@
-/**
- * Create the pop-up for purchasing upgrades with hashes
- */
-import React, { useState, useEffect } from "react";
-
-import { HashManager } from "../HashManager";
-import { HashUpgrades } from "../HashUpgrades";
-
-import { IPlayer } from "../../PersonObjects/IPlayer";
-
-import { Hashes } from "../../ui/React/Hashes";
-import { HacknetUpgradeElem } from "./HacknetUpgradeElem";
-
-interface IProps {
-  player: IPlayer;
-}
-
-export function HashUpgradePopup(props: IProps): React.ReactElement {
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-
-  useEffect(() => {
-    const id = setInterval(() => setRerender((old) => !old), 1000);
-    return () => clearInterval(id);
-  }, []);
-
-  const hashManager = props.player.hashManager;
-  if (!(hashManager instanceof HashManager)) {
-    throw new Error(`Player does not have a HashManager)`);
-  }
-
-  const upgradeElems = Object.keys(HashUpgrades).map((upgName) => {
-    const upg = HashUpgrades[upgName];
-    return (
-      <HacknetUpgradeElem
-        player={props.player}
-        upg={upg}
-        hashManager={hashManager}
-        key={upg.name}
-        rerender={rerender}
-      />
-    );
-  });
-
-  return (
-    <div>
-      <p>Spend your hashes on a variety of different upgrades</p>
-      <p>Hashes: {Hashes(props.player.hashManager.hashes)}</p>
-      {upgradeElems}
-    </div>
-  );
-}

src/ui/React/ServerDropdown.tsx

@@ -8,6 +8,8 @@ import { AllServers } from "../../Server/AllServers";
 import { Server } from "../../Server/Server";
 
 import { HacknetServer } from "../../Hacknet/HacknetServer";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
 
 // TODO make this an enum when this gets converted to TypeScript
 export const ServerType = {
@@ -19,8 +21,8 @@ export const ServerType = {
 
 interface IProps {
   serverType: number;
-  onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  onChange: (event: SelectChangeEvent<string>) => void;
-  style: any;
+  value: string;
 }
 
 export function ServerDropdown(props: IProps): React.ReactElement {
@@ -51,16 +53,16 @@ export function ServerDropdown(props: IProps): React.ReactElement {
     const server = AllServers[serverName];
     if (isValidServer(server)) {
       servers.push(
-        <option key={server.hostname} value={server.hostname}>
+        <MenuItem key={server.hostname} value={server.hostname}>
           {server.hostname}
-        </option>,
+        </MenuItem>,
       );
     }
   }
 
   return (
-    <select className={"dropdown"} onChange={props.onChange} style={props.style}>
+    <Select sx={{ mx: 1 }} variant="standard" value={props.value} onChange={props.onChange}>
       {servers}
-    </select>
+    </Select>
   );
 }