Initial densification of Augments list

This commit is contained in:
nickofolas 2022-05-21 19:40:27 -05:00
parent 5f9fb117b0
commit ea2f412ef1

@ -42,11 +42,13 @@ const PreReqs = (props: IPreReqsProps): React.ReactElement => {
} }
> >
<Typography <Typography
variant="body2"
sx={{ sx={{
ml: 1,
fontSize: "0.9rem",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
color: hasPreReqs ? Settings.theme.successlight : Settings.theme.error, color: hasPreReqs ? Settings.theme.successlight : Settings.theme.error,
gridArea: "prereqs",
}} }}
> >
{hasPreReqs ? ( {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> </Tooltip>
); );
}; };
@ -176,11 +181,12 @@ export function PurchasableAugmentation(props: IPurchasableAugProps): React.Reac
return ( return (
<Paper <Paper
sx={{ sx={{
p: 1, p: 0.5,
display: "grid", display: "grid",
gridTemplateColumns: "minmax(0, 4fr) 1fr", gridTemplateColumns: "minmax(0, 4fr) 1.4fr",
gap: 1, gap: 1,
opacity: props.owned ? 0.75 : 1, opacity: props.owned ? 0.75 : 1,
minWidth: "1100px",
}} }}
> >
<> <>
@ -192,13 +198,13 @@ export function PurchasableAugmentation(props: IPurchasableAugProps): React.Reac
}) })
} }
disabled={!props.parent.canPurchase(props.parent.player, aug) || props.owned} 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"} {props.owned ? "Owned" : "Buy"}
</Button> </Button>
<Box sx={{ maxWidth: props.owned ? "100%" : "85%" }}> <Box sx={{ maxWidth: props.owned ? "100%" : "85%" }}>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "grid", alignItems: "center", gridTemplateAreas: `"title exclusive prereqs"` }}>
<Tooltip <Tooltip
title={ title={
<> <>
@ -212,8 +218,8 @@ export function PurchasableAugmentation(props: IPurchasableAugProps): React.Reac
} }
> >
<Typography <Typography
variant="h6"
sx={{ sx={{
gridArea: "title",
textOverflow: "ellipsis", textOverflow: "ellipsis",
whiteSpace: "nowrap", whiteSpace: "nowrap",
overflow: "hidden", overflow: "hidden",
@ -227,17 +233,17 @@ export function PurchasableAugmentation(props: IPurchasableAugProps): React.Reac
{aug.name === AugmentationNames.NeuroFluxGovernor && ` - Level ${aug.getLevel(props.parent.player)}`} {aug.name === AugmentationNames.NeuroFluxGovernor && ` - Level ${aug.getLevel(props.parent.player)}`}
</Typography> </Typography>
</Tooltip> </Tooltip>
{aug.factions.length === 1 && !props.parent.sleeveAugs && ( {aug.factions.length === 1 && !props.parent.sleeveAugs && (
<Exclusive player={props.parent.player} aug={aug} /> <Exclusive player={props.parent.player} aug={aug} />
)} )}
{aug.prereqs.length > 0 && !props.parent.sleeveAugs && <PreReqs player={props.parent.player} aug={aug} />}
</Box> </Box>
{aug.prereqs.length > 0 && !props.parent.sleeveAugs && <PreReqs player={props.parent.player} aug={aug} />}
</Box> </Box>
</Box> </Box>
{props.owned || ( {props.owned || (
<Box sx={{ display: "grid", alignItems: "center", justifyItems: "left" }}> <Box sx={{ display: "grid", alignItems: "center", gridTemplateColumns: "1fr 1fr" }}>
<Requirement <Requirement
fulfilled={cost === 0 || props.parent.player.money > cost} fulfilled={cost === 0 || props.parent.player.money > cost}
value={numeralWrapper.formatMoney(cost)} value={numeralWrapper.formatMoney(cost)}