convert most of the city to mui

src/Locations/ui/ApplyToJobButton.tsx

@@ -6,47 +6,43 @@ import * as React from "react";
 import { Company } from "../../Company/Company";
 import { CompanyPosition } from "../../Company/CompanyPosition";
 import { getJobRequirementText } from "../../Company/GetJobRequirementText";
-import { IPlayer } from "../../PersonObjects/IPlayer";
 
-import { StdButton } from "../../ui/React/StdButton";
+import { use } from "../../ui/Context";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
 
 type IProps = {
   company: Company;
   entryPosType: CompanyPosition;
   onClick: (e: React.MouseEvent<HTMLElement>) => void;
-  p: IPlayer;
-  style?: any;
   text: string;
 };
 
-export class ApplyToJobButton extends React.Component<IProps, any> {
+export function ApplyToJobButton(props: IProps): React.ReactElement {
-  constructor(props: IProps) {
+  const player = use.Player();
-    super(props);
 
-    this.getJobRequirementTooltip = this.getJobRequirementTooltip.bind(this);
+  function getJobRequirementTooltip(): string {
-  }
+    const pos = player.getNextCompanyPosition(props.company, props.entryPosType);
-
-  getJobRequirementTooltip(): string {
-    const pos = this.props.p.getNextCompanyPosition(this.props.company, this.props.entryPosType);
     if (pos == null) {
       return "";
     }
 
-    if (!this.props.company.hasPosition(pos)) {
+    if (!props.company.hasPosition(pos)) {
       return "";
     }
 
-    return getJobRequirementText(this.props.company, pos, true);
+    return getJobRequirementText(props.company, pos, true);
   }
 
-  render(): React.ReactNode {
+  return (
-    return (
+    <>
-      <StdButton
+      <Tooltip
-        onClick={this.props.onClick}
+        title={<span dangerouslySetInnerHTML={{ __html: getJobRequirementTooltip() }}></span>}
-        style={this.props.style}
+        disableInteractive
-        text={this.props.text}
+      >
-        tooltip={this.getJobRequirementTooltip()}
+        <Button onClick={props.onClick}>{props.text}</Button>
-      />
+      </Tooltip>
-    );
+      <br />
-  }
+    </>
+  );
 }

src/Locations/ui/CompanyLocation.tsx

@@ -4,6 +4,10 @@
  * This subcomponent renders all of the buttons for applying to jobs at a company
  */
 import React, { useState } from "react";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
+import Box from "@mui/material/Box";
 
 import { ApplyToJobButton } from "./ApplyToJobButton";
 
@@ -15,7 +19,6 @@ import { CompanyPosition } from "../../Company/CompanyPosition";
 import { CompanyPositions } from "../../Company/CompanyPositions";
 import * as posNames from "../../Company/data/companypositionnames";
 
-import { StdButton } from "../../ui/React/StdButton";
 import { Reputation } from "../../ui/React/Reputation";
 import { Favor } from "../../ui/React/Favor";
 import { createPopup } from "../../ui/React/createPopup";
@@ -195,35 +198,41 @@ export function CompanyLocation(props: IProps): React.ReactElement {
     <div>
       {isEmployedHere && (
         <div>
-          <p>Job Title: {jobTitle}</p>
+          <Typography>Job Title: {jobTitle}</Typography>
+          <Typography>-------------------------</Typography>
+          <Box display="flex">
+            <Tooltip
+              title={
+                <>
+                  You will have {Favor(company.favor + favorGain[0])} company favor upon resetting after installing
+                  Augmentations
+                </>
+              }
+              disableInteractive
+            >
+              <Typography>Company reputation: {Reputation(company.playerReputation)}</Typography>
+            </Tooltip>
+          </Box>
+          <Typography>-------------------------</Typography>
+          <Box display="flex">
+            <Tooltip
+              title={
+                <>
+                  Company favor increases the rate at which you earn reputation for this company by 1% per favor.
+                  Company favor is gained whenever you reset after installing Augmentations. The amount of favor you
+                  gain depends on how much reputation you have with the company.
+                </>
+              }
+              disableInteractive
+            >
+              <Typography className={"tooltip"}>Company Favor: {Favor(company.favor)}</Typography>
+            </Tooltip>
+          </Box>
+          <Typography>-------------------------</Typography>
           <br />
-          <p style={{ display: "block" }}>-------------------------</p>
+          <Button onClick={work}>Work</Button>
-          <br />
-          <p className={"tooltip"}>
-            Company reputation: {Reputation(company.playerReputation)}
-            <span className={"tooltiptext"}>
-              You will earn {Favor(favorGain[0])} company favor upon resetting after installing Augmentations
-            </span>
-          </p>
-          <br />
-          <br />
-          <p style={{ display: "block" }}>-------------------------</p>
-          <br />
-          <p className={"tooltip"}>
-            Company Favor: {Favor(company.favor)}
-            <span className={"tooltiptext"}>
-              Company favor increases the rate at which you earn reputation for this company by 1% per favor. Company
-              favor is gained whenever you reset after installing Augmentations. The amount of favor you gain depends on
-              how much reputation you have with the comapny.
-            </span>
-          </p>
-          <br />
-          <br />
-          <p style={{ display: "block" }}>-------------------------</p>
-          <br />
-          <StdButton onClick={work} text={"Work"} />
           &nbsp;&nbsp;&nbsp;&nbsp;
-          <StdButton onClick={quit} text={"Quit"} />
+          <Button onClick={quit}>Quit</Button>
         </div>
       )}
       {company.hasAgentPositions() && (
@@ -231,8 +240,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
           company={company}
           entryPosType={CompanyPositions[posNames.AgentCompanyPositions[0]]}
           onClick={applyForAgentJob}
-          p={p}
-          style={{ display: "block" }}
           text={"Apply for Agent Job"}
         />
       )}
@@ -241,8 +248,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
           company={company}
           entryPosType={CompanyPositions[posNames.BusinessConsultantCompanyPositions[0]]}
           onClick={applyForBusinessConsultantJob}
-          p={p}
-          style={{ display: "block" }}
           text={"Apply for Business Consultant Job"}
         />
       )}
@@ -251,8 +256,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
           company={company}
           entryPosType={CompanyPositions[posNames.BusinessCompanyPositions[0]]}
           onClick={applyForBusinessJob}
-          p={p}
-          style={{ display: "block" }}
           text={"Apply for Business Job"}
         />
       )}
@@ -261,8 +264,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
           company={company}
           entryPosType={CompanyPositions[posNames.MiscCompanyPositions[1]]}
           onClick={applyForEmployeeJob}
-          p={p}
-          style={{ display: "block" }}
           text={"Apply to be an Employee"}
         />
       )}
@@ -271,8 +272,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
           company={company}
           entryPosType={CompanyPositions[posNames.PartTimeCompanyPositions[1]]}
           onClick={applyForPartTimeEmployeeJob}
-          p={p}
-          style={{ display: "block" }}
           text={"Apply to be a part-time Employee"}
         />
       )}
@@ -281,8 +280,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
           company={company}
           entryPosType={CompanyPositions[posNames.ITCompanyPositions[0]]}
           onClick={applyForItJob}
-          p={p}
-          style={{ display: "block" }}
           text={"Apply for IT Job"}
         />
       )}
@@ -291,8 +288,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
           company={company}
           entryPosType={CompanyPositions[posNames.SecurityCompanyPositions[2]]}
           onClick={applyForSecurityJob}
-          p={p}
-          style={{ display: "block" }}
           text={"Apply for Security Job"}
         />
       )}
@@ -301,8 +296,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
           company={company}
           entryPosType={CompanyPositions[posNames.SoftwareConsultantCompanyPositions[0]]}
           onClick={applyForSoftwareConsultantJob}
-          p={p}
-          style={{ display: "block" }}
           text={"Apply for Software Consultant Job"}
         />
       )}
@@ -311,8 +304,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
           company={company}
           entryPosType={CompanyPositions[posNames.SoftwareCompanyPositions[0]]}
           onClick={applyForSoftwareJob}
-          p={p}
-          style={{ display: "block" }}
           text={"Apply for Software Job"}
         />
       )}
@@ -321,8 +312,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
           company={company}
           entryPosType={CompanyPositions[posNames.MiscCompanyPositions[0]]}
           onClick={applyForWaiterJob}
-          p={p}
-          style={{ display: "block" }}
           text={"Apply to be a Waiter"}
         />
       )}
@@ -331,19 +320,10 @@ export function CompanyLocation(props: IProps): React.ReactElement {
           company={company}
           entryPosType={CompanyPositions[posNames.PartTimeCompanyPositions[0]]}
           onClick={applyForPartTimeWaiterJob}
-          p={p}
-          style={{ display: "block" }}
           text={"Apply to be a part-time Waiter"}
         />
       )}
-      {location.infiltrationData != null && (
+      {location.infiltrationData != null && <Button onClick={startInfiltration}>Infiltrate Company</Button>}
-        <StdButton onClick={startInfiltration} style={{ display: "block" }} text={"Infiltrate Company"} />
-      )}
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
     </div>
   );
 }

src/Locations/ui/CoresButton.tsx

@@ -1,9 +1,9 @@
 import React from "react";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
 
 import { IPlayer } from "../../PersonObjects/IPlayer";
 
-import { StdButtonPurchased } from "../../ui/React/StdButtonPurchased";
-import { StdButton } from "../../ui/React/StdButton";
 import { Money } from "../../ui/React/Money";
 import { MathComponent } from "mathjax-react";
 
@@ -13,12 +13,10 @@ type IProps = {
 };
 
 export function CoresButton(props: IProps): React.ReactElement {
-  const btnStyle = { display: "block" };
-
   const homeComputer = props.p.getHomeComputer();
   const maxCores = homeComputer.cpuCores >= 8;
   if (maxCores) {
-    return <StdButtonPurchased style={btnStyle} text={"Upgrade 'home' cores - MAX"} />;
+    return <Button>Upgrade 'home' cores - MAX</Button>;
   }
 
   const cost = 1e9 * Math.pow(7.5, homeComputer.cpuCores);
@@ -32,17 +30,11 @@ export function CoresButton(props: IProps): React.ReactElement {
   }
 
   return (
-    <StdButton
+    <Tooltip title={<MathComponent tex={String.raw`\large{cost = 10^9 \times 7.5 ^{\text{cores}}}`} />}>
-      disabled={!props.p.canAfford(cost)}
+      <Button disabled={!props.p.canAfford(cost)} onClick={buy}>
-      onClick={buy}
+        Upgrade 'home' cores ({homeComputer.cpuCores} -&gt; {homeComputer.cpuCores + 1}) -&nbsp;
-      style={btnStyle}
+        <Money money={cost} player={props.p} />
-      text={
+      </Button>
-        <>
+    </Tooltip>
-          Upgrade 'home' cores ({homeComputer.cpuCores} -&gt; {homeComputer.cpuCores + 1}) -{" "}
-          <Money money={cost} player={props.p} />
-        </>
-      }
-      tooltip={<MathComponent tex={String.raw`\large{cost = 10^9 \times 7.5 ^{\text{cores}}}`} />}
-    />
   );
 }

src/Locations/ui/GenericLocation.tsx

@@ -5,6 +5,8 @@
  * location that is being rendered and then creates the proper component(s) for that.
  */
 import * as React from "react";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
 
 import { CompanyLocation } from "./CompanyLocation";
 import { GymLocation } from "./GymLocation";
@@ -24,7 +26,6 @@ import { Settings } from "../../Settings/Settings";
 import { SpecialServerIps } from "../../Server/SpecialServerIps";
 import { getServer, isBackdoorInstalled } from "../../Server/ServerHelpers";
 
-import { StdButton } from "../../ui/React/StdButton";
 import { CorruptableText } from "../../ui/React/CorruptableText";
 import { use } from "../../ui/Context";
 
@@ -87,12 +88,12 @@ export function GenericLocation({ loc }: IProps): React.ReactElement {
   const backdoorInstalled = server !== null && isBackdoorInstalled(server);
 
   return (
-    <div>
+    <>
-      <StdButton onClick={() => router.toCity()} style={{ display: "block" }} text={"Return to World"} />
+      <Button onClick={() => router.toCity()}>Return to World</Button>
-      <h1 className="noselect">
+      <Typography variant="h4" className="noselect">
         {backdoorInstalled && !Settings.DisableTextEffects ? <CorruptableText content={loc.name} /> : loc.name}
-      </h1>
+      </Typography>
       {locContent}
-    </div>
+    </>
   );
 }

src/Locations/ui/GymLocation.tsx

@@ -4,6 +4,7 @@
  * This subcomponent renders all of the buttons for training at the gym
  */
 import * as React from "react";
+import Button from "@mui/material/Button";
 
 import { Location } from "../Location";
 
@@ -13,7 +14,6 @@ import { getServer } from "../../Server/ServerHelpers";
 import { Server } from "../../Server/Server";
 import { SpecialServerIps } from "../../Server/SpecialServerIps";
 
-import { StdButton } from "../../ui/React/StdButton";
 import { Money } from "../../ui/React/Money";
 import { IRouter } from "../../ui/Router";
 
@@ -23,96 +23,55 @@ type IProps = {
   router: IRouter;
 };
 
-export class GymLocation extends React.Component<IProps, any> {
+export function GymLocation(props: IProps): React.ReactElement {
-  /**
+  function calculateCost(): number {
-   * Stores button styling that sets them all to block display
+    const ip = SpecialServerIps.getIp(props.loc.name);
-   */
-  btnStyle: any;
-
-  constructor(props: IProps) {
-    super(props);
-
-    this.btnStyle = { display: "block" };
-
-    this.trainStrength = this.trainStrength.bind(this);
-    this.trainDefense = this.trainDefense.bind(this);
-    this.trainDexterity = this.trainDexterity.bind(this);
-    this.trainAgility = this.trainAgility.bind(this);
-
-    this.calculateCost = this.calculateCost.bind(this);
-  }
-
-  calculateCost(): number {
-    const ip = SpecialServerIps.getIp(this.props.loc.name);
     const server = getServer(ip);
-    if (server == null || !server.hasOwnProperty("backdoorInstalled")) return this.props.loc.costMult;
+    if (server == null || !server.hasOwnProperty("backdoorInstalled")) return props.loc.costMult;
     const discount = (server as Server).backdoorInstalled ? 0.9 : 1;
-    return this.props.loc.costMult * discount;
+    return props.loc.costMult * discount;
   }
 
-  train(stat: string): void {
+  function train(stat: string): void {
-    const loc = this.props.loc;
+    const loc = props.loc;
-    this.props.p.startClass(this.props.router, this.calculateCost(), loc.expMult, stat);
+    props.p.startClass(props.router, calculateCost(), loc.expMult, stat);
   }
 
-  trainStrength(): void {
+  function trainStrength(): void {
-    this.train(CONSTANTS.ClassGymStrength);
+    train(CONSTANTS.ClassGymStrength);
   }
 
-  trainDefense(): void {
+  function trainDefense(): void {
-    this.train(CONSTANTS.ClassGymDefense);
+    train(CONSTANTS.ClassGymDefense);
   }
 
-  trainDexterity(): void {
+  function trainDexterity(): void {
-    this.train(CONSTANTS.ClassGymDexterity);
+    train(CONSTANTS.ClassGymDexterity);
   }
 
-  trainAgility(): void {
+  function trainAgility(): void {
-    this.train(CONSTANTS.ClassGymAgility);
+    train(CONSTANTS.ClassGymAgility);
   }
 
-  render(): React.ReactNode {
+  const cost = CONSTANTS.ClassGymBaseCost * calculateCost();
-    const cost = CONSTANTS.ClassGymBaseCost * this.calculateCost();
 
-    return (
+  return (
-      <div>
+    <>
-        <StdButton
+      <Button onClick={trainStrength}>
-          onClick={this.trainStrength}
+        Train Strength (<Money money={cost} player={props.p} /> / sec)
-          style={this.btnStyle}
+      </Button>
-          text={
+      <br />
-            <>
+      <Button onClick={trainDefense}>
-              Train Strength (<Money money={cost} player={this.props.p} /> / sec)
+        Train Defense (<Money money={cost} player={props.p} /> / sec)
-            </>
+      </Button>
-          }
+      <br />
-        />
+      <Button onClick={trainDexterity}>
-        <StdButton
+        Train Dexterity (<Money money={cost} player={props.p} /> / sec)
-          onClick={this.trainDefense}
+      </Button>
-          style={this.btnStyle}
+      <br />
-          text={
+      <Button onClick={trainAgility}>
-            <>
+        Train Agility (<Money money={cost} player={props.p} /> / sec)
-              Train Defense (<Money money={cost} player={this.props.p} /> / sec)
+      </Button>
-            </>
+    </>
-          }
+  );
-        />
-        <StdButton
-          onClick={this.trainDexterity}
-          style={this.btnStyle}
-          text={
-            <>
-              Train Dexterity (<Money money={cost} player={this.props.p} /> / sec)
-            </>
-          }
-        />
-        <StdButton
-          onClick={this.trainAgility}
-          style={this.btnStyle}
-          text={
-            <>
-              Train Agility (<Money money={cost} player={this.props.p} /> / sec)
-            </>
-          }
-        />
-      </div>
-    );
-  }
 }

src/Locations/ui/HospitalLocation.tsx

@@ -4,6 +4,7 @@
  * This subcomponent renders all of the buttons for hospital options
  */
 import * as React from "react";
+import Button from "@mui/material/Button";
 
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { getHospitalizationCost } from "../../Hospital/Hospital";
@@ -77,15 +78,9 @@ export class HospitalLocation extends React.Component<IProps, IState> {
     const cost = this.getCost();
 
     return (
-      <AutoupdatingStdButton
+      <Button onClick={this.getHealed} style={this.btnStyle}>
-        onClick={this.getHealed}
+        Get treatment for wounds - <Money money={cost} player={this.props.p} />
-        style={this.btnStyle}
+      </Button>
-        text={
-          <>
-            Get treatment for wounds - <Money money={cost} player={this.props.p} />
-          </>
-        }
-      />
     );
   }
 }

src/Locations/ui/RamButton.tsx

@@ -1,11 +1,11 @@
 import React from "react";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
 
 import { CONSTANTS } from "../../Constants";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { purchaseRamForHomeComputer } from "../../Server/ServerPurchases";
 
-import { StdButtonPurchased } from "../../ui/React/StdButtonPurchased";
-import { StdButton } from "../../ui/React/StdButton";
 import { Money } from "../../ui/React/Money";
 import { MathComponent } from "mathjax-react";
 
@@ -15,11 +15,9 @@ type IProps = {
 };
 
 export function RamButton(props: IProps): React.ReactElement {
-  const btnStyle = { display: "block" };
-
   const homeComputer = props.p.getHomeComputer();
   if (homeComputer.maxRam >= CONSTANTS.HomeComputerMaxRam) {
-    return <StdButtonPurchased style={btnStyle} text={"Upgrade 'home' RAM - MAX"} />;
+    return <Button>Upgrade 'home' RAM - MAX</Button>;
   }
 
   const cost = props.p.getUpgradeHomeRamCost();
@@ -30,17 +28,11 @@ export function RamButton(props: IProps): React.ReactElement {
   }
 
   return (
-    <StdButton
+    <Tooltip title={<MathComponent tex={String.raw`\large{cost = 3.2 \times 10^3 \times 1.58^{log_2{(ram)}}}`} />}>
-      disabled={!props.p.canAfford(cost)}
+      <Button disabled={!props.p.canAfford(cost)} onClick={buy}>
-      onClick={buy}
+        Upgrade 'home' RAM ({homeComputer.maxRam}GB -&gt;&nbsp;{homeComputer.maxRam * 2}GB) -&nbsp;
-      style={btnStyle}
+        <Money money={cost} player={props.p} />
-      text={
+      </Button>
-        <>
+    </Tooltip>
-          Upgrade 'home' RAM ({homeComputer.maxRam}GB -&gt; {homeComputer.maxRam * 2}GB) -{" "}
-          <Money money={cost} player={props.p} />
-        </>
-      }
-      tooltip={<MathComponent tex={String.raw`\large{cost = 3.2 \times 10^3 \times 1.58^{log_2{(ram)}}}`} />}
-    />
   );
 }

src/Locations/ui/SlumsLocation.tsx

@@ -4,11 +4,12 @@
  * This subcomponent renders all of the buttons for committing crimes
  */
 import * as React from "react";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
 
 import { Crimes } from "../../Crime/Crimes";
 
 import { numeralWrapper } from "../../ui/numeralFormat";
-import { AutoupdatingStdButton } from "../../ui/React/AutoupdatingStdButton";
 import { use } from "../../ui/Context";
 
 export function SlumsLocation(): React.ReactElement {
@@ -113,102 +114,72 @@ export function SlumsLocation(): React.ReactElement {
 
   return (
     <div>
-      <AutoupdatingStdButton
+      <Tooltip title={<>Attempt to shoplift from a low-end retailer</>} disableInteractive>
-        label={`Shoplift (${numeralWrapper.formatPercentage(shopliftChance)} chance of success)`}
+        <Button onClick={shoplift}>
-        intervalTime={5e3}
+          Shoplift ({numeralWrapper.formatPercentage(shopliftChance)} chance of success)
-        onClick={shoplift}
+        </Button>
-        style={{ display: "block" }}
+      </Tooltip>
-        text={`Shoplift (${numeralWrapper.formatPercentage(shopliftChance)} chance of success)`}
+      <br />
-        tooltip={"Attempt to shoplift from a low-end retailer"}
+      <Tooltip title={<>Attempt to commit armed robbery on a high-end store</>} disableInteractive>
-      />
+        <Button onClick={robStore}>
-      <AutoupdatingStdButton
+          Rob store ({numeralWrapper.formatPercentage(robStoreChance)} chance of success)
-        label={`Rob store (${numeralWrapper.formatPercentage(robStoreChance)} chance of success)`}
+        </Button>
-        intervalTime={5e3}
+      </Tooltip>
-        onClick={robStore}
+      <br />
-        style={{ display: "block" }}
+      <Tooltip title={<>Attempt to mug a random person on the street</>} disableInteractive>
-        text={`Rob store (${numeralWrapper.formatPercentage(robStoreChance)} chance of success)`}
+        <Button onClick={mug}>Mug someone ({numeralWrapper.formatPercentage(mugChance)} chance of success)</Button>
-        tooltip={"Attempt to commit armed robbery on a high-end store"}
+      </Tooltip>
-      />
+      <br />
-      <AutoupdatingStdButton
+      <Tooltip title={<>Attempt to rob property from someone's house</>} disableInteractive>
-        label={`Mug someone (${numeralWrapper.formatPercentage(mugChance)} chance of success)`}
+        <Button onClick={larceny}>Larceny ({numeralWrapper.formatPercentage(larcenyChance)} chance of success)</Button>
-        intervalTime={5e3}
+      </Tooltip>
-        onClick={mug}
+      <br />
-        style={{ display: "block" }}
+      <Tooltip title={<>Attempt to deal drugs</>} disableInteractive>
-        text={`Mug someone (${numeralWrapper.formatPercentage(mugChance)} chance of success)`}
+        <Button onClick={dealDrugs}>
-        tooltip={"Attempt to mug a random person on the street"}
+          Deal Drugs ({numeralWrapper.formatPercentage(drugsChance)} chance of success)
-      />
+        </Button>
-      <AutoupdatingStdButton
+      </Tooltip>
-        label={`Larceny (${numeralWrapper.formatPercentage(larcenyChance)} chance of success)`}
+      <br />
-        intervalTime={5e3}
+      <Tooltip title={<>Attempt to forge corporate bonds</>} disableInteractive>
-        onClick={larceny}
+        <Button onClick={bondForgery}>
-        style={{ display: "block" }}
+          Bond Forgery ({numeralWrapper.formatPercentage(bondChance)} chance of success)
-        text={`Larceny (${numeralWrapper.formatPercentage(larcenyChance)} chance of success)`}
+        </Button>
-        tooltip={"Attempt to rob property from someone's house"}
+      </Tooltip>
-      />
+      <br />
-      <AutoupdatingStdButton
+      <Tooltip title={<>Attempt to smuggle illegal arms into the city</>} disableInteractive>
-        label={`Deal Drugs (${numeralWrapper.formatPercentage(drugsChance)} chance of success)`}
+        <Button onClick={traffickArms}>
-        intervalTime={5e3}
+          Traffick illegal Arms ({numeralWrapper.formatPercentage(armsChance)} chance of success)
-        onClick={dealDrugs}
+        </Button>
-        style={{ display: "block" }}
+      </Tooltip>
-        text={`Deal Drugs (${numeralWrapper.formatPercentage(drugsChance)} chance of success)`}
+      <br />
-        tooltip={"Attempt to deal drugs"}
+      <Tooltip title={<>Attempt to murder a random person on the street</>} disableInteractive>
-      />
+        <Button onClick={homicide}>
-      <AutoupdatingStdButton
+          Homicide ({numeralWrapper.formatPercentage(homicideChance)} chance of success)
-        label={`Bond Forgery (${numeralWrapper.formatPercentage(bondChance)} chance of success)`}
+        </Button>
-        intervalTime={5e3}
+      </Tooltip>
-        onClick={bondForgery}
+      <br />
-        style={{ display: "block" }}
+      <Tooltip title={<>Attempt to commit grand theft auto</>} disableInteractive>
-        text={`Bond Forgery (${numeralWrapper.formatPercentage(bondChance)} chance of success)`}
+        <Button onClick={grandTheftAuto}>
-        tooltip={"Attempt to forge corporate bonds"}
+          Grand theft Auto ({numeralWrapper.formatPercentage(gtaChance)} chance of success)
-      />
+        </Button>
-      <AutoupdatingStdButton
+      </Tooltip>
-        label={`Traffick illegal Arms (${numeralWrapper.formatPercentage(armsChance)} chance of success)`}
+      <br />
-        intervalTime={5e3}
+      <Tooltip title={<>Attempt to kidnap and ransom a high-profile-target</>} disableInteractive>
-        onClick={traffickArms}
+        <Button onClick={kidnap}>
-        style={{ display: "block" }}
+          Kidnap and Ransom ({numeralWrapper.formatPercentage(kidnapChance)} chance of success)
-        text={`Traffick illegal Arms (${numeralWrapper.formatPercentage(armsChance)} chance of success)`}
+        </Button>
-        tooltip={"Attempt to smuggle illegal arms into the city"}
+      </Tooltip>
-      />
+      <br />
-      <AutoupdatingStdButton
+      <Tooltip title={<>Attempt to assassinate a high-profile target</>} disableInteractive>
-        label={`Homicide (${numeralWrapper.formatPercentage(homicideChance)} chance of success)`}
+        <Button onClick={assassinate}>
-        intervalTime={5e3}
+          Assassinate ({numeralWrapper.formatPercentage(assassinateChance)} chance of success)
-        onClick={homicide}
+        </Button>
-        style={{ display: "block" }}
+      </Tooltip>
-        text={`Homicide (${numeralWrapper.formatPercentage(homicideChance)} chance of success)`}
+      <br />
-        tooltip={"Attempt to murder a random person on the street"}
+      <Tooltip title={<>Attempt to pull off the ultimate heist</>} disableInteractive>
-      />
+        <Button onClick={heist}>Heist ({numeralWrapper.formatPercentage(heistChance)} chance of success)</Button>
-      <AutoupdatingStdButton
+      </Tooltip>
-        label={`Grand theft Auto (${numeralWrapper.formatPercentage(gtaChance)} chance of success)`}
+      <br />
-        intervalTime={5e3}
-        onClick={grandTheftAuto}
-        style={{ display: "block" }}
-        text={`Grand theft Auto (${numeralWrapper.formatPercentage(gtaChance)} chance of success)`}
-        tooltip={"Attempt to commit grand theft auto"}
-      />
-      <AutoupdatingStdButton
-        label={`Kidnap and Ransom (${numeralWrapper.formatPercentage(kidnapChance)} chance of success)`}
-        intervalTime={5e3}
-        onClick={kidnap}
-        style={{ display: "block" }}
-        text={`Kidnap and Ransom (${numeralWrapper.formatPercentage(kidnapChance)} chance of success)`}
-        tooltip={"Attempt to kidnap and ransom a high-profile-target"}
-      />
-      <AutoupdatingStdButton
-        label={`Assassinate (${numeralWrapper.formatPercentage(assassinateChance)} chance of success)`}
-        intervalTime={5e3}
-        onClick={assassinate}
-        style={{ display: "block" }}
-        text={`Assassinate (${numeralWrapper.formatPercentage(assassinateChance)} chance of success)`}
-        tooltip={"Attempt to assassinate a high-profile target"}
-      />
-      <AutoupdatingStdButton
-        label={`Heist (${numeralWrapper.formatPercentage(heistChance)} chance of success)`}
-        intervalTime={5e3}
-        onClick={heist}
-        style={{ display: "block" }}
-        text={`Heist (${numeralWrapper.formatPercentage(heistChance)} chance of success)`}
-        tooltip={"Attempt to pull off the ultimate heist"}
-      />
     </div>
   );
 }

src/Locations/ui/SpecialLocation.tsx

@@ -11,6 +11,8 @@
  * properties
  */
 import React, { useState } from "react";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
 
 import { Location } from "../Location";
 import { CreateCorporationPopup } from "../../Corporation/ui/CreateCorporationPopup";
@@ -19,9 +21,6 @@ import { LocationName } from "../data/LocationNames";
 
 import { use } from "../../ui/Context";
 
-import { AutoupdatingStdButton } from "../../ui/React/AutoupdatingStdButton";
-import { StdButton } from "../../ui/React/StdButton";
-
 import { dialogBoxCreate } from "../../ui/React/DialogBox";
 
 type IProps = {
@@ -83,7 +82,7 @@ export function SpecialLocation(props: IProps): React.ReactElement {
       return <></>;
     }
     const text = inBladeburner ? "Enter Bladeburner Headquarters" : "Apply to Bladeburner Division";
-    return <StdButton onClick={handleBladeburner} style={{ display: "block" }} text={text} />;
+    return <Button onClick={handleBladeburner}>{text}</Button>;
   }
 
   function renderNoodleBar(): React.ReactElement {
@@ -91,26 +90,23 @@ export function SpecialLocation(props: IProps): React.ReactElement {
       dialogBoxCreate(<>You ate some delicious noodles and feel refreshed.</>);
     }
 
-    return <StdButton onClick={EatNoodles} style={{ display: "block" }} text={"Eat noodles"} />;
+    return <Button onClick={EatNoodles}>Eat noodles</Button>;
   }
 
   function renderCreateCorporation(): React.ReactElement {
     if (!player.canAccessCorporation()) {
       return (
         <>
-          <p>
+          <Typography>
             <i>A business man is yelling at a clerk. You should come back later.</i>
-          </p>
+          </Typography>
         </>
       );
     }
     return (
-      <AutoupdatingStdButton
+      <Button disabled={!player.canAccessCorporation() || player.hasCorporation()} onClick={createCorporationPopup}>
-        disabled={!player.canAccessCorporation() || player.hasCorporation()}
+        Create a Corporation
-        onClick={createCorporationPopup}
+      </Button>
-        style={{ display: "block" }}
-        text={"Create a Corporation"}
-      />
     );
   }
 
@@ -118,7 +114,7 @@ export function SpecialLocation(props: IProps): React.ReactElement {
     if (!player.canAccessResleeving()) {
       return <></>;
     }
-    return <StdButton onClick={handleResleeving} style={{ display: "block" }} text={"Re-Sleeve"} />;
+    return <Button onClick={handleResleeving}>Re-Sleeve</Button>;
   }
 
   switch (props.loc.name) {

src/Locations/ui/TechVendorLocation.tsx

@@ -4,6 +4,8 @@
  * This subcomponent renders all of the buttons for purchasing things from tech vendors
  */
 import React, { useState, useEffect } from "react";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
 
 import { Location } from "../Location";
 import { RamButton } from "./RamButton";
@@ -44,23 +46,18 @@ export function TechVendorLocation(props: IProps): React.ReactElement {
     const id = setInterval(rerender, 1000);
     return () => clearInterval(id);
   }, []);
-  const btnStyle = { display: "block" };
 
   const purchaseServerButtons: React.ReactNode[] = [];
   for (let i = props.loc.techVendorMinRam; i <= props.loc.techVendorMaxRam; i *= 2) {
     const cost = getPurchaseServerCost(i);
     purchaseServerButtons.push(
-      <StdButton
+      <>
-        key={i}
+        <Button key={i} onClick={() => openPurchaseServer(i, cost, props.p)} disabled={!props.p.canAfford(cost)}>
-        onClick={() => openPurchaseServer(i, cost, props.p)}
+          Purchase {i}GB Server&nbsp;-&nbsp;
-        style={btnStyle}
+          <Money money={cost} player={props.p} />
-        text={
+        </Button>
-          <>
+        <br />
-            Purchase {i}GB Server - <Money money={cost} player={props.p} />
+      </>,
-          </>
-        }
-        disabled={!props.p.canAfford(cost)}
-      />,
     );
   }
 
@@ -68,12 +65,14 @@ export function TechVendorLocation(props: IProps): React.ReactElement {
     <div>
       {purchaseServerButtons}
       <br />
-      <p className="noselect">
+      <Typography className="noselect">
         <i>"You can order bigger servers via scripts. We don't take custom order in person."</i>
-      </p>
+      </Typography>
       <br />
       <TorButton p={props.p} rerender={rerender} />
+      <br />
       <RamButton p={props.p} rerender={rerender} />
+      <br />
       <CoresButton p={props.p} rerender={rerender} />
     </div>
   );

src/Locations/ui/TorButton.tsx

@@ -1,12 +1,11 @@
 import React from "react";
+import Button from "@mui/material/Button";
 
 import { purchaseTorRouter } from "../LocationsHelpers";
 
 import { CONSTANTS } from "../../Constants";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 
-import { StdButtonPurchased } from "../../ui/React/StdButtonPurchased";
-import { StdButton } from "../../ui/React/StdButton";
 import { Money } from "../../ui/React/Money";
 
 type IProps = {
@@ -15,27 +14,18 @@ type IProps = {
 };
 
 export function TorButton(props: IProps): React.ReactElement {
-  const btnStyle = { display: "block" };
-
   function buy(): void {
     purchaseTorRouter(props.p);
     props.rerender();
   }
 
   if (props.p.hasTorRouter()) {
-    return <StdButtonPurchased style={btnStyle} text={"TOR Router - Purchased"} />;
+    return <Button>TOR Router - Purchased</Button>;
   }
 
   return (
-    <StdButton
+    <Button disabled={!props.p.canAfford(CONSTANTS.TorRouterCost)} onClick={buy}>
-      disabled={!props.p.canAfford(CONSTANTS.TorRouterCost)}
+      Purchase TOR router - <Money money={CONSTANTS.TorRouterCost} player={props.p} />
-      onClick={buy}
+    </Button>
-      style={btnStyle}
-      text={
-        <>
-          Purchase TOR router - <Money money={CONSTANTS.TorRouterCost} player={props.p} />
-        </>
-      }
-    />
   );
 }

src/Locations/ui/UniversityLocation.tsx

@@ -4,6 +4,8 @@
  * This subcomponent renders all of the buttons for studying/taking courses
  */
 import * as React from "react";
+import Tooltip from "@mui/material/Tooltip";
+import Button from "@mui/material/Button";
 
 import { Location } from "../Location";
 
@@ -12,7 +14,6 @@ import { getServer } from "../../Server/ServerHelpers";
 import { Server } from "../../Server/Server";
 import { SpecialServerIps } from "../../Server/SpecialServerIps";
 
-import { StdButton } from "../../ui/React/StdButton";
 import { Money } from "../../ui/React/Money";
 import { use } from "../../ui/Context";
 
@@ -73,68 +74,45 @@ export function UniversityLocation(props: IProps): React.ReactElement {
   const earnCharismaExpTooltip = `Gain charisma experience!`;
 
   return (
-    <div>
+    <>
-      <StdButton
+      <Tooltip title={earnHackingExpTooltip}>
-        onClick={study}
+        <Button onClick={study}>Study Computer Science (free)</Button>
-        style={{ display: "block" }}
+      </Tooltip>
-        text={`Study Computer Science (free)`}
+      <br />
-        tooltip={earnHackingExpTooltip}
+      <Tooltip title={earnHackingExpTooltip}>
-      />
+        <Button onClick={dataStructures}>
-      <StdButton
+          Take Data Structures course (
-        onClick={dataStructures}
+          <Money money={dataStructuresCost} player={player} /> / sec)
-        style={{ display: "block" }}
+        </Button>
-        text={
+      </Tooltip>
-          <>
+      <br />
-            Take Data Structures course (
+      <Tooltip title={earnHackingExpTooltip}>
-            <Money money={dataStructuresCost} player={player} /> / sec)
+        <Button onClick={networks}>
-          </>
+          Take Networks course (
-        }
+          <Money money={networksCost} player={player} /> / sec)
-        tooltip={earnHackingExpTooltip}
+        </Button>
-      />
+      </Tooltip>
-      <StdButton
+      <br />
-        onClick={networks}
+      <Tooltip title={earnHackingExpTooltip}>
-        style={{ display: "block" }}
+        <Button onClick={algorithms}>
-        text={
+          Take Algorithms course (
-          <>
+          <Money money={algorithmsCost} player={player} /> / sec)
-            Take Networks course (
+        </Button>
-            <Money money={networksCost} player={player} /> / sec)
+      </Tooltip>
-          </>
+      <br />
-        }
+      <Tooltip title={earnCharismaExpTooltip}>
-        tooltip={earnHackingExpTooltip}
+        <Button onClick={management}>
-      />
+          Take Management course (
-      <StdButton
+          <Money money={managementCost} player={player} /> / sec)
-        onClick={algorithms}
+        </Button>
-        style={{ display: "block" }}
+      </Tooltip>
-        text={
+      <br />
-          <>
+      <Tooltip title={earnCharismaExpTooltip}>
-            Take Algorithms course (
+        <Button onClick={leadership}>
-            <Money money={algorithmsCost} player={player} /> / sec)
+          Take Leadership course (
-          </>
+          <Money money={leadershipCost} player={player} /> / sec)
-        }
+        </Button>
-        tooltip={earnHackingExpTooltip}
+      </Tooltip>
-      />
+    </>
-      <StdButton
-        onClick={management}
-        style={{ display: "block" }}
-        text={
-          <>
-            Take Management course (
-            <Money money={managementCost} player={player} /> / sec)
-          </>
-        }
-        tooltip={earnCharismaExpTooltip}
-      />
-      <StdButton
-        onClick={leadership}
-        style={{ display: "block" }}
-        text={
-          <>
-            Take Leadership course (
-            <Money money={leadershipCost} player={player} /> / sec)
-          </>
-        }
-        tooltip={earnCharismaExpTooltip}
-      />
-    </div>
   );
 }