diff --git a/src/Gang/ui/TerritoryInfoModal.tsx b/src/Gang/ui/TerritoryInfoModal.tsx
new file mode 100644
index 000000000..3c4c74e16
--- /dev/null
+++ b/src/Gang/ui/TerritoryInfoModal.tsx
@@ -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 (
+
+ <>
+
+ Clashing
+
+
+ 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.
+
+
+ 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.
+
+
+
+ Territory
+
+
+ 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.
+
+
+ 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.
+
+
+
+ Territory Clash Chance
+
+
+ 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.
+
+
+
+ );
+}
diff --git a/src/Gang/ui/TerritorySubpage.tsx b/src/Gang/ui/TerritorySubpage.tsx
index 434bf1c3e..9a52ea2ab 100644
--- a/src/Gang/ui/TerritorySubpage.tsx
+++ b/src/Gang/ui/TerritorySubpage.tsx
@@ -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 (
- <>
+
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.
-
-
- 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.
-
-
- 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.
-
-
- 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.
-
-
- 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.
- setInfoOpen(true)} sx={{ my: 1 }}>
+
+ About Gang Territory
+
+
+
+
+ {gang.facName} (Your gang)
+
+
+ (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%.
-
- }
- >
+ />}
+ 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
-
- }
- />
-
-
-
- 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)}
-
-
-
-
- } />
+
+ (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.
-
- }
- >
+ />}
+ 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
-
- }
- />
-
-
+ } />
+
-
- {gang.facName}
-
-
- Power: {formatNumber(AllGangs[gang.facName].power, 6)}
-
- Territory: {formatTerritory(AllGangs[gang.facName].territory)}%
-
-
+ Territory Clash Chance: {numeralWrapper.formatPercentage(gang.territoryClashChance, 3)}
+ Power: {formatNumber(AllGangs[gang.facName].power, 3)}
+ Territory: {formatTerritory(AllGangs[gang.facName].territory)}%
+
+
{gangNames.map((name) => (
))}
-
-
+
+ setInfoOpen(false)} />
+
);
}
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 (
-
- {props.name}
-
- Power: {formatNumber(power, 6)}
-
- Territory: {formatTerritory(AllGangs[props.name].territory)}%
- Chance to win clash with this gang: {numeralWrapper.formatPercentage(clashVictoryChance, 3)}
-
-
-
+
+
+ {props.name}
+
+
+ Power: {formatNumber(power, 3)}
+ Territory: {formatTerritory(AllGangs[props.name].territory)}%
+ Clash Win Chance: {numeralWrapper.formatPercentage(clashVictoryChance, 3)}
+
+
);
}