[i18n] Full i18n Support #41

dodoels · 2025-04-28T21:00:27Z

🌍 Full i18n Support

Summary

This PR introduces full internationalization (i18n) support, with French (FR) added as a second-language example. The i18n implementation is fully integrated with the current UI and production-ready.

1. 🧱 Introducing the i18n Framework

Following the design proposed earlier, this PR completes the green-box portion in the diagram — enabling robust i18n support for the UI.

What’s included:

Refactored existing language logic to use the new centralized framework.
Added /ui/i18n/, which contains all configuration and utility functions for i18n.
Locales are stored in /assets/locale/ using a standardized JSON format, which can be reused by the Golang backend.
All i18n development guidelines and documentation are now available under /docs/. The main README.md has been simplified and now links to the relevant sections.

2. 🌐 What’s Been Localized

Language toggle implemented, with French (FR) added as a working second language.
Fallback mechanism: If a key is missing in the selected locale, it will gracefully fall back to English (EN), which is the source of truth.
Localized the landing page (index.html) and simulator/spec page (index_template.html).
All tab titles (Gear, Settings, Talents, etc.) have been localized.
The sidebar, including the header, buttons, and stat labels, is fully localized.

This implementation serves as a working example to guide future localization work.

3. 🧩 Design Considerations

🗂️ Locale JSON Structure

Localization files are modularized by UI section to improve clarity and maintainability:

landing: for index.html
sim: for index_template.html
sidebar: includes header, buttons, and stats
common: shared labels like stats, classes, specs, etc.
gear
setting
talents
rotation
results
import
export

Benefit: Clear structure for contributors to locate and manage translations efficiently.

🔁 Enum Mapping & Safe Translations

Many internal enums like Strength or Agility are used as UI text, keys, and logic values. Direct translation could break core functionality.

Solution:

entity_mapping.ts: Maps raw Go-enum values to stable English keys.
translation.ts: Maps those keys to localized strings from the locale files.

This separation ensures translation logic is safe, extensible, and won’t interfere with the sim's logic or state management.

1337LutZ · 2025-04-29T09:00:44Z

The NaN / 0 is a WoWhead issue, can replicate it on their site as well.

1337LutZ · 2025-04-29T12:07:08Z

@dodoels can you update your branch from current master

dodoels · 2025-05-01T01:42:36Z

@1337LutZ please review when you get chance, thanks!

1337LutZ · 2025-05-01T10:54:37Z

@1337LutZ please review when you get chance, thanks!

I think there were some more changes made that you are missing and need to merge in. The test is failing on a Frontend warnign that has been resolved. Sorry!

kayla-glick · 2025-05-15T21:24:36Z

@1337LutZ can you send the page that you tested with on wowhead? Trying to pass it along to their devs

[i18n] Full i18n Support: restructure and some redesign, and more examples on the UI

dodoels · 2025-07-04T03:17:31Z

@kayla-glick @1337LutZ @dodoels I believe this MR has very big value for us as there are a lot of people that could benefit from the wowhead items being in their language (I was surprised how many people play the game in their native languages).

Is it possible we come back to this and try to get it in a mergable state?

Updated the branch with the latest changes. This should now be a good MVP to be included in the release.

1337LutZ · 2025-07-04T08:05:53Z

assets/locales/en.json

+		}
+	},
+	"common": {
+		"phases": {


If phases are just going to be a number then we actually dont need this right? We can just use the browser's Int.NumberFormat. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat.

If we use this entry I would suggest that we actually have this for example:

"1": "Phase 1 (T14)

Ahhh that's where you use it. We also use it in the Filter dropdown (I thought that's where you wanted this).

which filter are you referring? xD

The Phases filter in the Gear picker popup

I see, that will be later, I am doing BFS now and making sure all first level UI are localized

1337LutZ · 2025-07-04T08:10:31Z

ui/core/components/character_stats.tsx

-			const statName = unitStat.getShortName(player.getClass());
+			let statName: string;
+			if (unitStat.isStat()) {
+				statName = translateStat(unitStat.getStat());


Is there a reason that we don't translate the stat names directly? We have getFullName and getShortName so this should already be possible. We can then get the translation in these functions.

Both of these use: getStatName and getClassPseudoStatName, so moving the stat translations to over there should resolve any manual interaction needed here.

getStatName and getClassPseudoStatName returns the enums generated from protobuf which is a more rebust solution.

Stat.StatStrength <-- get the stat enum [Stat.StatStrength]: 'strength' <-- find the translation key en[common.stat.strength] <-- find the actual translated text

if we go with direct translation from the short names..

Spell Crit <-- spell name in string spell_crit <-- parse into translation key en[common.stat.spell_crit] <-- find the actual translated text

To be specific, enums to string is more robust than string to parsed string to string which requires more manual works

Sorry I mean move the translateStat into the getFullName and getShortName. That way when you use those 2 functions, it's always localized and the translateStat is contained to only there

Resolved, but not sure if this is still revelant

// Not sure if this is needed anymore, but keeping it for now if (playerClass == Class.ClassHunter) { return fullName.replace('Physical', 'Ranged'); } else { return fullName.replace('Physical', 'Melee'); }

I left it as it is for now

It is still relevant! :D Hunter still has Ranger AP specific buffs

Resolved in e7f267c

ui/core/proto_utils/action_id.ts

ui/i18n/locale_service.ts

1337LutZ · 2025-07-04T08:15:12Z

ui/i18n/localization.ts

+			window.location.reload();
+		};
+		li.appendChild(a);
+		dropdownMenu.appendChild(li);


If you change this to a localization.tsx file, we can nicely use JSX to build this.

some functions in localization.ts are being imported into index.html, let me try if jsx can be resolved in the build

I know, but we can still write this in a JSX syntax and append it to the DOM

1337LutZ

Left some comments!

dodoels · 2025-07-05T02:43:13Z

@1337LutZ Addressed all your comments. Please checkout the branch and play with it see if any further issue. I will be afk until August, if this is not mergeble I will have to come back later - Otherwise, please feel free to merge it!

Resolve i18n conflicts

fix windows query import

dodoels added 10 commits April 28, 2025 15:32

add centralized i18n support, localize home page with french and english

8dbc3cb

improve localization service and add locale text

e3b923c

ignore vscode folder

9d1ef5b

update gitignore

c6ecd9e

revert changes

36f7dfe

finalize locale setting

0b7e088

fix locale inconsistency

f983d40

fix lang state issue

f15e6ab

clean up dev code

46a64f1

update documentation

6a915ff

dodoels changed the title ~~[i18n] Part2. add localization service, home page localization with EN and FR~~ [i18n] Part2. Full i18n Support & Landing Page i18n (EN/FR) Apr 29, 2025

dodoels marked this pull request as ready for review April 29, 2025 01:39

Merge remote-tracking branch 'upstream/master'

35ca533

dodoels added 3 commits May 2, 2025 23:13

resolve conflict

b8ccaf0

Merge remote-tracking branch 'upstream/master'

dea4871

fix readme redirect link

49d46a2

dodoels and others added 9 commits June 1, 2025 23:33

fix conflict

e0584fd

resolve conflict

82e4977

Merge branch 'wowsims:master' into master

1285b8c

Merge branch 'wowsims:master' into master

4211492

restructure locale

1ffd29a

make i18n sychronized, change keys

c299501

localized all tab titles

fa1edb7

update docs

696ab38

assets/

c57dc5e

dodoels added 3 commits July 3, 2025 21:19

resolve conflict

8d24d39

fix translation keys

2787d20

add stats mapping

7961435

dodoels changed the title ~~[i18n] Full i18n Support: examples of landing page~~ [i18n] Full i18n Support Jul 4, 2025

Merge pull request #1 from dodoels/locale-phase-2

3ccdea5

[i18n] Full i18n Support: restructure and some redesign, and more examples on the UI

NerdEgghead requested review from 1337LutZ and kayla-glick July 4, 2025 03:50

1337LutZ reviewed Jul 4, 2025

View reviewed changes

ui/core/proto_utils/action_id.ts Outdated Show resolved Hide resolved

1337LutZ reviewed Jul 4, 2025

View reviewed changes

ui/i18n/locale_service.ts Show resolved Hide resolved

1337LutZ reviewed Jul 4, 2025

View reviewed changes

1337LutZ requested changes Jul 4, 2025

View reviewed changes

dodoels added 4 commits July 4, 2025 11:07

update entity mapping, translation, and resolve comments

8be676a

move wowhead prefix function

d8255ba

move stat translation function

e7f267c

convert localization to jsx format

9f2aab8

dodoels requested a review from 1337LutZ July 5, 2025 02:51

dodoels and others added 3 commits July 5, 2025 14:32

Merge remote-tracking branch 'upstream/master'

a296430

Merge branch 'master' of https://github.com/wowsims/mop into HEAD

10a125b

Merge pull request #2 from wowsims/kg/resolve-i18n-conflicts

6827a9a

Resolve i18n conflicts

github-actions bot added the Druid label Jul 12, 2025

brucecaiad and others added 3 commits July 12, 2025 14:00

fix unsupported key

d3ff0b5

fix windows query import

1ceb02d

Merge pull request #3 from dodoels/lucy-windows

068d060

fix windows query import

kayla-glick approved these changes Jul 12, 2025

View reviewed changes

1337LutZ approved these changes Jul 12, 2025

View reviewed changes

kayla-glick merged commit aa01f34 into wowsims:master Jul 12, 2025
2 checks passed

[i18n] Full i18n Support #41

[i18n] Full i18n Support #41

Uh oh!

Conversation

dodoels commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🌍 Full i18n Support

Summary

1. 🧱 Introducing the i18n Framework

2. 🌐 What’s Been Localized

3. 🧩 Design Considerations

🗂️ Locale JSON Structure

🔁 Enum Mapping & Safe Translations

Uh oh!

1337LutZ commented Apr 29, 2025

Uh oh!

1337LutZ commented Apr 29, 2025

Uh oh!

dodoels commented May 1, 2025

Uh oh!

1337LutZ commented May 1, 2025

Uh oh!

kayla-glick commented May 15, 2025

Uh oh!

dodoels commented Jul 4, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dodoels Jul 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dodoels Jul 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

1337LutZ left a comment

Choose a reason for hiding this comment

Uh oh!

dodoels commented Jul 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

dodoels commented Apr 28, 2025 •

edited

Loading

dodoels Jul 4, 2025 •

edited

Loading

dodoels Jul 4, 2025 •

edited

Loading

dodoels commented Jul 5, 2025 •

edited

Loading