break_eternity and eternal_notations. cmd line option for time

web/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@idle-economy/engine": "*",
+    "eternal_notations": "^1.1.1",
     "mobx": "^6.15.0",
     "mobx-react-lite": "^4.1.1",
     "react": "^19.2.0",

web/src/App.tsx

@@ -4,6 +4,7 @@ import { root } from './state/Root';
 import { Page } from './Page';
 
 import './App.scss'
+import type { ChangeEvent } from 'react';
 
 function now(): number {
   return (performance.now() + performance.timeOrigin) / 1000;
@@ -33,7 +34,11 @@ gameLoop();
 export const App = observer(function () {
 
   function handleTickClick(): void {
-    root.tick(1/60);
+    root.tick(1 / 60);
+  }
+
+  function handleNumberNotationChange(event: ChangeEvent<HTMLSelectElement, HTMLSelectElement>): void {
+    root.setNumberNotationName(event.target.value);
   }
 
   // useEffect(() => {
@@ -42,6 +47,11 @@ export const App = observer(function () {
 
   return (
     <>
+      <div>Notation:&nbsp;
+        <select onChange={handleNumberNotationChange} value={root.numberNotationName}>
+          {root.availableNotationNames.map((n) => <option key={n} value={n}>{n}</option>)}
+        </select>
+      </div>
       <Page />
       {/* <button onClick={handleTickClick}>tick</button> */}
     </>

web/src/ResourcesView.tsx

@@ -10,7 +10,9 @@ export const ResourcesView = function (props: Props) {
         <>
             <span className="resources">
                 {
-                    Object.entries(props.resources).map(([res, value]) => <span style={{ color: res }}>{formatNumber(value)}</span>)
+                    Object.entries(props.resources).map(
+                        ([res, value]) => <span key={res} style={{ color: res }}>{formatNumber(value)}</span>
+                    )
                 }
             </span>
         </>

web/src/state/Root.ts

@@ -1,5 +1,6 @@
 import { makeGame, ResourceGenerator, ResourceSet } from "@idle-economy/engine";
 import { makeAutoObservable } from "mobx";
+import { Notation, Presets } from 'eternal_notations';
 
 export class Root {
 
@@ -8,8 +9,13 @@ export class Root {
     public resources: ResourceSet = new ResourceSet();
     public generators: ResourceGenerator[] = [];
 
+    public readonly availableNotationNames: string[] = Object.keys(Presets).filter((n: any) => !!(Presets as any)[n].name);
+    public numberNotationName: keyof typeof Presets = 'Standard';
+    public numberNotation: Notation = Presets.Standard;
+
     constructor() {
         this.copyGame();
+        this.setNumberNotation();
 
         makeAutoObservable(this);
     }
@@ -23,6 +29,16 @@ export class Root {
         this.resources = this.game.resources;
         this.generators = this.game.generators;
     }
+
+    public setNumberNotationName(value: string | keyof typeof Presets): void {
+        this.numberNotationName = value as keyof typeof Presets;
+        this.setNumberNotation();
+        this.numberNotation.name
+    }
+
+    private setNumberNotation() {
+        this.numberNotation = Presets[this.numberNotationName] as Notation;
+    }
 }
 
 export const root = new Root();

web/src/tools/format.ts

@@ -1,3 +1,6 @@
-export function formatNumber(value: number): string {
-    return (Math.round(value * 10 ** 2) / 10 ** 2).toPrecision(2);
+import type Decimal from 'break_eternity.js';
+import { root } from '../state/Root';
+
+export function formatNumber(value: Decimal): string {
+    return root.numberNotation.format(value);
 }