UI: Added new locale-aware and configurable number formatting (#354)

src/PersonObjects/Grafting/ui/GraftingRoot.tsx

@@ -15,7 +15,8 @@ import { Router } from "../../../ui/GameRoot";
 import { Page } from "../../../ui/Router";
 import { ConfirmationModal } from "../../../ui/React/ConfirmationModal";
 import { Money } from "../../../ui/React/Money";
-import { convertTimeMsToTimeElapsedString, formatNumber } from "../../../utils/StringHelperFunctions";
+import { formatNumberNoSuffix } from "../../../ui/formatNumber";
+import { convertTimeMsToTimeElapsedString } from "../../../utils/StringHelperFunctions";
 import { Player } from "@player";
 import { GraftableAugmentation } from "../GraftableAugmentation";
 import { calculateGraftingTimeWithBonus, getGraftingAvailableAugs } from "../GraftingHelpers";
@@ -223,7 +224,7 @@ export const GraftingRoot = (): React.ReactElement => {
             <b>Entropy strength:</b> {Player.entropy}
             <br />
             <b>All multipliers decreased by:</b>{" "}
-            {formatNumber((1 - CONSTANTS.EntropyEffect ** Player.entropy) * 100, 3)}% (multiplicative)
+            {formatNumberNoSuffix((1 - CONSTANTS.EntropyEffect ** Player.entropy) * 100, 3)}% (multiplicative)
           </Typography>
         </Paper>
 

src/PersonObjects/Player/PlayerObjectGeneralMethods.ts

@@ -34,7 +34,7 @@ import { SourceFiles } from "../../SourceFile/SourceFiles";
 import { getHospitalizationCost } from "../../Hospital/Hospital";
 import { HacknetServer } from "../../Hacknet/HacknetServer";
 
-import { numeralWrapper } from "../../ui/numeralFormat";
+import { formatMoney } from "../../ui/formatNumber";
 import { MoneySourceTracker } from "../../utils/MoneySourceTracker";
 import { dialogBoxCreate } from "../../ui/React/DialogBox";
 
@@ -257,7 +257,7 @@ export function takeDamage(this: PlayerObject, amt: number): boolean {
 
 export function hospitalize(this: PlayerObject): number {
   const cost = getHospitalizationCost();
-  SnackbarEvents.emit(`You've been Hospitalized for ${numeralWrapper.formatMoney(cost)}`, ToastVariant.SUCCESS, 2000);
+  SnackbarEvents.emit(`You've been Hospitalized for ${formatMoney(cost)}`, ToastVariant.SUCCESS, 2000);
 
   this.loseMoney(cost, "hospitalization");
   this.hp.current = this.hp.max;
@@ -1164,7 +1164,7 @@ export function gainCodingContractReward(
     default: {
       const moneyGain = CONSTANTS.CodingContractBaseMoneyGain * difficulty * BitNodeMultipliers.CodingContractMoney;
       this.gainMoney(moneyGain, "codingcontract");
-      return `Gained ${numeralWrapper.formatMoney(moneyGain)}`;
+      return `Gained ${formatMoney(moneyGain)}`;
     }
   }
   /* eslint-enable no-case-declarations */

src/PersonObjects/Sleeve/Sleeve.ts

@@ -23,7 +23,7 @@ import { CityName, CrimeType, GymType, LocationName, UniversityClassType } from
 import { Factions } from "../../Faction/Factions";
 
 import { Generic_fromJSON, Generic_toJSON, IReviverValue, Reviver } from "../../utils/JSONReviver";
-import { numeralWrapper } from "../../ui/numeralFormat";
+import { formatPercent } from "../../ui/formatNumber";
 import { FactionWorkType } from "../../Enums";
 import { Work } from "./Work/Work";
 import { SleeveClassWork } from "./Work/SleeveClassWork";
@@ -438,7 +438,7 @@ export class Sleeve extends Person implements SleevePerson {
     if (chances[0] >= 1) {
       return "100%";
     } else {
-      return `${numeralWrapper.formatPercentage(chances[0])} - ${numeralWrapper.formatPercentage(chances[1])}`;
+      return `${formatPercent(chances[0])} - ${formatPercent(chances[1])}`;
     }
   }
 

src/PersonObjects/Sleeve/ui/CovenantSleeveMemoryUpgrade.tsx

@@ -7,7 +7,7 @@ import React, { useState } from "react";
 import { Sleeve } from "../Sleeve";
 import { Player } from "@player";
 
-import { numeralWrapper } from "../../../ui/numeralFormat";
+import { formatSleeveMemory } from "../../../ui/formatNumber";
 import { Money } from "../../../ui/React/Money";
 
 import Typography from "@mui/material/Typography";
@@ -80,7 +80,7 @@ export function CovenantSleeveMemoryUpgrade(props: IProps): React.ReactElement {
       </Typography>
       <Typography>
         Purchase a memory upgrade for your sleeve. Note that a sleeve's max memory is 100 (current:{" "}
-        {numeralWrapper.formatSleeveMemory(props.sleeve.memory)})
+        {formatSleeveMemory(props.sleeve.memory)})
       </Typography>
 
       <Box display="flex" flexDirection="row" alignItems="center">

src/PersonObjects/Sleeve/ui/MoreStatsModal.tsx

@@ -1,5 +1,5 @@
 import { Sleeve } from "../Sleeve";
-import { numeralWrapper } from "../../../ui/numeralFormat";
+import { formatExp, formatPercent } from "../../../ui/formatNumber";
 import { convertTimeMsToTimeElapsedString } from "../../../utils/StringHelperFunctions";
 import { CONSTANTS } from "../../../Constants";
 import { Typography } from "@mui/material";
@@ -18,74 +18,39 @@ export function MoreStatsModal(props: IProps): React.ReactElement {
     <Modal open={props.open} onClose={props.onClose}>
       <StatsTable
         rows={[
-          [
-            <>Hacking:&nbsp;</>,
-            props.sleeve.skills.hacking,
-            <>&nbsp;({numeralWrapper.formatExp(props.sleeve.exp.hacking)} exp)</>,
-          ],
-          [
-            <>Strength:&nbsp;</>,
-            props.sleeve.skills.strength,
-            <>&nbsp;({numeralWrapper.formatExp(props.sleeve.exp.strength)} exp)</>,
-          ],
-          [
-            <>Defense:&nbsp;</>,
-            props.sleeve.skills.defense,
-            <>&nbsp;({numeralWrapper.formatExp(props.sleeve.exp.defense)} exp)</>,
-          ],
+          [<>Hacking:&nbsp;</>, props.sleeve.skills.hacking, <>&nbsp;({formatExp(props.sleeve.exp.hacking)} exp)</>],
+          [<>Strength:&nbsp;</>, props.sleeve.skills.strength, <>&nbsp;({formatExp(props.sleeve.exp.strength)} exp)</>],
+          [<>Defense:&nbsp;</>, props.sleeve.skills.defense, <>&nbsp;({formatExp(props.sleeve.exp.defense)} exp)</>],
           [
             <>Dexterity:&nbsp;</>,
             props.sleeve.skills.dexterity,
-            <>&nbsp;({numeralWrapper.formatExp(props.sleeve.exp.dexterity)} exp)</>,
-          ],
-          [
-            <>Agility:&nbsp;</>,
-            props.sleeve.skills.agility,
-            <>&nbsp;({numeralWrapper.formatExp(props.sleeve.exp.agility)} exp)</>,
-          ],
-          [
-            <>Charisma:&nbsp;</>,
-            props.sleeve.skills.charisma,
-            <>&nbsp;({numeralWrapper.formatExp(props.sleeve.exp.charisma)} exp)</>,
+            <>&nbsp;({formatExp(props.sleeve.exp.dexterity)} exp)</>,
           ],
+          [<>Agility:&nbsp;</>, props.sleeve.skills.agility, <>&nbsp;({formatExp(props.sleeve.exp.agility)} exp)</>],
+          [<>Charisma:&nbsp;</>, props.sleeve.skills.charisma, <>&nbsp;({formatExp(props.sleeve.exp.charisma)} exp)</>],
         ]}
         title="Stats:"
       />
       <br />
       <StatsTable
         rows={[
-          [<>Hacking Level multiplier:&nbsp;</>, numeralWrapper.formatPercentage(props.sleeve.mults.hacking)],
-          [<>Hacking Experience multiplier:&nbsp;</>, numeralWrapper.formatPercentage(props.sleeve.mults.hacking_exp)],
-          [<>Strength Level multiplier:&nbsp;</>, numeralWrapper.formatPercentage(props.sleeve.mults.strength)],
-          [
-            <>Strength Experience multiplier:&nbsp;</>,
-            numeralWrapper.formatPercentage(props.sleeve.mults.strength_exp),
-          ],
-          [<>Defense Level multiplier:&nbsp;</>, numeralWrapper.formatPercentage(props.sleeve.mults.defense)],
-          [<>Defense Experience multiplier:&nbsp;</>, numeralWrapper.formatPercentage(props.sleeve.mults.defense_exp)],
-          [<>Dexterity Level multiplier:&nbsp;</>, numeralWrapper.formatPercentage(props.sleeve.mults.dexterity)],
-          [
-            <>Dexterity Experience multiplier:&nbsp;</>,
-            numeralWrapper.formatPercentage(props.sleeve.mults.dexterity_exp),
-          ],
-          [<>Agility Level multiplier:&nbsp;</>, numeralWrapper.formatPercentage(props.sleeve.mults.agility)],
-          [<>Agility Experience multiplier:&nbsp;</>, numeralWrapper.formatPercentage(props.sleeve.mults.agility_exp)],
-          [<>Charisma Level multiplier:&nbsp;</>, numeralWrapper.formatPercentage(props.sleeve.mults.charisma)],
-          [
-            <>Charisma Experience multiplier:&nbsp;</>,
-            numeralWrapper.formatPercentage(props.sleeve.mults.charisma_exp),
-          ],
-          [
-            <>Faction Reputation Gain multiplier:&nbsp;</>,
-            numeralWrapper.formatPercentage(props.sleeve.mults.faction_rep),
-          ],
-          [
-            <>Company Reputation Gain multiplier:&nbsp;</>,
-            numeralWrapper.formatPercentage(props.sleeve.mults.company_rep),
-          ],
-          [<>Salary multiplier:&nbsp;</>, numeralWrapper.formatPercentage(props.sleeve.mults.work_money)],
-          [<>Crime Money multiplier:&nbsp;</>, numeralWrapper.formatPercentage(props.sleeve.mults.crime_money)],
-          [<>Crime Success multiplier:&nbsp;</>, numeralWrapper.formatPercentage(props.sleeve.mults.crime_success)],
+          [<>Hacking Level multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.hacking)],
+          [<>Hacking Experience multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.hacking_exp)],
+          [<>Strength Level multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.strength)],
+          [<>Strength Experience multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.strength_exp)],
+          [<>Defense Level multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.defense)],
+          [<>Defense Experience multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.defense_exp)],
+          [<>Dexterity Level multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.dexterity)],
+          [<>Dexterity Experience multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.dexterity_exp)],
+          [<>Agility Level multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.agility)],
+          [<>Agility Experience multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.agility_exp)],
+          [<>Charisma Level multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.charisma)],
+          [<>Charisma Experience multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.charisma_exp)],
+          [<>Faction Reputation Gain multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.faction_rep)],
+          [<>Company Reputation Gain multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.company_rep)],
+          [<>Salary multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.work_money)],
+          [<>Crime Money multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.crime_money)],
+          [<>Crime Success multiplier:&nbsp;</>, formatPercent(props.sleeve.mults.crime_success)],
         ]}
         title="Multipliers:"
       />

src/PersonObjects/Sleeve/ui/SleeveElem.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { FactionWorkType } from "../../../Enums";
 import { CONSTANTS } from "../../../Constants";
 import { Player } from "@player";
-import { numeralWrapper } from "../../../ui/numeralFormat";
+import { formatPercent } from "../../../ui/formatNumber";
 import { ProgressBar } from "../../../ui/React/Progress";
 import { Sleeve } from "../Sleeve";
 import { MoreStatsModal } from "./MoreStatsModal";
@@ -77,7 +77,7 @@ export function SleeveElem(props: IProps): React.ReactElement {
     desc = (
       <>
         This sleeve is currently attempting {crime.workName} (Success Rate:{" "}
-        {numeralWrapper.formatPercentage(crime.successRate(props.sleeve))}).
+        {formatPercent(crime.successRate(props.sleeve))}).
       </>
     );
   }

src/PersonObjects/Sleeve/ui/StatsElement.tsx

@@ -4,7 +4,13 @@ import { Typography, Table, TableBody, TableCell, TableRow } from "@mui/material
 
 import { CONSTANTS } from "../../../Constants";
 
-import { numeralWrapper } from "../../../ui/numeralFormat";
+import {
+  formatExp,
+  formatHp,
+  formatSleeveMemory,
+  formatSleeveShock,
+  formatSleeveSynchro,
+} from "../../../ui/formatNumber";
 import { Settings } from "../../../Settings/Settings";
 import { StatsRow } from "../../../ui/React/StatsRow";
 import { characterOverviewStyles as useStyles } from "../../../ui/React/CharacterOverview";
@@ -35,9 +41,7 @@ export function StatsElement(props: IProps): React.ReactElement {
           name="HP"
           color={Settings.theme.hp}
           data={{
-            content: `${numeralWrapper.formatHp(props.sleeve.hp.current)} / ${numeralWrapper.formatHp(
-              props.sleeve.hp.max,
-            )}`,
+            content: `${formatHp(props.sleeve.hp.current)} / ${formatHp(props.sleeve.hp.max)}`,
           }}
         />
         <StatsRow
@@ -78,17 +82,17 @@ export function StatsElement(props: IProps): React.ReactElement {
         <StatsRow
           name="Shock"
           color={Settings.theme.primary}
-          data={{ content: numeralWrapper.formatSleeveShock(props.sleeve.shock) }}
+          data={{ content: formatSleeveShock(props.sleeve.shock) }}
         />
         <StatsRow
           name="Sync"
           color={Settings.theme.primary}
-          data={{ content: numeralWrapper.formatSleeveSynchro(props.sleeve.sync) }}
+          data={{ content: formatSleeveSynchro(props.sleeve.sync) }}
         />
         <StatsRow
           name="Memory"
           color={Settings.theme.primary}
-          data={{ content: numeralWrapper.formatSleeveMemory(props.sleeve.memory) }}
+          data={{ content: formatSleeveMemory(props.sleeve.memory) }}
         />
       </TableBody>
     </Table>
@@ -103,36 +107,36 @@ export function EarningsElement(props: IProps): React.ReactElement {
     const gains = props.sleeve.currentWork.getExp(props.sleeve);
     data = [
       [`Money:`, <Money money={gains.money} />],
-      [`Hacking Exp:`, `${numeralWrapper.formatExp(gains.hackExp)}`],
-      [`Strength Exp:`, `${numeralWrapper.formatExp(gains.strExp)}`],
-      [`Defense Exp:`, `${numeralWrapper.formatExp(gains.defExp)}`],
-      [`Dexterity Exp:`, `${numeralWrapper.formatExp(gains.dexExp)}`],
-      [`Agility Exp:`, `${numeralWrapper.formatExp(gains.agiExp)}`],
-      [`Charisma Exp:`, `${numeralWrapper.formatExp(gains.chaExp)}`],
+      [`Hacking Exp:`, `${formatExp(gains.hackExp)}`],
+      [`Strength Exp:`, `${formatExp(gains.strExp)}`],
+      [`Defense Exp:`, `${formatExp(gains.defExp)}`],
+      [`Dexterity Exp:`, `${formatExp(gains.dexExp)}`],
+      [`Agility Exp:`, `${formatExp(gains.agiExp)}`],
+      [`Charisma Exp:`, `${formatExp(gains.chaExp)}`],
     ];
   }
   if (isSleeveClassWork(props.sleeve.currentWork)) {
     const rates = props.sleeve.currentWork.calculateRates(props.sleeve);
     data = [
       [`Money:`, <MoneyRate money={CYCLES_PER_SEC * rates.money} />],
-      [`Hacking Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.hackExp)} / sec`],
-      [`Strength Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.strExp)} / sec`],
-      [`Defense Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.defExp)} / sec`],
-      [`Dexterity Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.dexExp)} / sec`],
-      [`Agility Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.agiExp)} / sec`],
-      [`Charisma Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.chaExp)} / sec`],
+      [`Hacking Exp:`, `${formatExp(CYCLES_PER_SEC * rates.hackExp)} / sec`],
+      [`Strength Exp:`, `${formatExp(CYCLES_PER_SEC * rates.strExp)} / sec`],
+      [`Defense Exp:`, `${formatExp(CYCLES_PER_SEC * rates.defExp)} / sec`],
+      [`Dexterity Exp:`, `${formatExp(CYCLES_PER_SEC * rates.dexExp)} / sec`],
+      [`Agility Exp:`, `${formatExp(CYCLES_PER_SEC * rates.agiExp)} / sec`],
+      [`Charisma Exp:`, `${formatExp(CYCLES_PER_SEC * rates.chaExp)} / sec`],
     ];
   }
   if (isSleeveFactionWork(props.sleeve.currentWork)) {
     const rates = props.sleeve.currentWork.getExpRates(props.sleeve);
     const repGain = props.sleeve.currentWork.getReputationRate(props.sleeve);
     data = [
-      [`Hacking Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.hackExp)} / sec`],
-      [`Strength Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.strExp)} / sec`],
-      [`Defense Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.defExp)} / sec`],
-      [`Dexterity Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.dexExp)} / sec`],
-      [`Agility Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.agiExp)} / sec`],
-      [`Charisma Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.chaExp)} / sec`],
+      [`Hacking Exp:`, `${formatExp(CYCLES_PER_SEC * rates.hackExp)} / sec`],
+      [`Strength Exp:`, `${formatExp(CYCLES_PER_SEC * rates.strExp)} / sec`],
+      [`Defense Exp:`, `${formatExp(CYCLES_PER_SEC * rates.defExp)} / sec`],
+      [`Dexterity Exp:`, `${formatExp(CYCLES_PER_SEC * rates.dexExp)} / sec`],
+      [`Agility Exp:`, `${formatExp(CYCLES_PER_SEC * rates.agiExp)} / sec`],
+      [`Charisma Exp:`, `${formatExp(CYCLES_PER_SEC * rates.chaExp)} / sec`],
       [`Reputation:`, <ReputationRate reputation={CYCLES_PER_SEC * repGain} />],
     ];
   }
@@ -141,12 +145,12 @@ export function EarningsElement(props: IProps): React.ReactElement {
     const rates = props.sleeve.currentWork.getGainRates(props.sleeve);
     data = [
       [`Money:`, <MoneyRate money={CYCLES_PER_SEC * rates.money} />],
-      [`Hacking Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.hackExp)} / sec`],
-      [`Strength Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.strExp)} / sec`],
-      [`Defense Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.defExp)} / sec`],
-      [`Dexterity Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.dexExp)} / sec`],
-      [`Agility Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.agiExp)} / sec`],
-      [`Charisma Exp:`, `${numeralWrapper.formatExp(CYCLES_PER_SEC * rates.chaExp)} / sec`],
+      [`Hacking Exp:`, `${formatExp(CYCLES_PER_SEC * rates.hackExp)} / sec`],
+      [`Strength Exp:`, `${formatExp(CYCLES_PER_SEC * rates.strExp)} / sec`],
+      [`Defense Exp:`, `${formatExp(CYCLES_PER_SEC * rates.defExp)} / sec`],
+      [`Dexterity Exp:`, `${formatExp(CYCLES_PER_SEC * rates.dexExp)} / sec`],
+      [`Agility Exp:`, `${formatExp(CYCLES_PER_SEC * rates.agiExp)} / sec`],
+      [`Charisma Exp:`, `${formatExp(CYCLES_PER_SEC * rates.chaExp)} / sec`],
       [`Reputation:`, <ReputationRate reputation={CYCLES_PER_SEC * rates.reputation} />],
     ];
   }