Getting language from JS?

[darhf]

Indeed !

Card art is so good in Res Arcana, there was no way we could have generated it without a significant loss to quality.
We settled on en/fr/jp cards.

The method is simple :

- Detect locale on setup
- Prevent preload of card images not needed
- Apply a css class on body depending on the locale


a few notes :
- locale is detected on browser and may be inacurate, work with exact matches and a default
- having the url of the different locales art files in the css can still lead to the browser loading them
- you can probably write this way better than I did at the time but you'll get the idea

main js :

Code: Select all

            
            setuplang:function() {

                let lang = dojo.config.locale.substr(0, 2);
                
                // console.log("detected lang ", lang);
                // if (window.location.href.includes("studio.boardgamearena.com")) {
                    // lang="fr";
                    // console.log("on studio, lang forced to fr");
                // }

                
                if (lang=="fr") {
                    this.preventpreload("en");
                    this.preventpreload("jp");
                    dojo.addClass('ebd-body', 'localefr');
                }
                else if (lang=="ja"){
                    this.preventpreload("en");
                    this.preventpreload("fr");
                    dojo.addClass('ebd-body', 'localejp');
                
                } else {
                    this.preventpreload("fr");
                    this.preventpreload("jp");
                    dojo.addClass('ebd-body', 'localeen');
                }

            },
            
              preventpreload:function(lang) {
                const prefix = lang+".";
                if (lang=="en") prefix="";
                let dontpreload=[];
		(...)
                dontpreload.push(prefix+'magicitems.jpg');
                for (let idx in dontpreload) {
                    this.dontPreloadImage(dontpreload[idx]);
                }
            },
                      
          
  

css :

Code: Select all

.localeen .res_magicitem
{
    background-image: url('img/magicitems.jpg');
}
.localefr .res_magicitem
{
    background-image: url('img/fr.magicitems.jpg');
}

[robinzig]

thanks, that's useful. (PS I love playing Res Arcana on BGA - great job with the implementation )

I was hoping there was some way in the BGA framework to get the player's language preference, but if not then I guess browser locale is the next best thing.

In an ideal world I think I would want to have English/French cards as a user option, and use the locale just to set the default. But not sure if this is possible either. (I'm still a newbie with BGA framework and I haven't started to look at this area yet when I have so many important things still to do! But I do intend to get round to it before calling the project done!)

[lordalx]

Hi, this is how it is done on krosmaster arena/blast or res arcana.

The key is to use dojo.config.locale function. From game.js, call below function within the setup() function :

Code: Select all

setLanguage: function() 
{
    var languages = [ '<default>', 'lang_fr'];
    var lang = dojo.config.locale.substr(0, 2);
    var idx = languages.indexOf('lang_' + lang);
    if ( idx != -1 ) {
        dojo.addClass('ebd-body', languages[idx]);
    }
    else idx = 0;

    // Don't preload images from other image pack
    smallcards = [ 'smallcards.jpg', 'smallcards_fr.jpg'];
    challenges = [ 'challenges.jpg', 'challenges_fr.jpg'];
    for (i in languages) {
        if (i != idx) {
            this.dontPreloadImage( smallcards[i] );
            this.dontPreloadImage( challenges[i] );
        }
    }
},

Then, in your game.css, simply override images with appropriate selector, for instance

Code: Select all

.lang_fr .kmb_challengecard,
.lang_fr .kmb_challengecard_tooltip
{
    background-image: url('img/challenges_fr.jpg');
}

[lordalx]

ok. didn't see darhf answered already ;p

[__wiz__]

Thank you for the detailed comments!

I went with the 'switch (_("en"))' solution because that way the language of the cards is chosen by the same setting that decides the displayed texts.

[quietmint]

There's an even simpler solution. The translation system already keeps track of such a variable for you, so you don't need to add a new string and depend on community cooperation.

Code: Select all

var lang = _('$locale'); // en, fr, etc.