diff --git a/apps/web/src/components/game/battleModal.tsx b/apps/web/src/components/game/battleModal.tsx
index 03b5983..b3076e3 100644
--- a/apps/web/src/components/game/battleModal.tsx
+++ b/apps/web/src/components/game/battleModal.tsx
@@ -64,6 +64,7 @@ const BattleModal = ({
flushBossLoreToasts,
formatInteger,
formatNumber,
+ numberFormat,
} = useGame();
const [ phase, setPhase ] = useState<"animating" | "result">("animating");
@@ -242,14 +243,14 @@ const BattleModal = ({
{result.rewards.crystals > 0
&&
{"💎 "}
- {formatInteger(result.rewards.crystals)}
+ {formatInteger(result.rewards.crystals, numberFormat)}
{" crystals"}
}
{result.rewards.bountyRunestones > 0
&&
{"🔮 "}
- {formatInteger(result.rewards.bountyRunestones)}
+ {formatInteger(result.rewards.bountyRunestones, numberFormat)}
{" runestones (first kill!)"}
}
diff --git a/apps/web/src/components/game/bossPanel.tsx b/apps/web/src/components/game/bossPanel.tsx
index dd0dd0e..32ceab6 100644
--- a/apps/web/src/components/game/bossPanel.tsx
+++ b/apps/web/src/components/game/bossPanel.tsx
@@ -15,7 +15,7 @@ import { computePartyCombatPower } from "../../engine/tick.js";
import { cdnImage } from "../../utils/cdn.js";
import { LockToggle } from "../ui/lockToggle.js";
import { ZoneSelector } from "./zoneSelector.js";
-import type { Boss } from "@elysium/types";
+import type { Boss, NumberFormat } from "@elysium/types";
interface BossCardProperties {
readonly boss: Boss;
@@ -23,7 +23,7 @@ interface BossCardProperties {
readonly onChallenge: (bossId: string)=> void;
readonly isChallenging: boolean;
readonly unlockHint: string | undefined;
- readonly formatInteger: (n: number)=> string;
+ readonly formatInteger: (n: number, format: NumberFormat)=> string;
readonly formatNumber: (n: number)=> string;
}
@@ -120,7 +120,7 @@ const BossCard = ({
{boss.crystalReward > 0
&&
{"💎 "}
- {formatInteger(boss.crystalReward)}
+ {formatInteger(boss.crystalReward, numberFormat)}
}
{boss.equipmentRewards.length > 0
@@ -175,6 +175,7 @@ const BossPanel = (): JSX.Element => {
autoBossLastResult,
autoBossError,
bossError,
+ numberFormat,
} = useGame();
const [ challengingBossId, setChallengingBossId ] = useState(
null,
@@ -403,6 +404,7 @@ const BossPanel = (): JSX.Element => {
formatNumber={formatNumber}
isChallenging={challengingBossId === bossId}
key={bossId}
+ numberFormat={numberFormat}
onChallenge={handleChallengeClick}
prestigeCount={prestigeCount}
unlockHint={bossUnlockHints.get(bossId)}
diff --git a/apps/web/src/components/game/prestigePanel.tsx b/apps/web/src/components/game/prestigePanel.tsx
index 9339b1f..072576e 100644
--- a/apps/web/src/components/game/prestigePanel.tsx
+++ b/apps/web/src/components/game/prestigePanel.tsx
@@ -70,6 +70,7 @@ const PrestigePanel = (): JSX.Element => {
toggleAutoPrestige,
toggleAutoPrestigeMaxRunestones,
triggerPrestigeToast,
+ numberFormat,
} = useGame();
const [ isPending, setIsPending ] = useState(false);
const [ result, setResult ] = useState<{
@@ -198,7 +199,7 @@ const PrestigePanel = (): JSX.Element => {
type="button"
>
{"🔮 Runestone Shop ("}
- {formatInteger(prestigeData.runestones)}
+ {formatInteger(prestigeData.runestones, numberFormat)}
{" stones)"}
@@ -242,14 +243,14 @@ const PrestigePanel = (): JSX.Element => {
{"Runestones: "}
- {formatInteger(prestigeData.runestones)}
+ {formatInteger(prestigeData.runestones, numberFormat)}
{isEligible
?
{"Runestones on prestige: "}
{"+"}
- {formatInteger(runestonePreview)}
+ {formatInteger(runestonePreview, numberFormat)}
{isAtMaxRunestones
? {" ⚡ MAX"}
@@ -289,7 +290,7 @@ const PrestigePanel = (): JSX.Element => {
>
{isPending
? "Ascending..."
- : `✨ Ascend (+${formatInteger(runestonePreview)} Runestones)`}
+ : `✨ Ascend (+${formatInteger(runestonePreview, numberFormat)} Runestones)`}
{prestigeError === null
? null
@@ -301,12 +302,12 @@ const PrestigePanel = (): JSX.Element => {
{"Ascended to Prestige "}
{result.count}
{"! Earned "}
- {formatInteger(result.runestones)}
+ {formatInteger(result.runestones, numberFormat)}
{" Runestones."}
{result.milestoneRunestones > 0
&& <>
{" 🎉 Milestone bonus: +"}
- {formatInteger(result.milestoneRunestones)}
+ {formatInteger(result.milestoneRunestones, numberFormat)}
{" Runestones!"}
>
}
@@ -327,7 +328,7 @@ const PrestigePanel = (): JSX.Element => {
{"Balance: "}
- {formatInteger(prestigeData.runestones)}
+ {formatInteger(prestigeData.runestones, numberFormat)}
{" Runestones"}
@@ -381,7 +382,7 @@ const PrestigePanel = (): JSX.Element => {
{purchased
? "✅ Purchased"
- : `🔮 ${formatInteger(upgrade.runestonesCost)} Runestones`}
+ : `🔮 ${formatInteger(upgrade.runestonesCost, numberFormat)} Runestones`}
{isAutoAdventurerToggle
diff --git a/apps/web/src/components/game/statisticsPanel.tsx b/apps/web/src/components/game/statisticsPanel.tsx
index d8ec44b..f7d7914 100644
--- a/apps/web/src/components/game/statisticsPanel.tsx
+++ b/apps/web/src/components/game/statisticsPanel.tsx
@@ -59,7 +59,7 @@ const StatCard = ({
* @returns The JSX element.
*/
const StatisticsPanel = (): JSX.Element => {
- const { state, formatInteger, formatNumber } = useGame();
+ const { state, formatInteger, formatNumber, numberFormat } = useGame();
if (state === null) {
return (
@@ -152,13 +152,13 @@ const StatisticsPanel = (): JSX.Element => {
diff --git a/apps/web/src/components/game/transcendencePanel.tsx b/apps/web/src/components/game/transcendencePanel.tsx
index ec80c7f..fef7793 100644
--- a/apps/web/src/components/game/transcendencePanel.tsx
+++ b/apps/web/src/components/game/transcendencePanel.tsx
@@ -50,7 +50,7 @@ const categoryOrder: Array = [
* @returns The JSX element.
*/
const TranscendencePanel = (): JSX.Element => {
- const { state, formatInteger, transcend, buyEchoUpgrade } = useGame();
+ const { state, formatInteger, transcend, buyEchoUpgrade, numberFormat } = useGame();
const [ isPending, setIsPending ] = useState(false);
const [ result, setResult ] = useState<{
echoes: number;
@@ -152,7 +152,7 @@ const TranscendencePanel = (): JSX.Element => {
type="button"
>
{"✨ Echo Shop ("}
- {formatInteger(currentEchoes)}
+ {formatInteger(currentEchoes, numberFormat)}
{" echoes)"}
@@ -184,7 +184,7 @@ const TranscendencePanel = (): JSX.Element => {
}
{"Current Echoes: "}
- {formatInteger(currentEchoes)}
+ {formatInteger(currentEchoes, numberFormat)}
{"Current prestige count: "}
@@ -195,7 +195,7 @@ const TranscendencePanel = (): JSX.Element => {
{"Echoes on transcendence: "}
{"+"}
- {formatInteger(echoPreview)}
+ {formatInteger(echoPreview, numberFormat)}
{echoMetaMultiplier > 1
&&
@@ -238,7 +238,7 @@ const TranscendencePanel = (): JSX.Element => {
>
{isPending
? "Transcending..."
- : `🌌 Transcend (+${formatInteger(echoPreview)} Echoes)`}
+ : `🌌 Transcend (+${formatInteger(echoPreview, numberFormat)} Echoes)`}
{error === null
? null
@@ -248,7 +248,7 @@ const TranscendencePanel = (): JSX.Element => {
:
{"Transcended! Earned "}
- {formatInteger(result.echoes)}
+ {formatInteger(result.echoes, numberFormat)}
{" Echoes"}
{". This is Transcendence "}
@@ -266,7 +266,7 @@ const TranscendencePanel = (): JSX.Element => {
{"Balance: "}
- {formatInteger(currentEchoes)}
+ {formatInteger(currentEchoes, numberFormat)}
{" Echoes"}
@@ -314,7 +314,7 @@ const TranscendencePanel = (): JSX.Element => {
{purchased
? "✅ Purchased"
- : `✨ ${formatInteger(upgrade.cost)} Echoes`}
+ : `✨ ${formatInteger(upgrade.cost, numberFormat)} Echoes`}
{purchased
diff --git a/apps/web/src/components/ui/resourceBar.tsx b/apps/web/src/components/ui/resourceBar.tsx
index f992b29..9e25b9e 100644
--- a/apps/web/src/components/ui/resourceBar.tsx
+++ b/apps/web/src/components/ui/resourceBar.tsx
@@ -82,7 +82,7 @@ const ResourceBar = ({
isSyncing,
onForceSync,
}: ResourceBarProperties): JSX.Element => {
- const { formatInteger, formatNumber, syncError, state } = useGame();
+ const { formatInteger, formatNumber, syncError, state, numberFormat } = useGame();
const [ isProfileOpen, setIsProfileOpen ] = useState(false);
const [ isResourcesOpen, setIsResourcesOpen ] = useState(false);
@@ -233,14 +233,14 @@ const ResourceBar = ({
{"🔮"}
- {formatInteger(runestones)}
+ {formatInteger(runestones, numberFormat)}
{"Runestones"}
{"⭐"}
- {`+${formatInteger(projectedRunestones)}`}
+ {`+${formatInteger(projectedRunestones, numberFormat)}`}
{"On Prestige"}
diff --git a/apps/web/src/context/gameContext.tsx b/apps/web/src/context/gameContext.tsx
index 7da5708..a1efd91 100644
--- a/apps/web/src/context/gameContext.tsx
+++ b/apps/web/src/context/gameContext.tsx
@@ -462,12 +462,12 @@ interface GameContextValue {
/**
* Format a number using the player's chosen notation style.
*/
- formatNumber: (value: number)=> string;
+ formatNumber: (value: number, format?: NumberFormat)=> string;
/**
* Format a whole-number value without decimal places.
*/
- formatInteger: (value: number)=> string;
+ formatInteger: (value: number, format?: NumberFormat)=> string;
/**
* Buy a prestige upgrade from the runestone shop.
diff --git a/apps/web/src/utils/format.ts b/apps/web/src/utils/format.ts
index 101f22a..1ed9b75 100644
--- a/apps/web/src/utils/format.ts
+++ b/apps/web/src/utils/format.ts
@@ -57,22 +57,32 @@ const getLetterSuffix = (index: number): string => {
/**
* Formats a number with a named or letter-based suffix.
* @param value - The number to format.
+ * @param round - Display zero numbers after a decimal point.
* @returns The formatted string with suffix.
*/
-const formatSuffix = (value: number): string => {
+const formatSuffix = (value: number, round = false): string => {
if (value >= Math.pow(10, letterBaseExp)) {
const exp = Math.floor(Math.log10(value));
const stepsAboveBase = Math.floor((exp - letterBaseExp) / 3);
const steps = stepsAboveBase * 3;
const divisorExp = letterBaseExp + steps;
const divisor = Math.pow(10, divisorExp);
- return `${(value / divisor).toFixed(2)}${getLetterSuffix(stepsAboveBase)}`;
+ return `${round
+ ? String(Math.round(value / divisor))
+ : (value / divisor).toFixed(2)}${getLetterSuffix(stepsAboveBase)}`;
}
for (const { threshold, suffix } of namedSuffixes) {
if (value >= threshold) {
- return `${(value / threshold).toFixed(2)}${suffix}`;
+ return `${round
+ ? String(Math.floor(value / threshold))
+ : (value / threshold).toFixed(2)}${suffix}`;
}
}
+
+ if (round) {
+ return String(Math.floor(value));
+ }
+
return value < 1
? value.toFixed(2)
: value.toFixed(1);
@@ -82,12 +92,18 @@ const formatSuffix = (value: number): string => {
* Formats a number in scientific notation: e.g. 1.23e15.
* Falls back to K/M/B/T style below 1 million.
* @param value - The number to format.
+ * @param round - Display zero numbers after a decimal point.
* @returns The formatted string in scientific notation.
*/
-const formatScientific = (value: number): string => {
+const formatScientific = (value: number, round = false): string => {
if (value < 1e6) {
- return formatSuffix(value);
+ return formatSuffix(value, round);
}
+
+ if (round) {
+ return value.toExponential(0).replace("e+", "e");
+ }
+
// ToExponential handles all magnitudes JS can represent (up to ~1.8e308)
return value.toExponential(2).replace("e+", "e");
};
@@ -96,45 +112,50 @@ const formatScientific = (value: number): string => {
* Formats a number in engineering notation (exponent always a multiple of 3):
* e.g. 12.35E12, 1.23E300. Falls back to K/M/B/T style below 1 million.
* @param value - The number to format.
+ * @param round - Display zero numbers after a decimal point.
* @returns The formatted string in engineering notation.
*/
-const formatEngineering = (value: number): string => {
+const formatEngineering = (value: number, round = false): string => {
if (value < 1e6) {
- return formatSuffix(value);
+ return formatSuffix(value, round);
}
const exp = Math.floor(Math.log10(value));
const engExp = Math.floor(exp / 3) * 3;
const mantissa = value / Math.pow(10, engExp);
- return `${mantissa.toFixed(2)}E${String(engExp)}`;
+ return `${round
+ ? String(Math.round(mantissa))
+ : mantissa.toFixed(2)}E${String(engExp)}`;
};
/**
* Formats a whole-number value for display without decimal places.
* Uses the same suffix/letter logic as formatNumber but rounds to integers.
* @param value - The integer value to format.
+ * @param format
* @returns The formatted string with no decimal places.
*/
-const formatInteger = (value: number): string => {
+const formatInteger = (value: number,
+ format: NumberFormat = "suffix"): string => {
if (!Number.isFinite(value) || Number.isNaN(value)) {
return "0";
}
if (value < 0) {
return `-${formatInteger(-value)}`;
}
- if (value >= Math.pow(10, letterBaseExp)) {
- const exp = Math.floor(Math.log10(value));
- const stepsAboveBase = Math.floor((exp - letterBaseExp) / 3);
- const steps = stepsAboveBase * 3;
- const divisorExp = letterBaseExp + steps;
- const divisor = Math.pow(10, divisorExp);
- return `${String(Math.round(value / divisor))}${getLetterSuffix(stepsAboveBase)}`;
- }
- for (const { threshold, suffix } of namedSuffixes) {
- if (value >= threshold) {
- return `${String(Math.floor(value / threshold))}${suffix}`;
+
+ const roundedValue = Math.floor(value);
+ switch (format) {
+ case "scientific":
+ return formatScientific(roundedValue, true);
+ case "engineering":
+ return formatEngineering(value, true);
+ case "suffix":
+ return formatSuffix(value, true);
+ default: {
+ /* V8 ignore next -- @preserve */
+ return formatSuffix(value, true);
}
}
- return String(Math.floor(value));
};
/**
diff --git a/apps/web/test/format.spec.ts b/apps/web/test/format.spec.ts
index a4d7462..c164896 100644
--- a/apps/web/test/format.spec.ts
+++ b/apps/web/test/format.spec.ts
@@ -1,4 +1,3 @@
-/* eslint-disable max-lines -- Test suites naturally have many cases */
/* eslint-disable max-lines-per-function -- Test suites naturally have many cases */
/* eslint-disable max-nested-callbacks -- Vitest structure requires nesting */
/**
@@ -197,4 +196,43 @@ describe("formatInteger", () => {
expect(formatInteger(1e39)).toBe("1b");
});
});
+
+ describe("scientific format", () => {
+ it("should fall back to suffix format below 1e6", () => {
+ expect(formatInteger(500, "scientific")).toBe("500");
+ });
+
+ it("should format values >= 1e6 in scientific notation", () => {
+ expect(formatInteger(1_230_000, "scientific")).toBe("1e6");
+ });
+
+ it("should format large values in scientific notation", () => {
+ expect(formatInteger(1e18, "scientific")).toBe("1e18");
+ });
+ });
+
+ describe("engineering format", () => {
+ it("should fall back to suffix format below 1e6", () => {
+ expect(formatInteger(500, "engineering")).toBe("500");
+ });
+
+ it("should format values >= 1e6 with exponent multiple of 3", () => {
+ expect(formatInteger(1_230_000, "engineering")).toBe("1E6");
+ });
+
+ it("should format 1e9 correctly in engineering notation", () => {
+ expect(formatInteger(1e9, "engineering")).toBe("1E9");
+ });
+
+ it("should format 12350000 correctly in engineering notation", () => {
+ expect(formatInteger(12_350_000, "engineering")).toBe("12E6");
+ });
+ });
+
+ describe("unknown format (default branch)", () => {
+ it("should fall back to suffix format for an unrecognised format string", () => {
+ /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- Testing unreachable default branch */
+ expect(formatInteger(1000, "unknown" as never)).toBe("1K");
+ });
+ });
});