mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2025-03-07 11:04:36 +01:00
UI: Clean up Hacknet UI (#1397)
This commit is contained in:
@ -657,8 +657,8 @@ export const FactionInfos: Record<FactionName, FactionInfo> = {
|
||||
|
||||
// Early game factions - factions the player will prestige with early on that don't belong in other categories.
|
||||
[FactionName.Netburners]: new FactionInfo({
|
||||
infoText: <>{"~~//*>H4CK|\\|3T 8URN3R5**>?>\\~~"}</>,
|
||||
rumorText: <>{"~~//*>H4CK|\\|3T 8URN3R5**>?>\\~~"}</>,
|
||||
infoText: <>{"~~//*>H4CK|\\|3T 8URN3R5**>?>\\\\~~"}</>,
|
||||
rumorText: <>{"~~//*>H4CK|\\|3T 8URN3R5**>?>\\\\~~"}</>,
|
||||
inviteReqs: [haveSkill("hacking", 80), totalHacknetRam(8), totalHacknetCores(4), totalHacknetLevels(100)],
|
||||
rumorReqs: [totalHacknetLevels(50)],
|
||||
offerHackingWork: true,
|
||||
|
@ -17,6 +17,7 @@ export function GeneralInfo(props: IProps): React.ReactElement {
|
||||
The Hacknet is a global, decentralized network of machines. It is used by hackers all around the world to
|
||||
anonymously share computing power and perform distributed cyberattacks without the fear of being traced.
|
||||
</Typography>
|
||||
<br />
|
||||
{!props.hasHacknetServers ? (
|
||||
<>
|
||||
<Typography>
|
||||
|
@ -164,7 +164,7 @@ export function HacknetNodeElem(props: IProps): React.ReactElement {
|
||||
|
||||
return (
|
||||
<Grid item component={Paper} p={1}>
|
||||
<Table size="small">
|
||||
<Table size="small" sx={{ whiteSpace: "nowrap" }}>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={3}>
|
||||
|
@ -102,21 +102,28 @@ export function HacknetRoot(): React.ReactElement {
|
||||
<Typography variant="h4">Hacknet {hasHacknetServers() ? "Servers" : "Nodes"}</Typography>
|
||||
<GeneralInfo hasHacknetServers={hasHacknetServers()} />
|
||||
|
||||
<PurchaseButton cost={purchaseCost} multiplier={purchaseMultiplier} onClick={handlePurchaseButtonClick} />
|
||||
<br />
|
||||
|
||||
<PlayerInfo totalProduction={totalProduction} />
|
||||
|
||||
<br />
|
||||
|
||||
{hasHacknetServers() && (
|
||||
<>
|
||||
<Button onClick={() => setOpen(true)}>Spend Hashes on Upgrades</Button>
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<PlayerInfo totalProduction={totalProduction} />
|
||||
<PurchaseButton cost={purchaseCost} multiplier={purchaseMultiplier} onClick={handlePurchaseButtonClick} />
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<MultiplierButtons onClicks={purchaseMultiplierOnClicks} purchaseMultiplier={purchaseMultiplier} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{hasHacknetServers() && <Button onClick={() => setOpen(true)}>Spend Hashes on Upgrades</Button>}
|
||||
|
||||
<Box sx={{ display: "grid", width: "100%", gridTemplateColumns: "repeat(auto-fit, 30em)" }}>{nodes}</Box>
|
||||
<HashUpgradeModal open={open} onClose={() => setOpen(false)} />
|
||||
</>
|
||||
|
@ -245,10 +245,10 @@ export function HacknetServerElem(props: IProps): React.ReactElement {
|
||||
|
||||
return (
|
||||
<Grid item component={Paper} p={1}>
|
||||
<Table size="small">
|
||||
<Table size="small" sx={{ whiteSpace: "nowrap" }}>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<TableCell colSpan={3}>
|
||||
<Typography>{node.hostname}</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
@ -12,7 +12,9 @@ import { Money } from "../../ui/React/Money";
|
||||
import { MoneyRate } from "../../ui/React/MoneyRate";
|
||||
import { HashRate } from "../../ui/React/HashRate";
|
||||
import { Hashes } from "../../ui/React/Hashes";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { Paper, Typography } from "@mui/material";
|
||||
import { StatsTable } from "../../ui/React/StatsTable";
|
||||
import { Tooltip } from "@mui/material";
|
||||
|
||||
interface IProps {
|
||||
totalProduction: number;
|
||||
@ -21,31 +23,39 @@ interface IProps {
|
||||
export function PlayerInfo(props: IProps): React.ReactElement {
|
||||
const hasServers = hasHacknetServers();
|
||||
|
||||
let prod;
|
||||
const rows: React.ReactNode[][] = [];
|
||||
rows.push(["Money Spent:", <Money key="money" money={-Player.moneySourceA.hacknet_expenses || 0} />]);
|
||||
rows.push(["Money Produced:", <Money key="money" money={Player.moneySourceA.hacknet} />]);
|
||||
if (hasServers) {
|
||||
prod = <HashRate hashes={props.totalProduction} />;
|
||||
rows.push([
|
||||
"Hashes:",
|
||||
<span key={"hashes"}>
|
||||
<Hashes hashes={Player.hashManager.hashes} /> / <Hashes hashes={Player.hashManager.capacity} />
|
||||
</span>,
|
||||
]);
|
||||
rows.push([
|
||||
"Hash Rate:",
|
||||
<Tooltip
|
||||
key="moneyRate"
|
||||
title={
|
||||
<Typography>
|
||||
<MoneyRate money={(props.totalProduction * 1e6) / 4} /> if sold for money
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
<span>
|
||||
<HashRate key="hashRate" hashes={props.totalProduction} />
|
||||
</span>
|
||||
</Tooltip>,
|
||||
]);
|
||||
} else {
|
||||
prod = <MoneyRate money={props.totalProduction} />;
|
||||
rows.push(["Production Rate:", <MoneyRate key="moneyRate" money={props.totalProduction} />]);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Typography>
|
||||
Money:
|
||||
<Money money={Player.money} />
|
||||
</Typography>
|
||||
|
||||
{hasServers && (
|
||||
<>
|
||||
<Typography>
|
||||
Hashes: <Hashes hashes={Player.hashManager.hashes} /> / <Hashes hashes={Player.hashManager.capacity} />
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Typography>
|
||||
Total Hacknet {hasServers ? "Server" : "Node"} Production: {prod}
|
||||
</Typography>
|
||||
</>
|
||||
<Paper sx={{ display: "inline-block", padding: "0.5em 1em", margin: "0.5em 0" }}>
|
||||
<Typography variant="h6">Hacknet Summary</Typography>
|
||||
<StatsTable rows={rows} />
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
Reference in New Issue
Block a user