learned and implemented default props

This commit is contained in:
Olivier Gagnon 2021-09-29 01:49:22 -04:00
parent b0739f8942
commit c5713fa6d8
41 changed files with 137 additions and 280 deletions

@ -54,18 +54,12 @@ export function ActionLevel({ action, isActive, bladeburner, rerender }: IProps)
</Typography>
</Tooltip>
</Box>
<Tooltip
disableInteractive
title={isActive ? <Typography>WARNING: changing the level will restart the Operation</Typography> : ""}
>
<Tooltip title={isActive ? <Typography>WARNING: changing the level will restart the Operation</Typography> : ""}>
<IconButton disabled={!canIncrease} onClick={increaseLevel}>
<ArrowDropUpIcon />
</IconButton>
</Tooltip>
<Tooltip
disableInteractive
title={isActive ? <Typography>WARNING: changing the level will restart the Operation</Typography> : ""}
>
<Tooltip title={isActive ? <Typography>WARNING: changing the level will restart the Operation</Typography> : ""}>
<IconButton disabled={!canDecrease} onClick={decreaseLevel}>
<ArrowDropDownIcon />
</IconButton>

@ -148,7 +148,6 @@ export function Console(props: IProps): React.ReactElement {
<TextField
classes={{ root: classes.textfield }}
autoFocus
variant="standard"
tabIndex={1}
type="text"
value={command}

@ -5,9 +5,5 @@ import Typography from "@mui/material/Typography";
import Tooltip from "@mui/material/Tooltip";
export function KillIcon(): React.ReactElement {
return (
<Tooltip disableInteractive title={<Typography>This action involves retirement</Typography>}>
{killIcon}
</Tooltip>
);
return <Tooltip title={<Typography>This action involves retirement</Typography>}>{killIcon}</Tooltip>;
}

@ -46,14 +46,13 @@ export function Stats(props: IProps): React.ReactElement {
return (
<Paper sx={{ p: 1 }}>
<Box display="flex">
<Tooltip disableInteractive title={<Typography>Your rank within the Bladeburner division.</Typography>}>
<Tooltip title={<Typography>Your rank within the Bladeburner division.</Typography>}>
<Typography>Rank: {formatNumber(props.bladeburner.rank, 2)}</Typography>
</Tooltip>
</Box>
<br />
<Box display="flex">
<Tooltip
disableInteractive
title={
<Typography>
Performing actions will use up your stamina.
@ -97,7 +96,6 @@ export function Stats(props: IProps): React.ReactElement {
<Typography>Current City: {props.bladeburner.city}</Typography>
<Box display="flex">
<Tooltip
disableInteractive
title={
<Typography>
This is your Bladeburner division's estimate of how many Synthoids exist in your current city. An accurate
@ -113,7 +111,6 @@ export function Stats(props: IProps): React.ReactElement {
<br />
<Box display="flex">
<Tooltip
disableInteractive
title={
<Typography>
This is your Bladeburner divison's estimate of how many Synthoid communities exist in your current city.
@ -128,7 +125,6 @@ export function Stats(props: IProps): React.ReactElement {
<br />
<Box display="flex">
<Tooltip
disableInteractive
title={
<Typography>
The city's chaos level due to tensions and conflicts between humans and Synthoids. Having too high of a
@ -144,7 +140,6 @@ export function Stats(props: IProps): React.ReactElement {
<>
<Box display="flex">
<Tooltip
disableInteractive
title={
<Typography>
You gain bonus time while offline or when the game is inactive (e.g. when the tab is throttled by

@ -5,9 +5,5 @@ import Typography from "@mui/material/Typography";
import Tooltip from "@mui/material/Tooltip";
export function StealthIcon(): React.ReactElement {
return (
<Tooltip disableInteractive title={<Typography>This action involves stealth</Typography>}>
{stealthIcon}
</Tooltip>
);
return <Tooltip title={<Typography>This action involves stealth</Typography>}>{stealthIcon}</Tooltip>;
}

@ -40,14 +40,7 @@ export function TeamSizeModal(props: IProps): React.ReactElement {
Enter the amount of team members you would like to take on this Op. If you do not have the specified number of
team members, then as many as possible will be used. Note that team members may be lost during operations.
</Typography>
<TextField
autoFocus
variant="standard"
type="number"
placeholder="Team size"
value={teamSize}
onChange={onTeamSize}
/>
<TextField autoFocus type="number" placeholder="Team size" value={teamSize} onChange={onTeamSize} />
<Button sx={{ mx: 2 }} onClick={confirmTeamSize}>
Confirm
</Button>

@ -89,7 +89,7 @@ export function BribeFactionModal(props: IProps): React.ReactElement {
</Typography>
<Box display="flex" alignItems="center">
<Typography>Faction:</Typography>
<Select variant="standard" value={selectedFaction} onChange={changeFaction}>
<Select value={selectedFaction} onChange={changeFaction}>
{player.factions.map((name: string) => {
const info = Factions[name].getInfo();
if (!info.offersWork()) return;
@ -102,8 +102,8 @@ export function BribeFactionModal(props: IProps): React.ReactElement {
</Select>
</Box>
<Typography>{getRepText(money ? money : 0, stock ? stock : 0)}</Typography>
<TextField variant="standard" onChange={onMoneyChange} placeholder="Corporation funds" />
<TextField sx={{ mx: 1 }} variant="standard" onChange={onStockChange} placeholder="Stock Shares" />
<TextField onChange={onMoneyChange} placeholder="Corporation funds" />
<TextField sx={{ mx: 1 }} onChange={onStockChange} placeholder="Stock Shares" />
<Button sx={{ mx: 1 }} onClick={() => bribe(money ? money : 0, stock ? stock : 0)}>
Bribe
</Button>

@ -1,20 +0,0 @@
import React from "react";
interface IProps {
onClick: () => void;
name: string;
current: boolean;
}
export function CityTab(props: IProps): React.ReactElement {
let className = "cmpy-mgmt-city-tab";
if (props.current) {
className += " current";
}
return (
<button className={className} onClick={props.onClick}>
{props.name}
</button>
);
}

@ -1,87 +1,47 @@
// React Components for the Corporation UI's City navigation tabs
// These allow player to navigate between different cities for each industry
import React, { useState } from "react";
import { CityTab } from "./CityTab";
import { ExpandNewCityPopup } from "./ExpandNewCityPopup";
import { createPopup } from "../../ui/React/createPopup";
import { ICorporation } from "../ICorporation";
import { IIndustry } from "../IIndustry";
import { OfficeSpace } from "../OfficeSpace";
import { Industry } from "./Industry";
import { IPlayer } from "../../PersonObjects/IPlayer";
interface IExpandButtonProps {
corp: ICorporation;
division: IIndustry;
setCity: (name: string) => void;
}
function ExpandButton(props: IExpandButtonProps): React.ReactElement {
function openExpandNewCityModal(): void {
const popupId = "cmpy-mgmt-expand-city-popup";
createPopup(popupId, ExpandNewCityPopup, {
popupId: popupId,
corp: props.corp,
division: props.division,
cityStateSetter: props.setCity,
});
}
const possibleCities = Object.keys(props.division.offices).filter(
(cityName: string) => props.division.offices[cityName] === 0,
);
if (possibleCities.length === 0) return <></>;
return (
<CityTab
current={false}
key={"Expand into new City"}
name={"Expand into new City"}
onClick={openExpandNewCityModal}
/>
);
}
import { ExpandNewCity } from "./ExpandNewCity";
import { useDivision } from "./Context";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
interface IProps {
city: string;
division: IIndustry;
corp: ICorporation;
player: IPlayer;
rerender: () => void;
}
export function CityTabs(props: IProps): React.ReactElement {
const division = useDivision();
const [city, setCity] = useState(props.city);
const office = props.division.offices[city];
const office = division.offices[city];
if (office === 0) {
setCity("Sector-12");
return <></>;
}
const canExpand =
Object.keys(division.offices).filter((cityName: string) => division.offices[cityName] === 0).length > 0;
function handleChange(event: React.SyntheticEvent, tab: string): void {
setCity(tab);
}
return (
<>
{Object.values(props.division.offices).map(
(office: OfficeSpace | 0) =>
office !== 0 && (
<CityTab
current={city === office.loc}
key={office.loc}
name={office.loc}
onClick={() => setCity(office.loc)}
/>
),
<Tabs variant="fullWidth" value={city} onChange={handleChange}>
{Object.values(division.offices).map(
(office: OfficeSpace | 0) => office !== 0 && <Tab key={office.loc} label={office.loc} value={office.loc} />,
)}
{canExpand && <Tab label={"Expand"} value={"Expand"} />}
</Tabs>
{city !== "Expand" ? (
<Industry rerender={props.rerender} city={city} warehouse={division.warehouses[city]} office={office} />
) : (
<ExpandNewCity cityStateSetter={setCity} />
)}
<ExpandButton corp={props.corp} division={props.division} setCity={setCity} />
<Industry
rerender={props.rerender}
corp={props.corp}
division={props.division}
city={city}
warehouse={props.division.warehouses[city]}
office={office}
player={props.player}
/>
</>
);
}

@ -1,10 +1,14 @@
import React, { useContext } from "react";
import { ICorporation } from "../ICorporation";
import { IIndustry } from "../IIndustry";
export const Context: {
Corporation: React.Context<ICorporation>;
Division: React.Context<IIndustry>;
} = {
Corporation: React.createContext<ICorporation>({} as ICorporation),
Division: React.createContext<IIndustry>({} as IIndustry),
};
export const useCorporation = () => useContext(Context.Corporation);
export const useDivision = () => useContext(Context.Division);

@ -38,20 +38,18 @@ export function CorporationRoot(): React.ReactElement {
return (
<Context.Corporation.Provider value={corporation}>
<div className="cmpy-mgmt-container">
<Tabs variant="fullWidth" value={divisionName} onChange={handleChange}>
<Tab label={corporation.name} value={"Overview"} />
{corporation.divisions.map((div) => (
<Tab key={div.name} label={div.name} value={div.name} />
))}
{canExpand && <Tab label={"Expand"} value={-1} />}
</Tabs>
{divisionName === "Overview" && <Overview rerender={rerender} />}
{divisionName === -1 && <ExpandIndustryTab setDivisionName={setDivisionName} />}
{typeof divisionName === "string" && divisionName !== "Overview" && (
<MainPanel rerender={rerender} divisionName={divisionName + ""} />
)}
</div>
<Tabs variant="fullWidth" value={divisionName} onChange={handleChange}>
<Tab label={corporation.name} value={"Overview"} />
{corporation.divisions.map((div) => (
<Tab key={div.name} label={div.name} value={div.name} />
))}
{canExpand && <Tab label={"Expand"} value={-1} />}
</Tabs>
{divisionName === "Overview" && <Overview rerender={rerender} />}
{divisionName === -1 && <ExpandIndustryTab setDivisionName={setDivisionName} />}
{typeof divisionName === "string" && divisionName !== "Overview" && (
<MainPanel rerender={rerender} divisionName={divisionName + ""} />
)}
</Context.Corporation.Provider>
);
}

@ -63,7 +63,7 @@ export function CreateCorporationModal(props: IProps): React.ReactElement {
<br />
If you would like to start one, please enter a name for your corporation below:
</Typography>
<TextField autoFocus={true} variant="standard" placeholder="Corporation Name" onChange={onChange} value={name} />
<TextField autoFocus={true} placeholder="Corporation Name" onChange={onChange} value={name} />
<Button onClick={seed} disabled={name == ""}>
Use seed money
</Button>

@ -59,7 +59,7 @@ export function ExpandIndustryTab(props: IProps): React.ReactElement {
return (
<>
<Typography>Create a new division to expand into a new industry:</Typography>
<Select variant="standard" value={industry} onChange={onIndustryChange}>
<Select value={industry} onChange={onIndustryChange}>
{possibleIndustries.map((industry: string) => (
<MenuItem key={industry} value={industry}>
{industry}
@ -73,14 +73,7 @@ export function ExpandIndustryTab(props: IProps): React.ReactElement {
<Typography>Division name:</Typography>
<Box display="flex" alignItems="center">
<TextField
variant="standard"
autoFocus={true}
value={name}
onChange={onNameChange}
onKeyDown={onKeyDown}
type="text"
/>
<TextField autoFocus={true} value={name} onChange={onNameChange} onKeyDown={onKeyDown} type="text" />
<Button sx={{ mx: 1 }} onClick={newIndustry}>
Create Division
</Button>

@ -1,26 +1,27 @@
import React, { useRef } from "react";
import { IIndustry } from "../IIndustry";
import { CorporationConstants } from "../data/Constants";
import { removePopup } from "../../ui/React/createPopup";
import { dialogBoxCreate } from "../../ui/React/DialogBox";
import { ICorporation } from "../ICorporation";
import { NewCity } from "../Actions";
import { MoneyCost } from "./MoneyCost";
import { useCorporation, useDivision } from "./Context";
import Typography from "@mui/material/Typography";
import MenuItem from "@mui/material/MenuItem";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import Button from "@mui/material/Button";
interface IProps {
popupId: string;
corp: ICorporation;
division: IIndustry;
cityStateSetter: (city: string) => void;
}
export function ExpandNewCityPopup(props: IProps): React.ReactElement {
export function ExpandNewCity(props: IProps): React.ReactElement {
const corp = useCorporation();
const division = useDivision();
const dropdown = useRef<HTMLSelectElement>(null);
function expand(): void {
if (dropdown.current === null) return;
try {
NewCity(props.corp, props.division, dropdown.current.value);
NewCity(corp, division, dropdown.current.value);
} catch (err) {
dialogBoxCreate(err + "");
return;
@ -29,31 +30,25 @@ export function ExpandNewCityPopup(props: IProps): React.ReactElement {
dialogBoxCreate(`Opened a new office in ${dropdown.current.value}!`);
props.cityStateSetter(dropdown.current.value);
removePopup(props.popupId);
}
return (
<>
<p>
<Typography>
Would you like to expand into a new city by opening an office? This would cost{" "}
<MoneyCost money={CorporationConstants.OfficeInitialCost} corp={props.corp} />
</p>
<select ref={dropdown} className="dropdown" style={{ margin: "5px" }}>
{Object.keys(props.division.offices)
.filter((cityName: string) => props.division.offices[cityName] === 0)
<MoneyCost money={CorporationConstants.OfficeInitialCost} corp={corp} />
</Typography>
<Select ref={dropdown}>
{Object.keys(division.offices)
.filter((cityName: string) => division.offices[cityName] === 0)
.map((cityName: string) => (
<option key={cityName} value={cityName}>
<MenuItem key={cityName} value={cityName}>
{cityName}
</option>
</MenuItem>
))}
</select>
<button
className="std-button"
style={{ display: "inline-block" }}
onClick={expand}
disabled={props.corp.funds.lt(0)}
>
</Select>
<Button onClick={expand} disabled={corp.funds.lt(0)}>
Confirm
</button>
</Button>
</>
);
}

@ -64,7 +64,6 @@ export function GoPublicModal(props: IProps): React.ReactElement {
</Typography>
<Box display="flex" alignItems="center">
<TextField
variant="standard"
value={shares}
onChange={onChange}
autoFocus

@ -6,48 +6,47 @@ import { IndustryOffice } from "./IndustryOffice";
import { IndustryOverview } from "./IndustryOverview";
import { IndustryWarehouse } from "./IndustryWarehouse";
import { Warehouse } from "../Warehouse";
import { ICorporation } from "../ICorporation";
import { OfficeSpace } from "../OfficeSpace";
import { IIndustry } from "../IIndustry";
import { IPlayer } from "../../PersonObjects/IPlayer";
import { use } from "../../ui/Context";
import { useCorporation, useDivision } from "./Context";
interface IProps {
corp: ICorporation;
division: IIndustry;
city: string;
warehouse: Warehouse | 0;
office: OfficeSpace;
player: IPlayer;
rerender: () => void;
}
export function Industry(props: IProps): React.ReactElement {
const player = use.Player();
const corp = useCorporation();
const division = useDivision();
return (
<div>
<div className={"cmpy-mgmt-industry-left-panel"}>
<IndustryOverview
rerender={props.rerender}
player={props.player}
corp={props.corp}
division={props.division}
player={player}
corp={corp}
division={division}
currentCity={props.city}
office={props.office}
/>
<IndustryOffice
rerender={props.rerender}
player={props.player}
corp={props.corp}
division={props.division}
player={player}
corp={corp}
division={division}
office={props.office}
/>
</div>
<div className={"cmpy-mgmt-industry-right-panel"}>
<IndustryWarehouse
rerender={props.rerender}
player={props.player}
corp={props.corp}
player={player}
corp={corp}
currentCity={props.city}
division={props.division}
division={division}
warehouse={props.warehouse}
/>
</div>

@ -69,7 +69,6 @@ export function IssueDividendsModal(props: IProps): React.ReactElement {
per second before taxes.
</Typography>
<TextField
variant="standard"
autoFocus
value={percent}
onChange={onChange}

@ -127,7 +127,7 @@ export function IssueNewSharesModal(props: IProps): React.ReactElement {
you cannot buy them back.
</Typography>
<EffectText shares={shares} />
<TextField variant="standard" autoFocus placeholder="# New Shares" onChange={onChange} onKeyDown={onKeyDown} />
<TextField autoFocus placeholder="# New Shares" onChange={onChange} onKeyDown={onKeyDown} />
<Button onClick={issueNewShares} sx={{ mx: 1 }}>
Issue New Shares
</Button>

@ -6,7 +6,7 @@ import React from "react";
import { CityTabs } from "./CityTabs";
import { IIndustry } from "../IIndustry";
import { useCorporation } from "./Context";
import { use } from "../../ui/Context";
import { Context } from "./Context";
import { CityName } from "../../Locations/data/CityNames";
@ -16,7 +16,6 @@ interface IProps {
}
export function MainPanel(props: IProps): React.ReactElement {
const player = use.Player();
const corp = useCorporation();
const division =
props.divisionName !== "Overview"
@ -25,8 +24,10 @@ export function MainPanel(props: IProps): React.ReactElement {
if (division === undefined) throw new Error("Cannot find division");
return (
<div id="cmpy-mgmt-panel">
<CityTabs rerender={props.rerender} division={division} corp={corp} city={CityName.Sector12} player={player} />
</div>
<Context.Division.Provider value={division}>
<div id="cmpy-mgmt-panel">
<CityTabs rerender={props.rerender} city={CityName.Sector12} />
</div>
</Context.Division.Provider>
);
}

@ -51,7 +51,6 @@ export function Overview({ rerender }: IProps): React.ReactElement {
<br />
</Typography>
<Tooltip
disableInteractive
title={
<Typography>
Outstanding Shares: {numeralWrapper.format(corp.issuedShares, "0.000a")}
@ -79,7 +78,6 @@ export function Overview({ rerender }: IProps): React.ReactElement {
<BonusTime />
<div>
<Tooltip
disableInteractive
title={
<Typography>
Get a copy of and read 'The Complete Handbook for Creating a Successful Corporation.' This is a .lit file
@ -116,13 +114,12 @@ function PrivateButtons({ rerender }: IPrivateButtonsProps): React.ReactElement
return (
<>
<Tooltip disableInteractive title={<Typography>{findInvestorsTooltip}</Typography>}>
<Tooltip title={<Typography>{findInvestorsTooltip}</Typography>}>
<Button disabled={!fundingAvailable} onClick={() => setFindInvestorsopen(true)}>
Find Investors
</Button>
</Tooltip>
<Tooltip
disableInteractive
title={
<Typography>
Become a publicly traded and owned entity. Going public involves issuing shares for an IPO. Once you are a
@ -195,28 +192,24 @@ function PublicButtons({ rerender }: IPublicButtonsProps): React.ReactElement {
return (
<>
<Tooltip disableInteractive title={<Typography>{sellSharesTooltip}</Typography>}>
<Tooltip title={<Typography>{sellSharesTooltip}</Typography>}>
<Button disabled={sellSharesOnCd} onClick={() => setSellSharesOpen(true)}>
Sell Shares
</Button>
</Tooltip>
<SellSharesModal open={sellSharesOpen} onClose={() => setSellSharesOpen(false)} rerender={rerender} />
<Tooltip
disableInteractive
title={<Typography>Buy back shares you that previously issued or sold at market price.</Typography>}
>
<Tooltip title={<Typography>Buy back shares you that previously issued or sold at market price.</Typography>}>
<Button onClick={() => setBuybackSharesOpen(true)}>Buyback shares</Button>
</Tooltip>
<BuybackSharesModal open={buybackSharesOpen} onClose={() => setBuybackSharesOpen(false)} rerender={rerender} />
<br />
<Tooltip disableInteractive title={<Typography>{issueNewSharesTooltip}</Typography>}>
<Tooltip title={<Typography>{issueNewSharesTooltip}</Typography>}>
<Button disabled={issueNewSharesOnCd} onClick={() => setIssueNewSharesOpen(true)}>
Issue New Shares
</Button>
</Tooltip>
<IssueNewSharesModal open={issueNewSharesOpen} onClose={() => setIssueNewSharesOpen(false)} />
<Tooltip
disableInteractive
title={<Typography>Manage the dividends that are paid out to shareholders (including yourself)</Typography>}
>
<Button onClick={() => setIssueDividendsOpen(true)}>Issue Dividends</Button>
@ -243,7 +236,6 @@ function BribeButton(): React.ReactElement {
return (
<>
<Tooltip
disableInteractive
title={
canBribe
? "Use your Corporations power and influence to bribe Faction leaders in exchange for reputation"

@ -81,7 +81,7 @@ export function Companies(): React.ReactElement {
<span className="text">Company:</span>
</td>
<td colSpan={3}>
<Select id="dev-companies-dropdown" className="dropdown" onChange={setCompanyDropdown} value={company}>
<Select id="dev-companies-dropdown" onChange={setCompanyDropdown} value={company}>
{Object.values(AllCompanies).map((company) => (
<MenuItem key={company.name} value={company.name}>
{company.name}

@ -114,7 +114,6 @@ export function Factions(props: IProps): React.ReactElement {
<Select
labelId="factions-select"
id="factions-dropdown"
className="dropdown exp-input"
onChange={setFactionDropdown}
value={faction}
startAdornment={

@ -87,7 +87,7 @@ export function Servers(): React.ReactElement {
<span className="text">Server:</span>
</td>
<td colSpan={2}>
<Select id="dev-servers-dropdown" className="dropdown" onChange={setServerDropdown} value={server}>
<Select id="dev-servers-dropdown" onChange={setServerDropdown} value={server}>
{Object.values(AllServers).map((server) => (
<MenuItem key={server.hostname} value={server.hostname}>
{server.hostname}

@ -86,7 +86,6 @@ export function DonateOption(props: IProps): React.ReactElement {
) : (
<>
<TextField
variant="standard"
onChange={onChange}
placeholder={"Donation amount"}
disabled={props.disabled}

@ -147,13 +147,7 @@ export function PurchaseableAugmentation(props: IProps): React.ReactElement {
)}
<TableCell key={1}>
<Box display="flex">
<Tooltip
title={<Typography>{tooltip}</Typography>}
placement="top"
disableFocusListener
disableTouchListener
disableInteractive
>
<Tooltip title={<Typography>{tooltip}</Typography>} placement="top">
<Typography>{btnTxt}</Typography>
</Tooltip>
</Box>

@ -36,10 +36,7 @@ export function ApplyToJobButton(props: IProps): React.ReactElement {
return (
<>
<Tooltip
title={<span dangerouslySetInnerHTML={{ __html: getJobRequirementTooltip() }}></span>}
disableInteractive
>
<Tooltip title={<span dangerouslySetInnerHTML={{ __html: getJobRequirementTooltip() }}></span>}>
<Button onClick={props.onClick}>{props.text}</Button>
</Tooltip>
<br />

@ -208,7 +208,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
Augmentations
</>
}
disableInteractive
>
<Typography>Company reputation: {Reputation(company.playerReputation)}</Typography>
</Tooltip>
@ -223,7 +222,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
gain depends on how much reputation you have with the company.
</>
}
disableInteractive
>
<Typography className={"tooltip"}>Company Favor: {Favor(company.favor)}</Typography>
</Tooltip>

@ -114,69 +114,69 @@ export function SlumsLocation(): React.ReactElement {
return (
<div>
<Tooltip title={<>Attempt to shoplift from a low-end retailer</>} disableInteractive>
<Tooltip title={<>Attempt to shoplift from a low-end retailer</>}>
<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>
<Tooltip title={<>Attempt to commit armed robbery on a high-end store</>}>
<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>
<Tooltip title={<>Attempt to mug a random person on the street</>}>
<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>
<Tooltip title={<>Attempt to rob property from someone's house</>}>
<Button onClick={larceny}>Larceny ({numeralWrapper.formatPercentage(larcenyChance)} chance of success)</Button>
</Tooltip>
<br />
<Tooltip title={<>Attempt to deal drugs</>} disableInteractive>
<Tooltip title={<>Attempt to deal drugs</>}>
<Button onClick={dealDrugs}>
Deal Drugs ({numeralWrapper.formatPercentage(drugsChance)} chance of success)
</Button>
</Tooltip>
<br />
<Tooltip title={<>Attempt to forge corporate bonds</>} disableInteractive>
<Tooltip title={<>Attempt to forge corporate bonds</>}>
<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>
<Tooltip title={<>Attempt to smuggle illegal arms into the city</>}>
<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>
<Tooltip title={<>Attempt to murder a random person on the street</>}>
<Button onClick={homicide}>
Homicide ({numeralWrapper.formatPercentage(homicideChance)} chance of success)
</Button>
</Tooltip>
<br />
<Tooltip title={<>Attempt to commit grand theft auto</>} disableInteractive>
<Tooltip title={<>Attempt to commit grand theft auto</>}>
<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>
<Tooltip title={<>Attempt to kidnap and ransom a high-profile-target</>}>
<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>
<Tooltip title={<>Attempt to assassinate a high-profile target</>}>
<Button onClick={assassinate}>
Assassinate ({numeralWrapper.formatPercentage(assassinateChance)} chance of success)
</Button>
</Tooltip>
<br />
<Tooltip title={<>Attempt to pull off the ultimate heist</>} disableInteractive>
<Tooltip title={<>Attempt to pull off the ultimate heist</>}>
<Button onClick={heist}>Heist ({numeralWrapper.formatPercentage(heistChance)} chance of success)</Button>
</Tooltip>
<br />

@ -85,7 +85,7 @@ export function CovenantSleeveMemoryUpgrade(props: IProps): React.ReactElement {
<Box display="flex" flexDirection="row" alignItems="center">
<Typography>Amount of memory to purchase (must be an integer):&nbsp;</Typography>
<TextField variant="standard" onChange={changePurchaseAmount} type={"number"} value={amt} />
<TextField onChange={changePurchaseAmount} type={"number"} value={amt} />
</Box>
<br />
<Button disabled={purchaseBtnDisabled} onClick={purchaseMemory}>

@ -70,7 +70,7 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
</TableCell>
<TableCell>
<Box display="flex">
<Tooltip disableInteractive title={aug.stats || ""}>
<Tooltip title={aug.stats || ""}>
<Typography>{aug.name}</Typography>
</Tooltip>
</Box>
@ -111,7 +111,7 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
}
return (
<Tooltip key={augName} disableInteractive title={<Typography>{tooltip}</Typography>}>
<Tooltip key={augName} title={<Typography>{tooltip}</Typography>}>
<Paper>
<Typography>{augName}</Typography>
</Paper>

@ -171,10 +171,7 @@ export function SleeveElem(props: IProps): React.ReactElement {
<Grid item xs={3}>
<StatsElement sleeve={props.sleeve} />
<Button onClick={() => setStatsOpen(true)}>More Stats</Button>
<Tooltip
disableInteractive
title={player.money.lt(CONSTANTS.TravelCost) ? <Typography>Insufficient funds</Typography> : ""}
>
<Tooltip title={player.money.lt(CONSTANTS.TravelCost) ? <Typography>Insufficient funds</Typography> : ""}>
<span>
<Button onClick={() => setTravelOpen(true)} disabled={player.money.lt(CONSTANTS.TravelCost)}>
Travel
@ -182,7 +179,6 @@ export function SleeveElem(props: IProps): React.ReactElement {
</span>
</Tooltip>
<Tooltip
disableInteractive
title={props.sleeve.shock < 100 ? <Typography>Unlocked when sleeve has fully recovered</Typography> : ""}
>
<span>

@ -275,7 +275,7 @@ export function TaskSelector(props: IProps): React.ReactElement {
return (
<>
<Select variant="standard" onChange={onS0Change} value={s0}>
<Select onChange={onS0Change} value={s0}>
{validActions.map((task) => (
<MenuItem key={task} value={task}>
{task}
@ -285,7 +285,7 @@ export function TaskSelector(props: IProps): React.ReactElement {
{!(details.first.length === 1 && details.first[0] === "------") && (
<>
<br />
<Select variant="standard" onChange={onS1Change} value={s1}>
<Select onChange={onS1Change} value={s1}>
{details.first.map((detail) => (
<MenuItem key={detail} value={detail}>
{detail}
@ -297,7 +297,7 @@ export function TaskSelector(props: IProps): React.ReactElement {
{!(details2.length === 1 && details2[0] === "------") && (
<>
<br />
<Select variant="standard" onChange={onS2Change} value={s2}>
<Select onChange={onS2Change} value={s2}>
{details2.map((detail) => (
<MenuItem key={detail} value={detail}>
{detail}

@ -33,7 +33,7 @@ export function ProgramsRoot(): React.ReactElement {
return (
<React.Fragment key={program.name}>
<Tooltip title={create.tooltip} disableInteractive>
<Tooltip title={create.tooltip}>
<Button
sx={{ my: 1 }}
onClick={(event) => {

@ -32,12 +32,7 @@ export function OptionsModal(props: IProps): React.ReactElement {
<Modal open={props.open} onClose={props.onClose}>
<Box display="flex" flexDirection="row" alignItems="center">
<Typography>Theme: </Typography>
<Select
variant="standard"
color="primary"
onChange={(event) => setTheme(event.target.value)}
defaultValue={props.options.theme}
>
<Select onChange={(event) => setTheme(event.target.value)} defaultValue={props.options.theme}>
<MenuItem value="vs-dark">dark</MenuItem>
<MenuItem value="light">light</MenuItem>
</Select>

@ -296,7 +296,7 @@ export function Root(props: IProps): React.ReactElement {
<>
<Box display="flex" flexDirection="row" alignItems="center">
<Typography>Script name: </Typography>
<TextField variant="standard" type="text" tabIndex={1} value={filename} onChange={onFilenameChange} />
<TextField type="text" tabIndex={1} value={filename} onChange={onFilenameChange} />
<IconButton onClick={() => setOptionsOpen(true)}>
<>
<SettingsIcon />

@ -341,7 +341,6 @@ export function TerminalInput({ terminal, router, player }: IProps): React.React
</Paper>
)}
<TextField
variant="standard"
color={terminal.action === null ? "primary" : "secondary"}
autoFocus
disabled={terminal.action !== null}

@ -85,9 +85,7 @@ export function ServerAccordions(props: IProps): React.ReactElement {
<TextField
value={filter}
onChange={handleFilterChange}
color="primary"
autoFocus
variant="standard"
InputProps={{
startAdornment: <SearchIcon />,
spellCheck: false,

@ -211,7 +211,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
<List>
<ListItem>
<Tooltip
disableInteractive
title={
<Typography>
The minimum number of milliseconds it takes to execute an operation in Netscript. Setting this too
@ -232,7 +231,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
</ListItem>
<ListItem>
<Tooltip
disableInteractive
title={
<Typography>
The maximum number of lines a script's logs can hold. Setting this too high can cause the game to
@ -253,7 +251,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
</ListItem>
<ListItem>
<Tooltip
disableInteractive
title={
<Typography>
The maximum number of entries that can be written to a port using Netscript's write() function.
@ -274,7 +271,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
</ListItem>
<ListItem>
<Tooltip
disableInteractive
title={
<Typography>
The maximum number of entries that can be written to a the terminal. Setting this too high can cause
@ -296,7 +292,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
</ListItem>
<ListItem>
<Tooltip
disableInteractive
title={
<Typography>The time (in seconds) between each autosave. Set to 0 to disable autosave.</Typography>
}
@ -318,7 +313,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
control={<Switch checked={suppressMessages} onChange={handleSuppressMessagesChange} />}
label={
<Tooltip
disableInteractive
title={
<Typography>
If this is set, then any messages you receive will not appear as popups on the screen. They will
@ -337,7 +331,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
control={<Switch checked={suppressFactionInvites} onChange={handleSuppressFactionInvitesChange} />}
label={
<Tooltip
disableInteractive
title={
<Typography>
If this is set, then any faction invites you receive will not appear as popups on the screen.
@ -357,7 +350,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
}
label={
<Tooltip
disableInteractive
title={
<Typography>
If this is set, the confirmation message before traveling will not show up. You will
@ -380,7 +372,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
}
label={
<Tooltip
disableInteractive
title={
<Typography>
If this is set, the confirmation message before buying augmentation will not show up.
@ -399,7 +390,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
}
label={
<Tooltip
disableInteractive
title={
<Typography>
If this is set, a popup message will no longer be shown when you are hospitalized after taking
@ -420,7 +410,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
}
label={
<Tooltip
disableInteractive
title={
<Typography>
If this is set, then having your Bladeburner actions interrupted by being busy with something
@ -439,7 +428,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
control={<Switch checked={disableHotkeys} onChange={handleDisableHotkeysChange} />}
label={
<Tooltip
disableInteractive
title={
<Typography>
If this is set, then most hotkeys (keyboard shortcuts) in the game are disabled. This includes
@ -457,10 +445,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
<FormControlLabel
control={<Switch checked={disableASCIIArt} onChange={handleDisableASCIIArtChange} />}
label={
<Tooltip
disableInteractive
title={<Typography>If this is set all ASCII art will be disabled.</Typography>}
>
<Tooltip title={<Typography>If this is set all ASCII art will be disabled.</Typography>}>
<Typography>Disable ascii art</Typography>
</Tooltip>
}
@ -471,7 +456,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
control={<Switch checked={disableTextEffects} onChange={handleDisableTextEffectsChange} />}
label={
<Tooltip
disableInteractive
title={
<Typography>
If this is set, text effects will not be displayed. This can help if text is difficult to read
@ -490,7 +474,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
control={<Switch checked={enableBashHotkeys} onChange={handleEnableBashHotkeysChange} />}
label={
<Tooltip
disableInteractive
title={
<Typography>
Improved Bash emulation mode. Setting this to 1 enables several new Terminal shortcuts and
@ -509,7 +492,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
control={<Switch checked={enableTimestamps} onChange={handleEnableTimestampsChange} />}
label={
<Tooltip
disableInteractive
title={
<Typography>
Terminal commands and log entries will be timestamped. The timestamp will have the format: M/D
@ -524,7 +506,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
</ListItem>
<ListItem>
<Tooltip disableInteractive title={<Typography>Sets the locale for displaying numbers.</Typography>}>
<Tooltip title={<Typography>Sets the locale for displaying numbers.</Typography>}>
<Typography>Locale&nbsp;</Typography>
</Tooltip>
<Select value={locale} onChange={handleLocaleChange}>
@ -569,13 +551,13 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
<Button onClick={() => setDeleteOpen(true)}>Delete Game</Button>
</Box>
<Box>
<Tooltip disableInteractive title={<Typography>export</Typography>}>
<Tooltip title={<Typography>export</Typography>}>
<Button onClick={() => props.export()}>
<DownloadIcon color="primary" />
Export
</Button>
</Tooltip>
<Tooltip disableInteractive title={<Typography>import</Typography>}>
<Tooltip title={<Typography>import</Typography>}>
<Button onClick={startImport}>
<UploadIcon color="primary" />
Import
@ -585,7 +567,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
</Box>
<Box>
<Tooltip
disableInteractive
title={
<Typography>
Forcefully kill all active running scripts, in case there is a bug or some unexpected issue with the
@ -601,7 +582,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
</Box>
<Box>
<Tooltip
disableInteractive
title={
<Typography>
Perform a soft reset. Resets everything as if you had just purchased an Augmentation.
@ -613,7 +593,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
</Box>
<Box>
<Tooltip
disableInteractive
title={
<Typography>
If your save file is extremely big you can use this button to view a map of all the files on every

@ -61,7 +61,7 @@ export function ServerDropdown(props: IProps): React.ReactElement {
}
return (
<Select sx={{ mx: 1 }} variant="standard" value={props.value} onChange={props.onChange}>
<Select sx={{ mx: 1 }} value={props.value} onChange={props.onChange}>
{servers}
</Select>
);

@ -150,6 +150,14 @@ export function refreshTheme(): void {
color: Settings.theme.primary,
},
},
defaultProps: {
variant: "standard",
},
},
MuiTextField: {
defaultProps: {
variant: "standard",
},
},
MuiMenu: {
styleOverrides: {
@ -197,6 +205,9 @@ export function refreshTheme(): void {
maxWidth: "100vh",
},
},
defaultProps: {
disableInteractive: true,
},
},
MuiSlider: {
styleOverrides: {

@ -33,7 +33,6 @@ function ColorEditor({ name, onColorChange, color, defaultColor }: IColorEditorP
sx={{ mx: 1 }}
label={name}
value={color}
variant="standard"
InputProps={{
startAdornment: (
<>