bitburner-src/src/Faction/ui/Info.tsx

/**
 * React component for general information about the faction. This includes the
 * factions "motto", reputation, favor, and gameplay instructions
 */
import * as React from "react";

import { Faction } from "../../Faction/Faction";
import { FactionInfo } from "../../Faction/FactionInfo";

import { AutoupdatingParagraph } from "../../ui/React/AutoupdatingParagraph";
import { ParagraphWithTooltip } from "../../ui/React/ParagraphWithTooltip";
import { Reputation } from "../../ui/React/Reputation";
import { Favor } from "../../ui/React/Favor";
import { MathComponent } from "mathjax-react";

type IProps = {
  faction: Faction;
  factionInfo: FactionInfo;
};

type IInnerHTMLMarkup = {
  __html: string;
};

const blockStyleMarkup = {
  display: "block",
};

const infoStyleMarkup = {
  display: "block",
  width: "70%",
};

export class Info extends React.Component<IProps, any> {
  constructor(props: IProps) {
    super(props);

    this.getFavorGainContent = this.getFavorGainContent.bind(this);
    this.getReputationContent = this.getReputationContent.bind(this);
  }

  getFavorGainContent(): JSX.Element {
    const favorGain = this.props.faction.getFavorGain()[0];
    return (
      <>
        You will have {Favor(this.props.faction.favor + favorGain)} faction
        favor after installing an Augmentation.
        <MathComponent
          tex={String.raw`\large{r = \text{total faction reputation}}`}
        />
        <MathComponent
          tex={String.raw`\large{favor=\left\lfloor\log_{1.02}\left(\frac{r+25000}{25500}\right)\right\rfloor}`}
        />
      </>
    );
  }

  getReputationContent(): JSX.Element {
    return <>Reputation: {Reputation(this.props.faction.playerReputation)}</>;
  }

  render(): React.ReactNode {
    const favorTooltip = (
      <>
        Faction favor increases the rate at which you earn reputation for this
        faction by 1% per favor. Faction favor is gained whenever you install an
        Augmentation. The amount of favor you gain depends on the total amount
        of reputation you earned with this faction. Across all resets.
        <MathComponent tex={String.raw`\large{r = reputation}`} />
        <MathComponent
          tex={String.raw`\large{\Delta r = \Delta r \times \frac{100+favor}{100}}`}
        />
      </>
    );

    const infoText: IInnerHTMLMarkup = {
      __html: this.props.factionInfo.infoText,
    };

    return (
      <div>
        <pre>
          <i className={"text"} dangerouslySetInnerHTML={infoText}></i>
        </pre>
        <p style={blockStyleMarkup}>-------------------------</p>
        <AutoupdatingParagraph
          intervalTime={5e3}
          getContent={this.getReputationContent}
          getTooltip={this.getFavorGainContent}
        />
        <p style={blockStyleMarkup}>-------------------------</p>
        <ParagraphWithTooltip
          content={<>Faction Favor: {Favor(this.props.faction.favor)}</>}
          tooltip={favorTooltip}
        />
        <p style={blockStyleMarkup}>-------------------------</p>
        <p style={infoStyleMarkup}>
          Perform work/carry out assignments for your faction to help further
          its cause! By doing so you will earn reputation for your faction. You
          will also gain reputation passively over time, although at a very slow
          rate. Earning reputation will allow you to purchase Augmentations
          through this faction, which are powerful upgrades that enhance your
          abilities.
        </p>
      </div>
    );
  }
}