Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-12-20 13:15:48 +01: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
Show Stats 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
*/
import { Box, Button, Tooltip, Typography } from "@mui/material";
import { Box, Button, Tooltip, Typography, Paper, Container } from "@mui/material";
import React, { useState } from "react";
import { getGenericAugmentationPriceMultiplier } from "../../Augmentation/AugmentationHelpers";
import { Augmentations } from "../../Augmentation/Augmentations";
@ -133,7 +133,7 @@ export function AugmentationsPage(props: IProps): React.ReactElement {
const multiplierComponent =
props.faction.name !== FactionNames.ShadowsOfAnarchy ? (
<Typography>
Price multiplier: x {numeralWrapper.formatMultiplier(getGenericAugmentationPriceMultiplier())}
<b>Price multiplier:</b> x {numeralWrapper.formatMultiplier(getGenericAugmentationPriceMultiplier())}
</Typography>
) : (
<></>
@ -141,34 +141,47 @@ export function AugmentationsPage(props: IProps): React.ReactElement {
return (
<>
<Button onClick={props.routeToMainPage}>Back</Button>
<Typography variant="h4">Faction Augmentations</Typography>
<Typography>
These are all of the Augmentations that are available to purchase from {props.faction.name}. Augmentations are
powerful upgrades that will enhance your abilities.
<br />
Reputation: <Reputation reputation={props.faction.playerReputation} /> Favor:{" "}
<Favor favor={Math.floor(props.faction.favor)} />
</Typography>
<Box display="flex">
<Tooltip
title={
<Container disableGutters maxWidth="md" sx={{ mx: 0 }}>
<Button onClick={props.routeToMainPage}>Back</Button>
<Typography variant="h4">Faction Augmentations</Typography>
<Paper sx={{ p: 1, mb: 1 }}>
<Typography>
These are all of the Augmentations that are available to purchase from <b>{props.faction.name}</b>.
Augmentations are powerful upgrades that will enhance your abilities.
<br />
</Typography>
<Box sx={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", justifyItems: "center", my: 1 }}>
<Tooltip
title={
<Typography>
The price of every Augmentation increases for every queued Augmentation and it is reset when you
install them.
</Typography>
}
>
{multiplierComponent}
</Tooltip>
<Typography>
The price of every Augmentation increases for every queued Augmentation and it is reset when you install
them.
<b>Reputation:</b> <Reputation reputation={props.faction.playerReputation} />
</Typography>
}
>
{multiplierComponent}
</Tooltip>
</Box>
<Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Cost)}>Sort by Cost</Button>
<Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Reputation)}>Sort by Reputation</Button>
<Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Default)}>Sort by Default Order</Button>
<Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Purchasable)}>
Sort by Purchasable
</Button>
<br />
<Typography>
<b>Favor:</b> <Favor favor={Math.floor(props.faction.favor)} />
</Typography>
</Box>
<Box sx={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }}>
<Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Cost)}>Sort by Cost</Button>
<Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Reputation)}>
Sort by Reputation
</Button>
<Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Default)}>
Sort by Default Order
</Button>
<Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Purchasable)}>
Sort by Purchasable
</Button>
</Box>
</Paper>
</Container>
<PurchaseableAugmentations
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 { PurchaseableAugmentations } from "../../../Augmentation/ui/PurchaseableAugmentations";
import { use } from "../../../ui/Context";
@ -34,7 +34,7 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
return (
<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>
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.
@ -42,22 +42,25 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
<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.
<br />
<br />
Augmentations will appear below as they become available.
</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>
<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>
);
}