Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-12-22 06:02:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

UI: Allow filtering graftable augmentations (#1570)

Browse Source
This commit is contained in:
catloversg 2024-08-15 12:18:27 +07:00 committed by GitHub
parent dbeaef94a2
commit 440c074606
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 38 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/PersonObjects/Grafting/ui/GraftingRoot.tsx
View File

@ -4,8 +4,8 @@ import { Player } from "@player";
import { AugmentationName } from "@enums"; import { AugmentationName } from "@enums";
import React, { useState } from "react"; import React, { useState } from "react";
import { CheckBox, CheckBoxOutlineBlank, Construction } from "@mui/icons-material"; import { CheckBox, CheckBoxOutlineBlank, Construction, Search } from "@mui/icons-material";
import { Box, Button, Container, List, ListItemButton, Paper, Typography } from "@mui/material"; import { Box, Button, Container, List, ListItemButton, Paper, TextField, Typography } from "@mui/material";
import { GraftingWork } from "../../../Work/GraftingWork"; import { GraftingWork } from "../../../Work/GraftingWork";
import { Augmentations } from "../../../Augmentation/Augmentations"; import { Augmentations } from "../../../Augmentation/Augmentations";
@ -66,17 +66,25 @@ export const GraftingRoot = (): React.ReactElement => {
const [selectedAug, setSelectedAug] = useState(getGraftingAvailableAugs()[0]); const [selectedAug, setSelectedAug] = useState(getGraftingAvailableAugs()[0]);
const [graftOpen, setGraftOpen] = useState(false); const [graftOpen, setGraftOpen] = useState(false);
const [filterText, setFilterText] = useState("");
const selectedAugmentation = Augmentations[selectedAug]; const selectedAugmentation = Augmentations[selectedAug];
const rerender = useCycleRerender(); const rerender = useCycleRerender();
const matches = (s1: string, s2: string) => s1.toLowerCase().includes(s2.toLowerCase());
const getAugsSorted = (): AugmentationName[] => { const getAugsSorted = (): AugmentationName[] => {
const augs = getGraftingAvailableAugs(); const augs = getGraftingAvailableAugs();
switch (Settings.PurchaseAugmentationsOrder) { if (Settings.PurchaseAugmentationsOrder === PurchaseAugmentationsOrderSetting.Cost) {
case PurchaseAugmentationsOrderSetting.Cost: augs.sort((a, b) => graftableAugmentations[a].cost - graftableAugmentations[b].cost);
return augs.sort((a, b) => graftableAugmentations[a].cost - graftableAugmentations[b].cost);
default:
return augs;
} }
if (filterText !== "") {
return augs.filter(
(aug: AugmentationName) =>
matches(Augmentations[aug].name, filterText) ||
matches(Augmentations[aug].info, filterText) ||
matches(Augmentations[aug].stats, filterText),
);
}
return augs;
}; };
const switchSortOrder = (newOrder: PurchaseAugmentationsOrderSetting): void => { const switchSortOrder = (newOrder: PurchaseAugmentationsOrderSetting): void => {
@ -114,19 +122,29 @@ export const GraftingRoot = (): React.ReactElement => {
</Paper> </Paper>
{getGraftingAvailableAugs().length > 0 ? ( {getGraftingAvailableAugs().length > 0 ? (
<Paper sx={{ mb: 1, width: "fit-content", display: "grid", gridTemplateColumns: "1fr 3fr" }}> <Paper sx={{ mb: 1, width: "fit-content", display: "grid", gridTemplateColumns: "1fr 3fr" }}>
<List sx={{ height: 400, overflowY: "scroll", borderRight: `1px solid ${Settings.theme.welllight}` }}> <Box>
{getAugsSorted().map((k, i) => ( <TextField
<ListItemButton key={i + 1} onClick={() => setSelectedAug(k)} selected={selectedAug === k}> style={{ width: "100%" }}
<Typography value={filterText}
sx={{ onChange={(e) => {
color: canGraft(graftableAugmentations[k]) ? Settings.theme.primary : Settings.theme.disabled, setFilterText(e.target.value);
}} }}
> InputProps={{ startAdornment: <Search /> }}
{k} />
</Typography> <List sx={{ height: 400, overflowY: "scroll", borderRight: `1px solid ${Settings.theme.welllight}` }}>
</ListItemButton> {getAugsSorted().map((k, i) => (
))} <ListItemButton key={i + 1} onClick={() => setSelectedAug(k)} selected={selectedAug === k}>
</List> <Typography
sx={{
color: canGraft(graftableAugmentations[k]) ? Settings.theme.primary : Settings.theme.disabled,
}}
>
{k}
</Typography>
</ListItemButton>
))}
</List>
</Box>
<Box sx={{ m: 1 }}> <Box sx={{ m: 1 }}>
<Typography variant="h6" sx={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}> <Typography variant="h6" sx={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}>
<Construction sx={{ mr: 1 }} /> {selectedAug} <Construction sx={{ mr: 1 }} /> {selectedAug}