hacknet nodes in mui

This commit is contained in:
Olivier Gagnon 2021-09-26 21:26:25 -04:00
parent 514b467e27
commit b5abbbc240
5 changed files with 119 additions and 84 deletions

@ -36,11 +36,11 @@ export const HacknetNodeConstants: {
};
export const PurchaseMultipliers: {
[key: string]: number | string | undefined;
[key: string]: number | "MAX" | undefined;
x1: number;
x5: number;
x10: number;
MAX: string;
MAX: "MAX";
} = {
x1: 1,
x5: 5,

@ -20,9 +20,18 @@ import { HacknetNode } from "../HacknetNode";
import { Money } from "../../ui/React/Money";
import { MoneyRate } from "../../ui/React/MoneyRate";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import Button from "@mui/material/Button";
import { TableCell } from "../../ui/React/Table";
import TableBody from "@mui/material/TableBody";
import Table from "@mui/material/Table";
import TableRow from "@mui/material/TableRow";
interface IProps {
node: HacknetNode;
purchaseMultiplier: number | string;
purchaseMultiplier: number | "MAX";
rerender: () => void;
player: IPlayer;
}
@ -33,10 +42,9 @@ export function HacknetNodeElem(props: IProps): React.ReactElement {
const rerender = props.rerender;
// Upgrade Level Button
let upgradeLevelContent, upgradeLevelClass;
let upgradeLevelContent;
if (node.level >= HacknetNodeConstants.MaxLevel) {
upgradeLevelContent = <>MAX LEVEL</>;
upgradeLevelClass = "std-button-disabled";
} else {
let multiplier = 0;
if (purchaseMult === "MAX") {
@ -49,28 +57,23 @@ export function HacknetNodeElem(props: IProps): React.ReactElement {
const upgradeLevelCost = node.calculateLevelUpgradeCost(multiplier, props.player.hacknet_node_level_cost_mult);
upgradeLevelContent = (
<>
Upgrade x{multiplier} - <Money money={upgradeLevelCost} player={props.player} />
+{multiplier} -&nbsp;
<Money money={upgradeLevelCost} player={props.player} />
</>
);
if (props.player.money.lt(upgradeLevelCost)) {
upgradeLevelClass = "std-button-disabled";
} else {
upgradeLevelClass = "std-button";
}
}
function upgradeLevelOnClick(): void {
let numUpgrades = purchaseMult;
if (purchaseMult === "MAX") {
numUpgrades = getMaxNumberLevelUpgrades(props.player, node, HacknetNodeConstants.MaxLevel);
}
purchaseLevelUpgrade(props.player, node, numUpgrades as number);
const numUpgrades =
purchaseMult === "MAX"
? getMaxNumberLevelUpgrades(props.player, node, HacknetNodeConstants.MaxLevel)
: purchaseMult;
purchaseLevelUpgrade(props.player, node, numUpgrades);
rerender();
}
let upgradeRamContent, upgradeRamClass;
let upgradeRamContent;
if (node.ram >= HacknetNodeConstants.MaxRam) {
upgradeRamContent = <>MAX RAM</>;
upgradeRamClass = "std-button-disabled";
} else {
let multiplier = 0;
if (purchaseMult === "MAX") {
@ -83,28 +86,21 @@ export function HacknetNodeElem(props: IProps): React.ReactElement {
const upgradeRamCost = node.calculateRamUpgradeCost(multiplier, props.player.hacknet_node_ram_cost_mult);
upgradeRamContent = (
<>
Upgrade x{multiplier} - <Money money={upgradeRamCost} player={props.player} />
+{multiplier} -&nbsp;
<Money money={upgradeRamCost} player={props.player} />
</>
);
if (props.player.money.lt(upgradeRamCost)) {
upgradeRamClass = "std-button-disabled";
} else {
upgradeRamClass = "std-button";
}
}
function upgradeRamOnClick(): void {
let numUpgrades = purchaseMult;
if (purchaseMult === "MAX") {
numUpgrades = getMaxNumberRamUpgrades(props.player, node, HacknetNodeConstants.MaxRam);
}
purchaseRamUpgrade(props.player, node, numUpgrades as number);
const numUpgrades =
purchaseMult === "MAX" ? getMaxNumberRamUpgrades(props.player, node, HacknetNodeConstants.MaxRam) : purchaseMult;
purchaseRamUpgrade(props.player, node, numUpgrades);
rerender();
}
let upgradeCoresContent, upgradeCoresClass;
let upgradeCoresContent;
if (node.cores >= HacknetNodeConstants.MaxCores) {
upgradeCoresContent = <>MAX CORES</>;
upgradeCoresClass = "std-button-disabled";
} else {
let multiplier = 0;
if (purchaseMult === "MAX") {
@ -117,59 +113,75 @@ export function HacknetNodeElem(props: IProps): React.ReactElement {
const upgradeCoreCost = node.calculateCoreUpgradeCost(multiplier, props.player.hacknet_node_core_cost_mult);
upgradeCoresContent = (
<>
Upgrade x{multiplier} - <Money money={upgradeCoreCost} player={props.player} />
+{multiplier} -&nbsp;
<Money money={upgradeCoreCost} player={props.player} />
</>
);
if (props.player.money.lt(upgradeCoreCost)) {
upgradeCoresClass = "std-button-disabled";
} else {
upgradeCoresClass = "std-button";
}
}
function upgradeCoresOnClick(): void {
let numUpgrades = purchaseMult;
if (purchaseMult === "MAX") {
numUpgrades = getMaxNumberCoreUpgrades(props.player, node, HacknetNodeConstants.MaxCores);
}
purchaseCoreUpgrade(props.player, node, numUpgrades as number);
const numUpgrades =
purchaseMult === "MAX"
? getMaxNumberCoreUpgrades(props.player, node, HacknetNodeConstants.MaxCores)
: purchaseMult;
purchaseCoreUpgrade(props.player, node, numUpgrades);
rerender();
}
return (
<li className={"hacknet-node"}>
<div className={"hacknet-node-container"}>
<div className={"row"}>
<h1 style={{ fontSize: "1em" }}>{node.name}</h1>
</div>
<div className={"row"}>
<p>Production:</p>
<span className={"text money-gold"}>
<Grid item component={Paper} p={1}>
<Table size="small">
<TableBody>
<TableRow>
<TableCell>
<Typography>{node.name}</Typography>
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<Typography>Production:</Typography>
</TableCell>
<TableCell colSpan={2}>
<Typography>
<Money money={node.totalMoneyGenerated} player={props.player} /> (
<MoneyRate money={node.moneyGainRatePerSecond} />)
</span>
</div>
<div className={"row"}>
<p>Level:</p>
<span className={"text upgradable-info"}>{node.level}</span>
<button className={upgradeLevelClass} onClick={upgradeLevelOnClick}>
{upgradeLevelContent}
</button>
</div>
<div className={"row"}>
<p>RAM:</p>
<span className={"text upgradable-info"}>{node.ram}GB</span>
<button className={upgradeRamClass} onClick={upgradeRamOnClick}>
{upgradeRamContent}
</button>
</div>
<div className={"row"}>
<p>Cores:</p>
<span className={"text upgradable-info"}>{node.cores}</span>
<button className={upgradeCoresClass} onClick={upgradeCoresOnClick}>
{upgradeCoresContent}
</button>
</div>
</div>
</li>
</Typography>
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<Typography>Level:</Typography>
</TableCell>
<TableCell>
<Typography>{node.level}</Typography>
</TableCell>
<TableCell>
<Button onClick={upgradeLevelOnClick}>{upgradeLevelContent}</Button>
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<Typography>RAM:</Typography>
</TableCell>
<TableCell>
<Typography>{node.ram}GB</Typography>
</TableCell>
<TableCell>
<Button onClick={upgradeRamOnClick}>{upgradeRamContent}</Button>
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<Typography>Cores:</Typography>
</TableCell>
<TableCell>
<Typography>{node.cores}</Typography>
</TableCell>
<TableCell>
<Button onClick={upgradeCoresOnClick}>{upgradeCoresContent}</Button>
</TableCell>
</TableRow>
</TableBody>
</Table>
</Grid>
);
}

@ -38,7 +38,7 @@ export function HacknetRoot(props: IProps): React.ReactElement {
function rerender(): void {
setRerender((old) => !old);
}
const [purchaseMultiplier, setPurchaseMultiplier] = useState<number | string>(PurchaseMultipliers.x1);
const [purchaseMultiplier, setPurchaseMultiplier] = useState<number | "MAX">(PurchaseMultipliers.x1);
useEffect(() => {
const id = setInterval(rerender, 200);

@ -29,14 +29,16 @@ export function PurchaseButton(props: IProps): React.ReactElement {
} else {
text = (
<>
Purchase Hacknet Server - <Money money={cost} player={Player} />
Purchase Hacknet Server -&nbsp;
<Money money={cost} player={Player} />
</>
);
}
} else {
text = (
<>
Purchase Hacknet Node - <Money money={cost} player={Player} />
Purchase Hacknet Node -&nbsp;
<Money money={cost} player={Player} />
</>
);
}

@ -211,6 +211,7 @@ 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
@ -231,6 +232,7 @@ 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
@ -251,6 +253,7 @@ 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.
@ -271,6 +274,7 @@ 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
@ -292,6 +296,7 @@ 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>
}
@ -313,6 +318,7 @@ 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
@ -331,6 +337,7 @@ 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.
@ -350,6 +357,7 @@ 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
@ -372,6 +380,7 @@ 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.
@ -390,6 +399,7 @@ 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
@ -410,6 +420,7 @@ 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
@ -428,6 +439,7 @@ 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
@ -445,7 +457,10 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
<FormControlLabel
control={<Switch checked={disableASCIIArt} onChange={handleDisableASCIIArtChange} />}
label={
<Tooltip title={<Typography>If this is set all ASCII art will be disabled.</Typography>}>
<Tooltip
disableInteractive
title={<Typography>If this is set all ASCII art will be disabled.</Typography>}
>
<Typography>Disable ascii art</Typography>
</Tooltip>
}
@ -456,6 +471,7 @@ 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
@ -474,6 +490,7 @@ 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
@ -492,6 +509,7 @@ 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
@ -506,7 +524,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
</ListItem>
<ListItem>
<Tooltip title={<Typography>Sets the locale for displaying numbers.</Typography>}>
<Tooltip disableInteractive title={<Typography>Sets the locale for displaying numbers.</Typography>}>
<Typography>Locale&nbsp;</Typography>
</Tooltip>
<Select value={locale} onChange={handleLocaleChange}>
@ -551,13 +569,13 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
<Button onClick={() => setDeleteOpen(true)}>Delete Game</Button>
</Box>
<Box>
<Tooltip title={<Typography>export</Typography>}>
<Tooltip disableInteractive title={<Typography>export</Typography>}>
<Button onClick={() => props.export()}>
<DownloadIcon color="primary" />
Export
</Button>
</Tooltip>
<Tooltip title={<Typography>import</Typography>}>
<Tooltip disableInteractive title={<Typography>import</Typography>}>
<Button onClick={startImport}>
<UploadIcon color="primary" />
Import
@ -567,6 +585,7 @@ 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
@ -582,6 +601,7 @@ 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.
@ -593,6 +613,7 @@ 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