Page MenuHomeWildfire Games

Improve the usefulness of the counters in the top panel
ClosedPublic

Authored by Langbart on May 1 2021, 6:17 AM.

Details

Reviewers
Silier
asterix
Group Reviewers
Restricted Owners Package(Owns No Changed Paths)
Commits
rP25470: Change the visuals of the counters in the top panel.
Trac Tickets
#6063
Summary
  • Add popMax to the population counter.
  • Highlight current gathers in yellow.
  • Increase font size for better visibility for the "Gatherers" number. The "Count" number for resources and the population is the same as before (sans-bold-stroke-14). The latter should be larger, but there is no sans-bold-stroke-16 and creating one with FontBuilderTool2 was discarded.
  • Adding a "k" or "M" to large resource numbers.

Edit1: Changed "m" to "M"
Edit2: Switched gatherer and resource number
Edit3: Changed the font to "sans-bold-stroke"

Test Plan

Test small amounts of resources.
Test large amounts of resources.
Agree with the style.

Diff Detail

Repository
rP 0 A.D. Public Repository
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

I was wondering, @Langbart, is there any kind of reasoning behind changing the positions of the numbers?

I was wondering, @Langbart, is there any kind of reasoning behind changing the positions of the numbers?

I always forget the PopMax and end up asking my teammates or the host of the game. Using the newly created free space in the top panel - by shortening the space for resource numbers - makes room for this additional number.

wraitii added a subscriber: wraitii.May 4 2021, 9:36 AM

I think I'm not a fan of the # of gatherers above the resource count. I think I preferred it where it is in SVN. Barring that, I would prefer it under the resource count, not above. I'm also not a fan of the yellow color, would probably prefer something else, but that's less important.

I would also prefer if the pop reads current/cap (max) instead of current/cap/max which reads like a weird date to me.

I think I'm not a fan of the # of gatherers above the resource count. I think I preferred it where it is in SVN. Barring that, I would prefer it under the resource count, not above. I'm also not a fan of the yellow color, would probably prefer something else, but that's less important.

They can sure be switched and colored in white, as shown in this image below from the popular AOE2 channel T90Official - Age Of Empires 2

I would also prefer if the pop reads current/cap (max) instead of current/cap/max which reads like a weird date to me.

You like this?

They can sure be switched and colored in white, as shown in this image below from the popular AOE2 channel T90Official - Age Of Empires 2

The color is mostly that I dislike that shade of yellow. It's ugly :p.
I definitely prefer resources first, because that's the most important information here.

You like this?

Think that reads better, yes.

Is there still enough room on the minimal resolution for the pop info?

binaries/data/mods/public/gui/session/top_panel/CounterPopulation.js
67 ↗(On Diff #17347)

Yeah, might be better.

Langbart updated this revision to Diff 17413.May 6 2021, 5:03 AM

Change the color from "yellow" to "gold"; switch position between gatherers and resource number; changed the the layout of the CounterCaption string to count/limit (max); decreased the font size a bit and moved everything a bit to the left so there is enough space for the pop info in mimimal resolution (1024x768)

Langbart edited the summary of this revision. (Show Details)May 6 2021, 5:05 AM

Current situation looks like this
{F1999172, width=600}

Langbart updated this revision to Diff 17414.May 6 2021, 5:13 AM

Changed the word "Colors" to "Color" in CounterPopulation.js

Freagarach added inline comments.May 6 2021, 6:52 AM
binaries/data/mods/public/gui/session/top_panel/CounterResource.js
21–22 ↗(On Diff #17414)

Also one may consider that people maybe would like to have a different colour for this than for the population, so I think this default colour ought to be in this specific class, not used from another class. Although one can argue that if someone wanted to change that colour it should be done in two places then.

Langbart updated this revision to Diff 17416.May 6 2021, 7:51 AM

split the color prototype for total and resource gatherers

Gave this a run. I think in general it looks good
Have to say, I'm still not feeling the gold color. I'm not sure why you want to colour it at all.
What I would do is 'sans-bold-stroke-14', as now, for the resource count (mostly because I find the lack of a stroke looks weird. Maybe we need a larger stroked font), and 'sans-bold-stroke-13' for the # of gatherers, and just leave it white.
I'd also show '0' but colour is slightly grayer (something like 200 200 200). Otherwise it seems to me there's a weird void.

Let me know what you think.

binaries/data/mods/public/gui/common/tooltips.js
1217 ↗(On Diff #17416)

abbreviateLargeNumbers

Langbart updated this revision to Diff 17473.EditedMay 10 2021, 7:57 AM

Changed the name of the function from "shortLargeNumbers" to "abbreviateLargeNumbers"; Font size has been changed to "sans-bold-stroke-14 and 13"; Zeros are always present and colored in "200 200 200"; I kept the "gold" color for gatherers because it is easier to distinguish the two numbers.

I could also use the Font_Builder2 tool and create a larger font, e.g. "sans-bold-stroke-16" or "sans-bold-stroke-18".

I think there are two questions left:
(A) Should the number of resource counters be larger?
(B) Should the gatherers be colored white?

Langbart edited the summary of this revision. (Show Details)May 10 2021, 8:39 AM

To me size 14 looks perfectly readable, and I don't think it's worth adding a custom font just for this.
I get your point that the gold color makes it more immediately differentiable, I think I just feel this very pale shade of yellow looks odd, as if there is an optical illusion of some kind. I feel like I'd prefer a light blue or something redder maybe?
I dunno, maybe it's just me.

I feel like I'd prefer a light blue or something redder maybe?
I dunno, maybe it's just me.

Red and yellow should not be used, I associate these colors with warnings or error messages. Gatheres is just a little helpful information. I think orange in "235 205 84" looks good and is sufficiently different from white and fits into the color scheme of the top panel.


I think it's either one of those colors or leave it white.

I think the patch is ready to roll out and use. It's already good.

Langbart updated this revision to Diff 17504.May 12 2021, 8:13 AM

Removed the note "// Do not show zeroes." from CounterResource.js and CounterPopulation.js

Freagarach edited the test plan for this revision. (Show Details)May 15 2021, 7:45 AM
Silier requested changes to this revision.May 15 2021, 12:30 PM
Silier added a subscriber: Silier.
Silier added inline comments.
binaries/data/mods/public/gui/common/tooltips.js
1217 ↗(On Diff #17504)

Why num and not number?
You dont get anything making it shorter and it is not so long that it cant be used

1222 ↗(On Diff #17504)

Translatewithcontext ?

1225 ↗(On Diff #17504)

Same?

This revision now requires changes to proceed.May 15 2021, 12:30 PM
Langbart updated this revision to Diff 17562.May 15 2021, 12:35 PM

Changed "num" to "number" and added missing "translateWithContext" to the function "abbreviateLargeNumbers"

What if i want to know if i have 1780 or 1702 ?

In D3911#170894, @Angen wrote:

What if i want to know if i have 1780 or 1702 ?

Should I put the number in the tooltip when I hover over the icon?

i would say that, or remove k thing.
There are costs up to 1500 in the game and i would want to know how much i am missing not just to see 1.4k

Langbart updated this revision to Diff 17564.May 15 2021, 1:10 PM

Changed the function "abbreviateLargeNumbers" from (number >= 1000) to (number >= 10000), now only numbers above 10.000 will be abbreviated

how doable is this part of the ticket ? One can even let the user choose the thresholds.

binaries/data/mods/public/gui/common/tooltips.js
1218 ↗(On Diff #17564)

also, one lines, so please remove { }

Silier added inline comments.May 15 2021, 1:30 PM
binaries/data/mods/public/gui/common/tooltips.js
1217 ↗(On Diff #17564)

{ to new line

Langbart updated this revision to Diff 17565.May 15 2021, 1:38 PM

Removed unnecessary "curly braces" from the "abbreviateLargeNumbers" function and moved the necessary one to a new line.

Silier accepted this revision.May 15 2021, 2:05 PM

Code looks good.
Feature is working.
It looks ok in game.
@Freagarach wanna give own review ?

This revision is now accepted and ready to land.May 15 2021, 2:05 PM
asterix accepted this revision.May 15 2021, 9:23 PM
asterix added a subscriber: asterix.

From my point of view, I would prefer size 16 and orange color because for me it creates nice readable contrast with the background. But I understand that everybody has a different perception of colors and contrast so I guess it speaks only my personal preference. Cannot much comment on code.

Langbart updated this revision to Diff 17578.EditedMay 15 2021, 9:28 PM

I originally wanted a larger font, which required a new style called "resourceTextTopPanel", but after changing the font back to "sans-bold-stroke-14", the newly created style is the same as "resourceText", so I just deleted "resourceTextTopPanel" because it's redundant.

PS: Yeah, I also would like to use "sans-bold-sroke-16" or "18" but creating a new font was dismissed.

Langbart updated this revision to Diff 17580.EditedMay 15 2021, 10:57 PM

Changed the numbers 1000000, 100000 and 10000 to 1e6, 1e5 and 1e4 for the function "abbreviateLargeNumbers".

PS: It was suggested via IRC #0ad-dev (15/May/21 - [22:45:36]) by Vladislav

Vladislav Langbart: 1000000 > 1e6 and similar to have a smaller chance to miscount zeroes.

Langbart updated this revision to Diff 17583.May 15 2021, 11:06 PM

Also change the divisor to use the same format 1e3 and 1e6

I wonder... do we have any players from the Indian Subcontinent? (e.g. India, Pakistan, Bangladesh, Myanmar, Sri Lanka)

The reason I ask is because the folks in that region don't use the same digit groupings. What we see as "1 million" would be to them "10 lakh". Thus asking them to give a "One letter abbreviation for million" might not be something they can provide.

Then again, I'm not from that region - so perhaps finding a player that is and checking that this revision's abbreviating of numbers works for them and their locale might be worth considering.

Notice this fails when going into the negative resource amounts, but we don't support those very well, so no problem.
Also it might be a nice extension to convert really really large numbers to just their exponents (~ 1k million -> 1*10^9), but we don't really use those kind of numbers so also good for now.

I guess we do have players in the Indian Subcontinent, so maybe a forum shoutout is a good idea.
The rest of the patch looks good to me also.

binaries/data/mods/public/gui/common/tooltips.js
1215 ↗(On Diff #17583)

Or something alike.

Thus asking them to give a "One letter abbreviation for million" might not be something they can provide.

Then again, SI is SI and is standard essentially everywhere. I think K, M, G and possibly T are 'safe' to use given their prevalence in computers.


I have a feeling we're reaching bike shedding levels here, this should probably just get committed since it's generally agreed to be a good idea.

Langbart updated this revision to Diff 17585.EditedMay 16 2021, 10:58 AM

Changing the note above the function "abbreviateLargeNumbers" from "Large numbers are shortened." to "@param {number} number - A number to shorten using SI prefix."

Langbart updated this revision to Diff 17627.EditedMay 18 2021, 1:41 PM

Remove the actual number of gatheres from the tooltip, as it is clearly visible in the top panel, and write only "Gatherers: current" in the tooltip.

Currently the font size in the tooltip is larger than the actual number, I think we should just go with sans-bold-16.

Freagarach added inline comments.May 18 2021, 7:12 PM
binaries/data/mods/public/gui/session/top_panel/CounterPopulation.js
32 ↗(On Diff #17627)

I guess these can be just Current gatherers?
Also, since it is not dynamic anymore, we can save a few function calls by storing the translated and formatted string in the prototype.

binaries/data/mods/public/gui/session/top_panel/CounterResource.js
30 ↗(On Diff #17627)

Idem.

Langbart updated this revision to Diff 17640.EditedMay 18 2021, 9:20 PM

Storing the translated and formatted current gatherer string in the prototype.
Gatherers: current might look more consistent than Current gatherers.

Freagarach added inline comments.May 19 2021, 8:17 AM
binaries/data/mods/public/gui/session/top_panel/CounterPopulation.js
32 ↗(On Diff #17640)

?

binaries/data/mods/public/gui/session/top_panel/CounterResource.js
28 ↗(On Diff #17640)

I'm not sure you need the count here, actually. If you _must_ then you'll need to translate it.

Langbart updated this revision to Diff 17648.May 19 2021, 12:48 PM

Removing "count" from the resource description tooltip.
Change "CounterPopulation.prototype.CurrentGatherersTooltip" to "this.CurrentGatherersTooltip" in CounterPopulation.js.

Langbart edited the summary of this revision. (Show Details)May 19 2021, 12:53 PM
asterix accepted this revision.May 20 2021, 8:53 AM

Re-accepting the idea and changes.

This revision was automatically updated to reflect the committed changes.