UI: Add option to set fractional digits (#2419)

src/GameOptions/ui/NumericDisplayOptions.tsx

@@ -4,10 +4,16 @@ import { Settings } from "../../Settings/Settings";
 import { OptionSwitch } from "../../ui/React/OptionSwitch";
 import { GameOptionsPage } from "./GameOptionsPage";
 import { FormatsNeedToChange } from "../../ui/formatNumber";
+import { OptionsSlider } from "./OptionsSlider";
 
 export const NumericDisplayPage = (): React.ReactElement => {
   const [locale, setLocale] = useState(Settings.Locale);
 
+  function handleFractionalDigitChange(_event: Event | React.SyntheticEvent, newValue: number | number[]): void {
+    Settings.fractionalDigits = newValue as number;
+    FormatsNeedToChange.emit();
+  }
+
   function handleLocaleChange(event: SelectChangeEvent): void {
     setLocale(event.target.value);
     Settings.Locale = event.target.value;
@@ -52,6 +58,15 @@ export const NumericDisplayPage = (): React.ReactElement => {
         text="Hide thousands separator"
         tooltip={<>If this is set, thousands separators will not be displayed.</>}
       />
+      <OptionsSlider
+        label="Fractional Digits"
+        initialValue={Settings.fractionalDigits}
+        callback={handleFractionalDigitChange}
+        step={1}
+        min={0}
+        max={5}
+        tooltip={<>The default number of decimal places to display on small numbers. Default value: 3</>}
+      />
       <OptionSwitch
         checked={Settings.hideTrailingDecimalZeros}
         onChange={(newValue) => {

src/Settings/Settings.ts

@@ -192,6 +192,8 @@ export const Settings = {
   useEngineeringNotation: false,
   /** Whether to disable suffixes and always use exponential form (scientific or engineering). */
   disableSuffixes: false,
+  /** The default amount of digits displayed after the decimal separator. */
+  fractionalDigits: 3,
   /**
    * Player-defined key bindings. Don't use this property directly. It must be merged with DefaultKeyBindings in
    * src\utils\KeyBindingUtils.ts.

src/ui/formatNumber.ts

@@ -119,7 +119,12 @@ export function formatPercent(n: number, fractionalDigits = 2, multStart = 1e6)
   return getFormatter(fractionalDigits, percentFormats, { style: "percent" }).format(n);
 }
 
-export function formatNumber(n: number, fractionalDigits = 3, suffixStart = 1000, isInteger = false) {
+export function formatNumber(
+  n: number,
+  fractionalDigits = Settings.fractionalDigits,
+  suffixStart = 1000,
+  isInteger = false,
+) {
   // NaN does not get formatted
   if (Number.isNaN(n)) return "NaN";
   const nAbs = Math.abs(n);