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);