bitburner-src/src/Gang/ui/TerritorySubpage.tsx

/**
 * React Component for the territory subpage.
 */
import React from "react";
import { numeralWrapper } from "../../ui/numeralFormat";
import { dialogBoxCreate } from "../../../utils/DialogBox";
import { formatNumber } from "../../../utils/StringHelperFunctions";
import { AllGangs } from "../AllGangs";
import { Gang } from "../Gang";

interface IProps {
    gang: Gang;
}

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 (<span key={name}>
            <u>{name}</u><br />
            Power: {formatNumber(power, 6)}<br />
            Territory: {formatTerritory(AllGangs[name].territory)}%<br />
            Chance to win clash with this gang: {numeralWrapper.formatPercentage(clashVictoryChance, 3)}<br />
            <br />
        </span>);
    }

    const gangNames = Object.keys(AllGangs).filter(g => g != props.gang.facName);

    return (<div style={{width: '70%'}}>
        <p className="noselect">
            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 />
        </p>
        <input
            checked={props.gang.territoryWarfareEngaged}
            id="warfare"
            type="checkbox"
            style={{display: "inline-block", margin: "2px"}}
            onChange={(event)=> props.gang.territoryWarfareEngaged = event.target.checked}/>
        <label
            htmlFor="warfare"
            className="tooltip noselect"
            style={{color: "white", display: 'inline-block'}}>
            Engage in Territory Warfare
            <span className="tooltiptext" style={{display: "inline-block"}}>
                Engaging in Territory Warfare sets your clash chance to 100%.
                Disengaging will cause your clash chance to gradually decrease
                until it reaches 0%.
            </span>
        </label>
        <br />
        <p style={{display: 'inline-block'}}>
            Territory Clash Chance: {numeralWrapper.formatPercentage(props.gang.territoryClashChance, 3)}
        </p>
        <div
            className="help-tip noselect"
            style={{display: "inline-block"}}
            onClick={openWarfareHelp}>?</div>
        <br />

        <input
            checked={props.gang.notifyMemberDeath}
            id="notify"
            type="checkbox"
            style={{display: "inline-block", margin: "2px"}}
            onChange={(event)=> props.gang.notifyMemberDeath = event.target.checked}/>
        <label htmlFor="warfare" className="tooltip noselect" style={{color: "white", display: 'inline-block'}}>
            Notify about Gang Member Deaths
            <span className="tooltiptext" style={{display: "inline-block"}}>
                If this is enabled, then you will receive a pop-up notifying you
                whenever one of your Gang Members dies in a territory clash.
            </span>
        </label>
        <br />
        <fieldset style={{display: "block", margin: "6px"}}>
            <p>
                <b><u>{props.gang.facName}</u></b><br />
                Power: {formatNumber(AllGangs[props.gang.facName].power, 6)}<br />
                Territory: {formatTerritory(AllGangs[props.gang.facName].territory)}%<br />
                <br />
                {gangNames.map(name => otherGangTerritory(name))}
            </p>
        </fieldset>
    </div>);
}