Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-09-20 04:48:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Further design updates

Browse Source
This commit is contained in:
nickofolas 2022-04-22 13:21:20 -05:00
parent 7853144b18
commit f12a117f06
2 changed files with 45 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/Augmentation/ui/PurchaseableAugmentations.tsx
View File

@ -16,7 +16,7 @@ import { numeralWrapper } from "../../ui/numeralFormat";
import { Money } from "../../ui/React/Money";
import { Reputation } from "../../ui/React/Reputation";
import { CheckBox, CheckBoxOutlineBlank } from "@mui/icons-material";
import { CheckBox, CheckBoxOutlineBlank, Verified, Info } from "@mui/icons-material";
import { Augmentation as AugFormat } from "../../ui/React/Augmentation";
import { Paper, Button, Typography, Tooltip, Box, TableRow, Container, List, ListItem } from "@mui/material";
import { TableCell } from "../../ui/React/Table";
@ -93,23 +93,16 @@ export const PurchaseableAugmentations = (props: IPurchaseableAugsProps): React.
<Container
maxWidth="lg"
disableGutters
sx={{ mx: 0, display: "grid", gridTemplateColumns: "repeat(1, 1fr)", gap: 1 }}
sx={{ mx: 0, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1 }}
>
{props.augNames.map((augName: string) => {
const aug = Augmentations[augName];
const info = typeof aug.info === "string" ? <span>{aug.info}</span> : aug.info;
const description = (
<>
{info}
<br />
<br />
{aug.stats}
</>
);
const description = aug.stats;
return (
<Paper key={augName} sx={{ p: 1, display: "grid", gridTemplateColumns: "1fr 3fr", gap: 1 }}>
<Paper key={augName} sx={{ p: 1, display: "grid", gridTemplateColumns: "1fr 2fr", gap: 1 }}>
<Box>
<Button
onClick={() =>
@ -122,6 +115,14 @@ export const PurchaseableAugmentations = (props: IPurchaseableAugsProps): React.
>
Buy Augmentation
</Button>
{aug.factions.length === 1 && (
<Typography sx={{ display: "flex", alignItems: "center", color: Settings.theme.info }}>
<Verified sx={{ mr: 1 }} />
Faction-Exclusive Augmentation
</Typography>
)}
<Typography>
<b>Cost:</b>
</Typography>
@ -137,6 +138,7 @@ export const PurchaseableAugmentations = (props: IPurchaseableAugsProps): React.
valueColor={Settings.theme.rep}
/>
)}
{aug.prereqs.length > 0 && (
<>
<Typography>
@ -153,8 +155,14 @@ export const PurchaseableAugmentations = (props: IPurchaseableAugsProps): React.
</>
)}
</Box>
<Box>
<Typography variant="h6">{aug.name}</Typography>
<Typography variant="h6" sx={{ display: "flex", alignItems: "center" }}>
<Tooltip title={<Typography>{info}</Typography>}>
<Info sx={{ mr: 1 }} color="info" />
</Tooltip>
{aug.name}
</Typography>
<Typography>{description}</Typography>
</Box>
</Paper>

43
src/PersonObjects/Sleeve/ui/SleeveAugmentationsModal.tsx
View File

@ -3,13 +3,11 @@ import { Sleeve } from "../Sleeve";
import { findSleevePurchasableAugs } from "../SleeveHelpers";
import { Augmentations } from "../../../Augmentation/Augmentations";
import { Augmentation } from "../../../Augmentation/Augmentation";
import { PurchaseableAugmentations } from "../../../Augmentation/ui/PurchaseableAugmentations";
import { Money } from "../../../ui/React/Money";
import { Modal } from "../../../ui/React/Modal";
import { use } from "../../../ui/Context";
import Typography from "@mui/material/Typography";
import Tooltip from "@mui/material/Tooltip";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import { Typography, Tooltip, Paper, Box, Container } from "@mui/material";
import Button from "@mui/material/Button";
import TableBody from "@mui/material/TableBody";
import Table from "@mui/material/Table";
@ -49,17 +47,27 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
return (
<Modal open={props.open} onClose={props.onClose}>
<>
<Box sx={{ mx: 1 }}>
<Typography>
You can purchase Augmentations for your Duplicate Sleeves. These Augmentations have the same effect as they
would for you. You can only purchase Augmentations that you have unlocked through Factions.
<br />
<br />
When purchasing an Augmentation for a Duplicate Sleeve, they are immediately installed. This means that the
Duplicate Sleeve will immediately lose all of its stat experience.
</Typography>
<Box component={Paper} sx={{ my: 1, p: 1 }}>
<Container disableGutters maxWidth="lg" sx={{ mx: 0 }}>
<Typography>
You can purchase Augmentations for your Duplicate Sleeves. These Augmentations have the same effect as they
would for you. You can only purchase Augmentations that you have unlocked through Factions.
<br />
<br />
When purchasing an Augmentation for a Duplicate Sleeve, they are immediately installed. This means that the
Duplicate Sleeve will immediately lose all of its stat experience.
</Typography>
<PurchaseableAugmentations
augNames={availableAugs.map((aug) => aug.name)}
player={player}
canPurchase={(player, aug) => {
return player.money > aug.startingCost;
}}
purchaseAugmentation={(player, aug, _showModal) => {
props.sleeve.tryBuyAugmentation(player, aug);
rerender();
}}
/>
{/* <Box component={Paper} sx={{ my: 1, p: 1 }}>
<Table size="small" padding="none">
<TableBody>
{availableAugs.map((aug) => {
@ -85,8 +93,7 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
})}
</TableBody>
</Table>
</Box>
</Box>
</Box> */}
{ownedAugNames.length > 0 && (
<>
@ -115,7 +122,7 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
</Box>
</>
)}
</>
</Container>
</Modal>
);
}