felixfoertsch/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2026-04-17 14:59:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

Polish sleeve aug modal and faction aug page

Browse Source
This commit is contained in:
nickofolas
2022-04-22 19:48:40 -05:00
parent b193953b98
commit a7d980c2dd
2 changed files with 60 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/Faction/ui/AugmentationsPage.tsx
View File

@@ -1,7 +1,7 @@
/** /**
* Root React Component for displaying a faction's "Purchase Augmentations" page * Root React Component for displaying a faction's "Purchase Augmentations" page
*/ */
import { Box, Button, Tooltip, Typography } from "@mui/material"; import { Box, Button, Tooltip, Typography, Paper, Container } from "@mui/material";
import React, { useState } from "react"; import React, { useState } from "react";
import { getGenericAugmentationPriceMultiplier } from "../../Augmentation/AugmentationHelpers"; import { getGenericAugmentationPriceMultiplier } from "../../Augmentation/AugmentationHelpers";
import { Augmentations } from "../../Augmentation/Augmentations"; import { Augmentations } from "../../Augmentation/Augmentations";
@@ -133,7 +133,7 @@ export function AugmentationsPage(props: IProps): React.ReactElement {
const multiplierComponent = const multiplierComponent =
props.faction.name !== FactionNames.ShadowsOfAnarchy ? ( props.faction.name !== FactionNames.ShadowsOfAnarchy ? (
<Typography> <Typography>
Price multiplier: x {numeralWrapper.formatMultiplier(getGenericAugmentationPriceMultiplier())} <b>Price multiplier:</b> x {numeralWrapper.formatMultiplier(getGenericAugmentationPriceMultiplier())}
</Typography> </Typography>
) : ( ) : (
<></> <></>
@@ -141,34 +141,47 @@ export function AugmentationsPage(props: IProps): React.ReactElement {
return ( return (
<> <>
<Button onClick={props.routeToMainPage}>Back</Button> <Container disableGutters maxWidth="md" sx={{ mx: 0 }}>
<Typography variant="h4">Faction Augmentations</Typography> <Button onClick={props.routeToMainPage}>Back</Button>
<Typography> <Typography variant="h4">Faction Augmentations</Typography>
These are all of the Augmentations that are available to purchase from {props.faction.name}. Augmentations are <Paper sx={{ p: 1, mb: 1 }}>
powerful upgrades that will enhance your abilities. <Typography>
<br /> These are all of the Augmentations that are available to purchase from <b>{props.faction.name}</b>.
Reputation: <Reputation reputation={props.faction.playerReputation} /> Favor:{" "} Augmentations are powerful upgrades that will enhance your abilities.
<Favor favor={Math.floor(props.faction.favor)} /> <br />
</Typography> </Typography>
<Box display="flex"> <Box sx={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", justifyItems: "center", my: 1 }}>
<Tooltip <Tooltip
title={ title={
<Typography>
The price of every Augmentation increases for every queued Augmentation and it is reset when you
install them.
</Typography>
}
>
{multiplierComponent}
</Tooltip>
<Typography> <Typography>
The price of every Augmentation increases for every queued Augmentation and it is reset when you install <b>Reputation:</b> <Reputation reputation={props.faction.playerReputation} />
them.
</Typography> </Typography>
} <Typography>
> <b>Favor:</b> <Favor favor={Math.floor(props.faction.favor)} />
{multiplierComponent} </Typography>
</Tooltip> </Box>
</Box> <Box sx={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }}>
<Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Cost)}>Sort by Cost</Button> <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Cost)}>Sort by Cost</Button>
<Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Reputation)}>Sort by Reputation</Button> <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Reputation)}>
<Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Default)}>Sort by Default Order</Button> Sort by Reputation
<Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Purchasable)}> </Button>
Sort by Purchasable <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Default)}>
</Button> Sort by Default Order
<br /> </Button>
<Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Purchasable)}>
Sort by Purchasable
</Button>
</Box>
</Paper>
</Container>
<PurchaseableAugmentations <PurchaseableAugmentations
augNames={purchasable} augNames={purchasable}

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

@@ -1,4 +1,4 @@
import { Container, Typography } from "@mui/material"; import { Container, Typography, Paper } from "@mui/material";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { PurchaseableAugmentations } from "../../../Augmentation/ui/PurchaseableAugmentations"; import { PurchaseableAugmentations } from "../../../Augmentation/ui/PurchaseableAugmentations";
import { use } from "../../../ui/Context"; import { use } from "../../../ui/Context";
@@ -34,7 +34,7 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
return ( return (
<Modal open={props.open} onClose={props.onClose}> <Modal open={props.open} onClose={props.onClose}>
<Container disableGutters maxWidth="md" sx={{ mx: 0 }}> <Container component={Paper} disableGutters maxWidth="md" sx={{ mx: 0, mb: 1, p: 1 }}>
<Typography> <Typography>
You can purchase Augmentations for your Duplicate Sleeves. These Augmentations have the same effect as they 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. would for you. You can only purchase Augmentations that you have unlocked through Factions.
@@ -42,22 +42,25 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
<br /> <br />
When purchasing an Augmentation for a Duplicate Sleeve, they are immediately installed. This means that the 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. Duplicate Sleeve will immediately lose all of its stat experience.
<br />
<br />
Augmentations will appear below as they become available.
</Typography> </Typography>
<PurchaseableAugmentations
augNames={availableAugs.map((aug) => aug.name)}
ownedAugNames={ownedAugNames}
player={player}
canPurchase={(player, aug) => {
return player.money > aug.startingCost;
}}
purchaseAugmentation={(player, aug, _showModal) => {
props.sleeve.tryBuyAugmentation(player, aug);
rerender();
}}
skipPreReqs
skipExclusiveIndicator
/>
</Container> </Container>
<PurchaseableAugmentations
augNames={availableAugs.map((aug) => aug.name)}
ownedAugNames={ownedAugNames}
player={player}
canPurchase={(player, aug) => {
return player.money > aug.startingCost;
}}
purchaseAugmentation={(player, aug, _showModal) => {
props.sleeve.tryBuyAugmentation(player, aug);
rerender();
}}
skipPreReqs
skipExclusiveIndicator
/>
</Modal> </Modal>
); );
} }