diff --git a/src/Locations/ui/ApplyToJobButton.tsx b/src/Locations/ui/ApplyToJobButton.tsx index 9bbe4903d..90a20cf46 100644 --- a/src/Locations/ui/ApplyToJobButton.tsx +++ b/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) => void; - p: IPlayer; - style?: any; text: string; }; -export class ApplyToJobButton extends React.Component { - 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 ( - - ); - } + return ( + <> + } + disableInteractive + > + + +
+ + ); } diff --git a/src/Locations/ui/CompanyLocation.tsx b/src/Locations/ui/CompanyLocation.tsx index b4205fca9..97208da12 100644 --- a/src/Locations/ui/CompanyLocation.tsx +++ b/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 {
{isEmployedHere && (
-

Job Title: {jobTitle}

+ Job Title: {jobTitle} + ------------------------- + + + You will have {Favor(company.favor + favorGain[0])} company favor upon resetting after installing + Augmentations + + } + disableInteractive + > + Company reputation: {Reputation(company.playerReputation)} + + + ------------------------- + + + 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 + > + Company Favor: {Favor(company.favor)} + + + -------------------------
-

-------------------------

-
-

- Company reputation: {Reputation(company.playerReputation)} - - You will earn {Favor(favorGain[0])} company favor upon resetting after installing Augmentations - -

-
-
-

-------------------------

-
-

- Company Favor: {Favor(company.favor)} - - 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. - -

-
-
-

-------------------------

-
- +      - +
)} {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 && }
); } diff --git a/src/Locations/ui/CoresButton.tsx b/src/Locations/ui/CoresButton.tsx index 198c2258b..252461ee9 100644 --- a/src/Locations/ui/CoresButton.tsx +++ b/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 ; + return ; } const cost = 1e9 * Math.pow(7.5, homeComputer.cpuCores); @@ -32,17 +30,11 @@ export function CoresButton(props: IProps): React.ReactElement { } return ( - - Upgrade 'home' cores ({homeComputer.cpuCores} -> {homeComputer.cpuCores + 1}) -{" "} - - - } - tooltip={} - /> + }> + + ); } diff --git a/src/Locations/ui/GenericLocation.tsx b/src/Locations/ui/GenericLocation.tsx index 7163e09f5..c8cbe1901 100644 --- a/src/Locations/ui/GenericLocation.tsx +++ b/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 ( -
- router.toCity()} style={{ display: "block" }} text={"Return to World"} /> -

+ <> + + {backdoorInstalled && !Settings.DisableTextEffects ? : loc.name} -

+ {locContent} -
+ ); } diff --git a/src/Locations/ui/GymLocation.tsx b/src/Locations/ui/GymLocation.tsx index 082f294cd..cfac10f06 100644 --- a/src/Locations/ui/GymLocation.tsx +++ b/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 { - /** - * 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 ( -
- - Train Strength ( / sec) - - } - /> - - Train Defense ( / sec) - - } - /> - - Train Dexterity ( / sec) - - } - /> - - Train Agility ( / sec) - - } - /> -
- ); - } + return ( + <> + +
+ +
+ +
+ + + ); } diff --git a/src/Locations/ui/HospitalLocation.tsx b/src/Locations/ui/HospitalLocation.tsx index 75536551b..171e90546 100644 --- a/src/Locations/ui/HospitalLocation.tsx +++ b/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 { const cost = this.getCost(); return ( - - Get treatment for wounds - - - } - /> + ); } } diff --git a/src/Locations/ui/RamButton.tsx b/src/Locations/ui/RamButton.tsx index 64c833d65..d3ea6edec 100644 --- a/src/Locations/ui/RamButton.tsx +++ b/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 ; + return ; } const cost = props.p.getUpgradeHomeRamCost(); @@ -30,17 +28,11 @@ export function RamButton(props: IProps): React.ReactElement { } return ( - - Upgrade 'home' RAM ({homeComputer.maxRam}GB -> {homeComputer.maxRam * 2}GB) -{" "} - - - } - tooltip={} - /> + }> + + ); } diff --git a/src/Locations/ui/SlumsLocation.tsx b/src/Locations/ui/SlumsLocation.tsx index e57149762..a56f89494 100644 --- a/src/Locations/ui/SlumsLocation.tsx +++ b/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 (
- - - - - - - - - - - - + Attempt to shoplift from a low-end retailer} disableInteractive> + + +
+ Attempt to commit armed robbery on a high-end store} disableInteractive> + + +
+ Attempt to mug a random person on the street} disableInteractive> + + +
+ Attempt to rob property from someone's house} disableInteractive> + + +
+ Attempt to deal drugs} disableInteractive> + + +
+ Attempt to forge corporate bonds} disableInteractive> + + +
+ Attempt to smuggle illegal arms into the city} disableInteractive> + + +
+ Attempt to murder a random person on the street} disableInteractive> + + +
+ Attempt to commit grand theft auto} disableInteractive> + + +
+ Attempt to kidnap and ransom a high-profile-target} disableInteractive> + + +
+ Attempt to assassinate a high-profile target} disableInteractive> + + +
+ Attempt to pull off the ultimate heist} disableInteractive> + + +
); } diff --git a/src/Locations/ui/SpecialLocation.tsx b/src/Locations/ui/SpecialLocation.tsx index 73ba0c717..21fcb7585 100644 --- a/src/Locations/ui/SpecialLocation.tsx +++ b/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 ; + return ; } 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 ; + return ; } function renderCreateCorporation(): React.ReactElement { if (!player.canAccessCorporation()) { return ( <> -

+ A business man is yelling at a clerk. You should come back later. -

+ ); } return ( - + ); } @@ -118,7 +114,7 @@ export function SpecialLocation(props: IProps): React.ReactElement { if (!player.canAccessResleeving()) { return <>; } - return ; + return ; } switch (props.loc.name) { diff --git a/src/Locations/ui/TechVendorLocation.tsx b/src/Locations/ui/TechVendorLocation.tsx index c10cce621..1c4bc986d 100644 --- a/src/Locations/ui/TechVendorLocation.tsx +++ b/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( - openPurchaseServer(i, cost, props.p)} - style={btnStyle} - text={ - <> - Purchase {i}GB Server - - - } - disabled={!props.p.canAfford(cost)} - />, + <> + +
+ , ); } @@ -68,12 +65,14 @@ export function TechVendorLocation(props: IProps): React.ReactElement {
{purchaseServerButtons}
-

+ "You can order bigger servers via scripts. We don't take custom order in person." -

+
+
+
); diff --git a/src/Locations/ui/TorButton.tsx b/src/Locations/ui/TorButton.tsx index 746cdbe74..6e4ffddd2 100644 --- a/src/Locations/ui/TorButton.tsx +++ b/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 ; + return ; } return ( - - Purchase TOR router - - - } - /> + ); } diff --git a/src/Locations/ui/UniversityLocation.tsx b/src/Locations/ui/UniversityLocation.tsx index c85073ef4..70313535c 100644 --- a/src/Locations/ui/UniversityLocation.tsx +++ b/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 ( -
- - - Take Data Structures course ( - / sec) - - } - tooltip={earnHackingExpTooltip} - /> - - Take Networks course ( - / sec) - - } - tooltip={earnHackingExpTooltip} - /> - - Take Algorithms course ( - / sec) - - } - tooltip={earnHackingExpTooltip} - /> - - Take Management course ( - / sec) - - } - tooltip={earnCharismaExpTooltip} - /> - - Take Leadership course ( - / sec) - - } - tooltip={earnCharismaExpTooltip} - /> -
+ <> + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + + ); }