mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-10 09:43:54 +01:00
Update gang territory UI
This commit is contained in:
nickofolas
parent
a205f42d88
commit
a032ee16be
54
src/Gang/ui/TerritoryInfoModal.tsx
Normal file
54
src/Gang/ui/TerritoryInfoModal.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import React from "react";
|
||||
|
||||
import Typography from "@mui/material/Typography";
|
||||
|
||||
import { Modal } from "../../ui/React/Modal";
|
||||
|
||||
interface IProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const TerritoryInfoModal = ({ open, onClose }: IProps): React.ReactElement => {
|
||||
return (
|
||||
<Modal open={open} onClose={onClose}>
|
||||
<>
|
||||
<Typography variant='h4'>
|
||||
Clashing
|
||||
</Typography>
|
||||
<Typography>
|
||||
Every ~20 seconds, your gang has a chance to 'clash' with other gangs. Your chance to win a clash depends on
|
||||
your gang's power, which is listed in the display below. Your gang's power slowly accumulates over time. The
|
||||
accumulation rate is determined by the stats of all Gang members you have assigned to the 'Territory Warfare'
|
||||
task. Gang members that are not assigned to this task do not contribute to your gang's power. Your gang also
|
||||
loses a small amount of power whenever you lose a clash.
|
||||
<br />
|
||||
<br />
|
||||
NOTE: Gang members assigned to 'Territory Warfare' can be killed during clashes. This can happen regardless of
|
||||
whether you win or lose the clash. A gang member being killed results in both respect and power loss for your
|
||||
gang.
|
||||
</Typography>
|
||||
<br />
|
||||
<Typography variant='h4'>
|
||||
Territory
|
||||
</Typography>
|
||||
<Typography>
|
||||
The amount of territory you have affects all aspects of your Gang members' production, including money, respect,
|
||||
and wanted level. It is very beneficial to have high territory control.
|
||||
<br />
|
||||
<br />
|
||||
To increase your chances of winning territory assign gang members to "Territory Warfare", this will build your
|
||||
gang power. Then enable "Engage in Territory Warfare" to start fighting over territory.
|
||||
</Typography>
|
||||
<br />
|
||||
<Typography variant='h4'>
|
||||
Territory Clash Chance
|
||||
</Typography>
|
||||
<Typography>
|
||||
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.
|
||||
</Typography>
|
||||
</>
|
||||
</Modal >
|
||||
);
|
||||
}
|
||||
@ -1,133 +1,100 @@
|
||||
/**
|
||||
* React Component for the territory subpage.
|
||||
*/
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
|
||||
import {
|
||||
Container,
|
||||
Button,
|
||||
Paper,
|
||||
Box,
|
||||
Tooltip,
|
||||
Switch,
|
||||
FormControlLabel,
|
||||
Typography
|
||||
} from "@mui/material";
|
||||
import { Help } from "@mui/icons-material";
|
||||
|
||||
import { numeralWrapper } from "../../ui/numeralFormat";
|
||||
import { formatNumber } from "../../utils/StringHelperFunctions";
|
||||
import { AllGangs } from "../AllGangs";
|
||||
import { useGang } from "./Context";
|
||||
|
||||
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";
|
||||
import { AllGangs } from "../AllGangs";
|
||||
|
||||
import { useGang } from "./Context";
|
||||
import { TerritoryInfoModal } from "./TerritoryInfoModal";
|
||||
|
||||
export function TerritorySubpage(): React.ReactElement {
|
||||
const gang = useGang();
|
||||
const gangNames = Object.keys(AllGangs).filter((g) => g != gang.facName);
|
||||
const [infoOpen, setInfoOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container disableGutters maxWidth="md" sx={{ mx: 0 }}>
|
||||
<Typography>
|
||||
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.
|
||||
<br />
|
||||
<br />
|
||||
Every ~20 seconds, your gang has a chance to 'clash' with other gangs. Your chance to win a clash depends on
|
||||
your gang's power, which is listed in the display below. Your gang's power slowly accumulates over time. The
|
||||
accumulation rate is determined by the stats of all Gang members you have assigned to the 'Territory Warfare'
|
||||
task. Gang members that are not assigned to this task do not contribute to your gang's power. Your gang also
|
||||
loses a small amount of power whenever you lose a clash.
|
||||
<br />
|
||||
<br />
|
||||
NOTE: Gang members assigned to 'Territory Warfare' can be killed during clashes. This can happen regardless of
|
||||
whether you win or lose the clash. A gang member being killed results in both respect and power loss for your
|
||||
gang.
|
||||
<br />
|
||||
<br />
|
||||
The amount of territory you have affects all aspects of your Gang members' production, including money, respect,
|
||||
and wanted level. It is very beneficial to have high territory control.
|
||||
<br />
|
||||
<br />
|
||||
To increase your chances of winning territory assign gang members to "Territory Warfare", this will build your
|
||||
gang power. Then enable "Engage in Territory Warfare" to start fighting over territory.
|
||||
</Typography>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
|
||||
<Button onClick={() => setInfoOpen(true)} sx={{ my: 1 }}>
|
||||
<Help sx={{ mr: 1 }} />
|
||||
About Gang Territory
|
||||
</Button>
|
||||
|
||||
<Box component={Paper} sx={{ p: 1, mb: 1 }}>
|
||||
<Typography variant="h6" sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
{gang.facName} (Your gang)
|
||||
</Typography>
|
||||
|
||||
<FormControlLabel
|
||||
control={<Switch
|
||||
checked={gang.territoryWarfareEngaged}
|
||||
onChange={(event) => (gang.territoryWarfareEngaged = event.target.checked)}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<Tooltip
|
||||
title={
|
||||
<Typography>
|
||||
Engaging in Territory Warfare sets your clash chance to 100%. Disengaging will cause your clash chance
|
||||
to gradually decrease until it reaches 0%.
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
/>}
|
||||
label={<Tooltip
|
||||
title={<Typography>
|
||||
Engaging in Territory Warfare sets your clash chance to 100%. Disengaging will cause your clash chance
|
||||
to gradually decrease until it reaches 0%.
|
||||
</Typography>}>
|
||||
<Typography>Engage in Territory Warfare</Typography>
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
<br />
|
||||
<Box display="flex">
|
||||
<Tooltip
|
||||
title={
|
||||
<Typography>
|
||||
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.
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
<Typography>
|
||||
Territory Clash Chance: {numeralWrapper.formatPercentage(gang.territoryClashChance, 3)}
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<br />
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
</Tooltip>} />
|
||||
<br />
|
||||
<FormControlLabel
|
||||
control={<Switch
|
||||
checked={gang.notifyMemberDeath}
|
||||
onChange={(event) => (gang.notifyMemberDeath = event.target.checked)}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<Tooltip
|
||||
title={
|
||||
<Typography>
|
||||
If this is enabled, then you will receive a pop-up notifying you whenever one of your Gang Members dies
|
||||
in a territory clash.
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
/>}
|
||||
label={<Tooltip
|
||||
title={<Typography>
|
||||
If this is enabled, then you will receive a pop-up notifying you whenever one of your Gang Members dies
|
||||
in a territory clash.
|
||||
</Typography>}>
|
||||
<Typography>Notify about Gang Member Deaths</Typography>
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
<br />
|
||||
<Paper>
|
||||
</Tooltip>} />
|
||||
|
||||
<Typography>
|
||||
<b>
|
||||
<u>{gang.facName}</u>
|
||||
</b>
|
||||
<br />
|
||||
Power: {formatNumber(AllGangs[gang.facName].power, 6)}
|
||||
<br />
|
||||
Territory: {formatTerritory(AllGangs[gang.facName].territory)}%
|
||||
<br />
|
||||
<br />
|
||||
<b>Territory Clash Chance:</b> {numeralWrapper.formatPercentage(gang.territoryClashChance, 3)} <br />
|
||||
<b>Power:</b> {formatNumber(AllGangs[gang.facName].power, 3)} <br />
|
||||
<b>Territory:</b> {formatTerritory(AllGangs[gang.facName].territory)}% <br />
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
|
||||
{gangNames.map((name) => (
|
||||
<OtherGangTerritory key={name} name={name} />
|
||||
))}
|
||||
</Paper>
|
||||
</>
|
||||
</Box>
|
||||
<TerritoryInfoModal open={infoOpen} onClose={() => setInfoOpen(false)} />
|
||||
</Container >
|
||||
);
|
||||
}
|
||||
function formatTerritory(n: number): string {
|
||||
const v = n * 100;
|
||||
const precision = 3;
|
||||
if (v <= 0) {
|
||||
return formatNumber(0, 2);
|
||||
return formatNumber(0, precision);
|
||||
} else if (v >= 100) {
|
||||
return formatNumber(100, 2);
|
||||
return formatNumber(100, precision);
|
||||
} else {
|
||||
return formatNumber(v, 2);
|
||||
return formatNumber(v, precision);
|
||||
}
|
||||
}
|
||||
|
||||
@ -141,15 +108,15 @@ function OtherGangTerritory(props: ITerritoryProps): React.ReactElement {
|
||||
const power = AllGangs[props.name].power;
|
||||
const clashVictoryChance = playerPower / (power + playerPower);
|
||||
return (
|
||||
<Typography>
|
||||
<u>{props.name}</u>
|
||||
<br />
|
||||
Power: {formatNumber(power, 6)}
|
||||
<br />
|
||||
Territory: {formatTerritory(AllGangs[props.name].territory)}%<br />
|
||||
Chance to win clash with this gang: {numeralWrapper.formatPercentage(clashVictoryChance, 3)}
|
||||
<br />
|
||||
<br />
|
||||
</Typography>
|
||||
<Box component={Paper} sx={{ p: 1 }}>
|
||||
<Typography variant="h6" sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
{props.name}
|
||||
</Typography>
|
||||
<Typography>
|
||||
<b>Power:</b> {formatNumber(power, 3)} <br />
|
||||
<b>Territory:</b> {formatTerritory(AllGangs[props.name].territory)}% <br />
|
||||
<b>Clash Win Chance:</b> {numeralWrapper.formatPercentage(clashVictoryChance, 3)}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user