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

src/GameOptions/ui/GameOptionsPage.tsx

@@ -1,9 +1,10 @@
 import { Paper, Typography } from "@mui/material";
 import React from "react";
+import { OptionsTabName } from "./GameOptionsRoot";
 
 interface IProps {
   children: React.ReactNode;
-  title: string;
+  title: OptionsTabName;
 }
 
 export const GameOptionsPage = (props: IProps): React.ReactElement => {

src/GameOptions/ui/GameOptionsRoot.tsx

@@ -1,10 +1,10 @@
 import { Box, Container, Typography } from "@mui/material";
 import React, { useState } from "react";
-import { GameOptionsTab } from "../GameOptionsTab";
 import { GameOptionsSidebar } from "./GameOptionsSidebar";
 import { GameplayPage } from "./GameplayPage";
 import { InterfacePage } from "./InterfacePage";
 import { MiscPage } from "./MiscPage";
+import { NumericDisplayPage } from "./NumericDisplayOptions";
 import { RemoteAPIPage } from "./RemoteAPIPage";
 import { SystemPage } from "./SystemPage";
 
@@ -14,9 +14,18 @@ interface IProps {
   forceKill: () => void;
   softReset: () => void;
 }
+export type OptionsTabName = "System" | "Interface" | "Numeric Display" | "Gameplay" | "Misc" | "Remote API";
+const tabs: Record<OptionsTabName, React.ReactNode> = {
+  System: <SystemPage />,
+  Interface: <InterfacePage />,
+  "Numeric Display": <NumericDisplayPage />,
+  Gameplay: <GameplayPage />,
+  Misc: <MiscPage />,
+  "Remote API": <RemoteAPIPage />,
+};
 
 export function GameOptionsRoot(props: IProps): React.ReactElement {
-  const [currentTab, setCurrentTab] = useState(GameOptionsTab.SYSTEM);
+  const [currentTab, setCurrentTab] = useState<OptionsTabName>("System");
 
   return (
     <Container disableGutters maxWidth="lg" sx={{ mx: 0 }}>
@@ -30,11 +39,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
           forceKill={props.forceKill}
           softReset={props.softReset}
         />
-        {currentTab === GameOptionsTab.SYSTEM && <SystemPage />}
-        {currentTab === GameOptionsTab.INTERFACE && <InterfacePage />}
-        {currentTab === GameOptionsTab.GAMEPLAY && <GameplayPage />}
-        {currentTab === GameOptionsTab.MISC && <MiscPage />}
-        {currentTab === GameOptionsTab.REMOTE_API && <RemoteAPIPage />}
+        {tabs[currentTab]}
       </Box>
     </Container>
   );

src/GameOptions/ui/GameOptionsSidebar.tsx

@@ -23,11 +23,11 @@ import { SoftResetButton } from "../../ui/React/SoftResetButton";
 import { Router } from "../../ui/GameRoot";
 import { Page } from "../../ui/Router";
 import { convertTimeMsToTimeElapsedString } from "../../utils/StringHelperFunctions";
-import { GameOptionsTab } from "../GameOptionsTab";
+import { OptionsTabName } from "./GameOptionsRoot";
 
 interface IProps {
-  tab: GameOptionsTab;
-  setTab: (tab: GameOptionsTab) => void;
+  tab: OptionsTabName;
+  setTab: (tab: OptionsTabName) => void;
   save: () => void;
   export: () => void;
   forceKill: () => void;
@@ -36,15 +36,14 @@ interface IProps {
 
 interface ITabProps {
   sideBarProps: IProps;
-  tab: GameOptionsTab;
-  tabName: string;
+  tabName: OptionsTabName;
 }
 
 const SideBarTab = (props: ITabProps): React.ReactElement => {
   return (
     <ListItemButton
-      selected={props.sideBarProps.tab === props.tab}
-      onClick={() => props.sideBarProps.setTab(props.tab)}
+      selected={props.sideBarProps.tab === props.tabName}
+      onClick={() => props.sideBarProps.setTab(props.tabName)}
     >
       <Typography>{props.tabName}</Typography>
     </ListItemButton>
@@ -101,11 +100,12 @@ export const GameOptionsSidebar = (props: IProps): React.ReactElement => {
     <Box>
       <Paper sx={{ height: "fit-content", mb: 1 }}>
         <List>
-          <SideBarTab sideBarProps={props} tab={GameOptionsTab.SYSTEM} tabName="System" />
-          <SideBarTab sideBarProps={props} tab={GameOptionsTab.GAMEPLAY} tabName="Gameplay" />
-          <SideBarTab sideBarProps={props} tab={GameOptionsTab.INTERFACE} tabName="Interface" />
-          <SideBarTab sideBarProps={props} tab={GameOptionsTab.MISC} tabName="Misc" />
-          <SideBarTab sideBarProps={props} tab={GameOptionsTab.REMOTE_API} tabName="Remote API" />
+          <SideBarTab sideBarProps={props} tabName="System" />
+          <SideBarTab sideBarProps={props} tabName="Gameplay" />
+          <SideBarTab sideBarProps={props} tabName="Interface" />
+          <SideBarTab sideBarProps={props} tabName="Numeric Display" />
+          <SideBarTab sideBarProps={props} tabName="Misc" />
+          <SideBarTab sideBarProps={props} tabName="Remote API" />
         </List>
       </Paper>
       <Box

src/GameOptions/ui/InterfacePage.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { MenuItem, Select, SelectChangeEvent, TextField, Tooltip, Typography } from "@mui/material";
+import { TextField, Tooltip, Typography } from "@mui/material";
 import { Settings } from "../../Settings/Settings";
 import { OptionSwitch } from "../../ui/React/OptionSwitch";
 import { GameOptionsPage } from "./GameOptionsPage";
@@ -7,12 +7,7 @@ import { formatTime } from "../../utils/helpers/formatTime";
 
 export const InterfacePage = (): React.ReactElement => {
   const [timestampFormat, setTimestampFormat] = useState(Settings.TimestampsFormat);
-  const [locale, setLocale] = useState(Settings.Locale);
 
-  function handleLocaleChange(event: SelectChangeEvent<string>): void {
-    setLocale(event.target.value);
-    Settings.Locale = event.target.value;
-  }
   function handleTimestampFormatChange(event: React.ChangeEvent<HTMLInputElement>): void {
     setTimestampFormat(event.target.value);
     Settings.TimestampsFormat = event.target.value;
@@ -42,14 +37,6 @@ export const InterfacePage = (): React.ReactElement => {
         text="Disable Overview Progress Bars"
         tooltip={<>If this is set, the progress bars in the character overview will be hidden.</>}
       />
-      <OptionSwitch
-        checked={Settings.UseIEC60027_2}
-        onChange={(newValue) => (Settings.UseIEC60027_2 = newValue)}
-        text="Use GiB instead of GB"
-        tooltip={
-          <>If this is set all references to memory will use GiB instead of GB, in accordance with IEC 60027-2.</>
-        }
-      />
       <OptionSwitch
         checked={Settings.ShowMiddleNullTimeUnit}
         onChange={(newValue) => (Settings.ShowMiddleNullTimeUnit = newValue)}
@@ -83,24 +70,6 @@ export const InterfacePage = (): React.ReactElement => {
         Example timestamp: {timestampFormat !== "" ? formatTime(timestampFormat) : "no timestamp"}
       </Typography>
       <br />
-
-      <Select startAdornment={<Typography>Locale&nbsp;</Typography>} value={locale} onChange={handleLocaleChange}>
-        <MenuItem value="en">en</MenuItem>
-        <MenuItem value="bg">bg</MenuItem>
-        <MenuItem value="cs">cs</MenuItem>
-        <MenuItem value="da-dk">da-dk</MenuItem>
-        <MenuItem value="de">de</MenuItem>
-        <MenuItem value="en-au">en-au</MenuItem>
-        <MenuItem value="en-gb">en-gb</MenuItem>
-        <MenuItem value="es">es</MenuItem>
-        <MenuItem value="fr">fr</MenuItem>
-        <MenuItem value="hu">hu</MenuItem>
-        <MenuItem value="it">it</MenuItem>
-        <MenuItem value="lv">lv</MenuItem>
-        <MenuItem value="no">no</MenuItem>
-        <MenuItem value="pl">pl</MenuItem>
-        <MenuItem value="ru">ru</MenuItem>
-      </Select>
     </GameOptionsPage>
   );
 };

src/GameOptions/ui/NumericDisplayOptions.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import { MenuItem, Select, SelectChangeEvent, Typography } from "@mui/material";
+import { Settings } from "../../Settings/Settings";
+import { OptionSwitch } from "../../ui/React/OptionSwitch";
+import { GameOptionsPage } from "./GameOptionsPage";
+import { FormatsNeedToChange } from "../../ui/formatNumber";
+
+export const NumericDisplayPage = (): React.ReactElement => {
+  const [locale, setLocale] = useState(Settings.Locale);
+
+  function handleLocaleChange(event: SelectChangeEvent<string>): void {
+    setLocale(event.target.value);
+    Settings.Locale = event.target.value;
+    FormatsNeedToChange.emit();
+  }
+  return (
+    <GameOptionsPage title="Numeric Display">
+      <OptionSwitch
+        checked={Settings.useEngineeringNotation}
+        onChange={(newValue) => {
+          Settings.useEngineeringNotation = newValue;
+          FormatsNeedToChange.emit();
+        }}
+        text="Use engineering notation instead of scientific notation for exponential form"
+        tooltip={
+          <>
+            If this is set, numbers displayed in exponential form will use engineering notation instead of scientific
+            notation.
+          </>
+        }
+      />
+      <OptionSwitch
+        checked={Settings.disableSuffixes}
+        onChange={(newValue) => {
+          Settings.disableSuffixes = newValue;
+          FormatsNeedToChange.emit();
+        }}
+        text="Use exponential form instead of suffixed form"
+        tooltip={
+          <>
+            If this is set, suffixed form will not be used, and numbers that would have been suffixed will be displayed
+            with exponential form instead.
+          </>
+        }
+      />
+      <OptionSwitch
+        checked={Settings.hideThousandsSeparator}
+        onChange={(newValue) => {
+          Settings.hideThousandsSeparator = newValue;
+          FormatsNeedToChange.emit();
+        }}
+        text="Hide thousands separator"
+        tooltip={<>If this is set, thousands separators will not be displayed.</>}
+      />
+      <OptionSwitch
+        checked={Settings.hideTrailingDecimalZeros}
+        onChange={(newValue) => {
+          Settings.hideTrailingDecimalZeros = newValue;
+          FormatsNeedToChange.emit();
+        }}
+        text="Hide trailing fractional zeroes for decimals"
+        tooltip={<>If this is set, zeroes at the end of a fractional part of a decimal will not be displayed.</>}
+      />
+      <OptionSwitch
+        checked={Settings.UseIEC60027_2}
+        onChange={(newValue) => {
+          Settings.UseIEC60027_2 = newValue;
+          FormatsNeedToChange.emit();
+        }}
+        text="Use GiB instead of GB"
+        tooltip={
+          <>If this is set all references to memory will use GiB instead of GB, in accordance with IEC 60027-2.</>
+        }
+      />
+      <Select startAdornment={<Typography>Locale&nbsp;</Typography>} value={locale} onChange={handleLocaleChange}>
+        <MenuItem value="en">en</MenuItem>
+        <MenuItem value="bg">bg</MenuItem>
+        <MenuItem value="cs">cs</MenuItem>
+        <MenuItem value="da-dk">da-dk</MenuItem>
+        <MenuItem value="de">de</MenuItem>
+        <MenuItem value="en-au">en-au</MenuItem>
+        <MenuItem value="en-gb">en-gb</MenuItem>
+        <MenuItem value="es">es</MenuItem>
+        <MenuItem value="fr">fr</MenuItem>
+        <MenuItem value="hu">hu</MenuItem>
+        <MenuItem value="it">it</MenuItem>
+        <MenuItem value="lv">lv</MenuItem>
+        <MenuItem value="no">no</MenuItem>
+        <MenuItem value="pl">pl</MenuItem>
+        <MenuItem value="ru">ru</MenuItem>
+      </Select>
+    </GameOptionsPage>
+  );
+};