search

cuttle-cards / cuttle

A two-player battle card game for all ages, built with nodejs, sailsjs, and vuejs
MIT License
144 stars 114 forks source link

[Feature]: Apply Translations/localization to text in `SevenDoubleJacksDialog` #630

Closed itsalaidbacklife closed 1 year ago

itsalaidbacklife commented 1 year ago

Feature Summary

We should use i18n to translate SevenDoubleJacksDialog. See the following test for a quick way to look at this dialog:

// tests/e2e/specs/in-game/7_sevens/player_sevens.spec.js
it('Plays jack from a seven - special case - double jacks with some points to steal but opponent has queen', () => {})

image

Detailed Description

We should pull all of the text in the SevenDoubleJacksDialog into the translation json files e.g. src/translations/en.json, src/translations/es.json, and src/translations/fr.json in under a key called "game.dialogs.sevenDoubleJacksDialog"

Look at src/views/LoginView for an example of a page that is correctly using $i18n to localize/translate content. The user-visible strings have been removed from the code and placed into a "login" section of the translation files in src/translations.

The page then imports and consumes the useI18n() composable to grab the t() function used to render/translate text by pulling from the appropriate language's json file. This is done using a setup() block of the page like so:

setup() {
const { t } = useI18n();
return { t };
},

From there, we can grab a given string by name in the appropriate locale using {{ t('login.joinDiscord') }} since each translation json in this case has a login attribute for all the text in the login page, with a joinDiscord child attribute for the text to show in the 'Join our discord community' button.

We should do the same thing to the SevenDoubleJacksDialog by extracting all the text in the page into a rules section of each translation json file (e.g. src/translations/en.json) and then configuring SevenDoubleJacksDialog.vue with the useI18n() composable and rendering all its text with t() to translate it to the user's selected locale.

All the text for the SevenDoubleJacksDialog should be stored in each language file under the key "game.dialogs.sevenDoubleJacksDialog" (generally we have one top-level key for each page e.g. "game" and "login", then specific sub-keys for components in that page (additionally grouping all the dialogs under the sub-key "game.dialogs"

The end result of this change should be the ability to see the text of the SevenDoubleJacksDialog in your preferred locale.

Posoroko commented 1 year ago

I'm working on this, but I have to learn how to use Cypress to load the game in the specific state so I can test it.