fix getNodeStats error

src/Hacknet/ui/GeneralInfo.tsx

@@ -4,6 +4,7 @@
  * Displays general information about Hacknet Nodes
  */
 import React from "react";
+import Typography from "@mui/material/Typography";
 
 interface IProps {
   hasHacknetServers: boolean;
@@ -11,40 +12,40 @@ interface IProps {
 
 export function GeneralInfo(props: IProps): React.ReactElement {
   return (
-    <div>
-      <p className={"hacknet-general-info"}>
+    <>
+      <Typography>
         The Hacknet is a global, decentralized network of machines. It is used by hackers all around the world to
         anonymously share computing power and perform distributed cyberattacks without the fear of being traced.
-      </p>
+      </Typography>
       {!props.hasHacknetServers ? (
         <>
-          <p className={"hacknet-general-info"}>
+          <Typography>
             {`Here, you can purchase a Hacknet Node, a specialized machine that can connect ` +
               `and contribute its resources to the Hacknet network. This allows you to take ` +
               `a small percentage of profits from hacks performed on the network. Essentially, ` +
               `you are renting out your Node's computing power.`}
-          </p>
-          <p className={"hacknet-general-info"}>
+          </Typography>
+          <Typography>
             {`Each Hacknet Node you purchase will passively earn you money. Each Hacknet Node ` +
               `can be upgraded in order to increase its computing power and thereby increase ` +
               `the profit you earn from it.`}
-          </p>
+          </Typography>
         </>
       ) : (
         <>
-          <p className={"hacknet-general-info"}>
+          <Typography>
             {`Here, you can purchase a Hacknet Server, an upgraded version of the Hacknet Node. ` +
               `Hacknet Servers will perform computations and operations on the network, earning ` +
               `you hashes. Hashes can be spent on a variety of different upgrades.`}
-          </p>
-          <p className={"hacknet-general-info"}>
+          </Typography>
+          <Typography>
             {`Hacknet Servers can also be used as servers to run scripts. However, running scripts ` +
               `on a server will reduce its hash rate (hashes generated per second). A Hacknet Server's hash ` +
               `rate will be reduced by the percentage of RAM that is being used by that Server to run ` +
               `scripts.`}
-          </p>
+          </Typography>
         </>
       )}
-    </div>
+    </>
   );
 }

src/Hacknet/ui/HacknetRoot.tsx

@@ -26,6 +26,10 @@ 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";
+
 interface IProps {
   player: IPlayer;
 }
@@ -122,24 +126,25 @@ export function HacknetRoot(props: IProps): React.ReactElement {
 
   return (
     <>
-      <h1>Hacknet {hasHacknetServers(props.player) ? "Servers" : "Nodes"}</h1>
+      <Typography variant="h4">Hacknet {hasHacknetServers(props.player) ? "Servers" : "Nodes"}</Typography>
       <GeneralInfo hasHacknetServers={hasHacknetServers(props.player)} />
 
       <PurchaseButton cost={purchaseCost} multiplier={purchaseMultiplier} onClick={handlePurchaseButtonClick} />
 
       <br />
-      <div id={"hacknet-nodes-money-multipliers-div"}>
-        <PlayerInfo totalProduction={totalProduction} player={props.player} />
-        <MultiplierButtons onClicks={purchaseMultiplierOnClicks} purchaseMultiplier={purchaseMultiplier} />
-      </div>
 
-      {hasHacknetServers(props.player) && (
-        <button className={"std-button"} onClick={createHashUpgradesPopup} style={{ display: "block" }}>
-          {"Spend Hashes on Upgrades"}
-        </button>
-      )}
+      <Grid container spacing={2}>
+        <Grid item xs={6}>
+          <PlayerInfo totalProduction={totalProduction} player={props.player} />
+        </Grid>
+        <Grid item xs={6}>
+          <MultiplierButtons onClicks={purchaseMultiplierOnClicks} purchaseMultiplier={purchaseMultiplier} />
+        </Grid>
+      </Grid>
 
-      <ul id={"hacknet-nodes-list"}>{nodes}</ul>
+      {hasHacknetServers(props.player) && <Button onClick={createHashUpgradesPopup}>Spend Hashes on Upgrades</Button>}
+
+      <Grid container>{nodes}</Grid>
     </>
   );
 }

src/Hacknet/ui/HacknetServerElem.tsx

@@ -23,6 +23,14 @@ import { HacknetServer } from "../HacknetServer";
 import { Money } from "../../ui/React/Money";
 import { Hashes } from "../../ui/React/Hashes";
 import { HashRate } from "../../ui/React/HashRate";
+import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Grid";
+import Paper from "@mui/material/Paper";
+import Button from "@mui/material/Button";
+import { TableCell } from "../../ui/React/Table";
+import TableBody from "@mui/material/TableBody";
+import Table from "@mui/material/Table";
+import TableRow from "@mui/material/TableRow";
 
 interface IProps {
   node: HacknetServer;
@@ -37,10 +45,9 @@ export function HacknetServerElem(props: IProps): React.ReactElement {
   const rerender = props.rerender;
 
   // Upgrade Level Button
-  let upgradeLevelContent, upgradeLevelClass;
+  let upgradeLevelContent;
   if (node.level >= HacknetServerConstants.MaxLevel) {
     upgradeLevelContent = <>MAX LEVEL</>;
-    upgradeLevelClass = "std-button-disabled";
   } else {
     let multiplier = 0;
     if (purchaseMult === "MAX") {
@@ -53,14 +60,10 @@ export function HacknetServerElem(props: IProps): React.ReactElement {
     const upgradeLevelCost = node.calculateLevelUpgradeCost(multiplier, props.player.hacknet_node_level_cost_mult);
     upgradeLevelContent = (
       <>
-        Upgrade x{multiplier} - <Money money={upgradeLevelCost} player={props.player} />
+        +{multiplier}&nbsp;-&nbsp;
+        <Money money={upgradeLevelCost} player={props.player} />
       </>
     );
-    if (props.player.money.lt(upgradeLevelCost)) {
-      upgradeLevelClass = "std-button-disabled";
-    } else {
-      upgradeLevelClass = "std-button";
-    }
   }
   function upgradeLevelOnClick(): void {
     let numUpgrades = purchaseMult;
@@ -72,10 +75,9 @@ export function HacknetServerElem(props: IProps): React.ReactElement {
   }
 
   // Upgrade RAM Button
-  let upgradeRamContent, upgradeRamClass;
+  let upgradeRamContent;
   if (node.maxRam >= HacknetServerConstants.MaxRam) {
     upgradeRamContent = <>MAX RAM</>;
-    upgradeRamClass = "std-button-disabled";
   } else {
     let multiplier = 0;
     if (purchaseMult === "MAX") {
@@ -88,14 +90,10 @@ export function HacknetServerElem(props: IProps): React.ReactElement {
     const upgradeRamCost = node.calculateRamUpgradeCost(multiplier, props.player.hacknet_node_ram_cost_mult);
     upgradeRamContent = (
       <>
-        Upgrade x{multiplier} - <Money money={upgradeRamCost} player={props.player} />
+        +{multiplier}&nbsp;-&nbsp;
+        <Money money={upgradeRamCost} player={props.player} />
       </>
     );
-    if (props.player.money.lt(upgradeRamCost)) {
-      upgradeRamClass = "std-button-disabled";
-    } else {
-      upgradeRamClass = "std-button";
-    }
   }
   function upgradeRamOnClick(): void {
     let numUpgrades = purchaseMult;
@@ -107,10 +105,9 @@ export function HacknetServerElem(props: IProps): React.ReactElement {
   }
 
   // Upgrade Cores Button
-  let upgradeCoresContent, upgradeCoresClass;
+  let upgradeCoresContent;
   if (node.cores >= HacknetServerConstants.MaxCores) {
     upgradeCoresContent = <>MAX CORES</>;
-    upgradeCoresClass = "std-button-disabled";
   } else {
     let multiplier = 0;
     if (purchaseMult === "MAX") {
@@ -123,14 +120,10 @@ export function HacknetServerElem(props: IProps): React.ReactElement {
     const upgradeCoreCost = node.calculateCoreUpgradeCost(multiplier, props.player.hacknet_node_core_cost_mult);
     upgradeCoresContent = (
       <>
-        Upgrade x{multiplier} - <Money money={upgradeCoreCost} player={props.player} />
+        +{multiplier}&nbsp;-&nbsp;
+        <Money money={upgradeCoreCost} player={props.player} />
       </>
     );
-    if (props.player.money.lt(upgradeCoreCost)) {
-      upgradeCoresClass = "std-button-disabled";
-    } else {
-      upgradeCoresClass = "std-button";
-    }
   }
   function upgradeCoresOnClick(): void {
     let numUpgrades = purchaseMult;
@@ -142,10 +135,9 @@ export function HacknetServerElem(props: IProps): React.ReactElement {
   }
 
   // Upgrade Cache button
-  let upgradeCacheContent, upgradeCacheClass;
+  let upgradeCacheContent;
   if (node.cache >= HacknetServerConstants.MaxCache) {
     upgradeCacheContent = <>MAX CACHE</>;
-    upgradeCacheClass = "std-button-disabled";
   } else {
     let multiplier = 0;
     if (purchaseMult === "MAX") {
@@ -158,13 +150,12 @@ export function HacknetServerElem(props: IProps): React.ReactElement {
     const upgradeCacheCost = node.calculateCacheUpgradeCost(multiplier);
     upgradeCacheContent = (
       <>
-        Upgrade x{multiplier} - <Money money={upgradeCacheCost} player={props.player} />
+        +{multiplier}&nbsp;-&nbsp;
+        <Money money={upgradeCacheCost} player={props.player} />
       </>
     );
     if (props.player.money.lt(upgradeCacheCost)) {
-      upgradeCacheClass = "std-button-disabled";
     } else {
-      upgradeCacheClass = "std-button";
     }
   }
   function upgradeCacheOnClick(): void {
@@ -178,50 +169,78 @@ export function HacknetServerElem(props: IProps): React.ReactElement {
   }
 
   return (
-    <li className={"hacknet-node"}>
-      <div className={"hacknet-node-container"}>
-        <div className={"row"}>
-          <h1 style={{ fontSize: "1em" }}>{node.hostname}</h1>
-        </div>
-        <div className={"row"}>
-          <p>Production:</p>
-          <span className={"text money-gold"}>
-            {Hashes(node.totalHashesGenerated)} ({HashRate(node.hashRate)})
-          </span>
-        </div>
-        <div className={"row"}>
-          <p>Hash Capacity:</p>
-          <span className={"text"}>{Hashes(node.hashCapacity)}</span>
-        </div>
-        <div className={"row"}>
-          <p>Level:</p>
-          <span className={"text upgradable-info"}>{node.level}</span>
-          <button className={upgradeLevelClass} onClick={upgradeLevelOnClick}>
-            {upgradeLevelContent}
-          </button>
-        </div>
-        <div className={"row"}>
-          <p>RAM:</p>
-          <span className={"text upgradable-info"}>{node.maxRam}GB</span>
-          <button className={upgradeRamClass} onClick={upgradeRamOnClick}>
-            {upgradeRamContent}
-          </button>
-        </div>
-        <div className={"row"}>
-          <p>Cores:</p>
-          <span className={"text upgradable-info"}>{node.cores}</span>
-          <button className={upgradeCoresClass} onClick={upgradeCoresOnClick}>
-            {upgradeCoresContent}
-          </button>
-        </div>
-        <div className={"row"}>
-          <p>Cache Level:</p>
-          <span className={"text upgradable-info"}>{node.cache}</span>
-          <button className={upgradeCacheClass} onClick={upgradeCacheOnClick}>
-            {upgradeCacheContent}
-          </button>
-        </div>
-      </div>
-    </li>
+    <Grid item component={Paper} p={1}>
+      <Table size="small">
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <Typography>{node.hostname}</Typography>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Typography>Production:</Typography>
+            </TableCell>
+            <TableCell colSpan={2}>
+              <Typography>
+                {Hashes(node.totalHashesGenerated)} ({HashRate(node.hashRate)})
+              </Typography>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Typography>Hash Capacity:</Typography>
+            </TableCell>
+            <TableCell colSpan={2}>
+              <Typography>{Hashes(node.hashCapacity)}</Typography>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Typography>Level:</Typography>
+            </TableCell>
+            <TableCell>
+              <Typography>{node.level}</Typography>
+            </TableCell>
+            <TableCell>
+              <Button onClick={upgradeLevelOnClick}>{upgradeLevelContent}</Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Typography>RAM:</Typography>
+            </TableCell>
+            <TableCell>
+              <Typography>{node.maxRam}GB</Typography>
+            </TableCell>
+            <TableCell>
+              <Button onClick={upgradeRamOnClick}>{upgradeRamContent}</Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Typography>Cores:</Typography>
+            </TableCell>
+            <TableCell>
+              <Typography>{node.cores}</Typography>
+            </TableCell>
+            <TableCell>
+              <Button onClick={upgradeCoresOnClick}>{upgradeCoresContent}</Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Typography>Cache Level:</Typography>
+            </TableCell>
+            <TableCell>
+              <Typography>{node.cache}</Typography>
+            </TableCell>
+            <TableCell>
+              <Button onClick={upgradeCacheOnClick}>{upgradeCacheContent}</Button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </Grid>
   );
 }

src/Hacknet/ui/MultiplierButtons.tsx

@@ -6,6 +6,7 @@
 import React from "react";
 
 import { PurchaseMultipliers } from "../data/Constants";
+import Button from "@mui/material/Button";
 
 interface IMultiplierProps {
   className: string;
@@ -15,11 +16,7 @@ interface IMultiplierProps {
 }
 
 function MultiplierButton(props: IMultiplierProps): React.ReactElement {
-  return (
-    <button className={props.className} onClick={props.onClick}>
-      {props.text}
-    </button>
-  );
+  return <Button onClick={props.onClick}>{props.text}</Button>;
 }
 
 interface IProps {
@@ -47,5 +44,5 @@ export function MultiplierButtons(props: IProps): React.ReactElement {
     buttons.push(<MultiplierButton {...btnProps} />);
   }
 
-  return <span id={"hacknet-nodes-multipliers"}>{buttons}</span>;
+  return <>{buttons}</>;
 }

src/Hacknet/ui/PlayerInfo.tsx

@@ -12,6 +12,7 @@ import { Money } from "../../ui/React/Money";
 import { MoneyRate } from "../../ui/React/MoneyRate";
 import { HashRate } from "../../ui/React/HashRate";
 import { Hashes } from "../../ui/React/Hashes";
+import Typography from "@mui/material/Typography";
 
 interface IProps {
   totalProduction: number;
@@ -29,22 +30,23 @@ export function PlayerInfo(props: IProps): React.ReactElement {
   }
 
   return (
-    <p id={"hacknet-nodes-money"}>
-      <span>Money: </span>
-      <Money money={props.player.money.toNumber()} />
-      <br />
+    <>
+      <Typography>
+        Money:
+        <Money money={props.player.money.toNumber()} />
+      </Typography>
 
       {hasServers && (
         <>
-          <span>
+          <Typography>
             Hashes: {Hashes(props.player.hashManager.hashes)} / {Hashes(props.player.hashManager.capacity)}
-          </span>
-          <br />
+          </Typography>
         </>
       )}
 
-      <span>Total Hacknet {hasServers ? "Server" : "Node"} Production: </span>
-      {prod}
-    </p>
+      <Typography>
+        Total Hacknet {hasServers ? "Server" : "Node"} Production: {prod}
+      </Typography>
+    </>
   );
 }

src/Hacknet/ui/PurchaseButton.tsx

@@ -7,6 +7,9 @@ import { hasHacknetServers, hasMaxNumberHacknetServers } from "../HacknetHelpers
 import { Player } from "../../Player";
 import { Money } from "../../ui/React/Money";
 
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+
 interface IProps {
   multiplier: number | string;
   onClick: () => void;
@@ -39,8 +42,8 @@ export function PurchaseButton(props: IProps): React.ReactElement {
   }
 
   return (
-    <button className={className} onClick={props.onClick} style={style}>
-      {text}
-    </button>
+    <Button onClick={props.onClick}>
+      <Typography>{text}</Typography>
+    </Button>
   );
 }