UI: Clean up Hacknet UI (#1397)

This commit is contained in:
Jesse Clark
2024-06-14 00:08:10 -07:00
committed by GitHub
parent 4936d14639
commit f6de21ea18
6 changed files with 49 additions and 31 deletions

View File

@ -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,

View File

@ -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>

View File

@ -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}>

View File

@ -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)} />
</>

View File

@ -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>

View File

@ -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>
);
}