Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-27 01:53:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

convert most of the city to mui

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/Locations/ui/ApplyToJobButton.tsx
View File

@ -6,47 +6,43 @@ import * as React from "react";
import { Company } from "../../Company/Company"; import { Company } from "../../Company/Company";
import { CompanyPosition } from "../../Company/CompanyPosition"; import { CompanyPosition } from "../../Company/CompanyPosition";
import { getJobRequirementText } from "../../Company/GetJobRequirementText"; 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 = { type IProps = {
company: Company; company: Company;
entryPosType: CompanyPosition; entryPosType: CompanyPosition;
onClick: (e: React.MouseEvent<HTMLElement>) => void; onClick: (e: React.MouseEvent<HTMLElement>) => void;
p: IPlayer;
style?: any;
text: string; 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) { if (pos == null) {
return ""; return "";
} }
if (!this.props.company.hasPosition(pos)) { if (!props.company.hasPosition(pos)) {
return ""; return "";
} }
return getJobRequirementText(this.props.company, pos, true); return getJobRequirementText(props.company, pos, true);
} }
render(): React.ReactNode {
return ( return (
<StdButton <>
onClick={this.props.onClick} <Tooltip
style={this.props.style} title={<span dangerouslySetInnerHTML={{ __html: getJobRequirementTooltip() }}></span>}
text={this.props.text} disableInteractive
tooltip={this.getJobRequirementTooltip()} >
/> <Button onClick={props.onClick}>{props.text}</Button>
</Tooltip>
<br />
</>
); );
}
} }

96
src/Locations/ui/CompanyLocation.tsx
View File

@ -4,6 +4,10 @@
* This subcomponent renders all of the buttons for applying to jobs at a company * This subcomponent renders all of the buttons for applying to jobs at a company
*/ */
import React, { useState } from "react"; 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"; import { ApplyToJobButton } from "./ApplyToJobButton";
@ -15,7 +19,6 @@ import { CompanyPosition } from "../../Company/CompanyPosition";
import { CompanyPositions } from "../../Company/CompanyPositions"; import { CompanyPositions } from "../../Company/CompanyPositions";
import * as posNames from "../../Company/data/companypositionnames"; import * as posNames from "../../Company/data/companypositionnames";
import { StdButton } from "../../ui/React/StdButton";
import { Reputation } from "../../ui/React/Reputation"; import { Reputation } from "../../ui/React/Reputation";
import { Favor } from "../../ui/React/Favor"; import { Favor } from "../../ui/React/Favor";
import { createPopup } from "../../ui/React/createPopup"; import { createPopup } from "../../ui/React/createPopup";
@ -195,35 +198,41 @@ export function CompanyLocation(props: IProps): React.ReactElement {
<div> <div>
{isEmployedHere && ( {isEmployedHere && (
<div> <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 /> <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; &nbsp;&nbsp;&nbsp;&nbsp;
<StdButton onClick={quit} text={"Quit"} /> <Button onClick={quit}>Quit</Button>
</div> </div>
)} )}
{company.hasAgentPositions() && ( {company.hasAgentPositions() && (
@ -231,8 +240,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
company={company} company={company}
entryPosType={CompanyPositions[posNames.AgentCompanyPositions[0]]} entryPosType={CompanyPositions[posNames.AgentCompanyPositions[0]]}
onClick={applyForAgentJob} onClick={applyForAgentJob}
p={p}
style={{ display: "block" }}
text={"Apply for Agent Job"} text={"Apply for Agent Job"}
/> />
)} )}
@ -241,8 +248,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
company={company} company={company}
entryPosType={CompanyPositions[posNames.BusinessConsultantCompanyPositions[0]]} entryPosType={CompanyPositions[posNames.BusinessConsultantCompanyPositions[0]]}
onClick={applyForBusinessConsultantJob} onClick={applyForBusinessConsultantJob}
p={p}
style={{ display: "block" }}
text={"Apply for Business Consultant Job"} text={"Apply for Business Consultant Job"}
/> />
)} )}
@ -251,8 +256,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
company={company} company={company}
entryPosType={CompanyPositions[posNames.BusinessCompanyPositions[0]]} entryPosType={CompanyPositions[posNames.BusinessCompanyPositions[0]]}
onClick={applyForBusinessJob} onClick={applyForBusinessJob}
p={p}
style={{ display: "block" }}
text={"Apply for Business Job"} text={"Apply for Business Job"}
/> />
)} )}
@ -261,8 +264,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
company={company} company={company}
entryPosType={CompanyPositions[posNames.MiscCompanyPositions[1]]} entryPosType={CompanyPositions[posNames.MiscCompanyPositions[1]]}
onClick={applyForEmployeeJob} onClick={applyForEmployeeJob}
p={p}
style={{ display: "block" }}
text={"Apply to be an Employee"} text={"Apply to be an Employee"}
/> />
)} )}
@ -271,8 +272,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
company={company} company={company}
entryPosType={CompanyPositions[posNames.PartTimeCompanyPositions[1]]} entryPosType={CompanyPositions[posNames.PartTimeCompanyPositions[1]]}
onClick={applyForPartTimeEmployeeJob} onClick={applyForPartTimeEmployeeJob}
p={p}
style={{ display: "block" }}
text={"Apply to be a part-time Employee"} text={"Apply to be a part-time Employee"}
/> />
)} )}
@ -281,8 +280,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
company={company} company={company}
entryPosType={CompanyPositions[posNames.ITCompanyPositions[0]]} entryPosType={CompanyPositions[posNames.ITCompanyPositions[0]]}
onClick={applyForItJob} onClick={applyForItJob}
p={p}
style={{ display: "block" }}
text={"Apply for IT Job"} text={"Apply for IT Job"}
/> />
)} )}
@ -291,8 +288,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
company={company} company={company}
entryPosType={CompanyPositions[posNames.SecurityCompanyPositions[2]]} entryPosType={CompanyPositions[posNames.SecurityCompanyPositions[2]]}
onClick={applyForSecurityJob} onClick={applyForSecurityJob}
p={p}
style={{ display: "block" }}
text={"Apply for Security Job"} text={"Apply for Security Job"}
/> />
)} )}
@ -301,8 +296,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
company={company} company={company}
entryPosType={CompanyPositions[posNames.SoftwareConsultantCompanyPositions[0]]} entryPosType={CompanyPositions[posNames.SoftwareConsultantCompanyPositions[0]]}
onClick={applyForSoftwareConsultantJob} onClick={applyForSoftwareConsultantJob}
p={p}
style={{ display: "block" }}
text={"Apply for Software Consultant Job"} text={"Apply for Software Consultant Job"}
/> />
)} )}
@ -311,8 +304,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
company={company} company={company}
entryPosType={CompanyPositions[posNames.SoftwareCompanyPositions[0]]} entryPosType={CompanyPositions[posNames.SoftwareCompanyPositions[0]]}
onClick={applyForSoftwareJob} onClick={applyForSoftwareJob}
p={p}
style={{ display: "block" }}
text={"Apply for Software Job"} text={"Apply for Software Job"}
/> />
)} )}
@ -321,8 +312,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
company={company} company={company}
entryPosType={CompanyPositions[posNames.MiscCompanyPositions[0]]} entryPosType={CompanyPositions[posNames.MiscCompanyPositions[0]]}
onClick={applyForWaiterJob} onClick={applyForWaiterJob}
p={p}
style={{ display: "block" }}
text={"Apply to be a Waiter"} text={"Apply to be a Waiter"}
/> />
)} )}
@ -331,19 +320,10 @@ export function CompanyLocation(props: IProps): React.ReactElement {
company={company} company={company}
entryPosType={CompanyPositions[posNames.PartTimeCompanyPositions[0]]} entryPosType={CompanyPositions[posNames.PartTimeCompanyPositions[0]]}
onClick={applyForPartTimeWaiterJob} onClick={applyForPartTimeWaiterJob}
p={p}
style={{ display: "block" }}
text={"Apply to be a part-time Waiter"} 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> </div>
); );
} }

24
src/Locations/ui/CoresButton.tsx
View File

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

13
src/Locations/ui/GenericLocation.tsx
View File

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

107
src/Locations/ui/GymLocation.tsx
View File

@ -4,6 +4,7 @@
* This subcomponent renders all of the buttons for training at the gym * This subcomponent renders all of the buttons for training at the gym
*/ */
import * as React from "react"; import * as React from "react";
import Button from "@mui/material/Button";
import { Location } from "../Location"; import { Location } from "../Location";
@ -13,7 +14,6 @@ import { getServer } from "../../Server/ServerHelpers";
import { Server } from "../../Server/Server"; import { Server } from "../../Server/Server";
import { SpecialServerIps } from "../../Server/SpecialServerIps"; import { SpecialServerIps } from "../../Server/SpecialServerIps";
import { StdButton } from "../../ui/React/StdButton";
import { Money } from "../../ui/React/Money"; import { Money } from "../../ui/React/Money";
import { IRouter } from "../../ui/Router"; import { IRouter } from "../../ui/Router";
@ -23,96 +23,55 @@ type IProps = {
router: IRouter; 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); 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; 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
onClick={this.trainStrength}
style={this.btnStyle}
text={
<> <>
Train Strength (<Money money={cost} player={this.props.p} /> / sec) <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>
</> </>
}
/>
<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>
); );
}
} }

11
src/Locations/ui/HospitalLocation.tsx
View File

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

24
src/Locations/ui/RamButton.tsx
View File

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

165
src/Locations/ui/SlumsLocation.tsx
View File

@ -4,11 +4,12 @@
* This subcomponent renders all of the buttons for committing crimes * This subcomponent renders all of the buttons for committing crimes
*/ */
import * as React from "react"; import * as React from "react";
import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";
import { Crimes } from "../../Crime/Crimes"; import { Crimes } from "../../Crime/Crimes";
import { numeralWrapper } from "../../ui/numeralFormat"; import { numeralWrapper } from "../../ui/numeralFormat";
import { AutoupdatingStdButton } from "../../ui/React/AutoupdatingStdButton";
import { use } from "../../ui/Context"; import { use } from "../../ui/Context";
export function SlumsLocation(): React.ReactElement { export function SlumsLocation(): React.ReactElement {
@ -113,102 +114,72 @@ export function SlumsLocation(): React.ReactElement {
return ( return (
<div> <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> </div>
); );
} }

24
src/Locations/ui/SpecialLocation.tsx
View File

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

25
src/Locations/ui/TechVendorLocation.tsx
View File

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

18
src/Locations/ui/TorButton.tsx
View File

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

82
src/Locations/ui/UniversityLocation.tsx
View File

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