convert most of the city to mui

This commit is contained in:
Olivier Gagnon 2021-09-25 15:34:12 -04:00
parent c0e1706128
commit 86da356478
12 changed files with 262 additions and 413 deletions

@ -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> {
constructor(props: IProps) {
super(props);
export function ApplyToJobButton(props: IProps): React.ReactElement {
const player = use.Player();
this.getJobRequirementTooltip = this.getJobRequirementTooltip.bind(this);
}
getJobRequirementTooltip(): string {
const pos = this.props.p.getNextCompanyPosition(this.props.company, this.props.entryPosType);
function getJobRequirementTooltip(): string {
const pos = player.getNextCompanyPosition(props.company, 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 (
<StdButton
onClick={this.props.onClick}
style={this.props.style}
text={this.props.text}
tooltip={this.getJobRequirementTooltip()}
/>
);
}
return (
<>
<Tooltip
title={<span dangerouslySetInnerHTML={{ __html: getJobRequirementTooltip() }}></span>}
disableInteractive
>
<Button onClick={props.onClick}>{props.text}</Button>
</Tooltip>
<br />
</>
);
}

@ -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>
<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"} />
<Button onClick={work}>Work</Button>
&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 && (
<StdButton onClick={startInfiltration} style={{ display: "block" }} text={"Infiltrate Company"} />
)}
<br />
<br />
<br />
<br />
<br />
{location.infiltrationData != null && <Button onClick={startInfiltration}>Infiltrate Company</Button>}
</div>
);
}

@ -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
disabled={!props.p.canAfford(cost)}
onClick={buy}
style={btnStyle}
text={
<>
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}}}`} />}
/>
<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>
</Tooltip>
);
}

@ -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"} />
<h1 className="noselect">
<>
<Button onClick={() => router.toCity()}>Return to World</Button>
<Typography variant="h4" className="noselect">
{backdoorInstalled && !Settings.DisableTextEffects ? <CorruptableText content={loc.name} /> : loc.name}
</h1>
</Typography>
{locContent}
</div>
</>
);
}

@ -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> {
/**
* Stores button styling that sets them all to block display
*/
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);
export function GymLocation(props: IProps): React.ReactElement {
function calculateCost(): number {
const ip = SpecialServerIps.getIp(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 {
const loc = this.props.loc;
this.props.p.startClass(this.props.router, this.calculateCost(), loc.expMult, stat);
function train(stat: string): void {
const loc = props.loc;
props.p.startClass(props.router, calculateCost(), loc.expMult, stat);
}
trainStrength(): void {
this.train(CONSTANTS.ClassGymStrength);
function trainStrength(): void {
train(CONSTANTS.ClassGymStrength);
}
trainDefense(): void {
this.train(CONSTANTS.ClassGymDefense);
function trainDefense(): void {
train(CONSTANTS.ClassGymDefense);
}
trainDexterity(): void {
this.train(CONSTANTS.ClassGymDexterity);
function trainDexterity(): void {
train(CONSTANTS.ClassGymDexterity);
}
trainAgility(): void {
this.train(CONSTANTS.ClassGymAgility);
function trainAgility(): void {
train(CONSTANTS.ClassGymAgility);
}
render(): React.ReactNode {
const cost = CONSTANTS.ClassGymBaseCost * this.calculateCost();
const cost = CONSTANTS.ClassGymBaseCost * calculateCost();
return (
<div>
<StdButton
onClick={this.trainStrength}
style={this.btnStyle}
text={
<>
Train Strength (<Money money={cost} player={this.props.p} /> / sec)
</>
}
/>
<StdButton
onClick={this.trainDefense}
style={this.btnStyle}
text={
<>
Train Defense (<Money money={cost} player={this.props.p} /> / sec)
</>
}
/>
<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>
);
}
return (
<>
<Button onClick={trainStrength}>
Train Strength (<Money money={cost} player={props.p} /> / sec)
</Button>
<br />
<Button onClick={trainDefense}>
Train Defense (<Money money={cost} player={props.p} /> / sec)
</Button>
<br />
<Button onClick={trainDexterity}>
Train Dexterity (<Money money={cost} player={props.p} /> / sec)
</Button>
<br />
<Button onClick={trainAgility}>
Train Agility (<Money money={cost} player={props.p} /> / sec)
</Button>
</>
);
}

@ -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
onClick={this.getHealed}
style={this.btnStyle}
text={
<>
Get treatment for wounds - <Money money={cost} player={this.props.p} />
</>
}
/>
<Button onClick={this.getHealed} style={this.btnStyle}>
Get treatment for wounds - <Money money={cost} player={this.props.p} />
</Button>
);
}
}

@ -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
disabled={!props.p.canAfford(cost)}
onClick={buy}
style={btnStyle}
text={
<>
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)}}}`} />}
/>
<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>
</Tooltip>
);
}

@ -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
label={`Shoplift (${numeralWrapper.formatPercentage(shopliftChance)} chance of success)`}
intervalTime={5e3}
onClick={shoplift}
style={{ display: "block" }}
text={`Shoplift (${numeralWrapper.formatPercentage(shopliftChance)} chance of success)`}
tooltip={"Attempt to shoplift from a low-end retailer"}
/>
<AutoupdatingStdButton
label={`Rob store (${numeralWrapper.formatPercentage(robStoreChance)} chance of success)`}
intervalTime={5e3}
onClick={robStore}
style={{ display: "block" }}
text={`Rob store (${numeralWrapper.formatPercentage(robStoreChance)} chance of success)`}
tooltip={"Attempt to commit armed robbery on a high-end store"}
/>
<AutoupdatingStdButton
label={`Mug someone (${numeralWrapper.formatPercentage(mugChance)} chance of success)`}
intervalTime={5e3}
onClick={mug}
style={{ display: "block" }}
text={`Mug someone (${numeralWrapper.formatPercentage(mugChance)} chance of success)`}
tooltip={"Attempt to mug a random person on the street"}
/>
<AutoupdatingStdButton
label={`Larceny (${numeralWrapper.formatPercentage(larcenyChance)} chance of success)`}
intervalTime={5e3}
onClick={larceny}
style={{ display: "block" }}
text={`Larceny (${numeralWrapper.formatPercentage(larcenyChance)} chance of success)`}
tooltip={"Attempt to rob property from someone's house"}
/>
<AutoupdatingStdButton
label={`Deal Drugs (${numeralWrapper.formatPercentage(drugsChance)} chance of success)`}
intervalTime={5e3}
onClick={dealDrugs}
style={{ display: "block" }}
text={`Deal Drugs (${numeralWrapper.formatPercentage(drugsChance)} chance of success)`}
tooltip={"Attempt to deal drugs"}
/>
<AutoupdatingStdButton
label={`Bond Forgery (${numeralWrapper.formatPercentage(bondChance)} chance of success)`}
intervalTime={5e3}
onClick={bondForgery}
style={{ display: "block" }}
text={`Bond Forgery (${numeralWrapper.formatPercentage(bondChance)} chance of success)`}
tooltip={"Attempt to forge corporate bonds"}
/>
<AutoupdatingStdButton
label={`Traffick illegal Arms (${numeralWrapper.formatPercentage(armsChance)} chance of success)`}
intervalTime={5e3}
onClick={traffickArms}
style={{ display: "block" }}
text={`Traffick illegal Arms (${numeralWrapper.formatPercentage(armsChance)} chance of success)`}
tooltip={"Attempt to smuggle illegal arms into the city"}
/>
<AutoupdatingStdButton
label={`Homicide (${numeralWrapper.formatPercentage(homicideChance)} chance of success)`}
intervalTime={5e3}
onClick={homicide}
style={{ display: "block" }}
text={`Homicide (${numeralWrapper.formatPercentage(homicideChance)} chance of success)`}
tooltip={"Attempt to murder a random person on the street"}
/>
<AutoupdatingStdButton
label={`Grand theft Auto (${numeralWrapper.formatPercentage(gtaChance)} chance of success)`}
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"}
/>
<Tooltip title={<>Attempt to shoplift from a low-end retailer</>} disableInteractive>
<Button onClick={shoplift}>
Shoplift ({numeralWrapper.formatPercentage(shopliftChance)} chance of success)
</Button>
</Tooltip>
<br />
<Tooltip title={<>Attempt to commit armed robbery on a high-end store</>} disableInteractive>
<Button onClick={robStore}>
Rob store ({numeralWrapper.formatPercentage(robStoreChance)} chance of success)
</Button>
</Tooltip>
<br />
<Tooltip title={<>Attempt to mug a random person on the street</>} disableInteractive>
<Button onClick={mug}>Mug someone ({numeralWrapper.formatPercentage(mugChance)} chance of success)</Button>
</Tooltip>
<br />
<Tooltip title={<>Attempt to rob property from someone's house</>} disableInteractive>
<Button onClick={larceny}>Larceny ({numeralWrapper.formatPercentage(larcenyChance)} chance of success)</Button>
</Tooltip>
<br />
<Tooltip title={<>Attempt to deal drugs</>} disableInteractive>
<Button onClick={dealDrugs}>
Deal Drugs ({numeralWrapper.formatPercentage(drugsChance)} chance of success)
</Button>
</Tooltip>
<br />
<Tooltip title={<>Attempt to forge corporate bonds</>} disableInteractive>
<Button onClick={bondForgery}>
Bond Forgery ({numeralWrapper.formatPercentage(bondChance)} chance of success)
</Button>
</Tooltip>
<br />
<Tooltip title={<>Attempt to smuggle illegal arms into the city</>} disableInteractive>
<Button onClick={traffickArms}>
Traffick illegal Arms ({numeralWrapper.formatPercentage(armsChance)} chance of success)
</Button>
</Tooltip>
<br />
<Tooltip title={<>Attempt to murder a random person on the street</>} disableInteractive>
<Button onClick={homicide}>
Homicide ({numeralWrapper.formatPercentage(homicideChance)} chance of success)
</Button>
</Tooltip>
<br />
<Tooltip title={<>Attempt to commit grand theft auto</>} disableInteractive>
<Button onClick={grandTheftAuto}>
Grand theft Auto ({numeralWrapper.formatPercentage(gtaChance)} chance of success)
</Button>
</Tooltip>
<br />
<Tooltip title={<>Attempt to kidnap and ransom a high-profile-target</>} disableInteractive>
<Button onClick={kidnap}>
Kidnap and Ransom ({numeralWrapper.formatPercentage(kidnapChance)} chance of success)
</Button>
</Tooltip>
<br />
<Tooltip title={<>Attempt to assassinate a high-profile target</>} disableInteractive>
<Button onClick={assassinate}>
Assassinate ({numeralWrapper.formatPercentage(assassinateChance)} chance of success)
</Button>
</Tooltip>
<br />
<Tooltip title={<>Attempt to pull off the ultimate heist</>} disableInteractive>
<Button onClick={heist}>Heist ({numeralWrapper.formatPercentage(heistChance)} chance of success)</Button>
</Tooltip>
<br />
</div>
);
}

@ -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
disabled={!player.canAccessCorporation() || player.hasCorporation()}
onClick={createCorporationPopup}
style={{ display: "block" }}
text={"Create a Corporation"}
/>
<Button disabled={!player.canAccessCorporation() || player.hasCorporation()} onClick={createCorporationPopup}>
Create a Corporation
</Button>
);
}
@ -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) {

@ -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}
onClick={() => openPurchaseServer(i, cost, props.p)}
style={btnStyle}
text={
<>
Purchase {i}GB Server - <Money money={cost} player={props.p} />
</>
}
disabled={!props.p.canAfford(cost)}
/>,
<>
<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 />
</>,
);
}
@ -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>
);

@ -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
disabled={!props.p.canAfford(CONSTANTS.TorRouterCost)}
onClick={buy}
style={btnStyle}
text={
<>
Purchase TOR router - <Money money={CONSTANTS.TorRouterCost} player={props.p} />
</>
}
/>
<Button disabled={!props.p.canAfford(CONSTANTS.TorRouterCost)} onClick={buy}>
Purchase TOR router - <Money money={CONSTANTS.TorRouterCost} player={props.p} />
</Button>
);
}

@ -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
onClick={study}
style={{ display: "block" }}
text={`Study Computer Science (free)`}
tooltip={earnHackingExpTooltip}
/>
<StdButton
onClick={dataStructures}
style={{ display: "block" }}
text={
<>
Take Data Structures course (
<Money money={dataStructuresCost} player={player} /> / sec)
</>
}
tooltip={earnHackingExpTooltip}
/>
<StdButton
onClick={networks}
style={{ display: "block" }}
text={
<>
Take Networks course (
<Money money={networksCost} player={player} /> / sec)
</>
}
tooltip={earnHackingExpTooltip}
/>
<StdButton
onClick={algorithms}
style={{ display: "block" }}
text={
<>
Take Algorithms course (
<Money money={algorithmsCost} player={player} /> / sec)
</>
}
tooltip={earnHackingExpTooltip}
/>
<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>
<>
<Tooltip title={earnHackingExpTooltip}>
<Button onClick={study}>Study Computer Science (free)</Button>
</Tooltip>
<br />
<Tooltip title={earnHackingExpTooltip}>
<Button onClick={dataStructures}>
Take Data Structures course (
<Money money={dataStructuresCost} player={player} /> / sec)
</Button>
</Tooltip>
<br />
<Tooltip title={earnHackingExpTooltip}>
<Button onClick={networks}>
Take Networks course (
<Money money={networksCost} player={player} /> / sec)
</Button>
</Tooltip>
<br />
<Tooltip title={earnHackingExpTooltip}>
<Button onClick={algorithms}>
Take Algorithms course (
<Money money={algorithmsCost} player={player} /> / sec)
</Button>
</Tooltip>
<br />
<Tooltip title={earnCharismaExpTooltip}>
<Button onClick={management}>
Take Management course (
<Money money={managementCost} player={player} /> / sec)
</Button>
</Tooltip>
<br />
<Tooltip title={earnCharismaExpTooltip}>
<Button onClick={leadership}>
Take Leadership course (
<Money money={leadershipCost} player={player} /> / sec)
</Button>
</Tooltip>
</>
);
}