diff --git a/src/Gang/ui/EquipmentsSubpage.tsx b/src/Gang/ui/EquipmentsSubpage.tsx index b5f2b1e60..b2f53c0d8 100644 --- a/src/Gang/ui/EquipmentsSubpage.tsx +++ b/src/Gang/ui/EquipmentsSubpage.tsx @@ -2,20 +2,27 @@ * React Component for the popup that manages gang members upgrades */ import React, { useState } from "react"; -import { formatNumber } from "../../utils/StringHelperFunctions"; -import { numeralWrapper } from "../../ui/numeralFormat"; -import { GangMemberUpgrades } from "../GangMemberUpgrades"; -import { GangMemberUpgrade } from "../GangMemberUpgrade"; -import { Money } from "../../ui/React/Money"; import { useGang } from "./Context"; -import { GangMember } from "../GangMember"; -import { UpgradeType } from "../data/upgrades"; -import { use } from "../../ui/Context"; +import { generateTableRow } from "./GangMemberStats"; + import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; import Tooltip from "@mui/material/Tooltip"; import Box from "@mui/material/Box"; import Paper from "@mui/material/Paper"; +import Select, { SelectChangeEvent } from "@mui/material/Select"; +import { MenuItem, Table, TableBody, TextField } from "@mui/material"; +import SearchIcon from "@mui/icons-material/Search"; + +import { numeralWrapper } from "../../ui/numeralFormat"; +import { GangMemberUpgrades } from "../GangMemberUpgrades"; +import { GangMemberUpgrade } from "../GangMemberUpgrade"; +import { Money } from "../../ui/React/Money"; +import { GangMember } from "../GangMember"; +import { UpgradeType } from "../data/upgrades"; +import { use } from "../../ui/Context"; +import { Settings } from "../../Settings/Settings"; +import { characterOverviewStyles as useStyles } from "../../ui/React/CharacterOverview"; interface INextRevealProps { upgrades: string[]; @@ -46,12 +53,10 @@ function NextReveal(props: INextRevealProps): React.ReactElement { function PurchasedUpgrade({ upgName }: { upgName: string }): React.ReactElement { const upg = GangMemberUpgrades[upgName]; return ( - - - }> - {upg.name} - - + + }> + {upg.name} + ); } @@ -72,8 +77,8 @@ function UpgradeButton(props: IUpgradeButtonProps): React.ReactElement { return ( }> - {props.upg.name} - @@ -86,12 +91,16 @@ interface IPanelProps { } function GangMemberUpgradePanel(props: IPanelProps): React.ReactElement { + const classes = useStyles(); const gang = useGang(); const player = use.Player(); const setRerender = useState(false)[1]; + const [currentCategory, setCurrentCategory] = useState("Weapons"); + function rerender(): void { setRerender((old) => !old); } + function filterUpgrades(list: string[], type: UpgradeType): GangMemberUpgrade[] { return Object.keys(GangMemberUpgrades) .filter((upgName: string) => { @@ -103,12 +112,26 @@ function GangMemberUpgradePanel(props: IPanelProps): React.ReactElement { }) .map((upgName: string) => GangMemberUpgrades[upgName]); } + + const onChange = (event: SelectChangeEvent): void => { + setCurrentCategory(event.target.value); + rerender() + } + const weaponUpgrades = filterUpgrades(props.member.upgrades, UpgradeType.Weapon); const armorUpgrades = filterUpgrades(props.member.upgrades, UpgradeType.Armor); const vehicleUpgrades = filterUpgrades(props.member.upgrades, UpgradeType.Vehicle); const rootkitUpgrades = filterUpgrades(props.member.upgrades, UpgradeType.Rootkit); const augUpgrades = filterUpgrades(props.member.augmentations, UpgradeType.Augmentation); + const categories: { [key: string]: (GangMemberUpgrade[] | UpgradeType)[] } = { + 'Weapons': [weaponUpgrades, UpgradeType.Weapon], + 'Armor': [armorUpgrades, UpgradeType.Armor], + 'Vehicles': [vehicleUpgrades, UpgradeType.Vehicle], + 'Rootkits': [rootkitUpgrades, UpgradeType.Rootkit], + 'Augmentations': [augUpgrades, UpgradeType.Augmentation] + }; + const asc = { hack: props.member.calculateAscensionMult(props.member.hack_asc_points), str: props.member.calculateAscensionMult(props.member.str_asc_points), @@ -119,26 +142,89 @@ function GangMemberUpgradePanel(props: IPanelProps): React.ReactElement { }; return ( - - {props.member.name} ({props.member.task}) - - - Hack: {props.member.hack} (x - {formatNumber(props.member.hack_mult * asc.hack, 2)})
- Str: {props.member.str} (x - {formatNumber(props.member.str_mult * asc.str, 2)})
- Def: {props.member.def} (x - {formatNumber(props.member.def_mult * asc.def, 2)})
- Dex: {props.member.dex} (x - {formatNumber(props.member.dex_mult * asc.dex, 2)})
- Agi: {props.member.agi} (x - {formatNumber(props.member.agi_mult * asc.agi, 2)})
- Cha: {props.member.cha} (x - {formatNumber(props.member.cha_mult * asc.cha, 2)}) - - - Purchased Upgrades: -
+ + + + {props.member.name} ({props.member.task}) + + + Hk: x{numeralWrapper.formatMultiplier(props.member.hack_mult * asc.hack)}(x + {numeralWrapper.formatMultiplier(props.member.hack_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.hack)}{" "} + Asc) +
+ St: x{numeralWrapper.formatMultiplier(props.member.str_mult * asc.str)} + (x{numeralWrapper.formatMultiplier(props.member.str_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.str)}{" "} + Asc) +
+ Df: x{numeralWrapper.formatMultiplier(props.member.def_mult * asc.def)} + (x{numeralWrapper.formatMultiplier(props.member.def_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.def)}{" "} + Asc) +
+ Dx: x{numeralWrapper.formatMultiplier(props.member.dex_mult * asc.dex)} + (x{numeralWrapper.formatMultiplier(props.member.dex_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.dex)}{" "} + Asc) +
+ Ag: x{numeralWrapper.formatMultiplier(props.member.agi_mult * asc.agi)} + (x{numeralWrapper.formatMultiplier(props.member.agi_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.agi)}{" "} + Asc) +
+ Ch: x{numeralWrapper.formatMultiplier(props.member.cha_mult * asc.cha)} + (x{numeralWrapper.formatMultiplier(props.member.cha_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.cha)}{" "} + Asc) + + } + > + + + {generateTableRow("Hacking", props.member.hack, props.member.hack_exp, Settings.theme.hack, classes)} + {generateTableRow("Strength", props.member.str, props.member.str_exp, Settings.theme.combat, classes)} + {generateTableRow("Defense", props.member.def, props.member.def_exp, Settings.theme.combat, classes)} + {generateTableRow("Dexterity", props.member.dex, props.member.dex_exp, Settings.theme.combat, classes)} + {generateTableRow("Agility", props.member.agi, props.member.agi_exp, Settings.theme.combat, classes)} + {generateTableRow("Charisma", props.member.cha, props.member.cha_exp, Settings.theme.cha, classes)} + +
+ + + + + + + + + {(categories[currentCategory][0] as GangMemberUpgrade[]).length === 0 && ( + + All upgrades owned! + + )} + + {(categories[currentCategory][0] as GangMemberUpgrade[]).map((upg) => ( + + ))} + + + + + + + Purchased Upgrades: + {props.member.upgrades.map((upg: string) => ( ))} @@ -146,59 +232,22 @@ function GangMemberUpgradePanel(props: IPanelProps): React.ReactElement { ))} - - - - Weapons - - {weaponUpgrades.map((upg) => ( - - ))} - - - - - Armor - - {armorUpgrades.map((upg) => ( - - ))} - - - - - Vehicles - - {vehicleUpgrades.map((upg) => ( - - ))} - - - - - Rootkits - - {rootkitUpgrades.map((upg) => ( - - ))} - - - - - Augmentations - - {augUpgrades.map((upg) => ( - - ))} - - - - + ); } export function EquipmentsSubpage(): React.ReactElement { const gang = useGang(); + const [filter, setFilter] = useState(""); + + + const handleFilterChange = (event: React.ChangeEvent): void => { + setFilter(event.target.value.toLowerCase()); + } + + const members = gang.members + .filter((member) => member && member.name.toLowerCase().includes(filter)); + return ( <> } > - Discount: -{numeralWrapper.formatPercentage(1 - 1 / gang.getDiscount())} + Discount: -{numeralWrapper.formatPercentage(1 - 1 / gang.getDiscount())} - {gang.members.map((member: GangMember) => ( - - ))} + + , + spellCheck: false + }} + placeholder="Filter by member name" + sx={{ m: 1, width: '15%' }} + /> + + + {members.map((member: GangMember) => ( + + ))} + ); } diff --git a/src/Gang/ui/GangMemberStats.tsx b/src/Gang/ui/GangMemberStats.tsx index 676d78f01..859057837 100644 --- a/src/Gang/ui/GangMemberStats.tsx +++ b/src/Gang/ui/GangMemberStats.tsx @@ -25,6 +25,28 @@ interface IProps { member: GangMember; } +export const generateTableRow = ( + name: string, + level: number, + exp: number, + color: string, + // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types + classes: any +): React.ReactElement => { + return ( + + + {name} + + + + {formatNumber(level, 0)} ({numeralWrapper.formatExp(exp)} exp) + + + + ) +} + export function GangMemberStats(props: IProps): React.ReactElement { const classes = useStyles(); @@ -37,20 +59,7 @@ export function GangMemberStats(props: IProps): React.ReactElement { cha: props.member.calculateAscensionMult(props.member.cha_asc_points), }; - const generateTableRow = (name: string, level: number, exp: number, color: string): React.ReactElement => { - return ( - - - {name} - - - - {formatNumber(level, 0)} ({numeralWrapper.formatExp(exp)} exp) - - - - ) - } + const gang = useGang(); const data = [ @@ -93,12 +102,12 @@ export function GangMemberStats(props: IProps): React.ReactElement { > - {generateTableRow("Hacking", props.member.hack, props.member.hack_exp, Settings.theme.hack)} - {generateTableRow("Strength", props.member.str, props.member.str_exp, Settings.theme.combat)} - {generateTableRow("Defense", props.member.def, props.member.def_exp, Settings.theme.combat)} - {generateTableRow("Dexterity", props.member.dex, props.member.dex_exp, Settings.theme.combat)} - {generateTableRow("Agility", props.member.agi, props.member.agi_exp, Settings.theme.combat)} - {generateTableRow("Charisma", props.member.cha, props.member.cha_exp, Settings.theme.cha)} + {generateTableRow("Hacking", props.member.hack, props.member.hack_exp, Settings.theme.hack, classes)} + {generateTableRow("Strength", props.member.str, props.member.str_exp, Settings.theme.combat, classes)} + {generateTableRow("Defense", props.member.def, props.member.def_exp, Settings.theme.combat, classes)} + {generateTableRow("Dexterity", props.member.dex, props.member.dex_exp, Settings.theme.combat, classes)} + {generateTableRow("Agility", props.member.agi, props.member.agi_exp, Settings.theme.combat, classes)} + {generateTableRow("Charisma", props.member.cha, props.member.cha_exp, Settings.theme.cha, classes)}