Page 1 of 1
Client-side translation of string with colored username
Posted: 17 September 2022, 19:57
by salty-horse
On the client side, I would like to have a string that says "X's stuff".
I want X to be the username, with colors.
The backend notifications system already does this, but I don't know how to achieve this on the client side.
What's the correct way to implement this, while having a simple string without HTML exposed to translators?
Can I something like this? Are usernames guaranteed to be sanitized?
Code: Select all
elem.innerHTML = dojo.string.substitute(
_("${player_name}'s stuff"),
{player_name: `<span style="color:#${player.color}">${player.name}</span>`});
Re: Client-side translation of string with colored username
Posted: 17 September 2022, 22:13
by Tisaac
Just use format_string_recursive with ${player_name} :
Code: Select all
elem.innerHTML = this.format_string_recursive(_("${player_name}'s stuff"), { player_name }); // assuming name is stored in 'player_name' variable
Re: Client-side translation of string with colored username
Posted: 18 September 2022, 01:08
by Victoria_La
There is example in
https://en.doc.boardgamearena.com/BGA_S ... background
Code: Select all
divColoredPlayer: function(player_id) {
var color = this.gamedatas.players[player_id].color;
var color_bg = "";
if (this.gamedatas.players[player_id] && this.gamedatas.players[player_id].color_back) {
color_bg = "background-color:#" + this.gamedatas.players[player_id].color_back + ";";
}
var div = "<span style=\"color:#" + color + ";" + color_bg + "\">" + this.gamedatas.players[player_id].name + "</span>";
return div;
},
Re: Client-side translation of string with colored username
Posted: 18 September 2022, 07:24
by salty-horse
1) I'm still not clear on whether or not player names and colors are safe to inject in HTML as-is.
2) How is format_string_recursive better than dojo.string.substitute ? (I found examples of both in the docs)
3) I didn't know I need to support background colors and bold the active player's name. It's not in the example templates. Thanks. Is it important to apply in all situations?
Re: Client-side translation of string with colored username
Posted: 18 September 2022, 13:24
by Tisaac
salty-horse wrote: ↑18 September 2022, 07:24
1) I'm still not clear on whether or not player names and colors are safe to inject in HTML as-is.
2) How is format_string_recursive better than dojo.string.substitute ? (I found examples of both in the docs)
3) I didn't know I need to support background colors and bold the active player's name. It's not in the example templates. Thanks. Is it important to apply in all situations?
Format_string is using string.substitute with some défaut substitution, including player_name.
Re: Client-side translation of string with colored username
Posted: 19 September 2022, 08:22
by SwHawk
Tisaac wrote: ↑18 September 2022, 13:24
Format_string is using string.substitute with some défaut substitution, including player_name.
Hum... When format_string_recursive is called after a notification, the notification args already have the player_name substituted, it's not done by format_string_recursive... But if you call it on a personalized string, I'm pretty sure it doesn't substitute player_name keys... Unless you get it from notification args in some way... If you want player_name to be substituted, you'd need to call undocumented framework methods...
Re: Client-side translation of string with colored username
Posted: 19 September 2022, 08:31
by salty-horse
I'm unclear on how the example of format_string_recursive helps with HTML formatting. For now, I'm using my code from the top, and will need to add support for background-color.
From your examples I am getting the sense that this kind of injection of user data (usernames, preferred colors) is OK.
Re: Client-side translation of string with colored username
Posted: 19 September 2022, 10:36
by Tisaac
SwHawk wrote: ↑19 September 2022, 08:22
Tisaac wrote: ↑18 September 2022, 13:24
Format_string is using string.substitute with some défaut substitution, including player_name.
Hum... When format_string_recursive is called after a notification, the notification args already have the player_name substituted, it's not done by format_string_recursive... But if you call it on a personalized string, I'm pretty sure it doesn't substitute player_name keys... Unless you get it from notification args in some way... If you want player_name to be substituted, you'd need to call undocumented framework methods...
Oh right, I tend to forgot I have this basic overwritting of format_string_recursive in all my games :
Code: Select all
format_string_recursive(log, args) {
try {
if (log && args) {
let player_keys = Object.keys(args).filter((key) => key.substr(0, 11) == 'player_name');
player_keys.forEach((key) => {
args[key] = this.coloredPlayerName(args[key]);
});
}
} catch (e) {
console.error(log, args, 'Exception thrown', e.stack);
}
return this.inherited(arguments);
},
And the function used here (coloredPlayerName) is exactly the one from Victoria_La example.
Re: Client-side translation of string with colored username
Posted: 25 September 2022, 18:08
by salty-horse
How can I set my background color to test this feature?