Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2025-01-01 19:07:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Move elements around for clarity

Browse Source
This commit is contained in:
nickofolas 2022-04-22 16:51:36 -05:00
parent ec53a80551
commit f6a9eb746a
1 changed files with 111 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -64,6 +64,89 @@ import { Augmentation } from "../Augmentation";
// ); // );
// } // }
interface IPreReqsProps {
player: IPlayer;
aug: Augmentation;
}
const PreReqs = (props: IPreReqsProps): React.ReactElement => {
const ownedPreReqs = props.aug.prereqs.filter((aug) => props.player.hasAugmentation(aug));
const hasPreReqs = props.aug.prereqs.length > 0 && ownedPreReqs.length === props.aug.prereqs.length;
return (
<Tooltip
title={
<Typography sx={{ color: Settings.theme.money }}>
This Augmentation has the following pre-requisite(s):
{props.aug.prereqs.map((preAug) => (
<Requirement
fulfilled={props.player.hasAugmentation(preAug)}
value={preAug}
color={Settings.theme.money}
key={preAug}
/>
))}
</Typography>
}
>
<Typography
variant="body2"
sx={{
display: "flex",
alignItems: "center",
color: hasPreReqs ? Settings.theme.successlight : Settings.theme.error,
}}
>
{hasPreReqs ? (
<>
<CheckCircle fontSize="small" sx={{ mr: 1 }} />
Pre-requisites Owned
</>
) : (
<>
<Report fontSize="small" sx={{ mr: 1 }} />
Missing {props.aug.prereqs.length - ownedPreReqs.length} pre-requisite(s)
</>
)}
</Typography>
</Tooltip>
);
};
interface IExclusiveProps {
player: IPlayer;
aug: Augmentation;
}
const Exclusive = (props: IExclusiveProps): React.ReactElement => {
return (
<Tooltip
title={
<Typography sx={{ color: Settings.theme.money }}>
This Augmentation can only be acquired from the following source(s):
<ul>
<li>
<b>{props.aug.factions[0]}</b> faction
</li>
{props.player.canAccessGang() && (
<li>
Certain <b>gangs</b>
</li>
)}
{props.player.canAccessGrafting() && (
<li>
<b>Grafting</b>
</li>
)}
</ul>
</Typography>
}
>
<Verified sx={{ ml: 1, color: Settings.theme.money }} />
</Tooltip>
);
};
interface IReqProps { interface IReqProps {
value: string; value: string;
color: string; color: string;
@ -109,11 +192,8 @@ export const PurchaseableAugmentations = (props: IPurchaseableAugsProps): React.
</> </>
); );
const ownedPreReqs = aug.prereqs.filter((aug) => props.player.hasAugmentation(aug));
const hasPreReqs = aug.prereqs.length > 0 && ownedPreReqs.length === aug.prereqs.length;
return ( return (
<Paper key={augName} sx={{ p: 1, display: "grid", gridTemplateColumns: "3fr 1fr", gap: 1 }}> <Paper key={augName} sx={{ p: 1, display: "grid", gridTemplateColumns: "minmax(0, 3fr) 1fr", gap: 1 }}>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
<Button <Button
onClick={() => onClick={() =>
@ -127,55 +207,36 @@ export const PurchaseableAugmentations = (props: IPurchaseableAugsProps): React.
Buy Buy
</Button> </Button>
<Box> <Box sx={{ maxWidth: "85%" }}>
<Typography variant="h6" sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
<Tooltip title={<Typography>{description}</Typography>}> <Tooltip
title={
<>
<Typography variant="h5">
{augName}
{augName === AugmentationNames.NeuroFluxGovernor && ` - Level ${getNextNeuroFluxLevel()}`}
</Typography>
<Typography>{description}</Typography>
</>
}
>
<Info sx={{ mr: 1 }} color="info" /> <Info sx={{ mr: 1 }} color="info" />
</Tooltip> </Tooltip>
{aug.factions.length === 1 && ( <Typography
<Tooltip80 variant="h6"
title={ sx={{
<Typography sx={{ color: Settings.theme.info }}>Faction-Exclusive Augmentation</Typography> textOverflow: "ellipsis",
} whiteSpace: "nowrap",
> overflow: "hidden",
<Verified sx={{ mr: 1 }} color="info" /> }}
</Tooltip>
)}
{aug.name}
</Typography>
{aug.prereqs.length > 0 && (
<Tooltip
title={aug.prereqs.map((preAug) => (
<Requirement
fulfilled={props.player.hasAugmentation(preAug)}
value={preAug}
color={Settings.theme.money}
key={preAug}
/>
))}
> >
<Typography {aug.name}
sx={{ {aug.name === AugmentationNames.NeuroFluxGovernor && ` - Level ${getNextNeuroFluxLevel()}`}
display: "flex", </Typography>
alignItems: "center", {aug.factions.length === 1 && <Exclusive player={props.player} aug={aug} />}
color: hasPreReqs ? Settings.theme.successlight : Settings.theme.error, </Box>
}}
> {aug.prereqs.length > 0 && <PreReqs player={props.player} aug={aug} />}
{hasPreReqs ? (
<>
<CheckCircle sx={{ mr: 1 }} />
Pre-Requisites Owned
</>
) : (
<>
<Report sx={{ mr: 1 }} />
Missing Pre-Requisites
</>
)}
</Typography>
</Tooltip>
)}
</Box> </Box>
</Box> </Box>