Grim Dawn Resistance Optimizer Tool

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.

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

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!

: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

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

Oops, enjoy your trip!

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.

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.

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.

I have translated it above.

image

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.

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.

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.

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.

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

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

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

@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

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

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: