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

src/ui/React/CharacterOverview.tsx

@@ -4,7 +4,7 @@ import React, { useMemo, useState, useEffect } from "react";
 import { Theme, useTheme } from "@mui/material/styles";
 import makeStyles from "@mui/styles/makeStyles";
 import createStyles from "@mui/styles/createStyles";
-import { numeralWrapper } from "../numeralFormat";
+import { formatHp, formatMoney, formatSkill } from "../formatNumber";
 import { Reputation } from "./Reputation";
 import { KillScriptsModal } from "./KillScriptsModal";
 import { convertTimeMsToTimeElapsedString } from "../../utils/StringHelperFunctions";
@@ -61,15 +61,15 @@ const valUpdaters: Record<RowName, () => any> = {
 
 //These formattedVals functions don't take in a value because of the weirdness around HP.
 const formattedVals: Record<RowName, () => string> = {
-  HP: () => `${numeralWrapper.formatHp(Player.hp.current)} / ${numeralWrapper.formatHp(Player.hp.max)}`,
-  Money: () => numeralWrapper.formatMoney(Player.money),
-  Hack: () => numeralWrapper.formatSkill(Player.skills.hacking),
-  Str: () => numeralWrapper.formatSkill(Player.skills.strength),
-  Def: () => numeralWrapper.formatSkill(Player.skills.defense),
-  Dex: () => numeralWrapper.formatSkill(Player.skills.dexterity),
-  Agi: () => numeralWrapper.formatSkill(Player.skills.agility),
-  Cha: () => numeralWrapper.formatSkill(Player.skills.charisma),
-  Int: () => numeralWrapper.formatSkill(Player.skills.intelligence),
+  HP: () => `${formatHp(Player.hp.current)} / ${formatHp(Player.hp.max)}`,
+  Money: () => formatMoney(Player.money),
+  Hack: () => formatSkill(Player.skills.hacking),
+  Str: () => formatSkill(Player.skills.strength),
+  Def: () => formatSkill(Player.skills.defense),
+  Dex: () => formatSkill(Player.skills.dexterity),
+  Agi: () => formatSkill(Player.skills.agility),
+  Cha: () => formatSkill(Player.skills.charisma),
+  Int: () => formatSkill(Player.skills.intelligence),
 };
 
 const skillMultUpdaters: Record<SkillRowName, () => number> = {

src/ui/React/Favor.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { numeralWrapper } from "../numeralFormat";
+import { formatFavor } from "../formatNumber";
 import { Theme } from "@mui/material/styles";
 import makeStyles from "@mui/styles/makeStyles";
 import createStyles from "@mui/styles/createStyles";
@@ -14,5 +14,5 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export function Favor({ favor }: { favor: number | string }): React.ReactElement {
   const classes = useStyles();
-  return <span className={classes.favor}>{typeof favor === "number" ? numeralWrapper.formatFavor(favor) : favor}</span>;
+  return <span className={classes.favor}>{typeof favor === "number" ? formatFavor(favor) : favor}</span>;
 }

src/ui/React/HashRate.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { numeralWrapper } from "../numeralFormat";
+import { formatHashes } from "../formatNumber";
 import { Hashes } from "./Hashes";
 
 export function HashRate({ hashes }: { hashes: number }): React.ReactElement {
-  return <Hashes hashes={`${numeralWrapper.formatHashes(hashes)} h / s`} />;
+  return <Hashes hashes={`${formatHashes(hashes)} h / s`} />;
 }

src/ui/React/Hashes.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { numeralWrapper } from "../numeralFormat";
+import { formatHashes } from "../formatNumber";
 import { Theme } from "@mui/material/styles";
 import makeStyles from "@mui/styles/makeStyles";
 import createStyles from "@mui/styles/createStyles";
@@ -14,7 +14,5 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export function Hashes({ hashes }: { hashes: number | string }): React.ReactElement {
   const classes = useStyles();
-  return (
-    <span className={classes.money}>{typeof hashes === "number" ? numeralWrapper.formatHashes(hashes) : hashes}</span>
-  );
+  return <span className={classes.money}>{typeof hashes === "number" ? formatHashes(hashes) : hashes}</span>;
 }

src/ui/React/ImportSaveRoot.tsx

@@ -27,8 +27,8 @@ import WarningIcon from "@mui/icons-material/Warning";
 
 import { ImportData, saveObject } from "../../SaveObject";
 import { Settings } from "../../Settings/Settings";
-import { convertTimeMsToTimeElapsedString, formatNumber } from "../../utils/StringHelperFunctions";
-import { numeralWrapper } from "../numeralFormat";
+import { convertTimeMsToTimeElapsedString } from "../../utils/StringHelperFunctions";
+import { formatMoney, formatNumberNoSuffix } from "../formatNumber";
 import { ConfirmationModal } from "./ConfirmationModal";
 import { pushImportResult } from "../../Electron";
 import { Router } from "../GameRoot";
@@ -231,8 +231,8 @@ export function ImportSaveRoot(props: IProps): JSX.Element {
 
             <TableRow>
               <TableCell>Money</TableCell>
-              <TableCell>{numeralWrapper.formatMoney(currentData.playerData?.money ?? 0)}</TableCell>
-              <TableCell>{numeralWrapper.formatMoney(importData.playerData?.money ?? 0)}</TableCell>
+              <TableCell>{formatMoney(currentData.playerData?.money ?? 0)}</TableCell>
+              <TableCell>{formatMoney(importData.playerData?.money ?? 0)}</TableCell>
               <TableCell>
                 {importData.playerData?.money !== currentData.playerData?.money && (
                   <ComparisonIcon
@@ -244,8 +244,8 @@ export function ImportSaveRoot(props: IProps): JSX.Element {
 
             <TableRow>
               <TableCell>Hacking</TableCell>
-              <TableCell>{formatNumber(currentData.playerData?.hacking ?? 0, 0)}</TableCell>
-              <TableCell>{formatNumber(importData.playerData?.hacking ?? 0, 0)}</TableCell>
+              <TableCell>{formatNumberNoSuffix(currentData.playerData?.hacking ?? 0, 0)}</TableCell>
+              <TableCell>{formatNumberNoSuffix(importData.playerData?.hacking ?? 0, 0)}</TableCell>
               <TableCell>
                 {importData.playerData?.hacking !== currentData.playerData?.hacking && (
                   <ComparisonIcon

src/ui/React/Money.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { numeralWrapper } from "../numeralFormat";
+import { formatMoney } from "../formatNumber";
 import { Player } from "@player";
 import { Theme } from "@mui/material/styles";
 import makeStyles from "@mui/styles/makeStyles";
@@ -25,12 +25,9 @@ export function Money(props: IProps): React.ReactElement {
   if (props.forPurchase) {
     if (typeof props.money !== "number")
       throw new Error("if value is for a purchase, money should be number, contact dev");
-    if (!Player.canAfford(props.money))
-      return <span className={classes.unbuyable}>{numeralWrapper.formatMoney(props.money)}</span>;
+    if (!Player.canAfford(props.money)) return <span className={classes.unbuyable}>{formatMoney(props.money)}</span>;
   }
   return (
-    <span className={classes.money}>
-      {typeof props.money === "number" ? numeralWrapper.formatMoney(props.money) : props.money}
-    </span>
+    <span className={classes.money}>{typeof props.money === "number" ? formatMoney(props.money) : props.money}</span>
   );
 }

src/ui/React/MoneyRate.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { numeralWrapper } from "../numeralFormat";
+import { formatMoney } from "../formatNumber";
 import { Money } from "./Money";
 
 export function MoneyRate({ money }: { money: number }): JSX.Element {
-  return <Money money={`${numeralWrapper.formatMoney(money)} / sec`} />;
+  return <Money money={`${formatMoney(money)} / sec`} />;
 }

src/ui/React/NumberInput.tsx

@@ -1,6 +1,6 @@
 import { TextField, StandardTextFieldProps } from "@mui/material";
 import React from "react";
-import { numeralWrapper } from "../numeralFormat";
+import { parseBigNumber } from "../formatNumber";
 
 interface IProps extends Omit<StandardTextFieldProps, "onChange"> {
   onChange: (v: number) => void;
@@ -10,7 +10,7 @@ export function NumberInput(props: IProps): React.ReactElement {
   const textProps = {
     ...props,
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
-      const amt = numeralWrapper.parseMoney(event.target.value);
+      const amt = parseBigNumber(event.target.value);
       if (event.target.value === "" || isNaN(amt)) props.onChange(NaN);
       else props.onChange(amt);
     },

src/ui/React/Reputation.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { numeralWrapper } from "../numeralFormat";
+import { formatReputation } from "../formatNumber";
 import { Theme } from "@mui/material/styles";
 import makeStyles from "@mui/styles/makeStyles";
 import createStyles from "@mui/styles/createStyles";
@@ -16,7 +16,7 @@ export function Reputation({ reputation }: { reputation: number | string }): Rea
   const classes = useStyles();
   return (
     <span className={classes.reputation}>
-      {typeof reputation === "number" ? numeralWrapper.formatReputation(reputation) : reputation}
+      {typeof reputation === "number" ? formatReputation(reputation) : reputation}
     </span>
   );
 }

src/ui/React/ReputationRate.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { numeralWrapper } from "../numeralFormat";
+import { formatReputation } from "../formatNumber";
 import { Reputation } from "./Reputation";
 
 export function ReputationRate({ reputation }: { reputation: number }): React.ReactElement {
-  return <Reputation reputation={`${numeralWrapper.formatReputation(reputation)} / sec`} />;
+  return <Reputation reputation={`${formatReputation(reputation)} / sec`} />;
 }

src/ui/React/StatsProgressBar.tsx

@@ -3,7 +3,7 @@ import LinearProgress from "@mui/material/LinearProgress";
 import { TableCell, Tooltip, Typography } from "@mui/material";
 import { characterOverviewStyles } from "./CharacterOverview";
 import { ISkillProgress } from "src/PersonObjects/formulas/skill";
-import { numeralWrapper } from "../numeralFormat";
+import { formatExp } from "../formatNumber";
 
 interface IProgressProps {
   min: number;
@@ -30,10 +30,10 @@ export function StatsProgressBar({
   const tooltip = (
     <Typography sx={{ textAlign: "right" }}>
       <strong>Progress:</strong>&nbsp;
-      {numeralWrapper.formatExp(current)} / {numeralWrapper.formatExp(max - min)}
+      {formatExp(current)} / {formatExp(max - min)}
       <br />
       <strong>Remaining:</strong>&nbsp;
-      {numeralWrapper.formatExp(remaining)} ({progress.toFixed(2)}%)
+      {formatExp(remaining)} ({progress.toFixed(2)}%)
     </Typography>
   );
 

src/ui/React/StatsRow.tsx

@@ -2,8 +2,7 @@ import React from "react";
 
 import { Typography, TableCell, TableRow } from "@mui/material";
 
-import { numeralWrapper } from "../numeralFormat";
-import { formatNumber } from "../../utils/StringHelperFunctions";
+import { formatExp, formatNumberNoSuffix } from "../formatNumber";
 import { characterOverviewStyles as useStyles } from "./CharacterOverview";
 import { ClassNameMap } from "@material-ui/core/styles/withStyles";
 
@@ -28,9 +27,9 @@ export const StatsRow = ({ name, color, classes = useStyles(), children, data }:
     if (data.content !== undefined) {
       content = data.content;
     } else if (data.level !== undefined && data.exp !== undefined) {
-      content = `${formatNumber(data.level, 0)} (${numeralWrapper.formatExp(data.exp)} exp)`;
+      content = `${formatNumberNoSuffix(data.level, 0)} (${formatExp(data.exp)} exp)`;
     } else if (data.level !== undefined && data.exp === undefined) {
-      content = `${formatNumber(data.level, 0)}`;
+      content = `${formatNumberNoSuffix(data.level, 0)}`;
     }
   }