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

/**
 * React Component for the first part of a gang member details.
 * Contains skills and exp.
 */
import React from "react";
import { dialogBoxCreate } from "../../../utils/DialogBox";
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";

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.
        <br />
        <br />
        The additional stat multiplier that the Gang Member gains upon ascension is based on the amount of exp they
        have.
        <br />
        <br />
        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 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 (
    <>
      <span className="tooltiptext smallfont">
        Hk: x{numeralWrapper.formatMultiplier(props.member.hack_mult * asc.hack)}(x
        {numeralWrapper.formatMultiplier(props.member.hack_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.hack)} Asc)
        <br />
        St: x{numeralWrapper.formatMultiplier(props.member.str_mult * asc.str)}
        (x{numeralWrapper.formatMultiplier(props.member.str_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.str)} Asc)
        <br />
        Df: x{numeralWrapper.formatMultiplier(props.member.def_mult * asc.def)}
        (x{numeralWrapper.formatMultiplier(props.member.def_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.def)} Asc)
        <br />
        Dx: x{numeralWrapper.formatMultiplier(props.member.dex_mult * asc.dex)}
        (x{numeralWrapper.formatMultiplier(props.member.dex_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.dex)} Asc)
        <br />
        Ag: x{numeralWrapper.formatMultiplier(props.member.agi_mult * asc.agi)}
        (x{numeralWrapper.formatMultiplier(props.member.agi_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.agi)} Asc)
        <br />
        Ch: x{numeralWrapper.formatMultiplier(props.member.cha_mult * asc.cha)}
        (x{numeralWrapper.formatMultiplier(props.member.cha_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.cha)} Asc)
      </span>
      <pre>
        Hacking: {formatNumber(props.member.hack, 0)} ({numeralWrapper.formatExp(props.member.hack_exp)} exp)
        <br />
        Strength: {formatNumber(props.member.str, 0)} ({numeralWrapper.formatExp(props.member.str_exp)} exp)
        <br />
        Defense: {formatNumber(props.member.def, 0)} ({numeralWrapper.formatExp(props.member.def_exp)} exp)
        <br />
        Dexterity: {formatNumber(props.member.dex, 0)} ({numeralWrapper.formatExp(props.member.dex_exp)} exp)
        <br />
        Agility: {formatNumber(props.member.agi, 0)} ({numeralWrapper.formatExp(props.member.agi_exp)} exp)
        <br />
        Charisma: {formatNumber(props.member.cha, 0)} ({numeralWrapper.formatExp(props.member.cha_exp)} exp)
        <br />
      </pre>
      <br />
      {props.member.canAscend() && (
        <>
          <button className="accordion-button noselect" onClick={ascend}>
            Ascend
          </button>
          <div className="help-tip noselect" style={{ marginTop: "5px" }} onClick={openAscensionHelp}>
            ?
          </div>
        </>
      )}
    </>
  );
}