mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-10 09:43:54 +01:00
build dev
This commit is contained in:
parent
e087420519
commit
e5abf014b2
@ -147,12 +147,14 @@ export function Stats(props: IProps): React.ReactElement {
|
||||
</p>
|
||||
<p>Skill Points: {formatNumber(props.bladeburner.skillPoints, 0)}</p>
|
||||
<br />
|
||||
{StatsTable([
|
||||
["Aug. Success Chance mult: ", formatNumber(props.player.bladeburner_success_chance_mult * 100, 1) + "%"],
|
||||
["Aug. Max Stamina mult: ", formatNumber(props.player.bladeburner_max_stamina_mult * 100, 1) + "%"],
|
||||
["Aug. Stamina Gain mult: ", formatNumber(props.player.bladeburner_stamina_gain_mult * 100, 1) + "%"],
|
||||
["Aug. Field Analysis mult: ", formatNumber(props.player.bladeburner_analysis_mult * 100, 1) + "%"],
|
||||
])}
|
||||
<StatsTable
|
||||
rows={[
|
||||
["Aug. Success Chance mult: ", formatNumber(props.player.bladeburner_success_chance_mult * 100, 1) + "%"],
|
||||
["Aug. Max Stamina mult: ", formatNumber(props.player.bladeburner_max_stamina_mult * 100, 1) + "%"],
|
||||
["Aug. Stamina Gain mult: ", formatNumber(props.player.bladeburner_stamina_gain_mult * 100, 1) + "%"],
|
||||
["Aug. Field Analysis mult: ", formatNumber(props.player.bladeburner_analysis_mult * 100, 1) + "%"],
|
||||
]}
|
||||
/>
|
||||
<br />
|
||||
<a onClick={openTravel} className="a-link-button" style={{ display: "inline-block" }}>
|
||||
Travel
|
||||
|
@ -46,7 +46,9 @@ export function TaskSelector(props: IProps): React.ReactElement {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div>{StatsTable(data)}</div>
|
||||
<div>
|
||||
<StatsTable rows={data} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -11,8 +11,8 @@ interface IProps {
|
||||
export function MoreEarningsContent(props: IProps): React.ReactElement {
|
||||
return (
|
||||
<>
|
||||
{StatsTable(
|
||||
[
|
||||
<StatsTable
|
||||
rows={[
|
||||
["Money ", <Money money={props.sleeve.earningsForTask.money} />],
|
||||
["Hacking Exp ", numeralWrapper.formatExp(props.sleeve.earningsForTask.hack)],
|
||||
["Strength Exp ", numeralWrapper.formatExp(props.sleeve.earningsForTask.str)],
|
||||
@ -20,12 +20,12 @@ export function MoreEarningsContent(props: IProps): React.ReactElement {
|
||||
["Dexterity Exp ", numeralWrapper.formatExp(props.sleeve.earningsForTask.dex)],
|
||||
["Agility Exp ", numeralWrapper.formatExp(props.sleeve.earningsForTask.agi)],
|
||||
["Charisma Exp ", numeralWrapper.formatExp(props.sleeve.earningsForTask.cha)],
|
||||
],
|
||||
"Earnings for Current Task:",
|
||||
)}
|
||||
]}
|
||||
title="Earnings for Current Task:"
|
||||
/>
|
||||
<br />
|
||||
{StatsTable(
|
||||
[
|
||||
<StatsTable
|
||||
rows={[
|
||||
["Money: ", <Money money={props.sleeve.earningsForPlayer.money} />],
|
||||
["Hacking Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForPlayer.hack)],
|
||||
["Strength Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForPlayer.str)],
|
||||
@ -33,12 +33,12 @@ export function MoreEarningsContent(props: IProps): React.ReactElement {
|
||||
["Dexterity Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForPlayer.dex)],
|
||||
["Agility Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForPlayer.agi)],
|
||||
["Charisma Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForPlayer.cha)],
|
||||
],
|
||||
"Total Earnings for Host Consciousness:",
|
||||
)}
|
||||
]}
|
||||
title="Total Earnings for Host Consciousness:"
|
||||
/>
|
||||
<br />
|
||||
{StatsTable(
|
||||
[
|
||||
<StatsTable
|
||||
rows={[
|
||||
["Money: ", <Money money={props.sleeve.earningsForSleeves.money} />],
|
||||
["Hacking Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForSleeves.hack)],
|
||||
["Strength Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForSleeves.str)],
|
||||
@ -46,9 +46,9 @@ export function MoreEarningsContent(props: IProps): React.ReactElement {
|
||||
["Dexterity Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForSleeves.dex)],
|
||||
["Agility Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForSleeves.agi)],
|
||||
["Charisma Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForSleeves.cha)],
|
||||
],
|
||||
"Total Earnings for Other Sleeves:",
|
||||
)}
|
||||
]}
|
||||
title="Total Earnings for Other Sleeves:"
|
||||
/>
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
|
@ -10,20 +10,20 @@ interface IProps {
|
||||
export function MoreStatsContent(props: IProps): React.ReactElement {
|
||||
return (
|
||||
<>
|
||||
{StatsTable(
|
||||
[
|
||||
<StatsTable
|
||||
rows={[
|
||||
["Hacking: ", props.sleeve.hacking_skill, `(${numeralWrapper.formatExp(props.sleeve.hacking_exp)} exp)`],
|
||||
["Strength: ", props.sleeve.strength, `(${numeralWrapper.formatExp(props.sleeve.strength_exp)} exp)`],
|
||||
["Defense: ", props.sleeve.defense, `(${numeralWrapper.formatExp(props.sleeve.defense_exp)} exp)`],
|
||||
["Dexterity: ", props.sleeve.dexterity, `(${numeralWrapper.formatExp(props.sleeve.dexterity_exp)} exp)`],
|
||||
["Agility: ", props.sleeve.agility, `(${numeralWrapper.formatExp(props.sleeve.agility_exp)} exp)`],
|
||||
["Charisma: ", props.sleeve.charisma, `(${numeralWrapper.formatExp(props.sleeve.charisma_exp)} exp)`],
|
||||
],
|
||||
"Stats:",
|
||||
)}
|
||||
]}
|
||||
title="Stats:"
|
||||
/>
|
||||
<br />
|
||||
{StatsTable(
|
||||
[
|
||||
<StatsTable
|
||||
rows={[
|
||||
["Hacking Level multiplier: ", numeralWrapper.formatPercentage(props.sleeve.hacking_mult)],
|
||||
["Hacking Experience multiplier: ", numeralWrapper.formatPercentage(props.sleeve.hacking_exp_mult)],
|
||||
["Strength Level multiplier: ", numeralWrapper.formatPercentage(props.sleeve.strength_mult)],
|
||||
@ -41,9 +41,9 @@ export function MoreStatsContent(props: IProps): React.ReactElement {
|
||||
["Salary multiplier: ", numeralWrapper.formatPercentage(props.sleeve.work_money_mult)],
|
||||
["Crime Money multiplier: ", numeralWrapper.formatPercentage(props.sleeve.crime_money_mult)],
|
||||
["Crime Success multiplier: ", numeralWrapper.formatPercentage(props.sleeve.crime_success_mult)],
|
||||
],
|
||||
"Multipliers:",
|
||||
)}
|
||||
]}
|
||||
title="Multipliers:"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -15,16 +15,19 @@ import { Money } from "./React/Money";
|
||||
import { use } from "./Context";
|
||||
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Box from "@mui/material/Box";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
||||
import { Modal } from "./React/Modal";
|
||||
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import { Table, TableCell } from "./React/Table";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
|
||||
function LastEmployer(): React.ReactElement {
|
||||
const player = use.Player();
|
||||
if (player.companyName) {
|
||||
return (
|
||||
<>
|
||||
<span>Employer at which you last worked: {player.companyName}</span>
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
return <Typography>Employer at which you last worked: {player.companyName}</Typography>;
|
||||
}
|
||||
return <></>;
|
||||
}
|
||||
@ -32,12 +35,7 @@ function LastEmployer(): React.ReactElement {
|
||||
function LastJob(): React.ReactElement {
|
||||
const player = use.Player();
|
||||
if (player.companyName !== "") {
|
||||
return (
|
||||
<>
|
||||
<span>Job you last worked: {player.jobs[player.companyName]}</span>
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
return <Typography>Job you last worked: {player.jobs[player.companyName]}</Typography>;
|
||||
}
|
||||
return <></>;
|
||||
}
|
||||
@ -47,15 +45,13 @@ function Employers(): React.ReactElement {
|
||||
if (player.jobs && Object.keys(player.jobs).length !== 0)
|
||||
return (
|
||||
<>
|
||||
<span>All Employers:</span>
|
||||
<br />
|
||||
<Typography>All Employers:</Typography>
|
||||
|
||||
<ul>
|
||||
{Object.keys(player.jobs).map((j) => (
|
||||
<li key={j}> * {j}</li>
|
||||
<Typography key={j}> * {j}</Typography>
|
||||
))}
|
||||
</ul>
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
return <></>;
|
||||
@ -67,14 +63,14 @@ function Hacknet(): React.ReactElement {
|
||||
if (!(player.bitNodeN === 9 || SourceFileFlags[9] > 0)) {
|
||||
return (
|
||||
<>
|
||||
<span>{`Hacknet Nodes owned: ${player.hacknetNodes.length}`}</span>
|
||||
<Typography>{`Hacknet Nodes owned: ${player.hacknetNodes.length}`}</Typography>
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<span>{`Hacknet Servers owned: ${player.hacknetNodes.length} / ${HacknetServerConstants.MaxServers}`}</span>
|
||||
<Typography>{`Hacknet Servers owned: ${player.hacknetNodes.length} / ${HacknetServerConstants.MaxServers}`}</Typography>
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
@ -85,10 +81,14 @@ function Intelligence(): React.ReactElement {
|
||||
const player = use.Player();
|
||||
if (player.intelligence > 0 && (player.bitNodeN === 5 || SourceFileFlags[5] > 0)) {
|
||||
return (
|
||||
<tr key="5">
|
||||
<td>Intelligence:</td>
|
||||
<td style={{ textAlign: "right" }}>{numeralWrapper.formatSkill(player.intelligence)}</td>
|
||||
</tr>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<Typography>Intelligence: </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Typography>{numeralWrapper.formatSkill(player.intelligence)} </Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
return <></>;
|
||||
@ -98,29 +98,30 @@ function MultiplierTable(props: any): React.ReactElement {
|
||||
function bn5Stat(r: any): JSX.Element {
|
||||
if (SourceFileFlags[5] > 0 && r.length > 2 && r[1] != r[2]) {
|
||||
return (
|
||||
<td key="2" style={{ textAlign: "right" }}>
|
||||
{" "}
|
||||
({numeralWrapper.formatPercentage(r[2])})
|
||||
</td>
|
||||
<TableCell key="2" align="right">
|
||||
<Typography noWrap>({numeralWrapper.formatPercentage(r[2])})</Typography>
|
||||
</TableCell>
|
||||
);
|
||||
}
|
||||
return <></>;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<table>
|
||||
<tbody>
|
||||
<Table size="small" padding="none">
|
||||
<TableBody>
|
||||
{props.rows.map((r: any) => (
|
||||
<tr key={r[0]}>
|
||||
<td key="0">{`${r[0]} multiplier:`}</td>
|
||||
<td key="1" style={{ textAlign: "right", paddingLeft: "5px" }}>
|
||||
{numeralWrapper.formatPercentage(r[1])}
|
||||
</td>
|
||||
<TableRow key={r[0]}>
|
||||
<TableCell key="0">
|
||||
<Typography noWrap>{`${r[0]} multiplier:`} </Typography>
|
||||
</TableCell>
|
||||
<TableCell key="1" align="right">
|
||||
<Typography noWrap>{numeralWrapper.formatPercentage(r[1])}</Typography>
|
||||
</TableCell>
|
||||
{bn5Stat(r)}
|
||||
</tr>
|
||||
</TableRow>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -129,17 +130,14 @@ function BladeburnerMults(): React.ReactElement {
|
||||
const player = use.Player();
|
||||
if (!player.canAccessBladeburner()) return <></>;
|
||||
return (
|
||||
<>
|
||||
<MultiplierTable
|
||||
rows={[
|
||||
["Bladeburner Success Chance", player.bladeburner_max_stamina_mult],
|
||||
["Bladeburner Max Stamina", player.bladeburner_stamina_gain_mult],
|
||||
["Bladeburner Stamina Gain", player.bladeburner_analysis_mult],
|
||||
["Bladeburner Field Analysis", player.bladeburner_success_chance_mult],
|
||||
]}
|
||||
/>
|
||||
<br />
|
||||
</>
|
||||
<MultiplierTable
|
||||
rows={[
|
||||
["Bladeburner Success Chance", player.bladeburner_max_stamina_mult],
|
||||
["Bladeburner Max Stamina", player.bladeburner_stamina_gain_mult],
|
||||
["Bladeburner Stamina Gain", player.bladeburner_analysis_mult],
|
||||
["Bladeburner Field Analysis", player.bladeburner_success_chance_mult],
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -149,14 +147,12 @@ function CurrentBitNode(): React.ReactElement {
|
||||
const index = "BitNode" + player.bitNodeN;
|
||||
return (
|
||||
<>
|
||||
<span>
|
||||
Current BitNode: {player.bitNodeN} ({BitNodes[index].name})
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<div style={{ width: "60%", fontSize: "13px", marginLeft: "2%" }}>
|
||||
<span style={{ whiteSpace: "pre-wrap", overflowWrap: "break-word" }}>{BitNodes[index].info}</span>
|
||||
</div>
|
||||
<Typography variant="h5" color="primary">
|
||||
BitNode-{player.bitNodeN}: {BitNodes[index].name}
|
||||
</Typography>
|
||||
<Typography sx={{ mx: 2 }} style={{ whiteSpace: "pre-wrap", overflowWrap: "break-word" }}>
|
||||
{BitNodes[index].info}
|
||||
</Typography>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -164,18 +160,13 @@ function CurrentBitNode(): React.ReactElement {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
export function CharacterStats(): React.ReactElement {
|
||||
interface IMoneyModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
function MoneyModal({ open, onClose }: IMoneyModalProps): React.ReactElement {
|
||||
const player = use.Player();
|
||||
const setRerender = useState(false)[1];
|
||||
function rerender(): void {
|
||||
setRerender((old) => !old);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const id = setInterval(rerender, 20);
|
||||
return () => clearInterval(id);
|
||||
}, []);
|
||||
|
||||
function convertMoneySourceTrackerToString(src: MoneySourceTracker): React.ReactElement {
|
||||
const parts: any[][] = [[`Total:`, <Money money={src.total} />]];
|
||||
if (src.bladeburner) {
|
||||
@ -221,33 +212,53 @@ export function CharacterStats(): React.ReactElement {
|
||||
parts.push([`Sleeves:`, <Money money={src.sleeves} />]);
|
||||
}
|
||||
|
||||
return StatsTable(parts);
|
||||
return <StatsTable rows={parts} wide />;
|
||||
}
|
||||
|
||||
function openMoneyModal(): void {
|
||||
let content = (
|
||||
let content = (
|
||||
<>
|
||||
<Typography variant="h6" color="primary">
|
||||
Money earned since you last installed Augmentations
|
||||
</Typography>
|
||||
<br />
|
||||
{convertMoneySourceTrackerToString(player.moneySourceA)}
|
||||
</>
|
||||
);
|
||||
if (player.sourceFiles.length !== 0) {
|
||||
content = (
|
||||
<>
|
||||
<u>Money earned since you last installed Augmentations:</u>
|
||||
{content}
|
||||
<br />
|
||||
{convertMoneySourceTrackerToString(player.moneySourceA)}
|
||||
<br />
|
||||
<Typography variant="h6" color="primary">
|
||||
Money earned in this BitNode
|
||||
</Typography>
|
||||
<br />
|
||||
{convertMoneySourceTrackerToString(player.moneySourceB)}
|
||||
</>
|
||||
);
|
||||
if (player.sourceFiles.length !== 0) {
|
||||
content = (
|
||||
<>
|
||||
{content}
|
||||
<br />
|
||||
<br />
|
||||
<u>Money earned in this BitNode:</u>
|
||||
<br />
|
||||
{convertMoneySourceTrackerToString(player.moneySourceB)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
dialogBoxCreate(content, false);
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose}>
|
||||
{content}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export function CharacterStats(): React.ReactElement {
|
||||
const player = use.Player();
|
||||
const [moneyOpen, setMoneyOpen] = useState(false);
|
||||
const setRerender = useState(false)[1];
|
||||
function rerender(): void {
|
||||
setRerender((old) => !old);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const id = setInterval(rerender, 20);
|
||||
return () => clearInterval(id);
|
||||
}, []);
|
||||
|
||||
const timeRows = [
|
||||
["Time played since last Augmentation:", convertTimeMsToTimeElapsedString(player.playtimeSinceLastAug)],
|
||||
];
|
||||
@ -261,88 +272,105 @@ export function CharacterStats(): React.ReactElement {
|
||||
|
||||
return (
|
||||
<>
|
||||
<pre>
|
||||
<b>General</b>
|
||||
<br />
|
||||
<br />
|
||||
<span>Current City: {player.city}</span>
|
||||
<br />
|
||||
<Typography variant="h5" color="primary">
|
||||
General
|
||||
</Typography>
|
||||
<Box sx={{ mx: 2 }}>
|
||||
<Typography>Current City: {player.city}</Typography>
|
||||
<LastEmployer />
|
||||
<LastJob />
|
||||
<Employers />
|
||||
<span>
|
||||
|
||||
<Typography>
|
||||
Money: <Money money={player.money.toNumber()} />
|
||||
</span>
|
||||
<button
|
||||
className="popup-box-button"
|
||||
style={{ display: "inline-block", float: "none" }}
|
||||
onClick={openMoneyModal}
|
||||
>
|
||||
Money Statistics & Breakdown
|
||||
</button>
|
||||
<br />
|
||||
<br />
|
||||
<b>Stats</b>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr key="0">
|
||||
<td key="0">Hacking:</td>
|
||||
<td key="1" style={{ textAlign: "right" }}>
|
||||
{numeralWrapper.formatSkill(player.hacking_skill)}
|
||||
</td>
|
||||
<td key="2" style={{ textAlign: "right" }}>
|
||||
({numeralWrapper.formatExp(player.hacking_exp)} exp)
|
||||
</td>
|
||||
</tr>
|
||||
<tr key="1">
|
||||
<td key="0">Strength:</td>
|
||||
<td key="1" style={{ textAlign: "right" }}>
|
||||
{numeralWrapper.formatSkill(player.strength)}
|
||||
</td>
|
||||
<td key="2" style={{ textAlign: "right" }}>
|
||||
({numeralWrapper.formatExp(player.strength_exp)} exp)
|
||||
</td>
|
||||
</tr>
|
||||
<tr key="2">
|
||||
<td key="0">Defense:</td>
|
||||
<td key="1" style={{ textAlign: "right" }}>
|
||||
{numeralWrapper.formatSkill(player.defense)}
|
||||
</td>
|
||||
<td key="2" style={{ textAlign: "right" }}>
|
||||
({numeralWrapper.formatExp(player.defense_exp)} exp)
|
||||
</td>
|
||||
</tr>
|
||||
<tr key="3">
|
||||
<td key="0">Dexterity:</td>
|
||||
<td key="1" style={{ textAlign: "right" }}>
|
||||
{numeralWrapper.formatSkill(player.dexterity)}
|
||||
</td>
|
||||
<td key="2" style={{ textAlign: "right" }}>
|
||||
({numeralWrapper.formatExp(player.dexterity_exp)} exp)
|
||||
</td>
|
||||
</tr>
|
||||
<tr key="4">
|
||||
<td key="0">Agility:</td>
|
||||
<td key="1" style={{ textAlign: "right" }}>
|
||||
{numeralWrapper.formatSkill(player.agility)}
|
||||
</td>
|
||||
<td key="2" style={{ textAlign: "right" }}>
|
||||
({numeralWrapper.formatExp(player.agility_exp)} exp)
|
||||
</td>
|
||||
</tr>
|
||||
<tr key="5">
|
||||
<td key="0">Charisma:</td>
|
||||
<td key="1" style={{ textAlign: "right" }}>
|
||||
{numeralWrapper.formatSkill(player.charisma)}
|
||||
</td>
|
||||
<td key="2" style={{ textAlign: "right" }}>
|
||||
({numeralWrapper.formatExp(player.charisma_exp)} exp)
|
||||
</td>
|
||||
</tr>
|
||||
<IconButton onClick={() => setMoneyOpen(true)}>
|
||||
<MoreHorizIcon color="info" />
|
||||
</IconButton>
|
||||
</Typography>
|
||||
</Box>
|
||||
<br />
|
||||
<Typography variant="h5" color="primary">
|
||||
Stats
|
||||
</Typography>
|
||||
<Box sx={{ mx: 2 }}>
|
||||
<Table size="small" padding="none">
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<Typography noWrap>Hacking: </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Typography noWrap>{numeralWrapper.formatSkill(player.hacking_skill)} </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Typography noWrap>({numeralWrapper.formatExp(player.hacking_exp)} exp)</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<Typography noWrap>Strength: </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Typography noWrap>{numeralWrapper.formatSkill(player.strength)} </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Typography noWrap>({numeralWrapper.formatExp(player.strength_exp)} exp)</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<Typography noWrap>Defense: </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Typography noWrap>{numeralWrapper.formatSkill(player.defense)} </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Typography noWrap>({numeralWrapper.formatExp(player.defense_exp)} exp)</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<Typography noWrap>Dexterity: </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Typography noWrap>{numeralWrapper.formatSkill(player.dexterity)} </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Typography noWrap>({numeralWrapper.formatExp(player.dexterity_exp)} exp)</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<Typography noWrap>Agility: </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Typography noWrap>{numeralWrapper.formatSkill(player.agility)} </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Typography noWrap>({numeralWrapper.formatExp(player.agility_exp)} exp)</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<Typography noWrap>Charisma: </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Typography noWrap>{numeralWrapper.formatSkill(player.charisma)} </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Typography noWrap>({numeralWrapper.formatExp(player.charisma_exp)} exp)</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<Intelligence />
|
||||
</tbody>
|
||||
</table>
|
||||
</TableBody>
|
||||
</Table>
|
||||
<br />
|
||||
</Box>
|
||||
<br />
|
||||
<Typography variant="h5" color="primary">
|
||||
Multipliers
|
||||
</Typography>
|
||||
<Box sx={{ mx: 2 }}>
|
||||
<MultiplierTable
|
||||
rows={[
|
||||
["Hacking Chance", player.hacking_chance_mult],
|
||||
@ -447,23 +475,22 @@ export function CharacterStats(): React.ReactElement {
|
||||
]}
|
||||
/>
|
||||
<br />
|
||||
|
||||
<BladeburnerMults />
|
||||
<br />
|
||||
</Box>
|
||||
<br />
|
||||
|
||||
<b>Misc.</b>
|
||||
<br />
|
||||
<br />
|
||||
<span>{`Servers owned: ${player.purchasedServers.length} / ${getPurchaseServerLimit()}`}</span>
|
||||
<br />
|
||||
<Typography variant="h5" color="primary">
|
||||
Misc
|
||||
</Typography>
|
||||
<Box sx={{ mx: 2 }}>
|
||||
<Typography>{`Servers owned: ${player.purchasedServers.length} / ${getPurchaseServerLimit()}`}</Typography>
|
||||
<Hacknet />
|
||||
<span>{`Augmentations installed: ${player.augmentations.length}`}</span>
|
||||
<br />
|
||||
<br />
|
||||
{StatsTable(timeRows)}
|
||||
<br />
|
||||
<CurrentBitNode />
|
||||
</pre>
|
||||
<Typography>{`Augmentations installed: ${player.augmentations.length}`}</Typography>
|
||||
<StatsTable rows={timeRows} />
|
||||
</Box>
|
||||
<br />
|
||||
<CurrentBitNode />
|
||||
<MoneyModal open={moneyOpen} onClose={() => setMoneyOpen(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -3,8 +3,8 @@ import { Theme } from "@mui/material";
|
||||
import makeStyles from "@mui/styles/makeStyles";
|
||||
import createStyles from "@mui/styles/createStyles";
|
||||
import M from "@mui/material/Modal";
|
||||
import Backdrop from "@mui/material/Backdrop";
|
||||
import Fade from "@mui/material/Fade";
|
||||
import Box from "@mui/material/Box";
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
@ -39,18 +39,11 @@ interface IProps {
|
||||
export const Modal = (props: IProps): React.ReactElement => {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<M
|
||||
open={props.open}
|
||||
onClose={props.onClose}
|
||||
closeAfterTransition
|
||||
className={classes.modal}
|
||||
BackdropComponent={Backdrop}
|
||||
BackdropProps={{
|
||||
timeout: 100,
|
||||
}}
|
||||
>
|
||||
<M open={props.open} onClose={props.onClose} closeAfterTransition className={classes.modal}>
|
||||
<Fade in={props.open}>
|
||||
<div className={classes.paper}>{props.children}</div>
|
||||
<div className={classes.paper}>
|
||||
<Box sx={{ m: 2 }}>{props.children}</Box>
|
||||
</div>
|
||||
</Fade>
|
||||
</M>
|
||||
);
|
||||
|
@ -1,39 +1,35 @@
|
||||
import * as React from "react";
|
||||
import React from "react";
|
||||
|
||||
export function StatsTable(rows: any[][], title?: string): React.ReactElement {
|
||||
let titleElem = <></>;
|
||||
if (title) {
|
||||
titleElem = (
|
||||
<>
|
||||
<h2>
|
||||
<u>{title}</u>
|
||||
</h2>
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
import { Table, TableCell } from "./Table";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import { Table as MuiTable } from "@mui/material";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import Typography from "@mui/material/Typography";
|
||||
|
||||
interface IProps {
|
||||
rows: any[][];
|
||||
title?: string;
|
||||
wide?: boolean;
|
||||
}
|
||||
|
||||
export function StatsTable({ rows, title, wide }: IProps): React.ReactElement {
|
||||
const T = wide ? MuiTable : Table;
|
||||
return (
|
||||
<>
|
||||
{titleElem}
|
||||
<table>
|
||||
<tbody>
|
||||
{rows.map((row: any[]) => {
|
||||
return (
|
||||
<tr key={row[0]}>
|
||||
{row.map((elem: any, i: number) => {
|
||||
let style = {};
|
||||
if (i !== 0) style = { textAlign: "right", paddingLeft: ".25em" };
|
||||
return (
|
||||
<td key={i} style={style}>
|
||||
{elem}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{title && <Typography>{title}</Typography>}
|
||||
<T size="small" padding="none">
|
||||
<TableBody>
|
||||
{rows.map((row: any[]) => (
|
||||
<TableRow key={row[0]}>
|
||||
{row.map((elem: any, i: number) => (
|
||||
<TableCell key={i} align={i !== 0 ? "right" : "left"}>
|
||||
<Typography noWrap>{elem}</Typography>
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</T>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
37
src/ui/React/Table.tsx
Normal file
37
src/ui/React/Table.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import { TableCell as MuiTableCell, TableCellProps, Table as MuiTable, TableProps } from "@mui/material";
|
||||
|
||||
import makeStyles from "@mui/styles/makeStyles";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
root: {
|
||||
borderBottom: "none",
|
||||
},
|
||||
small: {
|
||||
width: "1px",
|
||||
},
|
||||
});
|
||||
|
||||
export const TableCell: React.FC<TableCellProps> = (props: TableCellProps) => {
|
||||
return (
|
||||
<MuiTableCell
|
||||
{...props}
|
||||
classes={{
|
||||
root: useStyles().root,
|
||||
...props.classes,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const Table: React.FC<TableProps> = (props: TableProps) => {
|
||||
return (
|
||||
<MuiTable
|
||||
{...props}
|
||||
classes={{
|
||||
root: useStyles().small,
|
||||
...props.classes,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
Loading…
Reference in New Issue
Block a user