Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-19 14:13:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3705 from nickofolas/improvement/address-feedback

Browse Source 
AUGMENTATIONS: Address some feedback regarding the new UI
This commit is contained in:
hydroflame 2022-05-23 12:19:17 -04:00 committed by GitHub
commit d5f3d2fbf4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/Augmentation/ui/PurchasableAugmentations.tsx
View File

@ -2,7 +2,7 @@
* React component for displaying a single augmentation for purchase through
* the faction UI
*/
import { CheckBox, CheckBoxOutlineBlank, CheckCircle, Info, NewReleases, Report } from "@mui/icons-material";
import { CheckBox, CheckBoxOutlineBlank, CheckCircle, NewReleases, Report } from "@mui/icons-material";
import { Box, Button, Container, Paper, Tooltip, Typography } from "@mui/material";
import React, { useState } from "react";
import { Faction } from "../../Faction/Faction";
@ -11,8 +11,8 @@ import { Settings } from "../../Settings/Settings";
import { numeralWrapper } from "../../ui/numeralFormat";
import { Augmentation } from "../Augmentation";
import { AugmentationNames } from "../data/AugmentationNames";
import { PurchaseAugmentationModal } from "./PurchaseAugmentationModal";
import { StaticAugmentations } from "../StaticAugmentations";
import { PurchaseAugmentationModal } from "./PurchaseAugmentationModal";
interface IPreReqsProps {
player: IPlayer;
@ -42,11 +42,13 @@ const PreReqs = (props: IPreReqsProps): React.ReactElement => {
}
>
<Typography
variant="body2"
sx={{
ml: 1,
fontSize: "0.9rem",
display: "flex",
alignItems: "center",
color: hasPreReqs ? Settings.theme.successlight : Settings.theme.error,
gridArea: "prereqs",
}}
>
{hasPreReqs ? (
@ -100,7 +102,10 @@ const Exclusive = (props: IExclusiveProps): React.ReactElement => {
</>
}
>
<NewReleases sx={{ ml: 1, color: Settings.theme.money, transform: "rotate(180deg)" }} />
<NewReleases
fontSize="small"
sx={{ ml: 1, color: Settings.theme.money, transform: "rotate(180deg)", gridArea: "exclusive" }}
/>
</Tooltip>
);
};
@ -113,7 +118,9 @@ interface IReqProps {
const Requirement = (props: IReqProps): React.ReactElement => {
return (
<Typography sx={{ display: "flex", alignItems: "center", color: props.color }}>
<Typography
sx={{ display: "flex", alignItems: "center", color: props.fulfilled ? props.color : Settings.theme.error }}
>
{props.fulfilled ? <CheckBox sx={{ mr: 1 }} /> : <CheckBoxOutlineBlank sx={{ mr: 1 }} />}
{props.value}
</Typography>
@ -138,7 +145,7 @@ export const PurchasableAugmentations = (props: IPurchasableAugsProps): React.Re
<Container
maxWidth="lg"
disableGutters
sx={{ mx: 0, display: "grid", gridTemplateColumns: "repeat(1, 1fr)", gap: 1 }}
sx={{ mx: 0, display: "grid", gridTemplateColumns: "repeat(1, 1fr)", gap: 0.75 }}
>
{props.augNames.map((augName: string) => (
<PurchasableAugmentation key={augName} parent={props} augName={augName} owned={false} />
@ -176,11 +183,12 @@ export function PurchasableAugmentation(props: IPurchasableAugProps): React.Reac
return (
<Paper
sx={{
p: 1,
p: 0.5,
display: "grid",
gridTemplateColumns: "minmax(0, 4fr) 1fr",
gridTemplateColumns: "minmax(0, 4fr) 1.4fr",
gap: 1,
opacity: props.owned ? 0.75 : 1,
minWidth: "1100px",
}}
>
<>
@ -192,13 +200,13 @@ export function PurchasableAugmentation(props: IPurchasableAugProps): React.Reac
})
}
disabled={!props.parent.canPurchase(props.parent.player, aug) || props.owned}
sx={{ width: "48px", height: "48px", float: "left", clear: "none", mr: 1 }}
sx={{ width: "48px", height: "36px", float: "left", clear: "none", mr: 1 }}
>
{props.owned ? "Owned" : "Buy"}
</Button>
<Box sx={{ maxWidth: props.owned ? "100%" : "85%" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "grid", alignItems: "center", gridTemplateAreas: `"title exclusive prereqs"` }}>
<Tooltip
title={
<>
@ -211,34 +219,33 @@ export function PurchasableAugmentation(props: IPurchasableAugProps): React.Reac
</>
}
>
<Info sx={{ mr: 1 }} color="info" />
<Typography
sx={{
gridArea: "title",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
overflow: "hidden",
color:
props.owned || !props.parent.canPurchase(props.parent.player, aug)
? Settings.theme.disabled
: Settings.theme.primary,
}}
>
{aug.name}
{aug.name === AugmentationNames.NeuroFluxGovernor && ` - Level ${aug.getLevel(props.parent.player)}`}
</Typography>
</Tooltip>
<Typography
variant="h6"
sx={{
textOverflow: "ellipsis",
whiteSpace: "nowrap",
overflow: "hidden",
color:
props.owned || !props.parent.canPurchase(props.parent.player, aug)
? Settings.theme.disabled
: Settings.theme.primary,
}}
>
{aug.name}
{aug.name === AugmentationNames.NeuroFluxGovernor && ` - Level ${aug.getLevel(props.parent.player)}`}
</Typography>
{aug.factions.length === 1 && !props.parent.sleeveAugs && (
<Exclusive player={props.parent.player} aug={aug} />
)}
{aug.prereqs.length > 0 && !props.parent.sleeveAugs && <PreReqs player={props.parent.player} aug={aug} />}
</Box>
{aug.prereqs.length > 0 && !props.parent.sleeveAugs && <PreReqs player={props.parent.player} aug={aug} />}
</Box>
</Box>
{props.owned || (
<Box sx={{ display: "grid", alignItems: "center", justifyItems: "left" }}>
<Box sx={{ display: "grid", alignItems: "center", gridTemplateColumns: "1fr 1fr" }}>
<Requirement
fulfilled={cost === 0 || props.parent.player.money > cost}
value={numeralWrapper.formatMoney(cost)}