From 0ae8b7218820f55630480fd61f04656b55f2319e Mon Sep 17 00:00:00 2001 From: Olivier Gagnon Date: Fri, 1 Oct 2021 15:19:37 -0400 Subject: [PATCH 1/3] 100% mui I think --- src/Bladeburner/ui/AllPages.tsx | 1 - src/Gang/IGang.ts | 2 +- ...{AscensionPopup.tsx => AscensionModal.tsx} | 38 ++- src/Gang/ui/BonusTime.tsx | 25 +- src/Gang/ui/Context.ts | 10 + src/Gang/ui/EquipmentsSubpage.tsx | 220 +++++++++++++++++ src/Gang/ui/GangMemberAccordion.tsx | 31 ++- src/Gang/ui/GangMemberAccordionContent.tsx | 23 +- src/Gang/ui/GangMemberList.tsx | 50 +--- src/Gang/ui/GangMemberStats.tsx | 149 ++++++------ src/Gang/ui/GangMemberUpgradePopup.tsx | 224 ------------------ src/Gang/ui/GangRoot.tsx | 55 ++--- src/Gang/ui/GangStats.tsx | 107 +++++---- src/Gang/ui/ManagementSubpage.tsx | 26 +- src/Gang/ui/RecruitButton.tsx | 45 ++-- .../ui/{RecruitPopup.tsx => RecruitModal.tsx} | 48 ++-- src/Gang/ui/TaskDescription.tsx | 3 +- src/Gang/ui/TaskSelector.tsx | 35 +-- src/Gang/ui/TerritorySubpage.tsx | 198 +++++++++------- src/Locations/ui/PurchaseServerModal.tsx | 1 - src/ui/React/BBAccordion.tsx | 84 ------- src/ui/React/MuiButton.tsx | 46 ---- src/ui/React/MuiPaper.tsx | 32 --- src/ui/React/Reputation.tsx | 2 +- src/ui/React/StdButton.tsx | 60 ----- 25 files changed, 652 insertions(+), 863 deletions(-) rename src/Gang/ui/{AscensionPopup.tsx => AscensionModal.tsx} (83%) create mode 100644 src/Gang/ui/Context.ts create mode 100644 src/Gang/ui/EquipmentsSubpage.tsx delete mode 100644 src/Gang/ui/GangMemberUpgradePopup.tsx rename src/Gang/ui/{RecruitPopup.tsx => RecruitModal.tsx} (53%) delete mode 100644 src/ui/React/BBAccordion.tsx delete mode 100644 src/ui/React/MuiButton.tsx delete mode 100644 src/ui/React/MuiPaper.tsx delete mode 100644 src/ui/React/StdButton.tsx diff --git a/src/Bladeburner/ui/AllPages.tsx b/src/Bladeburner/ui/AllPages.tsx index 383e89900..36f354ee6 100644 --- a/src/Bladeburner/ui/AllPages.tsx +++ b/src/Bladeburner/ui/AllPages.tsx @@ -10,7 +10,6 @@ import { IPlayer } from "../../PersonObjects/IPlayer"; import Tabs from "@mui/material/Tabs"; import Tab from "@mui/material/Tab"; import Box from "@mui/material/Box"; -import Paper from "@mui/material/Paper"; interface IProps { bladeburner: IBladeburner; diff --git a/src/Gang/IGang.ts b/src/Gang/IGang.ts index 00d7911cc..827be1914 100644 --- a/src/Gang/IGang.ts +++ b/src/Gang/IGang.ts @@ -38,7 +38,7 @@ export interface IGang { getWantedPenalty(): number; calculatePower(): number; killMember(member: GangMember): void; - ascendMember(member: GangMember, workerScript: WorkerScript): IAscensionResult; + ascendMember(member: GangMember, workerScript?: WorkerScript): IAscensionResult; getDiscount(): number; getAllTaskNames(): string[]; getUpgradeCost(upg: GangMemberUpgrade): number; diff --git a/src/Gang/ui/AscensionPopup.tsx b/src/Gang/ui/AscensionModal.tsx similarity index 83% rename from src/Gang/ui/AscensionPopup.tsx rename to src/Gang/ui/AscensionModal.tsx index 09476dd6e..1c22fc329 100644 --- a/src/Gang/ui/AscensionPopup.tsx +++ b/src/Gang/ui/AscensionModal.tsx @@ -3,20 +3,23 @@ * ascension of a gang member. */ import React, { useState, useEffect } from "react"; -import { Gang } from "../Gang"; import { GangMember } from "../GangMember"; import { numeralWrapper } from "../../ui/numeralFormat"; -import { removePopup } from "../../ui/React/createPopup"; import { dialogBoxCreate } from "../../ui/React/DialogBox"; +import { Modal } from "../../ui/React/Modal"; +import { useGang } from "./Context"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; interface IProps { + open: boolean; + onClose: () => void; member: GangMember; - gang: Gang; - popupId: string; onAscend: () => void; } -export function AscensionPopup(props: IProps): React.ReactElement { +export function AscensionModal(props: IProps): React.ReactElement { + const gang = useGang(); const setRerender = useState(false)[1]; useEffect(() => { @@ -26,9 +29,9 @@ export function AscensionPopup(props: IProps): React.ReactElement { function confirm(): void { props.onAscend(); - const res = props.gang.ascendMember(props.member); + const res = gang.ascendMember(props.member); dialogBoxCreate( -

+ You ascended {props.member.name}!

Your gang lost {numeralWrapper.formatRespect(res.respect)} respect. @@ -48,13 +51,13 @@ export function AscensionPopup(props: IProps): React.ReactElement {
Charisma: x{numeralWrapper.format(res.cha, "0.000")}
-

, + , ); - removePopup(props.popupId); + props.onClose(); } function cancel(): void { - removePopup(props.popupId); + props.onClose(); } // const ascendBenefits = props.member.getAscensionResults(); @@ -62,8 +65,8 @@ export function AscensionPopup(props: IProps): React.ReactElement { const postAscend = props.member.getAscensionMultsAfterAscend(); return ( - <> - 
+    
+      
         Are you sure you want to ascend this member? They will lose all of
         

         their non-Augmentation upgrades and their stats will reset back to 1.
@@ -92,13 +95,8 @@ export function AscensionPopup(props: IProps): React.ReactElement {
         Charisma: x{numeralWrapper.format(preAscend.cha, "0.000")} => x
         {numeralWrapper.format(postAscend.cha, "0.000")}
         

-
- - - + + + ); } diff --git a/src/Gang/ui/BonusTime.tsx b/src/Gang/ui/BonusTime.tsx index ec309ab4f..69364ed1e 100644 --- a/src/Gang/ui/BonusTime.tsx +++ b/src/Gang/ui/BonusTime.tsx @@ -5,6 +5,9 @@ import * as React from "react"; import { Gang } from "../Gang"; import { CONSTANTS } from "../../Constants"; import { convertTimeMsToTimeElapsedString } from "../../utils/StringHelperFunctions"; +import Typography from "@mui/material/Typography"; +import Tooltip from "@mui/material/Tooltip"; +import Box from "@mui/material/Box"; interface IProps { gang: Gang; @@ -15,15 +18,17 @@ export function BonusTime(props: IProps): React.ReactElement { if ((props.gang.storedCycles / CyclerPerSecond) * 1000 <= 5000) return <>; const bonusMillis = (props.gang.storedCycles / CyclerPerSecond) * 1000; return ( - <> -

- Bonus time: {convertTimeMsToTimeElapsedString(bonusMillis)} - - You gain bonus time while offline or when the game is inactive (e.g. when the tab is throttled by the - browser). Bonus time makes the Gang mechanic progress faster, up to 5x the normal speed. - -

-
- + + + You gain bonus time while offline or when the game is inactive (e.g. when the tab is throttled by the + browser). Bonus time makes the Gang mechanic progress faster, up to 5x the normal speed. + + } + > + Bonus time: {convertTimeMsToTimeElapsedString(bonusMillis)} + + ); } diff --git a/src/Gang/ui/Context.ts b/src/Gang/ui/Context.ts new file mode 100644 index 000000000..9a5346777 --- /dev/null +++ b/src/Gang/ui/Context.ts @@ -0,0 +1,10 @@ +import React, { useContext } from "react"; +import { IGang } from "../IGang"; + +export const Context: { + Gang: React.Context; +} = { + Gang: React.createContext({} as IGang), +}; + +export const useGang = () => useContext(Context.Gang); diff --git a/src/Gang/ui/EquipmentsSubpage.tsx b/src/Gang/ui/EquipmentsSubpage.tsx new file mode 100644 index 000000000..b9a226e11 --- /dev/null +++ b/src/Gang/ui/EquipmentsSubpage.tsx @@ -0,0 +1,220 @@ +/** + * 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 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 Grid from "@mui/material/Grid"; + +interface INextRevealProps { + upgrades: string[]; + type: UpgradeType; +} + +function NextReveal(props: INextRevealProps): React.ReactElement { + const gang = useGang(); + const player = use.Player(); + const upgrades = Object.keys(GangMemberUpgrades) + .filter((upgName: string) => { + const upg = GangMemberUpgrades[upgName]; + if (player.money.gt(gang.getUpgradeCost(upg))) return false; + if (upg.type !== props.type) return false; + if (props.upgrades.includes(upgName)) return false; + return true; + }) + .map((upgName: string) => GangMemberUpgrades[upgName]); + + if (upgrades.length === 0) return <>; + return ( + + Next at + + ); +} + +function PurchasedUpgrade({ upgName }: { upgName: string }): React.ReactElement { + const upg = GangMemberUpgrades[upgName]; + return ( + + + }> + {upg.name} + + + + ); +} + +interface IUpgradeButtonProps { + upg: GangMemberUpgrade; + rerender: () => void; + member: GangMember; +} + +function UpgradeButton(props: IUpgradeButtonProps): React.ReactElement { + const gang = useGang(); + const player = use.Player(); + function onClick(): void { + props.member.buyUpgrade(props.upg, player, gang); + props.rerender(); + } + return ( + }> + + {props.upg.name} + + + + ); +} + +interface IPanelProps { + member: GangMember; +} + +function GangMemberUpgradePanel(props: IPanelProps): React.ReactElement { + const gang = useGang(); + const player = use.Player(); + const setRerender = useState(false)[1]; + function rerender(): void { + setRerender((old) => !old); + } + function filterUpgrades(list: string[], type: UpgradeType): GangMemberUpgrade[] { + return Object.keys(GangMemberUpgrades) + .filter((upgName: string) => { + const upg = GangMemberUpgrades[upgName]; + if (player.money.lt(gang.getUpgradeCost(upg))) return false; + if (upg.type !== type) return false; + if (list.includes(upgName)) return false; + return true; + }) + .map((upgName: string) => GangMemberUpgrades[upgName]); + } + 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 asc = { + hack: props.member.calculateAscensionMult(props.member.hack_asc_points), + str: props.member.calculateAscensionMult(props.member.str_asc_points), + def: props.member.calculateAscensionMult(props.member.def_asc_points), + dex: props.member.calculateAscensionMult(props.member.dex_asc_points), + agi: props.member.calculateAscensionMult(props.member.agi_asc_points), + cha: props.member.calculateAscensionMult(props.member.cha_asc_points), + }; + 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.upgrades.map((upg: string) => ( + + ))} + {props.member.augmentations.map((upg: string) => ( + + ))} + + + + + 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(); + return ( + <> + + You get a discount on equipment and upgrades based on your gang's respect and power. More respect and power + leads to more discounts. + + } + > + Discount: -{numeralWrapper.formatPercentage(1 - 1 / gang.getDiscount())} + + {gang.members.map((member: GangMember) => ( + + ))} + + ); +} diff --git a/src/Gang/ui/GangMemberAccordion.tsx b/src/Gang/ui/GangMemberAccordion.tsx index 4c415fe81..0f9cefcef 100644 --- a/src/Gang/ui/GangMemberAccordion.tsx +++ b/src/Gang/ui/GangMemberAccordion.tsx @@ -1,23 +1,36 @@ /** * React Component for a gang member on the management subpage. */ -import React from "react"; -import { Gang } from "../Gang"; +import React, { useState } from "react"; import { GangMember } from "../GangMember"; -import { BBAccordion } from "../../ui/React/BBAccordion"; import { GangMemberAccordionContent } from "./GangMemberAccordionContent"; +import Box from "@mui/material/Box"; + +import Typography from "@mui/material/Typography"; +import ListItemButton from "@mui/material/ListItemButton"; +import ListItemText from "@mui/material/ListItemText"; +import Paper from "@mui/material/Paper"; +import Collapse from "@mui/material/Collapse"; +import ExpandMore from "@mui/icons-material/ExpandMore"; +import ExpandLess from "@mui/icons-material/ExpandLess"; interface IProps { - gang: Gang; member: GangMember; } export function GangMemberAccordion(props: IProps): React.ReactElement { + const [open, setOpen] = useState(true); return ( - {props.member.name}} - panelContent={} - /> + + setOpen((old) => !old)}> + {props.member.name}} /> + {open ? : } + + + + + + + ); } diff --git a/src/Gang/ui/GangMemberAccordionContent.tsx b/src/Gang/ui/GangMemberAccordionContent.tsx index 55a996bb1..a79592b36 100644 --- a/src/Gang/ui/GangMemberAccordionContent.tsx +++ b/src/Gang/ui/GangMemberAccordionContent.tsx @@ -6,27 +6,26 @@ import React, { useState } from "react"; import { GangMemberStats } from "./GangMemberStats"; import { TaskSelector } from "./TaskSelector"; import { TaskDescription } from "./TaskDescription"; -import { Gang } from "../Gang"; import { GangMember } from "../GangMember"; +import Grid from "@mui/material/Grid"; interface IProps { - gang: Gang; member: GangMember; } export function GangMemberAccordionContent(props: IProps): React.ReactElement { const setRerender = useState(false)[1]; return ( - <> -
- setRerender((old) => !old)} gang={props.gang} member={props.member} /> -
-
- setRerender((old) => !old)} gang={props.gang} member={props.member} /> -
-
+ + + setRerender((old) => !old)} member={props.member} /> + + + setRerender((old) => !old)} member={props.member} /> + + -
- + + ); } diff --git a/src/Gang/ui/GangMemberList.tsx b/src/Gang/ui/GangMemberList.tsx index 57ef554f7..104e218b8 100644 --- a/src/Gang/ui/GangMemberList.tsx +++ b/src/Gang/ui/GangMemberList.tsx @@ -2,59 +2,21 @@ * React Component for the list of gang members on the management subpage. */ import React, { useState } from "react"; -import { GangMemberUpgradePopup } from "./GangMemberUpgradePopup"; import { GangMemberAccordion } from "./GangMemberAccordion"; -import { createPopup } from "../../ui/React/createPopup"; -import { IPlayer } from "../../PersonObjects/IPlayer"; -import { Gang } from "../Gang"; import { GangMember } from "../GangMember"; import { RecruitButton } from "./RecruitButton"; +import { useGang } from "./Context"; -interface IProps { - gang: Gang; - player: IPlayer; -} - -export function GangMemberList(props: IProps): React.ReactElement { - const [filter, setFilter] = useState(""); +export function GangMemberList(): React.ReactElement { + const gang = useGang(); const setRerender = useState(false)[1]; - function openUpgradePopup(): void { - const popupId = `gang-upgrade-popup`; - createPopup(popupId, GangMemberUpgradePopup, { - gang: props.gang, - player: props.player, - popupId: popupId, - }); - } - - function onFilterChange(event: React.ChangeEvent): void { - setFilter(event.target.value); - } - - const members = props.gang.members.filter( - (member: GangMember) => member.name.indexOf(filter) > -1 || member.task.indexOf(filter) > -1, - ); - return ( <> - setRerender((old) => !old)} gang={props.gang} /> -
- - - Manage Equipment - + setRerender((old) => !old)} />
    - {members.map((member: GangMember) => ( -
  • - -
    • + {gang.members.map((member: GangMember) => ( + ))}
diff --git a/src/Gang/ui/GangMemberStats.tsx b/src/Gang/ui/GangMemberStats.tsx index 167b7dff8..c81161a7e 100644 --- a/src/Gang/ui/GangMemberStats.tsx +++ b/src/Gang/ui/GangMemberStats.tsx @@ -2,48 +2,26 @@ * React Component for the first part of a gang member details. * Contains skills and exp. */ -import React from "react"; -import { dialogBoxCreate } from "../../ui/React/DialogBox"; +import React, { useState } from "react"; import { formatNumber } from "../../utils/StringHelperFunctions"; import { numeralWrapper } from "../../ui/numeralFormat"; -import { createPopup } from "../../ui/React/createPopup"; -import { Gang } from "../Gang"; import { GangMember } from "../GangMember"; -import { AscensionPopup } from "./AscensionPopup"; +import { AscensionModal } from "./AscensionModal"; +import Typography from "@mui/material/Typography"; +import Tooltip from "@mui/material/Tooltip"; +import Button from "@mui/material/Button"; +import { StaticModal } from "../../ui/React/StaticModal"; +import IconButton from "@mui/material/IconButton"; +import HelpIcon from "@mui/icons-material/Help"; interface IProps { member: GangMember; - gang: Gang; onAscend: () => void; } export function GangMemberStats(props: IProps): React.ReactElement { - function ascend(): void { - const popupId = `gang-management-ascend-member ${props.member.name}`; - createPopup(popupId, AscensionPopup, { - member: props.member, - gang: props.gang, - popupId: popupId, - onAscend: props.onAscend, - }); - } - - function openAscensionHelp(): void { - dialogBoxCreate( - <> - Ascending a Gang Member resets the member's progress and stats in exchange for a permanent boost to their stat - multipliers. -
-
- The additional stat multiplier that the Gang Member gains upon ascension is based on the amount of exp they - have. -
-
- Upon ascension, the member will lose all of its non-Augmentation Equipment and your gang will lose respect equal - to the total respect earned by the member. - , - ); - } + const [helpOpen, setHelpOpen] = useState(false); + const [ascendOpen, setAscendOpen] = useState(false); const asc = { hack: props.member.calculateAscensionMult(props.member.hack_asc_points), @@ -56,48 +34,77 @@ export function GangMemberStats(props: IProps): React.ReactElement { return ( <> - - 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) - - 
-        Hacking: {formatNumber(props.member.hack, 0)} ({numeralWrapper.formatExp(props.member.hack_exp)} exp)
-        

-        Strength: {formatNumber(props.member.str, 0)} ({numeralWrapper.formatExp(props.member.str_exp)} exp)
-        

-        Defense: {formatNumber(props.member.def, 0)} ({numeralWrapper.formatExp(props.member.def_exp)} exp)
-        

-        Dexterity: {formatNumber(props.member.dex, 0)} ({numeralWrapper.formatExp(props.member.dex_exp)} exp)
-        

-        Agility: {formatNumber(props.member.agi, 0)} ({numeralWrapper.formatExp(props.member.agi_exp)} exp)
-        

-        Charisma: {formatNumber(props.member.cha, 0)} ({numeralWrapper.formatExp(props.member.cha_exp)} exp)
-        

-
+ + 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) + + } + > + + Hacking: {formatNumber(props.member.hack, 0)} ({numeralWrapper.formatExp(props.member.hack_exp)} exp) +
+ Strength: {formatNumber(props.member.str, 0)} ({numeralWrapper.formatExp(props.member.str_exp)} exp) +
+ Defense: {formatNumber(props.member.def, 0)} ({numeralWrapper.formatExp(props.member.def_exp)} exp) +
+ Dexterity: {formatNumber(props.member.dex, 0)} ({numeralWrapper.formatExp(props.member.dex_exp)} exp) +
+ Agility: {formatNumber(props.member.agi, 0)} ({numeralWrapper.formatExp(props.member.agi_exp)} exp) +
+ Charisma: {formatNumber(props.member.cha, 0)} ({numeralWrapper.formatExp(props.member.cha_exp)} exp) +
+ +
{props.member.canAscend() && ( <> - -
- ? -
+ + setAscendOpen(false)} + member={props.member} + onAscend={props.onAscend} + /> + setHelpOpen(true)}> + + + setHelpOpen(false)}> + + Ascending a Gang Member resets the member's progress and stats in exchange for a permanent boost to their + stat multipliers. +
+
+ The additional stat multiplier that the Gang Member gains upon ascension is based on the amount of exp + they have. +
+
+ Upon ascension, the member will lose all of its non-Augmentation Equipment and your gang will lose respect + equal to the total respect earned by the member. + + )} diff --git a/src/Gang/ui/GangMemberUpgradePopup.tsx b/src/Gang/ui/GangMemberUpgradePopup.tsx deleted file mode 100644 index 0b615bac4..000000000 --- a/src/Gang/ui/GangMemberUpgradePopup.tsx +++ /dev/null @@ -1,224 +0,0 @@ -/** - * React Component for the popup that manages gang members upgrades - */ -import React, { useState, useEffect } from "react"; -import { formatNumber } from "../../utils/StringHelperFunctions"; -import { numeralWrapper } from "../../ui/numeralFormat"; -import { GangMemberUpgrades } from "../GangMemberUpgrades"; -import { GangMemberUpgrade } from "../GangMemberUpgrade"; -import { IPlayer } from "../../PersonObjects/IPlayer"; -import { Money } from "../../ui/React/Money"; -import { removePopup } from "../../ui/React/createPopup"; -import { GangMember } from "../GangMember"; -import { Gang } from "../Gang"; -import { UpgradeType } from "../data/upgrades"; - -interface INextRevealProps { - gang: Gang; - upgrades: string[]; - type: UpgradeType; - player: IPlayer; -} - -function NextReveal(props: INextRevealProps): React.ReactElement { - const upgrades = Object.keys(GangMemberUpgrades) - .filter((upgName: string) => { - const upg = GangMemberUpgrades[upgName]; - if (props.player.money.gt(props.gang.getUpgradeCost(upg))) return false; - if (upg.type !== props.type) return false; - if (props.upgrades.includes(upgName)) return false; - return true; - }) - .map((upgName: string) => GangMemberUpgrades[upgName]); - - if (upgrades.length === 0) return <>; - return ( -

- Next at -

- ); -} - -interface IPanelProps { - member: GangMember; - gang: Gang; - player: IPlayer; -} - -function GangMemberUpgradePanel(props: IPanelProps): React.ReactElement { - const setRerender = useState(false)[1]; - function filterUpgrades(list: string[], type: UpgradeType): GangMemberUpgrade[] { - return Object.keys(GangMemberUpgrades) - .filter((upgName: string) => { - const upg = GangMemberUpgrades[upgName]; - if (props.player.money.lt(props.gang.getUpgradeCost(upg))) return false; - if (upg.type !== type) return false; - if (list.includes(upgName)) return false; - return true; - }) - .map((upgName: string) => GangMemberUpgrades[upgName]); - } - 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); - - function purchasedUpgrade(upgName: string): React.ReactElement { - const upg = GangMemberUpgrades[upgName]; - return ( -
- {upg.name} - -
- ); - } - - function upgradeButton(upg: GangMemberUpgrade, left = false): React.ReactElement { - function onClick(): void { - props.member.buyUpgrade(upg, props.player, props.gang); - setRerender((old) => !old); - } - return ( - - {upg.name} - - - - ); - } - - const asc = { - hack: props.member.calculateAscensionMult(props.member.hack_asc_points), - str: props.member.calculateAscensionMult(props.member.str_asc_points), - def: props.member.calculateAscensionMult(props.member.def_asc_points), - dex: props.member.calculateAscensionMult(props.member.dex_asc_points), - agi: props.member.calculateAscensionMult(props.member.agi_asc_points), - cha: props.member.calculateAscensionMult(props.member.cha_asc_points), - }; - 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.upgrades.map((upg: string) => purchasedUpgrade(upg))} - {props.member.augmentations.map((upg: string) => purchasedUpgrade(upg))} -
-
-

Weapons

- {weaponUpgrades.map((upg) => upgradeButton(upg))} - -
-
-

Armor

- {armorUpgrades.map((upg) => upgradeButton(upg))} - -
-
-

Vehicles

- {vehicleUpgrades.map((upg) => upgradeButton(upg))} - -
-
-

Rootkits

- {rootkitUpgrades.map((upg) => upgradeButton(upg, true))} - -
-
-

Augmentations

- {augUpgrades.map((upg) => upgradeButton(upg, true))} - -
-
- ); -} - -interface IProps { - gang: Gang; - player: IPlayer; - popupId: string; -} - -export function GangMemberUpgradePopup(props: IProps): React.ReactElement { - const setRerender = useState(false)[1]; - const [filter, setFilter] = useState(""); - - function closePopup(this: Window, ev: KeyboardEvent): void { - if (ev.keyCode !== 27) return; - removePopup(props.popupId); - } - - useEffect(() => { - window.addEventListener<"keydown">("keydown", closePopup); - const id = setInterval(() => setRerender((old) => !old), 1000); - return () => { - clearInterval(id); - window.removeEventListener<"keydown">("keydown", closePopup); - }; - }, []); - - return ( - <> - setFilter(event.target.value)} - /> -

- Discount: -{numeralWrapper.formatPercentage(1 - 1 / props.gang.getDiscount())} - - You get a discount on equipment and upgrades based on your gang's respect and power. More respect and power - leads to more discounts. - -

- {props.gang.members.map((member: GangMember) => ( - - ))} - - ); -} diff --git a/src/Gang/ui/GangRoot.tsx b/src/Gang/ui/GangRoot.tsx index fe2d4ade0..87b1a642e 100644 --- a/src/Gang/ui/GangRoot.tsx +++ b/src/Gang/ui/GangRoot.tsx @@ -4,48 +4,49 @@ import React, { useState, useEffect } from "react"; import { ManagementSubpage } from "./ManagementSubpage"; import { TerritorySubpage } from "./TerritorySubpage"; +import { EquipmentsSubpage } from "./EquipmentsSubpage"; import { use } from "../../ui/Context"; import { Factions } from "../../Faction/Factions"; +import { Context } from "./Context"; + +import Tabs from "@mui/material/Tabs"; +import Tab from "@mui/material/Tab"; + +enum Page { + Management, + Equipment, + Territory, +} export function GangRoot(): React.ReactElement { const player = use.Player(); - const router = use.Router(); const gang = (function () { if (player.gang === null) throw new Error("Gang should not be null"); return player.gang; })(); - const [management, setManagement] = useState(true); + const [value, setValue] = React.useState(0); + + function handleChange(event: React.SyntheticEvent, tab: number): void { + setValue(tab); + } + const setRerender = useState(false)[1]; useEffect(() => { - const id = setInterval(() => setRerender((old) => !old), 1000); + const id = setInterval(() => setRerender((old) => !old), 200); return () => clearInterval(id); }, []); - function back(): void { - router.toFaction(Factions[gang.facName]); - } - return ( - + + + + + + + {value === 0 && } + {value === 1 && } + {value === 2 && } + ); } diff --git a/src/Gang/ui/GangStats.tsx b/src/Gang/ui/GangStats.tsx index f8f91e9d1..ec07fd858 100644 --- a/src/Gang/ui/GangStats.tsx +++ b/src/Gang/ui/GangStats.tsx @@ -4,7 +4,6 @@ */ import React from "react"; import { Factions } from "../../Faction/Factions"; -import { Gang } from "../Gang"; import { formatNumber } from "../../utils/StringHelperFunctions"; import { numeralWrapper } from "../../ui/numeralFormat"; @@ -12,13 +11,14 @@ import { MoneyRate } from "../../ui/React/MoneyRate"; import { Reputation } from "../../ui/React/Reputation"; import { AllGangs } from "../AllGangs"; import { BonusTime } from "./BonusTime"; +import { useGang } from "./Context"; +import Typography from "@mui/material/Typography"; +import Tooltip from "@mui/material/Tooltip"; +import Box from "@mui/material/Box"; -interface IProps { - gang: Gang; -} - -export function GangStats(props: IProps): React.ReactElement { - const territoryMult = AllGangs[props.gang.facName].territory * 100; +export function GangStats(): React.ReactElement { + const gang = useGang(); + const territoryMult = AllGangs[gang.facName].territory * 100; let territoryStr; if (territoryMult <= 0) { territoryStr = formatNumber(0, 2); @@ -30,46 +30,59 @@ export function GangStats(props: IProps): React.ReactElement { return ( <> -

- Respect: {numeralWrapper.formatRespect(props.gang.respect)} ( - {numeralWrapper.formatRespect(5 * props.gang.respectGainRate)} / sec) - - Represents the amount of respect your gang has from other gangs and criminal organizations. Your respect - affects the amount of money your gang members will earn, and also determines how much reputation you are - earning with your gang's corresponding Faction. - -

-
-

- Wanted Level: {numeralWrapper.formatWanted(props.gang.wanted)} ( - {numeralWrapper.formatWanted(5 * props.gang.wantedGainRate)} / sec) - - Represents how much the gang is wanted by law enforcement. The higher your gang's wanted level, the harder it - will be for your gang members to make money and earn respect. Note that the minimum wanted level is 1. - -

-
-

- Wanted Level Penalty: -{formatNumber((1 - props.gang.getWantedPenalty()) * 100, 2)}% - Penalty for respect and money gain rates due to Wanted Level -

-
-
-

- Money gain rate: -

-
-
-

- Territory: {territoryStr}% - The percentage of total territory your Gang controls -

-
-

- Faction reputation: -

-
- + + + Represents the amount of respect your gang has from other gangs and criminal organizations. Your respect + affects the amount of money your gang members will earn, and also determines how much reputation you are + earning with your gang's corresponding Faction. + + } + > + + Respect: {numeralWrapper.formatRespect(gang.respect)} ( + {numeralWrapper.formatRespect(5 * gang.respectGainRate)} / sec) + + + + + + + Represents how much the gang is wanted by law enforcement. The higher your gang's wanted level, the harder + it will be for your gang members to make money and earn respect. Note that the minimum wanted level is 1. + + } + > + + Wanted Level: {numeralWrapper.formatWanted(gang.wanted)} ( + {numeralWrapper.formatWanted(5 * gang.wantedGainRate)} / sec) + + + + + + Penalty for respect and money gain rates due to Wanted Level}> + Wanted Level Penalty: -{formatNumber((1 - gang.getWantedPenalty()) * 100, 2)}% + + + + + Money gain rate: + + + + The percentage of total territory your Gang controls}> + Territory: {territoryStr}% + + + + Faction reputation: + + + ); } diff --git a/src/Gang/ui/ManagementSubpage.tsx b/src/Gang/ui/ManagementSubpage.tsx index 0455dd561..6f42a1aa8 100644 --- a/src/Gang/ui/ManagementSubpage.tsx +++ b/src/Gang/ui/ManagementSubpage.tsx @@ -2,20 +2,16 @@ * React Component for the subpage that manages gang members, the main page. */ import React from "react"; -import { IPlayer } from "../../PersonObjects/IPlayer"; import { GangStats } from "./GangStats"; -import { Gang } from "../Gang"; import { GangMemberList } from "./GangMemberList"; +import { useGang } from "./Context"; +import Typography from "@mui/material/Typography"; -interface IProps { - gang: Gang; - player: IPlayer; -} - -export function ManagementSubpage(props: IProps): React.ReactElement { +export function ManagementSubpage(): React.ReactElement { + const gang = useGang(); return ( -
-

+ <> + This page is used to manage your gang members and get an overview of your gang's stats.

@@ -23,7 +19,7 @@ export function ManagementSubpage(props: IProps): React.ReactElement { too difficult. Consider training that member's stats or choosing an easier task. The tasks closer to the top of the dropdown list are generally easier. Alternatively, the gang member's low production might be due to the fact that your wanted level is too high. Consider assigning a few members to the ' - {props.gang.isHackingGang ? "Ethical Hacking" : "Vigilante Justice"}' task to lower your wanted level. + {gang.isHackingGang ? "Ethical Hacking" : "Vigilante Justice"}' task to lower your wanted level.

Installing Augmentations does NOT reset your progress with your Gang. Furthermore, after installing @@ -31,11 +27,11 @@ export function ManagementSubpage(props: IProps): React.ReactElement {

You can also manage your gang programmatically through Netscript using the Gang API -

+
- +
- -
+ + ); } diff --git a/src/Gang/ui/RecruitButton.tsx b/src/Gang/ui/RecruitButton.tsx index 95a032f16..c1a89d3f2 100644 --- a/src/Gang/ui/RecruitButton.tsx +++ b/src/Gang/ui/RecruitButton.tsx @@ -1,51 +1,42 @@ /** * React Component for the recruitment button and text on the gang main page. */ -import React from "react"; -import { Gang } from "../Gang"; -import { RecruitPopup } from "./RecruitPopup"; +import React, { useState } from "react"; +import { RecruitModal } from "./RecruitModal"; import { GangConstants } from "../data/Constants"; import { formatNumber } from "../../utils/StringHelperFunctions"; -import { createPopup } from "../../ui/React/createPopup"; +import { useGang } from "./Context"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; +import Box from "@mui/material/Box"; interface IProps { - gang: Gang; onRecruit: () => void; } export function RecruitButton(props: IProps): React.ReactElement { - if (props.gang.members.length >= GangConstants.MaximumGangMembers) { + const gang = useGang(); + const [open, setOpen] = useState(false); + if (gang.members.length >= GangConstants.MaximumGangMembers) { return <>; } - if (!props.gang.canRecruitMember()) { - const respect = props.gang.getRespectNeededToRecruitMember(); + if (!gang.canRecruitMember()) { + const respect = gang.getRespectNeededToRecruitMember(); return ( - <> - + + + {formatNumber(respect, 2)} respect needed to recruit next member + ); } - function onClick(): void { - const popupId = "recruit-gang-member-popup"; - createPopup(popupId, RecruitPopup, { - gang: props.gang, - popupId: popupId, - onRecruit: props.onRecruit, - }); - } - return ( <> - - Recruit Gang Member - + + setOpen(false)} onRecruit={props.onRecruit} /> ); } diff --git a/src/Gang/ui/RecruitPopup.tsx b/src/Gang/ui/RecruitModal.tsx similarity index 53% rename from src/Gang/ui/RecruitPopup.tsx rename to src/Gang/ui/RecruitModal.tsx index 0fa295577..c5096ba74 100644 --- a/src/Gang/ui/RecruitPopup.tsx +++ b/src/Gang/ui/RecruitModal.tsx @@ -2,38 +2,35 @@ * React Component for the popup used to recruit new gang members. */ import React, { useState } from "react"; -import { Gang } from "../Gang"; -import { removePopup } from "../../ui/React/createPopup"; +import { Modal } from "../../ui/React/Modal"; import { dialogBoxCreate } from "../../ui/React/DialogBox"; +import { useGang } from "./Context"; +import Typography from "@mui/material/Typography"; +import TextField from "@mui/material/TextField"; +import Button from "@mui/material/Button"; interface IRecruitPopupProps { - gang: Gang; - popupId: string; + open: boolean; + onClose: () => void; onRecruit: () => void; } -export function RecruitPopup(props: IRecruitPopupProps): React.ReactElement { +export function RecruitModal(props: IRecruitPopupProps): React.ReactElement { + const gang = useGang(); const [name, setName] = useState(""); + const disabled = name === "" || !gang.canRecruitMember(); function recruit(): void { - if (name === "") { - dialogBoxCreate("You must enter a name for your Gang member!"); - return; - } - if (!props.gang.canRecruitMember()) { - dialogBoxCreate("You cannot recruit another Gang member!"); - return; - } - + if (disabled) return; // At this point, the only way this can fail is if you already // have a gang member with the same name - if (!props.gang.recruitMember(name)) { + if (!gang.recruitMember(name)) { dialogBoxCreate("You already have a gang member with this name!"); return; } props.onRecruit(); - removePopup(props.popupId); + props.onClose(); } function onKeyUp(event: React.KeyboardEvent): void { @@ -45,20 +42,23 @@ export function RecruitPopup(props: IRecruitPopupProps): React.ReactElement { } return ( - <> -

Enter a name for your new Gang member:

+ + Enter a name for your new Gang member:
- + Recruit + + ), + }} /> - - Recruit Gang Member - - + ); } diff --git a/src/Gang/ui/TaskDescription.tsx b/src/Gang/ui/TaskDescription.tsx index 83c934836..1946bf23e 100644 --- a/src/Gang/ui/TaskDescription.tsx +++ b/src/Gang/ui/TaskDescription.tsx @@ -5,6 +5,7 @@ import React from "react"; import { GangMemberTasks } from "../GangMemberTasks"; import { GangMember } from "../GangMember"; +import Typography from "@mui/material/Typography"; interface IProps { member: GangMember; @@ -14,5 +15,5 @@ export function TaskDescription(props: IProps): React.ReactElement { const task = GangMemberTasks[props.member.task]; const desc = task ? task.desc : GangMemberTasks["Unassigned"].desc; - return

; + return ; } diff --git a/src/Gang/ui/TaskSelector.tsx b/src/Gang/ui/TaskSelector.tsx index 49d263c56..02e3e2013 100644 --- a/src/Gang/ui/TaskSelector.tsx +++ b/src/Gang/ui/TaskSelector.tsx @@ -6,49 +6,50 @@ import React, { useState } from "react"; import { numeralWrapper } from "../../ui/numeralFormat"; import { StatsTable } from "../../ui/React/StatsTable"; import { MoneyRate } from "../../ui/React/MoneyRate"; -import { Gang } from "../Gang"; +import { useGang } from "./Context"; import { GangMember } from "../GangMember"; +import MenuItem from "@mui/material/MenuItem"; +import Select, { SelectChangeEvent } from "@mui/material/Select"; interface IProps { member: GangMember; - gang: Gang; onTaskChange: () => void; } export function TaskSelector(props: IProps): React.ReactElement { + const gang = useGang(); const [currentTask, setCurrentTask] = useState(props.member.task); - function onChange(event: React.ChangeEvent): void { + function onChange(event: SelectChangeEvent): void { const task = event.target.value; props.member.assignToTask(task); setCurrentTask(task); props.onTaskChange(); } - const tasks = props.gang.getAllTaskNames(); + const tasks = gang.getAllTaskNames(); const data = [ - [`Money:`, ], - [`Respect:`, `${numeralWrapper.formatRespect(5 * props.member.calculateRespectGain(props.gang))} / sec`], - [`Wanted Level:`, `${numeralWrapper.formatWanted(5 * props.member.calculateWantedLevelGain(props.gang))} / sec`], + [`Money:`, ], + [`Respect:`, `${numeralWrapper.formatRespect(5 * props.member.calculateRespectGain(gang))} / sec`], + [`Wanted Level:`, `${numeralWrapper.formatWanted(5 * props.member.calculateWantedLevelGain(gang))} / sec`], [`Total Respect:`, `${numeralWrapper.formatRespect(props.member.earnedRespect)}`], ]; return ( <> - + + Unassigned + {tasks.map((task: string, i: number) => ( - + ))} - -

- -
+ + + ); } diff --git a/src/Gang/ui/TerritorySubpage.tsx b/src/Gang/ui/TerritorySubpage.tsx index 14b2159ec..3651899ab 100644 --- a/src/Gang/ui/TerritorySubpage.tsx +++ b/src/Gang/ui/TerritorySubpage.tsx @@ -3,59 +3,25 @@ */ import React from "react"; import { numeralWrapper } from "../../ui/numeralFormat"; -import { dialogBoxCreate } from "../../ui/React/DialogBox"; import { formatNumber } from "../../utils/StringHelperFunctions"; import { AllGangs } from "../AllGangs"; import { Gang } from "../Gang"; +import { useGang } from "./Context"; -interface IProps { - gang: Gang; -} +import Typography from "@mui/material/Typography"; +import FormControlLabel from "@mui/material/FormControlLabel"; +import Switch from "@mui/material/Switch"; +import Tooltip from "@mui/material/Tooltip"; +import Box from "@mui/material/Box"; +import Paper from "@mui/material/Paper"; -export function TerritorySubpage(props: IProps): React.ReactElement { - function openWarfareHelp(): void { - dialogBoxCreate( - "This percentage represents the chance you have of " + - "'clashing' with with another gang. If you do not " + - "wish to gain/lose territory, then keep this " + - "percentage at 0% by not engaging in territory warfare.", - ); - } - - function formatTerritory(n: number): string { - const v = n * 100; - if (v <= 0) { - return formatNumber(0, 2); - } else if (v >= 100) { - return formatNumber(100, 2); - } else { - return formatNumber(v, 2); - } - } - - const playerPower = AllGangs[props.gang.facName].power; - function otherGangTerritory(name: string): React.ReactElement { - const power = AllGangs[name].power; - const clashVictoryChance = playerPower / (power + playerPower); - return ( - - {name} -
- Power: {formatNumber(power, 6)} -
- Territory: {formatTerritory(AllGangs[name].territory)}%
- Chance to win clash with this gang: {numeralWrapper.formatPercentage(clashVictoryChance, 3)} -
-
- - ); - } - - const gangNames = Object.keys(AllGangs).filter((g) => g != props.gang.facName); +export function TerritorySubpage(): React.ReactElement { + const gang = useGang(); + const gangNames = Object.keys(AllGangs).filter((g) => g != gang.facName); return ( -
-

+ <> + This page shows how much territory your Gang controls. This statistic is listed as a percentage, which represents how much of the total territory you control.
@@ -76,59 +42,113 @@ export function TerritorySubpage(props: IProps): React.ReactElement { and wanted level. It is very beneficial to have high territory control.

-

- (props.gang.territoryWarfareEngaged = event.target.checked)} + + (gang.territoryWarfareEngaged = event.target.checked)} + /> + } + label={ + + Engaging in Territory Warfare sets your clash chance to 100%. Disengaging will cause your clash chance + to gradually decrease until it reaches 0%. + + } + > + Engage in Territory Warfare + + } /> -
-

- Territory Clash Chance: {numeralWrapper.formatPercentage(props.gang.territoryClashChance, 3)} -

-
- ? -
+ + + This percentage represents the chance you have of 'clashing' with with another gang. If you do not wish to + gain/lose territory, then keep this percentage at 0% by not engaging in territory warfare. + + } + > + + Territory Clash Chance: {numeralWrapper.formatPercentage(gang.territoryClashChance, 3)} + + +
- - (props.gang.notifyMemberDeath = event.target.checked)} + (gang.notifyMemberDeath = event.target.checked)} + /> + } + label={ + + If this is enabled, then you will receive a pop-up notifying you whenever one of your Gang Members dies + in a territory clash. + + } + > + Notify about Gang Member Deaths + + } /> -
-
-

+ + - {props.gang.facName} + {gang.facName}
- Power: {formatNumber(AllGangs[props.gang.facName].power, 6)} + Power: {formatNumber(AllGangs[gang.facName].power, 6)}
- Territory: {formatTerritory(AllGangs[props.gang.facName].territory)}% + Territory: {formatTerritory(AllGangs[gang.facName].territory)}%

- {gangNames.map((name) => otherGangTerritory(name))} -

-
-
+ + {gangNames.map((name) => ( + + ))} + + + ); +} +function formatTerritory(n: number): string { + const v = n * 100; + if (v <= 0) { + return formatNumber(0, 2); + } else if (v >= 100) { + return formatNumber(100, 2); + } else { + return formatNumber(v, 2); + } +} + +interface ITerritoryProps { + name: string; +} + +function OtherGangTerritory(props: ITerritoryProps): React.ReactElement { + const gang = useGang(); + const playerPower = AllGangs[gang.facName].power; + const power = AllGangs[props.name].power; + const clashVictoryChance = playerPower / (power + playerPower); + return ( + + {props.name} +
+ Power: {formatNumber(power, 6)} +
+ Territory: {formatTerritory(AllGangs[props.name].territory)}%
+ Chance to win clash with this gang: {numeralWrapper.formatPercentage(clashVictoryChance, 3)} +
+
+ ); } diff --git a/src/Locations/ui/PurchaseServerModal.tsx b/src/Locations/ui/PurchaseServerModal.tsx index a8e8a94c2..d0f8ccf44 100644 --- a/src/Locations/ui/PurchaseServerModal.tsx +++ b/src/Locations/ui/PurchaseServerModal.tsx @@ -6,7 +6,6 @@ import { purchaseServer } from "../../Server/ServerPurchases"; import { numeralWrapper } from "../../ui/numeralFormat"; import { Money } from "../../ui/React/Money"; import { Modal } from "../../ui/React/Modal"; -import { StdButton } from "../../ui/React/StdButton"; import { use } from "../../ui/Context"; import Typography from "@mui/material/Typography"; import TextField from "@mui/material/TextField"; diff --git a/src/ui/React/BBAccordion.tsx b/src/ui/React/BBAccordion.tsx deleted file mode 100644 index 15d614171..000000000 --- a/src/ui/React/BBAccordion.tsx +++ /dev/null @@ -1,84 +0,0 @@ -/** - * React component to create an accordion element - */ -import * as React from "react"; - -type IProps = { - headerClass?: string; // Override default class - headerContent: React.ReactElement; - panelClass?: string; // Override default class - panelContent: React.ReactElement; - panelInitiallyOpened?: boolean; - style?: string; -}; - -type IState = { - panelOpened: boolean; -}; - -export class BBAccordion extends React.Component { - constructor(props: IProps) { - super(props); - - this.handleHeaderClick = this.handleHeaderClick.bind(this); - - this.state = { - panelOpened: props.panelInitiallyOpened ? props.panelInitiallyOpened : false, - }; - } - - handleHeaderClick(): void { - this.setState({ - panelOpened: !this.state.panelOpened, - }); - } - - render(): React.ReactNode { - let className = "accordion-header"; - if (typeof this.props.headerClass === "string") { - className = this.props.headerClass; - } - - if (this.state.panelOpened) className += " active"; - - return ( - <> - - - - ); - } -} - -type IPanelProps = { - opened: boolean; - panelClass?: string; // Override default class - panelContent: React.ReactElement; -}; - -class AccordionPanel extends React.Component { - shouldComponentUpdate(nextProps: IPanelProps): boolean { - return this.props.opened || nextProps.opened; - } - - render(): React.ReactNode { - let className = "accordion-panel"; - if (typeof this.props.panelClass === "string") { - className = this.props.panelClass; - } - - if (!this.props.opened) return <>; - - return ( -
- {this.props.panelContent} -
- ); - } -} diff --git a/src/ui/React/MuiButton.tsx b/src/ui/React/MuiButton.tsx deleted file mode 100644 index 95357541a..000000000 --- a/src/ui/React/MuiButton.tsx +++ /dev/null @@ -1,46 +0,0 @@ -/** - * Wrapper around material-ui's Button component that styles it with - * Bitburner's UI theme - */ - -import React from "react"; -import { Button, ButtonProps } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; -const useStyles = makeStyles({ - // Tries to emulate StdButton in buttons.scss - root: { - backgroundColor: "#555", - border: "1px solid #333", - color: "white", - margin: "5px", - padding: "3px 5px", - "&:hover": { - backgroundColor: "#666", - }, - - borderRadius: 0, - }, - textPrimary: { - color: "rgb( 144, 202, 249)", - }, - textSecondary: { - color: "rgb(244, 143, 177)", - }, - disabled: { - backgroundColor: "#333", - color: "#fff", - cursor: "default", - }, -}); - -export const MuiButton: React.FC = (props: ButtonProps) => { - return ( - - ); -} From 9cbb525da31995fc9ec58f8a17aa4787d8de8ab9 Mon Sep 17 00:00:00 2001 From: Olivier Gagnon Date: Fri, 1 Oct 2021 15:26:12 -0400 Subject: [PATCH 2/3] remove hacking missions --- src/Constants.ts | 65 - src/Faction/FactionHelpers.tsx | 7 - src/Faction/ui/FactionRoot.tsx | 16 - src/HackingMission/ui/HackingMissionRoot.tsx | 13 - src/Message/MessageHelpers.ts | 5 +- src/Missions.d.ts | 8 - src/Missions.jsx | 1600 ------------------ src/NetscriptFunctions.ts | 31 +- src/Sidebar/ui/SidebarRoot.tsx | 3 +- src/engine.tsx | 6 - src/ui/GameRoot.tsx | 10 - src/ui/React/Overview.tsx | 3 +- src/ui/Router.ts | 2 - 13 files changed, 6 insertions(+), 1763 deletions(-) delete mode 100644 src/HackingMission/ui/HackingMissionRoot.tsx delete mode 100644 src/Missions.d.ts delete mode 100644 src/Missions.jsx diff --git a/src/Constants.ts b/src/Constants.ts index 0dce70c0e..b02e14809 100644 --- a/src/Constants.ts +++ b/src/Constants.ts @@ -47,14 +47,6 @@ export const CONSTANTS: { IntelligenceTerminalHackBaseExpGain: number; IntelligenceSingFnBaseExpGain: number; IntelligenceClassBaseExpGain: number; - IntelligenceHackingMissionBaseExpGain: number; - HackingMissionRepToDiffConversion: number; - HackingMissionRepToRewardConversion: number; - HackingMissionSpamTimeIncrease: number; - HackingMissionTransferAttackIncrease: number; - HackingMissionMiscDefenseIncrease: number; - HackingMissionDifficultyToHacking: number; - HackingMissionHowToPlay: string; MillisecondsPer20Hours: number; GameCyclesPer20Hours: number; MillisecondsPer10Hours: number; @@ -199,63 +191,6 @@ export const CONSTANTS: { IntelligenceTerminalHackBaseExpGain: 200, // Hacking exp divided by this to determine int exp gain IntelligenceSingFnBaseExpGain: 1.5, IntelligenceClassBaseExpGain: 0.01, - IntelligenceHackingMissionBaseExpGain: 3, // Hacking Mission difficulty multiplied by this to get exp gain - - // Hacking Missions - // TODO Move this into Hacking Mission implementation - HackingMissionRepToDiffConversion: 10000, // Faction rep is divided by this to get mission difficulty - HackingMissionRepToRewardConversion: 7, // Faction rep divided byt his to get mission rep reward - HackingMissionSpamTimeIncrease: 25000, // How much time limit increase is gained when conquering a Spam Node (ms) - HackingMissionTransferAttackIncrease: 1.05, // Multiplier by which the attack for all Core Nodes is increased when conquering a Transfer Node - HackingMissionMiscDefenseIncrease: 1.05, // The amount by which every misc node's defense is multiplied when one is conquered - HackingMissionDifficultyToHacking: 135, // Difficulty is multiplied by this to determine enemy's "hacking" level (to determine effects of scan/attack, etc) - HackingMissionHowToPlay: - "Hacking missions are a minigame that, if won, will reward you with faction reputation.

" + - "In this game you control a set of Nodes and use them to try and defeat an enemy. Your Nodes " + - "are colored blue, while the enemy's are red. There are also other nodes on the map colored gray " + - "that initially belong to neither you nor the enemy. The goal of the game is " + - "to capture all of the enemy's Database nodes within the time limit. " + - "If you fail to do this, you will lose.

" + - "Each Node has three stats: Attack, Defense, and HP. There are five different actions that " + - "a Node can take:

" + - "Attack - Targets an enemy Node and lowers its HP. The effectiveness is determined by the owner's Attack, the Player's " + - "hacking level, and the enemy's defense.

" + - "Scan - Targets an enemy Node and lowers its Defense. The effectiveness is determined by the owner's Attack, the Player's hacking level, and the " + - "enemy's defense.

" + - "Weaken - Targets an enemy Node and lowers its Attack. The effectiveness is determined by the owner's Attack, the Player's hacking level, and the enemy's " + - "defense.

" + - "Fortify - Raises the Node's Defense. The effectiveness is determined by your hacking level.

" + - "Overflow - Raises the Node's Attack but lowers its Defense. The effectiveness is determined by your hacking level.

" + - "Note that when determining the effectiveness of the above actions, the TOTAL Attack or Defense of the team is used, not just the " + - "Attack/Defense of the individual Node that is performing the action.

" + - "To capture a Node, you must lower its HP down to 0.

" + - "There are six different types of Nodes:

" + - "CPU Core - These are your main Nodes that are used to perform actions. Capable of performing every action

" + - "Firewall - Nodes with high defense. These Nodes can 'Fortify'

" + - "Database - A special type of Node. The player's objective is to conquer all of the enemy's Database Nodes within " + - "the time limit. These Nodes cannot perform any actions

" + - "Spam - Conquering one of these Nodes will slow the enemy's trace, giving the player additional time to complete " + - "the mission. These Nodes cannot perform any actions

" + - "Transfer - Conquering one of these nodes will increase the Attack of all of your CPU Cores by a small fixed percentage. " + - "These Nodes are capable of performing every action except the 'Attack' action

" + - "Shield - Nodes with high defense. These Nodes can 'Fortify'

" + - "To assign an action to a Node, you must first select one of your Nodes. This can be done by simply clicking on it. Double-clicking " + - "a node will select all of your Nodes of the same type (e.g. select all CPU Core Nodes or all Transfer Nodes). Note that only Nodes " + - "that can perform actions (CPU Core, Transfer, Shield, Firewall) can be selected. Selected Nodes will be denoted with a white highlight. After selecting a Node or multiple Nodes, " + - "select its action using the Action Buttons near the top of the screen. Every action also has a corresponding keyboard " + - "shortcut.

" + - "For certain actions such as attacking, scanning, and weakening, the Node performing the action must have a target. To target " + - "another node, simply click-and-drag from the 'source' Node to a target. A Node can only have one target, and you can target " + - "any Node that is adjacent to one of your Nodes (immediately above, below, or to the side. NOT diagonal). Furthermore, only CPU Cores and Transfer Nodes " + - "can target, since they are the only ones that can perform the related actions. To remove a target, you can simply click on the line that represents " + - "the connection between one of your Nodes and its target. Alternatively, you can select the 'source' Node and click the 'Drop Connection' button, " + - "or press 'd'.

" + - "Other Notes:

" + - "-Whenever a miscellenaous Node (not owned by the player or enemy) is conquered, the defense of all remaining miscellaneous Nodes that " + - "are not actively being targeted will increase by a fixed percentage.

" + - "-Whenever a Node is conquered, its stats are significantly reduced

" + - "-Miscellaneous Nodes slowly raise their defense over time

" + - "-Nodes slowly regenerate health over time.", // Time-related constants MillisecondsPer20Hours: 72000000, diff --git a/src/Faction/FactionHelpers.tsx b/src/Faction/FactionHelpers.tsx index 7d4440a7a..876d81e9d 100644 --- a/src/Faction/FactionHelpers.tsx +++ b/src/Faction/FactionHelpers.tsx @@ -7,7 +7,6 @@ import { CONSTANTS } from "../Constants"; import { Faction } from "./Faction"; import { Factions } from "./Factions"; -import { HackingMission, setInMission } from "../Missions"; import { Player } from "../Player"; import { Settings } from "../Settings/Settings"; import { @@ -49,12 +48,6 @@ export function joinFaction(faction: Faction): void { } } -export function startHackingMission(faction: Faction): void { - const mission = new HackingMission(faction.playerReputation, faction); - setInMission(true, mission); //Sets inMission flag to true - mission.init(); -} - //Returns a boolean indicating whether the player has the prerequisites for the //specified Augmentation export function hasAugmentationPrereqs(aug: Augmentation): boolean { diff --git a/src/Faction/ui/FactionRoot.tsx b/src/Faction/ui/FactionRoot.tsx index cc6d656f2..1fb5d7287 100644 --- a/src/Faction/ui/FactionRoot.tsx +++ b/src/Faction/ui/FactionRoot.tsx @@ -30,10 +30,6 @@ type IProps = { // Info text for all options on the UI const gangInfo = "Create and manage a gang for this Faction. Gangs will earn you money and " + "faction reputation"; -const hackingMissionInfo = - "Attempt a hacking mission for your faction. " + - "A mission is a mini game that, if won, earns you " + - "significant reputation with this faction. (Recommended hacking level: 200+)"; const hackingContractsInfo = "Complete hacking contracts for your faction. " + "Your effectiveness, which determines how much " + @@ -96,11 +92,6 @@ function MainPage({ faction, rerender, onAugmentations }: IMainProps): React.Rea player.startFactionHackWork(router, faction); } - function startHackingMission(faction: Faction): void { - player.singularityStopWork(); - router.toHackingMission(faction); - } - function startSecurityWork(faction: Faction): void { player.startFactionSecurityWork(router, faction); } @@ -138,13 +129,6 @@ function MainPage({ faction, rerender, onAugmentations }: IMainProps): React.Rea setGangOpen(false)} /> )} - {!isPlayersGang && factionInfo.offerHackingMission && ( -