Client-side translation of string with colored username

[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>`});

[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

[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;
        },

[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?

[Tisaac]

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.

[SwHawk]

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...

[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.

[Tisaac]

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.

[salty-horse]

How can I set my background color to test this feature?