Add localization support for hover view

[Kvan7]

#370 (reply in thread)

By the way, can you do local language display for this part?

Originally posted by @vagrant-soul in #370 (reply in thread)

Blocked by #377

Main problem for this is that I need to parse each of these values again, this will be handled in #377, but if the user is using the english site, while the ui is in a different language we start running into issues:

 "explicitMods": [
    "Adds 1 to 3 [Physical|Physical] Damage to [Attack|Attacks]",
    "+66 to [Accuracy|Accuracy] Rating",
    "+60 to maximum Life",
    "27% increased [ItemRarity|Rarity of Items] found",
    "+38% to [Resistances|Fire Resistance]",
    "+36% to [Resistances|Lightning Resistance]"
  ],

The trade site does make it very easy to build back to the stats that I need from it, but we need to now generate text from values, which there currently isn't a method for doing. This seems possible, but will likely run into problems specifically related to negated or matchers that operate for specific values.

"matchers": [{"string": "#% increased Damage with Quarterstaves", "negate": false}, {"string": "#% reduced Damage with Quarterstaves", "negate": true}],

Example response from trade site

{
  "realm": "poe2",
  "verified": true,
  "w": 1,
  "h": 1,
  "icon": "https://web.poecdn.com/gen/image/WzI1LDE0LHsiZiI6IjJESXRlbXMvUmluZ3MvQmFzZXR5cGVzL1ByaXNtYXRpY1JpbmciLCJ3IjoxLCJoIjoxLCJzY2FsZSI6MSwicmVhbG0iOiJwb2UyIn1d/a9bd534c46/PrismaticRing.png",
  "league": "Standard",
  "id": "dc46b133c967e168157870def2a4e5159a63193ea0e8b36b2f9014c0e6927b39",
  "name": "Corpse Turn",
  "typeLine": "Prismatic Ring",
  "baseType": "Prismatic Ring",
  "rarity": "Rare",
  "ilvl": 81,
  "identified": true,
  "properties": [
    {
      "name": "Ring",
      "values": [],
      "displayMode": 0
    }
  ],
  "requirements": [
    {
      "name": "Level",
      "values": [
        [
          "60",
          0
        ]
      ],
      "displayMode": 0,
      "type": 62
    }
  ],
  "implicitMods": [
    "+9% to all [ElementalDamage|Elemental] [Resistances]"
  ],
  "explicitMods": [
    "Adds 1 to 3 [Physical|Physical] Damage to [Attack|Attacks]",
    "+66 to [Accuracy|Accuracy] Rating",
    "+60 to maximum Life",
    "27% increased [ItemRarity|Rarity of Items] found",
    "+38% to [Resistances|Fire Resistance]",
    "+36% to [Resistances|Lightning Resistance]"
  ],
  "frameType": 2,
  "extended": {
    "mods": {
      "explicit": [
        {
          "name": "of Windfall",
          "tier": "S5",
          "level": 75,
          "magnitudes": [
            {
              "hash": "explicit.stat_3917489142",
              "min": "26",
              "max": "30"
            }
          ]
        },
        {
          "name": "Stout",
          "tier": "P5",
          "level": 24,
          "magnitudes": [
            {
              "hash": "explicit.stat_3299347043",
              "min": "60",
              "max": "69"
            }
          ]
        },
        {
          "name": "Glinting",
          "tier": "P1",
          "level": 5,
          "magnitudes": [
            {
              "hash": "explicit.stat_3032590688",
              "min": "1",
              "max": "2"
            },
            {
              "hash": "explicit.stat_3032590688",
              "min": "3",
              "max": "4"
            }
          ]
        },
        {
          "name": "of the Lightning",
          "tier": "S7",
          "level": 71,
          "magnitudes": [
            {
              "hash": "explicit.stat_1671376347",
              "min": "36",
              "max": "40"
            }
          ]
        },
        {
          "name": "Focused",
          "tier": "P3",
          "level": 20,
          "magnitudes": [
            {
              "hash": "explicit.stat_803737631",
              "min": "61",
              "max": "84"
            }
          ]
        },
        {
          "name": "of Magma",
          "tier": "S7",
          "level": 71,
          "magnitudes": [
            {
              "hash": "explicit.stat_3372524247",
              "min": "36",
              "max": "40"
            }
          ]
        }
      ],
      "implicit": [
        {
          "name": "",
          "tier": "",
          "level": 44,
          "magnitudes": [
            {
              "hash": "implicit.stat_2901986750",
              "min": "7",
              "max": "10"
            }
          ]
        }
      ]
    },
    "hashes": {
      "explicit": [
        [
          "explicit.stat_3032590688",
          [
            2
          ]
        ],
        [
          "explicit.stat_803737631",
          [
            4
          ]
        ],
        [
          "explicit.stat_3299347043",
          [
            1
          ]
        ],
        [
          "explicit.stat_3917489142",
          [
            0
          ]
        ],
        [
          "explicit.stat_3372524247",
          [
            5
          ]
        ],
        [
          "explicit.stat_1671376347",
          [
            3
          ]
        ]
      ],
      "implicit": [
        [
          "implicit.stat_2901986750",
          [
            0
          ]
        ]
      ],
      "pseudo": [
        [
          "statgroup.0",
          null
        ]
      ]
    }
  },
  "pseudoMods": [
    "Sum: 101"
  ]
}

[vagrant-soul]

Looks like the part of the spliced string inside the center bracket | and [ ] after the separator character
By requesting URLs in different languages

If you match and replace it with a regular, it should return the normal string
Except for Chinese, of course, because official Trade doesn't have Chinese by default.

[
  "增加 104% 物理傷害",
  "附加 10 至 21 物理傷害",
  "攻擊技能增加 60% 元素傷害",
  "所有[Melee|近戰]技能的等級 +3",
  "每個被擊殺的敵人，獲得 10 魔力",
  "增加 11% [Stun|暈眩]持續時間"
]

function replaceBracketContent(text: string): string {
    // Define a regular expression to match content within brackets and capture the part after '|'
    const pattern = /\[.*?\|(.*?)\]/g;
    
    // Use the replace method to substitute the matched content with the captured group
    // $1 represents the content of the first captured group
    return text.replace(pattern, '$1');
}

const originalText: string = "增加 11% [Stun|暈眩]持續時間";
const resultText: string = replaceBracketContent(originalText);

console.log(resultText);  // Output: 增加 11%暈眩持續時間

{
  "realm": "poe2",
  "verified": true,
  "w": 2,
  "h": 4,
  "icon": "https://webtw.poecdn.com/gen/image/WzI1LDE0LHsiZiI6IjJESXRlbXMvV2VhcG9ucy9Ud29IYW5kV2VhcG9ucy9XYXJTdGF2ZXMvV2Fyc3RhZmYwNyIsInciOjIsImgiOjQsInNjYWxlIjoxLCJyZWFsbSI6InBvZTIifV0/10760714ba/Warstaff07.png",
  "league": "標準模式",
  "id": "24a2c17804e56a5728404c6d81c3e4a8f9b67500e37cb6e0d99ffe5e03be87ab",
  "sockets": [
    {
      "group": 0,
      "type": "rune",
      "item": "rune"
    },
    {
      "group": 1,
      "type": "rune",
      "item": "rune"
    }
  ],
  "name": "昏暗 織術者",
  "typeLine": "專家斬割細杖",
  "baseType": "專家斬割細杖",
  "rarity": "Rare",
  "ilvl": 80,
  "identified": true,
  "properties": [
    {
      "name": "[Quarterstaff|細杖]",
      "values": [],
      "displayMode": 0
    },
    {
      "name": "[Physical|物理]傷害",
      "values": [
        [
          "183-315",
          1
        ]
      ],
      "displayMode": 0,
      "type": 9
    },
    {
      "name": "[Critical|暴擊]率",
      "values": [
        [
          "10.00%",
          0
        ]
      ],
      "displayMode": 0,
      "type": 12
    },
    {
      "name": "每秒攻擊次數",
      "values": [
        [
          "1.40",
          0
        ]
      ],
      "displayMode": 0,
      "type": 13
    }
  ],
  "requirements": [
    {
      "name": "等級",
      "values": [
        [
          "77",
          0
        ]
      ],
      "displayMode": 0,
      "type": 62
    },
    {
      "name": "[Dexterity|敏捷]",
      "values": [
        [
          "165",
          0
        ]
      ],
      "displayMode": 1,
      "type": 64
    },
    {
      "name": "[Intelligence|智慧]",
      "values": [
        [
          "64",
          0
        ]
      ],
      "displayMode": 1,
      "type": 65
    }
  ],
  "runeMods": [
    "增加 40% 物理傷害"
  ],
  "explicitMods": [
    "增加 104% 物理傷害",
    "附加 10 至 21 物理傷害",
    "攻擊技能增加 60% 元素傷害",
    "所有[Melee|近戰]技能的等級 +3",
    "每個被擊殺的敵人，獲得 10 魔力",
    "增加 11% [Stun|暈眩]持續時間"
  ],
  "frameType": 2,
  "socketedItems": [
    {
      "realm": "poe2",
      "verified": true,
      "w": 1,
      "h": 1,
      "icon": "https://webtw.poecdn.com/gen/image/WzI1LDE0LHsiZiI6IjJESXRlbXMvQ3VycmVuY3kvUnVuZXMvRW5oYW5jZVJ1bmUiLCJ3IjoxLCJoIjoxLCJzY2FsZSI6MSwicmVhbG0iOiJwb2UyIn1d/744f92fffe/EnhanceRune.png",
      "stackSize": 1,
      "maxStackSize": 10,
      "league": "標準模式",
      "id": "c352eaf19d872605ed4af0678936bc6d7a82cf1f19516cd19767998bc5037d1c",
      "name": "",
      "typeLine": "鍛鐵符文",
      "baseType": "鍛鐵符文",
      "ilvl": 0,
      "identified": true,
      "properties": [
        {
          "name": "堆疊數量",
          "values": [
            [
              "1 / 10",
              0
            ]
          ],
          "displayMode": 0,
          "type": 32
        }
      ],
      "explicitMods": [
        "[MartialWeapon|軍用武器]: 增加 20% 物理傷害",
        "護甲: 增加 20% 護甲、閃避與能量護盾"
      ],
      "descrText": "放入[MartialWeapon|軍用武器]或護甲的一個空白符文插槽，將其效果套用至該物品。放入插槽後將無法移除或替換。",
      "frameType": 5,
      "socket": 0
    },
    {
      "realm": "poe2",
      "verified": true,
      "w": 1,
      "h": 1,
      "icon": "https://webtw.poecdn.com/gen/image/WzI1LDE0LHsiZiI6IjJESXRlbXMvQ3VycmVuY3kvUnVuZXMvRW5oYW5jZVJ1bmUiLCJ3IjoxLCJoIjoxLCJzY2FsZSI6MSwicmVhbG0iOiJwb2UyIn1d/744f92fffe/EnhanceRune.png",
      "stackSize": 1,
      "maxStackSize": 10,
      "league": "標準模式",
      "id": "25ebc2728df3991c32855b2e0bf3af471be72194f6b6f872fec13c16015254dd",
      "name": "",
      "typeLine": "鍛鐵符文",
      "baseType": "鍛鐵符文",
      "ilvl": 0,
      "identified": true,
      "properties": [
        {
          "name": "堆疊數量",
          "values": [
            [
              "1 / 10",
              0
            ]
          ],
          "displayMode": 0,
          "type": 32
        }
      ],
      "explicitMods": [
        "[MartialWeapon|軍用武器]: 增加 20% 物理傷害",
        "護甲: 增加 20% 護甲、閃避與能量護盾"
      ],
      "descrText": "放入[MartialWeapon|軍用武器]或護甲的一個空白符文插槽，將其效果套用至該物品。放入插槽後將無法移除或替換。",
      "frameType": 5,
      "socket": 1
    }
  ],
  "extended": {
    "dps": 418.6,
    "pdps": 418.6,
    "edps": 0,
    "dps_aug": true,
    "pdps_aug": true,
    "mods": {
      "explicit": [
        {
          "name": "包覆之",
          "tier": "S4",
          "level": 34,
          "magnitudes": [
            {
              "hash": "explicit.stat_1368271171",
              "min": "10",
              "max": "14"
            }
          ]
        },
        {
          "name": "狠毒的",
          "tier": "P4",
          "level": 35,
          "magnitudes": [
            {
              "hash": "explicit.stat_1509134228",
              "min": "85",
              "max": "109"
            }
          ]
        },
        {
          "name": "拋光的",
          "tier": "P3",
          "level": 21,
          "magnitudes": [
            {
              "hash": "explicit.stat_1940865751",
              "min": "8",
              "max": "12"
            },
            {
              "hash": "explicit.stat_1940865751",
              "min": "15",
              "max": "22"
            }
          ]
        },
        {
          "name": "決鬥之",
          "tier": "S2",
          "level": 18,
          "magnitudes": [
            {
              "hash": "explicit.stat_9187492",
              "min": "3",
              "max": "3"
            }
          ]
        },
        {
          "name": "衝擊之",
          "tier": "S1",
          "level": 5,
          "magnitudes": [
            {
              "hash": "explicit.stat_748522257",
              "min": "11",
              "max": "13"
            }
          ]
        },
        {
          "name": "注入的",
          "tier": "P2",
          "level": 15,
          "magnitudes": [
            {
              "hash": "explicit.stat_387439868",
              "min": "48",
              "max": "71"
            }
          ]
        }
      ]
    },
    "hashes": {
      "explicit": [
        [
          "explicit.stat_1509134228",
          [
            1
          ]
        ],
        [
          "explicit.stat_1940865751",
          [
            2
          ]
        ],
        [
          "explicit.stat_387439868",
          [
            5
          ]
        ],
        [
          "explicit.stat_9187492",
          [
            3
          ]
        ],
        [
          "explicit.stat_1368271171",
          [
            0
          ]
        ],
        [
          "explicit.stat_748522257",
          [
            4
          ]
        ]
      ],
      "rune": [
        [
          "rune.stat_1509134228",
          null
        ]
      ]
    }
  }
}

[Kvan7]

Yeah, this is mainly for an option there is for using the English trade site even if you use a different language.

For when you are using the normal trade site and not the english one, this should be relatively simple. When a user has selected this option though, the trade site will return english which causes problems since I have only loaded the data for the users selected language. So this is mainly trying to deal with that.

I will still most likely post some new translation stuff for the UI elements though.