Fix(HelpModal): small updates and fixes (#3473)

## Description:

- fix info icon spacing
- update multiple texts to reflect current state, rewrote
"ui_playeroverlay_desc" further for better readability
- add text for the options menu, and change their order to reflect
current button order
- add missing "Stop trading" icon, is PNG so lazy load
- remove uneccesary lazy loading for an SVG icon (rest of the SVGs
aren't lazy loaded either)

Didn't touch the rest although more incremental updates are needed
following UI and other changes.

Before:
<img width="242" height="82" alt="image"
src="https://github.com/user-attachments/assets/8f38eef6-21e7-4b18-84ef-adc4161a317f"
/>

<img width="357" height="167" alt="image"
src="https://github.com/user-attachments/assets/c6937b5c-c1b2-4560-b40b-94b24a4906cc"
/>

After:
<img width="262" height="95" alt="image"
src="https://github.com/user-attachments/assets/15c1e9f5-3e27-4f4b-8472-5bb70234ab42"
/>

<img width="345" height="203" alt="image"
src="https://github.com/user-attachments/assets/3d3fe3c5-98b2-41fb-8f79-48d02d7ecf9b"
/>

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

tryout33

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
This commit is contained in:
VariableVince
2026-03-20 22:03:06 +01:00
committed by GitHub
parent 54a63ac481
commit c29fca477b
2 changed files with 13 additions and 15 deletions
+4 -3
View File
@@ -121,12 +121,13 @@
"ui_options": "Options",
"ui_options_desc": "The following elements can be found inside:",
"ui_playeroverlay": "Player info overlay",
"ui_playeroverlay_desc": "When you hover over a country, the Player info overlay is displayed under Options. It shows the type of player: Human, Nation, or Tribe. A Nation's attitude towards you, ranging from Hostile to Friendly. And defending troops, gold, plus the number of Warships and various buildings the player has.",
"ui_playeroverlay_desc": "When you hover over a country, the Player info overlay appears. It shows the player type (Human, Nation, or Tribe), a Nation's attitude toward you (Hostile to Friendly), defending troops, gold, and the number of Warships and buildings they have.",
"ui_wilderness": "Wilderness",
"option_pause": "Pause/Unpause the game - Only available in single player mode.",
"option_pause": "Pause/Unpause the game - Unavailable in public games.",
"option_speed": "Speed - Adjust the game speed. Unavailable in public games.",
"option_timer": "Timer - Time passed since the start of the game.",
"option_exit": "Exit button.",
"option_settings": "Settings - Open the settings menu. Inside you can toggle the Alternate view, Emojis, Dark Mode, Ninja (anonymous/random names mode), and action on left click.",
"option_settings": "Settings - Open the settings menu. Inside you can toggle things like Alternate view, Emojis, Dark Mode, Hidden names, action on left click and more.",
"radial_title": "Radial menu",
"radial_desc": "Right clicking (or touch on mobile) opens the Radial menu. Right click outside it to close it. From the menu you can:",
"radial_build": "Open the Build menu.",
+9 -12
View File
@@ -624,10 +624,11 @@ export class HelpModal extends BaseModal {
${translateText("help_modal.ui_options_desc")}
</p>
<ul class="space-y-2 list-disc pl-4 text-white/60">
<li>${translateText("help_modal.option_pause")}</li>
<li>${translateText("help_modal.option_timer")}</li>
<li>${translateText("help_modal.option_exit")}</li>
<li>${translateText("help_modal.option_speed")}</li>
<li>${translateText("help_modal.option_pause")}</li>
<li>${translateText("help_modal.option_settings")}</li>
<li>${translateText("help_modal.option_exit")}</li>
</ul>
</div>
</div>
@@ -718,8 +719,7 @@ export class HelpModal extends BaseModal {
<li class="flex items-center gap-3">
<img
src="/images/InfoIcon.svg"
class="w-5 h-5 opacity-80"
loading="lazy"
class="w-8 h-8 scale-75 origin-left"
/>
<span>${translateText("help_modal.radial_info")}</span>
</li>
@@ -848,14 +848,11 @@ export class HelpModal extends BaseModal {
<span>${translateText("help_modal.info_emoji")}</span>
</li>
<li class="flex items-center gap-3">
<div
class="flex items-center justify-center w-8 h-8 opacity-80"
>
<img
src="/images/helpModal/stopTrading.webp"
class="w-full h-full object-contain"
/>
</div>
<img
src="/images/StopIconWhite.png"
class="w-8 h-8 scale-75 origin-left"
loading="lazy"
/>
<span>${translateText("help_modal.info_trade")}</span>
</li>
</ul>