mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-12-22 06:02:26 +01:00
UI: Allow filtering graftable augmentations (#1570)
This commit is contained in:
parent
dbeaef94a2
commit
440c074606
@ -4,8 +4,8 @@ import { Player } from "@player";
|
||||
import { AugmentationName } from "@enums";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { CheckBox, CheckBoxOutlineBlank, Construction } from "@mui/icons-material";
|
||||
import { Box, Button, Container, List, ListItemButton, Paper, Typography } from "@mui/material";
|
||||
import { CheckBox, CheckBoxOutlineBlank, Construction, Search } from "@mui/icons-material";
|
||||
import { Box, Button, Container, List, ListItemButton, Paper, TextField, Typography } from "@mui/material";
|
||||
|
||||
import { GraftingWork } from "../../../Work/GraftingWork";
|
||||
import { Augmentations } from "../../../Augmentation/Augmentations";
|
||||
@ -66,17 +66,25 @@ export const GraftingRoot = (): React.ReactElement => {
|
||||
|
||||
const [selectedAug, setSelectedAug] = useState(getGraftingAvailableAugs()[0]);
|
||||
const [graftOpen, setGraftOpen] = useState(false);
|
||||
const [filterText, setFilterText] = useState("");
|
||||
const selectedAugmentation = Augmentations[selectedAug];
|
||||
const rerender = useCycleRerender();
|
||||
|
||||
const matches = (s1: string, s2: string) => s1.toLowerCase().includes(s2.toLowerCase());
|
||||
const getAugsSorted = (): AugmentationName[] => {
|
||||
const augs = getGraftingAvailableAugs();
|
||||
switch (Settings.PurchaseAugmentationsOrder) {
|
||||
case PurchaseAugmentationsOrderSetting.Cost:
|
||||
return augs.sort((a, b) => graftableAugmentations[a].cost - graftableAugmentations[b].cost);
|
||||
default:
|
||||
return augs;
|
||||
if (Settings.PurchaseAugmentationsOrder === PurchaseAugmentationsOrderSetting.Cost) {
|
||||
augs.sort((a, b) => graftableAugmentations[a].cost - graftableAugmentations[b].cost);
|
||||
}
|
||||
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 => {
|
||||
@ -114,6 +122,15 @@ export const GraftingRoot = (): React.ReactElement => {
|
||||
</Paper>
|
||||
{getGraftingAvailableAugs().length > 0 ? (
|
||||
<Paper sx={{ mb: 1, width: "fit-content", display: "grid", gridTemplateColumns: "1fr 3fr" }}>
|
||||
<Box>
|
||||
<TextField
|
||||
style={{ width: "100%" }}
|
||||
value={filterText}
|
||||
onChange={(e) => {
|
||||
setFilterText(e.target.value);
|
||||
}}
|
||||
InputProps={{ startAdornment: <Search /> }}
|
||||
/>
|
||||
<List sx={{ height: 400, overflowY: "scroll", borderRight: `1px solid ${Settings.theme.welllight}` }}>
|
||||
{getAugsSorted().map((k, i) => (
|
||||
<ListItemButton key={i + 1} onClick={() => setSelectedAug(k)} selected={selectedAug === k}>
|
||||
@ -127,6 +144,7 @@ export const GraftingRoot = (): React.ReactElement => {
|
||||
</ListItemButton>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
<Box sx={{ m: 1 }}>
|
||||
<Typography variant="h6" sx={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}>
|
||||
<Construction sx={{ mr: 1 }} /> {selectedAug}
|
||||
|
Loading…
Reference in New Issue
Block a user