Page MenuHomeWildfire Games

Improve the usefulness of the counters in the top panel
Needs ReviewPublic

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

Details

Reviewers
None
Group Reviewers
Restricted Owners Package(Owns No Changed Paths)
Trac Tickets
#6063
Summary
  • Add popMax to the population counter.
  • Highlight current gathers in yellow.
  • Increase font size for better readability.
  • 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
Branch
/ps/trunk
Lint
Lint OK
Unit
No Unit Test Coverage
Build Status
Buildable 17185
Build 39572: arc lint + arc unit

Event Timeline

Langbart created this revision.Sat, May 1, 6:17 AM
Owners added a subscriber: Restricted Owners Package.Sat, May 1, 6:17 AM
Langbart requested review of this revision.Sat, May 1, 6:17 AM
Langbart updated this revision to Diff 17300.Sat, May 1, 6:28 AM

because the resource style in the top panel is "resourceText", it is also used for barter and trade in the HUD and in the "Bart&Trade" menu, to get around this I just added a new style in styles.xml

Freagarach added inline comments.
binaries/data/mods/public/gui/session/top_panel/CounterPopulation.js
25–26

It is better to not call the coloredText function if there is no total.

63–64

I don't see the need for this, but if people like it more, I am okay with it.

binaries/data/mods/public/gui/session/top_panel/CounterResource.js
5

To me it seems this function may be of use elsewhere as well, e.g. in tooltips, so I think it fits better there.
Also the name seems a bit strange. It keeps reminding me of MIB.

7

One can use floor instead of the regex.
The m should be capital and should be translated.

10

Floor.

Langbart added a comment.EditedSat, May 1, 7:57 AM

I don't see the need for this, but if people like it more, I am okay with it.

Yes, I just want to avoid a line break. In this video from mysticjim you can see the issue @21:55min: 0AD My First Alpha 24 Game (28/Feb/21)
I don't have this problem with spaces on my PC, but I have seen it in some youtube videos. It seems that some operating systems make spaces around the slash symbol.
JavaScript/Guide/Regular_Expressions#escaping

Edit1: Added a link

Langbart updated this revision to Diff 17301.Sat, May 1, 9:27 AM

change the name of the function to "shortLargeNumbers", adding Math.floor; adding translate "M";

Where shall I place the function? "shortLargeNumbers"

Langbart updated this revision to Diff 17302.Sat, May 1, 9:32 AM

I got the message "Lint Errors", lets try again.

Langbart edited the summary of this revision. (Show Details)Sat, May 1, 9:37 AM
Langbart updated this revision to Diff 17340.Mon, May 3, 1:58 AM

Moving the function "shortLargeNumbers" into common/tooltips.js

The problem with the spaces around the slash symbol seems to persist. How do you ensure that there are no spaces between the population numbers?
A user nicknamed seeh has reported back that this worked for him:

CounterPopulation.prototype.CounterCaption = markForTranslation("%(popCount)s\/%(popLimit)s\/%(popMax)s") + ' ';
binaries/data/mods/public/gui/session/top_panel/CounterResource.js
17

Can I remove "Math.floor" from here?

nwtour added a subscriber: nwtour.EditedMon, May 3, 3:21 AM

The problem with the spaces around the slash symbol seems to persist.

It`s translation issue

$ grep ' %(popLimit' binaries/data/mods/public/l10n/*po
binaries/data/mods/public/l10n/en_GB.public-gui-ingame.po:msgstr "%(popCount)s / %(popLimit)s"
binaries/data/mods/public/l10n/en_GB.public-gui-ingame.po:msgstr "%(popCount)s / %(popLimit)s / %(popMax)s"
binaries/data/mods/public/l10n/eu.public-gui-ingame.po:msgstr "%(popCount)s/ %(popLimit)s"
binaries/data/mods/public/l10n/eu.public-gui-ingame.po:msgstr "%(popCount)s/ %(popLimit)s/ %(popMax)s"

The problem with the spaces around the slash symbol seems to persist.

It`s translation issue

$ grep ' %(popLimit' binaries/data/mods/public/l10n/*po
binaries/data/mods/public/l10n/en_GB.public-gui-ingame.po:msgstr "%(popCount)s / %(popLimit)s"
binaries/data/mods/public/l10n/en_GB.public-gui-ingame.po:msgstr "%(popCount)s / %(popLimit)s / %(popMax)s"
binaries/data/mods/public/l10n/eu.public-gui-ingame.po:msgstr "%(popCount)s/ %(popLimit)s"
binaries/data/mods/public/l10n/eu.public-gui-ingame.po:msgstr "%(popCount)s/ %(popLimit)s/ %(popMax)s"

Many thanks. That is awesome.

Langbart updated this revision to Diff 17341.Mon, May 3, 4:31 AM

adjusting the .po files

nwtour added a comment.EditedMon, May 3, 4:40 AM

adjusting the .po files

This change will roll back after the robot commits "Update PO and POT files"

The correct way is to register on transifex (in group en_GB) and change in the web-interface
https://www.transifex.com/wildfire-games/0ad/viewstrings/#en_GB/public-gui-ingame/93621272?q=text%3ApopCount

adjusting the .po files

This change will roll back after the robot commits "Update PO and POT files"

The correct way is to register on transifex (in group en_GB) and change in the web-interface
https://www.transifex.com/wildfire-games/0ad/viewstrings/#en_GB/public-gui-ingame/93621272?q=text%3ApopCount

You are right, what do you think if I just take seeh's idea and implement it? I'm afraid that in the future there might be more languages that do the same and add spaces around the slash symbol, not just the en_GB language.

CounterPopulation.prototype.CounterCaption = markForTranslation("%(popCount)s\/%(popLimit)s\/%(popMax)s") + ' ';
Langbart updated this revision to Diff 17343.Mon, May 3, 8:24 AM

Implementing "seeh's" idea

Freagarach added inline comments.Mon, May 3, 8:50 AM
binaries/data/mods/public/gui/common/tooltips.js
1222

These ks should be translated too.

binaries/data/mods/public/gui/session/top_panel/CounterPopulation.js
25–26

I meant more something like: this.stats.caption = total ? coloredText(total, "yellow") : "".

63–64

As said, it is a translation issue, so we might just add a comment to translators. I don't think adding + ' ' is the correct solution here.

binaries/data/mods/public/gui/session/top_panel/CounterResource.js
17

Nope, because the resources can be decimals. And your function just returns the input when it is small enough.

20

(Same as above.)

Angen added a reviewer: Restricted Owners Package.Mon, May 3, 9:44 AM
Langbart updated this revision to Diff 17345.Mon, May 3, 10:15 AM

Adding translation remark for "k"; a short message for translators regarding the spces for CouterPopulation.js; adjusting color function

Freagarach added inline comments.Mon, May 3, 10:42 AM
binaries/data/mods/public/gui/session/top_panel/CounterPopulation.js
25–26

The colour should be part of the prototype, see e.g. the default pop colour at the end of the file.

63–64

As we can see in the tooltips.js file, translation comments start with:
// Translation:

binaries/data/mods/public/gui/session/top_panel/CounterResource.js
22

(Colour prototype.)

Langbart updated this revision to Diff 17347.Mon, May 3, 11:21 AM

Adding prototype for color and correct remark for translation message

Langbart added inline comments.Mon, May 3, 11:43 AM
binaries/data/mods/public/gui/session/top_panel/CounterPopulation.js
64

Shall I remove this and a "max" to the line above?

CounterPopulation.prototype.PopulationTooltip = markForTranslation("Population (current / limit / max)");

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.Tue, May 4, 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
64

Yeah, might be better.

Langbart updated this revision to Diff 17413.Thu, May 6, 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)Thu, May 6, 5:05 AM

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

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

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

Freagarach added inline comments.Thu, May 6, 6:52 AM
binaries/data/mods/public/gui/session/top_panel/CounterResource.js
20–21

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.Thu, May 6, 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

abbreviateLargeNumbers

Langbart updated this revision to Diff 17473.EditedMon, May 10, 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)Mon, May 10, 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.Wed, May 12, 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)Sat, May 15, 7:45 AM