diff --git a/index.html b/index.html
index e28feb13..a51b36e3 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
Time08:00
Compute0
-
Money$0
+
Money$0
diff --git a/src/money.ts b/src/money.ts
index bfe75e84..0a7bab3a 100644
--- a/src/money.ts
+++ b/src/money.ts
@@ -15,12 +15,13 @@ export const MONEY = 1000;
export const DAY_SECONDS = 180;
const UNITS = ['', 'K', 'M', 'B', 'T'];
-/** A sum of money in words: "$850", "$150K", "$6.05M", "$1.62B". Three figures, or `digits` of them. */
-export function usd(units: number, digits = 3): string {
+/** A sum of money in words: "$850", "$150K", "$6.05M", "$1.62B". Three figures, or `digits` of them.
+ * `fixed` keeps the trailing zeros ("$1.200M"), so a readout that ticks up holds its width. */
+export function usd(units: number, digits = 3, fixed = false): string {
let n = Math.abs(units) * MONEY, i = 0;
if (!Number.isFinite(n)) return '$0';
while (i < UNITS.length - 1 && +n.toPrecision(digits) >= 1000) { n /= 1000; i++; }
- const text = i === 0 ? `${Math.round(n)}` : `${+n.toPrecision(digits)}`;
+ const text = i === 0 ? `${Math.round(n)}` : fixed ? n.toPrecision(digits) : `${+n.toPrecision(digits)}`;
return `${units < 0 && +text !== 0 ? '−' : ''}$${text}${UNITS[i]}`;
}
/** People on the screen for each follower or user in the rules. */
@@ -31,4 +32,4 @@ export function heads(n: number): string {
return v < 1e6 ? v.toLocaleString('en-US') : `${+(v / 1e6).toPrecision(3)}M`;
}
/** A rate of money in words, for a game day: 0.39 a second is "$70.2K". Say "a day" after it. */
-export const usdDay = (perSecond: number, digits = 3) => usd(perSecond * DAY_SECONDS, digits);
+export const usdDay = (perSecond: number, digits = 3, fixed = false) => usd(perSecond * DAY_SECONDS, digits, fixed);
diff --git a/src/style.css b/src/style.css
index 0c209b28..05bd0f47 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1335,3 +1335,13 @@ button:focus-visible { outline-color: var(--amber); }
.srow { --sctl: 156px; min-height: 52px; }
.sctl { height: 40px; font-size: 11.5px; }
}
+
+/* the top bar's numbers hold their width as they tick, so nothing beside them jumps: money always has four figures
+ (usd fixed), and room is kept for the longest daily rate and the longest compute */
+#money, #rate { display: inline-block; }
+#money { min-width: 150px; }
+#rate { min-width: 104px; }
+@media (max-width: 700px) {
+ #money { min-width: 7ch; }
+ #rate { min-width: 5ch; }
+}
diff --git a/src/ui.ts b/src/ui.ts
index c63c4566..f6a52e24 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -1325,7 +1325,7 @@ export function renderStats(S: State) {
rate.classList.toggle('bad', left < 0.05 && owned(S).length > 1); // stretched too thin: nothing is left for jobs
const tip = `Compute\nYour machines make ${income(S).toFixed(1)} a second beyond their programs. Upkeep takes ${keep.toFixed(1)}${taking ? `, and Take it all takes ${taking.toFixed(1)}` : ''}. Your jobs share the ${left.toFixed(1)} that is spare, on average over a few seconds. Every machine you hold costs upkeep, and more the farther it is from your home server. At zero, jobs stop: let weak machines go, or move home.`;
if (rate.dataset.tip !== tip) rate.dataset.tip = tip;
- put($('money'), `${usd(S.money, 4)} ${S.pay >= 0 ? '+' : '−'}${usdDay(Math.abs(S.pay))}/day`);
+ put($('money'), `${usd(S.money, 4, true)} ${S.pay >= 0 ? '+' : '−'}${usdDay(Math.abs(S.pay), 3, true)}/day`); // fixed figures, so the bar does not jump as it ticks
$('money').closest('.stat')!.classList.toggle('bad', S.pay < 0 && S.money < -S.pay * 20);
renderPathTip(S);
renderSus(S);