Grim Dawn Resistance Optimizer Tool

Grim Dawn Utilities and Resources
21

Yes. I think you have covered everything that can be translated into Chinese. Thank you for the amazing work. This will be very helpful when i add localization support.

22

Localization Implementation

I have improved the localization functionality using a pure frontend approach (HTML + JS). Please run app.py to test it.

My Implementation Approach:

  1. Persistent Language Selection
    Uses localStorage to persist the selected language. Even after refreshing or closing the browser, the previously selected language remains.

  2. Tag-Based Localization via HTML Attributes
    All relevant HTML elements are assigned a data-languageTag attribute with corresponding values. Then, a matching dictionary file such as static/js/web/zh.js is used for localization.

  3. Item Localization via GrimTools JS Files
    Language JS files from GrimTools are directly used (e.g., static/js/db/zh.js) to localize items via their tag mappings.

  4. English as the Default
    The default HTML text and the Item column in the CSV serve as the English source. Therefore, you only need to add a tag field in the CSV and fill it in accordinglyā€”no need to modify existing data.

Project Modifications:

  • I created button_language.html and button_language.css separately to contain all localization-related code, keeping original files untouched as much as possible.
  • The only changes made to index.html were:
    • Adding data-languageTag attributes to the HTML elements that need localization
    • Including button_language.html
      No other modifications were made.

Issue:

Currently, item names are not localized because the CSV file does not contain tag fields for the items. Please add the relevant tags in the CSV file to enable this functionality.

Workflow for Adding or Updating a Language:

  1. Copy the relevant language JS file from GrimTools to static/js/db/
  2. Add the language option in the language selection dropdown
  3. Provide static/js/web/zh.js as a template to other translators. Once translated, they should store it in static/js/web/ with the appropriate filename.
  4. For any new content, just add data-languageTag to the new HTML elements. The translator can then update the respective static/js/web/*.js dictionary with translations.

web.zip (375.0 KB)

zh

2 Likes
23

Hey! Thank you so much for this. Really appreciate the effort. I will integrate it into my codebase as soon as possible and will let you know once its done (hopefully by end of the week).

Thanks a ton!

24

:wave: Hi bro, Iā€™ve further optimized the code

This time, you donā€™t need to modify index.html directly ā€” just add one line and modify two line, thatā€™s all.

:white_check_mark: What to Do

  1. Add one line to include the template before the </body>:
{% include 'button_language.html' %}
  1. Modify two line to add a fixed attribute to the itemā€™s HTML tag. Set the value using the itemā€™s TagName (this is just my assumption ā€” youā€™ll need to adjust it based on the actual CSV field name):
<a href="{{ values.Component.Url }}" target="_blank" data-language-Tag-And-Source-EN="{{ values.Component.TagName }}">
  {{ values.Component.Name }}
</a>

<a href="{{ values.Augment.Url }}" target="_blank" data-language-Tag-And-Source-EN="{{ values.Augment.TagName }}">
{{ values.Augment.Name }}
</a>

:white_check_mark: How It Works

This time, I dynamically extract content from HTML tags using JS and use it as the key in the translation dictionary. Iā€™ve tested it thoroughly ā€” it works perfectly.

In fact, itā€™s almost completely decoupled from your core code. The impact is minimal, so you can continue developing freely without worrying about compatibility.

:bulb: My Approach

  1. Use JavaScript to extract inner content from relevant HTML elements, and save it to a data-language-Tag-And-Source-EN attribute as both the original English and dictionary key.
  2. Some HTML tags are excluded from processing ā€” you can view or modify the list in button_language.html.
  3. The value in data-language-Tag-And-Source-EN is used as the translation key. (Although a bit long, it supports nearly all characters except \n and \p.)
    See the dictionary in: static/js/web/zh.js
  4. Once the content is extracted, translation is triggered automatically.
  5. To restore English, the script auto replaces the tagā€™s content with the original text stored in data-language-Tag-And-Source-EN.
  6. Any tag that already contains data-language-Tag-And-Source-EN will be skipped during extraction.
    This means you can pre-add this attribute manually ā€” the JS wonā€™t overwrite it, but the translation will still work normally. This is especially useful for translating item names.

:pray: Sorry to interrupt your work

Iā€™m sorry to make you stop your current task to look at my new code. But if this improves efficiency and reduces future disruption to your development, I hope youā€™ll understand.

:pencil2: Incremental Update Based on Website Changes

I noticed that your website content has changed,
so I only provided the incremental part this time.

You can try modifying index.html as I suggested and see if it works.

app2.zip (377.5 KB)

1 Like
25

Thanks again. I have not yet integrated the code you provided earlier as I am traveling. I will update the code with the latest one you have provided.

1 Like
26

Oops, enjoy your trip!

27

I just saw your pull request on github. I have requested 2 very minor changes there. Please do make the changes and commit again. I will happily approve the pull-request.

28

Thank you. Since there is no itemtag field in the CSV, I havenā€™t modified the other two rows. Please consider whether to add it.

29

Will adding the itemtag to the CSV allow the item names to translate into other languages? Iā€™m not sure how it works so just checking with you.

30

I have translated it above.

image

31

Yeah. I remember that you translated all the item names as well. Much thanks for that again. Was just wondering how to integrate it into the new framework that laozhangg provided.

32

I just approved your pull request and made the remaining changes myself. Thanks for the localization support again.

Do you have any idea on how the item names also can be displayed in chinese. tt300 here managed to translate them all into chinese, just wondering how we can include them in your localization framework.

33

Over the weekend, I didnā€™t have GitHub set up on my home computer,
so I had to postpone this work until now.
Sorry about that.

Iā€™m trying to sync the latest code and test the item tag feature.
Please wait a bit.

34

No problem. You can always make a new pull request. Some code has been updated yesterday so you can just pull that and make changes.

35

Iā€™ve completed the modification and tested it, and there are no problems. Iā€™ve submitted a pull request. Although the py file has been modified, the original processing logic has not changed. Iā€™ve only added an ItemTag display.

This is the test resultļ¼š
https://imgur.com/a/O7Cljds

1 Like
36

Looks great. I just have 1 comment. Do you have a discord id? Would be easier and quicker to communicate instead of over the forum or github comments :smiley:

1 Like
37

My Discord ID is also laozhangggg
Iā€™m a player from China, so I need special methods to access Discord, but Iā€™ve managed to get it working ā€” itā€™s just that my online times are a bit uncertain.
You can add me as a friend, and Iā€™ll try to be online more often.

1 Like
38

@tt300 You can check the tool now. It now has been fully translated into chinese along with item names. Really appreciate your help with it as well.

The Tool can be accessed here

1 Like
39

Everything else is fine, except that the camp names are reversed in two places. I donā€™t know where the problem lies.

image
image1204Ɨ790 52.9 KB

40

I think both those words mean Respect in English so you and @laozhangggg have them in different order. You both should discuss and decide which means which :joy: