adrien/Battle-for-Tismo
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Split the resource tooltip into aligned production and consumption lines

Browse Source
This commit is contained in:
adrien
2026-09-25 16:07:03 +02:00
parent 0a1c2d0c58
commit 26e5141ca2
4 changed files with 102 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/simple_ui_test.js
+24 -10
View File
@@ -253,7 +253,14 @@ export class SimpleUiTest extends TestCase {
async test_the_top_panel_shows_the_pool_in_simple_mode() {
const env = await setupDom();
try {
const screen = { economyModel: "simple", _updateTopResources: panelMethods._updateTopResources };
const screen = {
economyModel: "simple",
_updateTopResources: panelMethods._updateTopResources,
_showStatTooltip: panelMethods._showStatTooltip,
_statTooltipContent: panelMethods._statTooltipContent,
_resourceTooltip: panelMethods._resourceTooltip,
$statTooltip: env.$("#stat-tooltip"),
};
screen._updateTopResources({
resources: {
stock: { steel: 1_000_000, food: 500_000, luxury: 500_000, hightech: 20_000 },
@@ -276,15 +283,22 @@ export class SimpleUiTest extends TestCase {
// less than it eats, so it is draining.
this.assertTrue(chips.eq(0).find(".stat-arrow").hasClass("up"), "a growing pool arrow up");
this.assertTrue(chips.eq(1).find(".stat-arrow").hasClass("down"), "a draining pool arrow down");
const tooltip = chips.eq(0).attr("data-tooltip");
this.assertTrue(
tooltip.includes(`Produced ${formatResourceAmount("steel", 1_500)}/day`),
"the tooltip names production"
);
this.assertTrue(
tooltip.includes(`Consumed ${formatResourceAmount("steel", 1_000)}/day`),
"the tooltip names consumption"
);
// The chip's tooltip is a two-line bill: production with a plus, then
// consumption with a minus, each with its figure and unit.
screen._showStatTooltip(chips.eq(0));
const tip = env.$("#stat-tooltip .resource-tip");
const signs = tip.find(".rt-sign");
const figures = tip.find(".rt-figure");
const tails = tip.find(".rt-tail");
this.assertSize(signs, 2, "production and consumption");
this.assertTrue(signs.eq(0).hasClass("produce"), "production leads");
this.assertEqual(signs.eq(0).text(), "+");
this.assertEqual(figures.eq(0).text(), groupDigits(1_500));
this.assertEqual(tails.eq(0).text(), "t/day");
this.assertTrue(signs.eq(1).hasClass("consume"), "consumption follows");
this.assertEqual(signs.eq(1).text(), "−");
this.assertEqual(figures.eq(1).text(), groupDigits(1_000));
this.assertEqual(tails.eq(1).text(), "t/day");
} finally {
teardownDom(env);
}