UI: Add settings to change currency symbol and whether to show it after money value (#2453)

src/BitNode/BitNode.tsx

@@ -288,7 +288,7 @@ export function initBitNodes() {
         <br />
         In this BitNode:
         <ul>
-          <li>You start with $250 million.</li>
+          <li>Your starting money is 250e6.</li>
           <li>You start with a WSE membership and access to the TIX API.</li>
           <li>You can short stocks and place different types of orders (limit/stop).</li>
         </ul>

src/Corporation/Corporation.ts

@@ -150,7 +150,7 @@ export class Corporation {
           dialogBoxCreate(
             "There was an error calculating your Corporations funds and they got reset to 0. " +
               "This is a bug. Please report to game developer.\n\n" +
-              "(Your funds have been set to $150b for the inconvenience)",
+              `(Your funds have been set to ${formatMoney(150e9)} for the inconvenience)`,
           );
           this.funds = 150e9;
         }

src/Corporation/ui/modals/SellMaterialModal.tsx

@@ -9,6 +9,8 @@ import { dialogBoxCreate } from "../../../ui/React/DialogBox";
 import * as actions from "../../Actions";
 import { KEY } from "../../../utils/KeyboardEventKey";
 
+import { formatMoney } from "../../../ui/formatNumber";
+
 interface IProps {
   open: boolean;
   onClose: () => void;
@@ -62,8 +64,8 @@ export function SellMaterialModal(props: IProps): React.ReactElement {
         <br />
         <br />
         When setting the sell price, you can use the 'MP' variable to designate a dynamically changing price that
-        depends on the market price. For example, if you set the sell price to 'MP+10' then it will always be sold at
+        depends on the market price. For example, if you set the sell price to 'MP+10' then it will always be sold at{" "}
-        $10 above the market price.
+        {formatMoney(10)} above the market price.
       </Typography>
       <br />
       <TextField

src/Corporation/ui/modals/ThrowPartyModal.tsx

@@ -73,14 +73,7 @@ export function ThrowPartyModal(props: IProps): React.ReactElement {
       <Typography>Enter the amount of money you would like to spend PER EMPLOYEE on this office party</Typography>
       <EffectText />
       <Box display="flex" alignItems="center">
-        <TextField
+        <TextField autoFocus={true} type="number" value={cost} onChange={changeCost} onKeyDown={onKeyDown} />
-          autoFocus={true}
-          type="number"
-          placeholder="$ / employee"
-          value={cost}
-          onChange={changeCost}
-          onKeyDown={onKeyDown}
-        />
         <Button disabled={!canParty} onClick={throwParty}>
           Throw Party
         </Button>

src/GameOptions/ui/NumericDisplayOptions.tsx

@@ -1,13 +1,16 @@
 import React, { useState } from "react";
-import { MenuItem, Select, SelectChangeEvent, Typography } from "@mui/material";
+import { MenuItem, Select, SelectChangeEvent, TextField, Typography } from "@mui/material";
 import { Settings } from "../../Settings/Settings";
 import { OptionSwitch } from "../../ui/React/OptionSwitch";
 import { GameOptionsPage } from "./GameOptionsPage";
 import { FormatsNeedToChange } from "../../ui/formatNumber";
 import { OptionsSlider } from "./OptionsSlider";
 
+const DEFAULT_CURRENCY_SYMBOL = "$";
+
 export const NumericDisplayPage = (): React.ReactElement => {
   const [locale, setLocale] = useState(Settings.Locale);
+  const [currencySymbol, setCurrencySymbol] = useState(Settings.CurrencySymbol);
 
   function handleFractionalDigitChange(_event: Event | React.SyntheticEvent, newValue: number | number[]): void {
     Settings.fractionalDigits = newValue as number;
@@ -19,6 +22,15 @@ export const NumericDisplayPage = (): React.ReactElement => {
     Settings.Locale = event.target.value;
     FormatsNeedToChange.emit();
   }
+
+  // Handler for the text field (Currency Symbol)
+  function handleCurrencySymbolChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    const raw = event.target.value;
+    setCurrencySymbol(raw);
+    Settings.CurrencySymbol = raw.trim() === "" ? DEFAULT_CURRENCY_SYMBOL : raw;
+    FormatsNeedToChange.emit();
+  }
+
   return (
     <GameOptionsPage title="Numeric Display">
       <OptionSwitch
@@ -87,7 +99,7 @@ export const NumericDisplayPage = (): React.ReactElement => {
           <>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}>
+      <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>
@@ -104,6 +116,26 @@ export const NumericDisplayPage = (): React.ReactElement => {
         <MenuItem value="pl">pl</MenuItem>
         <MenuItem value="ru">ru</MenuItem>
       </Select>
+      <div style={{ marginTop: "16px" }}>
+        <TextField
+          InputProps={{
+            startAdornment: <Typography sx={{ whiteSpace: "nowrap" }}>Currency Symbol:&nbsp;</Typography>,
+          }}
+          value={currencySymbol}
+          onChange={handleCurrencySymbolChange}
+          placeholder={DEFAULT_CURRENCY_SYMBOL}
+          style={{ marginRight: "16px" }}
+        />
+        <OptionSwitch
+          checked={Settings.CurrencySymbolAfterValue}
+          onChange={(newValue) => {
+            Settings.CurrencySymbolAfterValue = newValue;
+            FormatsNeedToChange.emit();
+          }}
+          text="Move the currency symbol to be after the value"
+          tooltip={<>If enabled, the currency symbol appears after the number (e.g., 100€ instead of €100)</>}
+        />
+      </div>
     </GameOptionsPage>
   );
 };

src/Literature/Literatures.tsx

@@ -50,8 +50,8 @@ export const Literatures: Record<LiteratureName, Literature> = {
         <br />
         <u>Getting Started with Corporation</u>
         <br />
-        To get started, visit the city hall in Sector-12 in order to create a corporation. This requires $150b of your
+        To get started, visit the city hall in Sector-12 in order to create a corporation. This requires 150e9 of your
-        own money, but this $150b will get put into your corporation's funds. If you're in BitNode 3, you also have the
+        own money, but this money will get put into your corporation's funds. If you're in BitNode 3, you also have the
         option to get seed money from the government in exchange for 500m shares. Your corporation can have many
         different divisions, each in a different industry. There are many different types of industries, each with
         different properties. To create your first division, click the "Expand" button at the top of the management UI.

src/Settings/Settings.ts

@@ -196,6 +196,10 @@ export const Settings = {
   disableSuffixes: false,
   /** The default amount of digits displayed after the decimal separator. */
   fractionalDigits: 3,
+  /** Currency symbol used for displaying money. */
+  CurrencySymbol: "$",
+  /** Whether to show the currency symbol after the money value. */
+  CurrencySymbolAfterValue: false,
   /**
    * 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

@@ -200,9 +200,12 @@ export const formatThreads = formatHp;
 /** Display an integer up to 999,999,999 before collapsing to suffixed form with 3 fractional digits */
 export const formatSkill = (n: number) => formatNumber(n, 3, 1e9, true);
 
-/** Display standard money formatting, including the preceding $. */
+/** Display standard money formatting, including the currency symbol. */
 export const formatMoney = (n: number, useExponentialFormForSmallValue = false): string => {
-  return `$${!useExponentialFormForSmallValue || n === 0 || n >= 0.001 ? formatNumber(n) : n.toExponential(3)}`;
+  const value = !useExponentialFormForSmallValue || n === 0 || n >= 0.001 ? formatNumber(n) : n.toExponential(3);
+  return Settings.CurrencySymbolAfterValue
+    ? `${value}${Settings.CurrencySymbol}`
+    : `${Settings.CurrencySymbol}${value}`;
 };
 
 /** Display a decimal number with increased precision (5 fractional digits) */