mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-15 16:55:42 +00:00
Update Instructions and text in Build menu/Player panel (#785)
## Description: New images in Instructions where needed for: - event panel: wasn't mentioned yet - infopanel changed: quick chat, donate gold, stop/start trading etc - player icons: traitor, embargo, requesting alliance - radial menu: now differs between enemy/ally - leaderboard: was changed - options: time display was changed, cookie preferences button is now visible so kept that in the new image Some justifcations of part of the textual changes: - Trade: info was already behind and now updated to include changes from PR https://github.com/openfrontio/OpenFrontIO/pull/707 - Retreats: weren't yet mentioned. Added this to new info about Event panel. Including https://github.com/openfrontio/OpenFrontIO/pull/699, and not-yet-but-soon merged PR https://github.com/openfrontio/OpenFrontIO/pull/740 and https://github.com/openfrontio/OpenFrontIO/pull/705 - Radial Menu: close button has been replaced, explain that right-clicking closes it now. - Traitor: being a traitor and its consequences, like the changed defense debuff and effects on trade. - SAM: launcher hit chanches % changed. - Port: Battleships > Warships and other changes. - Warship: made more clear that only enemy trade ships/warships/boats are captured/destroyed. Made 'attack-click' more clear. - Boat: the word Boat was used, not Transport ship. While on server and in code it is called a Transport (ship) too. Tried to clear this up. Since it is now explained n Instructions, it doesn't have to be clarified per se elsewhere. Like in Build menu for Warship it says "Captures trade ships, destroys ships and boats" which can stay this way as it is now assumed knowledge that boat = transport. - More uniform capitalisation for 'Openfront' terms: capitalization was used differently across terms like Info panel and build menu, Alternate view and Alternate View. Other instances are more ambiguous like "Small explosive bomb that destroys territory, buildings, ships and boats" which i kept as is. - Embargo: the word 'embargo' was deliberately removed earlier, because it wasn't always understood by target audience (https://github.com/openfrontio/OpenFrontIO/pull/147). But some remnants were left. Using 'stop trading' in all but one spot now: it's used as one-word explanation for the Dollar stop sign player icon, just like other icons also have short 'Ally' 'Traitor' etc. So the players who do use the word embargo still have one reference left. - Build menu: left Warship description as is (see 'Boat:' above). Updated Port description from "Sends trade ships to allies to generate gold" to "Sends trade ships to generate gold". Trade is not only with allies anymore. And there's more details that are in Instructions like the effects stop/start trading, that don't have to be in the Build menu. This lessens the chances of having to change the Port description in Build menu again. - Player info: changed "Embargo against you" to "Stopped trade with you" (see 'Embargo:' above). Keys that need to be (re)translated in MLS: - NEW keys: info_chat, info_trade, ally_donate_gold, build_menu_desc, icon_embargo, icon_request, ui_playeroverlay, ui_playeroverlay_desc, ui_events, ui_events_desc, ui_events_alliance, ui_events_attack, ui_events_quickchat - UPDATED keys: info_enemy_desc, ally_betray, build_port_desc, build_warship_desc, build_sam_desc, icon_crown, icon_traitor, radial_boat, radial_build, build_menu.desc.port, embargo, option_settings, build_defense_desc, radial_desc, ui_leaderboard_desc Font looks weird in screenshots because of zoom 40% in browser to capture it all:       ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced - [x] I understand that submitting code with bugs that could have been caught through manual testing blocks releases and new features for all contributors ## Please put your Discord username so you can be contacted if a bug or regression is found: tryout33 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - Added new UI elements and icons for alliance requests, embargo status, and gold donation in the help modal and player info panels. - Introduced detailed sections in the help modal for events, player overlays, and expanded build menu explanations. - **Improvements** - Enhanced and clarified descriptions for leaderboard, event panels, player overlays, ally betrayal, and build menu items. - Improved visual grouping, layout, and styling consistency in the help modal and across UI icons. - **Style** - Updated and unified image and icon styles for consistent appearance in the help modal. - Added new CSS classes for modal images and icons; removed fixed-size radial menu image style. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
VariableVince
+181
-32
@@ -86,7 +86,10 @@ export class HelpModal extends LitElement {
|
||||
<td>${translateText("help_modal.action_zoom")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="key">W</span> <span class="key">A</span> <span class="key">S</span> <span class="key">D</span></td>
|
||||
<td>
|
||||
<span class="key">W</span> <span class="key">A</span>
|
||||
<span class="key">S</span> <span class="key">D</span>
|
||||
</td>
|
||||
<td>${translateText("help_modal.action_move_camera")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -112,7 +115,9 @@ export class HelpModal extends LitElement {
|
||||
<td>${translateText("help_modal.action_ratio_change")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="key">ALT</span> + <span class="key">R</span></td>
|
||||
<td>
|
||||
<span class="key">ALT</span> + <span class="key">R</span>
|
||||
</td>
|
||||
<td>${translateText("help_modal.action_reset_gfx")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -126,13 +131,14 @@ export class HelpModal extends LitElement {
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-gray-300">
|
||||
<div class="text-gray-300 font-bold">
|
||||
${translateText("help_modal.ui_leaderboard")}
|
||||
</div>
|
||||
<img
|
||||
src="/images/helpModal/leaderboard.webp"
|
||||
alt="Leaderboard"
|
||||
title="Leaderboard"
|
||||
class="default-image"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -144,13 +150,14 @@ export class HelpModal extends LitElement {
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-col items-center w-full md:w-[80%]">
|
||||
<div class="text-gray-300">
|
||||
<div class="text-gray-300 font-bold">
|
||||
${translateText("help_modal.ui_control")}
|
||||
</div>
|
||||
<img
|
||||
src="/images/helpModal/controlPanel.webp"
|
||||
alt="Control panel"
|
||||
title="Control panel"
|
||||
class="default-image"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -172,13 +179,52 @@ export class HelpModal extends LitElement {
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-gray-300">
|
||||
<div class="text-gray-300 font-bold">
|
||||
${translateText("help_modal.ui_events")}
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<img
|
||||
src="/images/helpModal/eventsPanel.webp"
|
||||
alt="Event panel"
|
||||
title="Event panel"
|
||||
class="default-image"
|
||||
/>
|
||||
<img
|
||||
src="/images/helpModal/eventsPanelAttack.webp"
|
||||
alt="Event panel"
|
||||
title="Event panel"
|
||||
class="default-image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-4">${translateText("help_modal.ui_events_desc")}</p>
|
||||
<ul>
|
||||
<li class="mb-4">
|
||||
${translateText("help_modal.ui_events_alliance")}
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
${translateText("help_modal.ui_events_attack")}
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
${translateText("help_modal.ui_events_quickchat")}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mt-6 mb-4" />
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-gray-300 font-bold">
|
||||
${translateText("help_modal.ui_options")}
|
||||
</div>
|
||||
<img
|
||||
src="/images/helpModal/options.webp"
|
||||
alt="Options"
|
||||
title="Options"
|
||||
class="default-image"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -196,18 +242,46 @@ export class HelpModal extends LitElement {
|
||||
|
||||
<hr class="mt-6 mb-4" />
|
||||
|
||||
<div class="text-2xl font-bold text-center">
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-gray-300 font-bold">
|
||||
${translateText("help_modal.ui_playeroverlay")}
|
||||
</div>
|
||||
<img
|
||||
src="/images/helpModal/playerInfoOverlay.webp"
|
||||
alt="Player info overlay"
|
||||
title="Player info overlay"
|
||||
class="default-image"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-4">
|
||||
${translateText("help_modal.ui_playeroverlay_desc")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mt-6 mb-4" />
|
||||
|
||||
<div class="text-2xl font-bold mb-4 text-center">
|
||||
${translateText("help_modal.radial_title")}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<img
|
||||
src="/images/helpModal/radialMenu.webp"
|
||||
alt="Radial menu"
|
||||
title="Radial menu"
|
||||
,
|
||||
class="radial-menu-image"
|
||||
/>
|
||||
<div class="flex flex-col gap-4">
|
||||
<img
|
||||
src="/images/helpModal/radialMenu.webp"
|
||||
alt="Radial menu"
|
||||
title="Radial menu"
|
||||
class="default-image"
|
||||
/>
|
||||
<img
|
||||
src="/images/helpModal/radialMenuAlly.webp"
|
||||
alt="Radial menu ally"
|
||||
title="Radial menu ally"
|
||||
class="default-image"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-4">${translateText("help_modal.radial_desc")}</p>
|
||||
<ul>
|
||||
@@ -228,8 +302,12 @@ export class HelpModal extends LitElement {
|
||||
<span>${translateText("help_modal.radial_boat")}</span>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<div class="inline-block icon cancel-icon"></div>
|
||||
<span>${translateText("help_modal.radial_close")}</span>
|
||||
<div class="inline-block icon alliance-icon"></div>
|
||||
<span>${translateText("help_modal.info_alliance")}</span>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<div class="inline-block icon betray-icon"></div>
|
||||
<span>${translateText("help_modal.ally_betray")}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -238,24 +316,29 @@ export class HelpModal extends LitElement {
|
||||
<hr class="mt-6 mb-4" />
|
||||
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-center">
|
||||
<div class="text-2xl font-bold mb-4 text-center">
|
||||
${translateText("help_modal.info_title")}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4 mt-2">
|
||||
<div class="flex flex-col items-center w-full md:w-[80%]">
|
||||
<divclass="text-gray-300">
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-col items-center w-full md:w-[62%]">
|
||||
<div class="text-gray-300 font-bold">
|
||||
${translateText("help_modal.info_enemy_panel")}
|
||||
</div>
|
||||
<img
|
||||
src="/images/helpModal/infoMenu.webp"
|
||||
alt="Enemy info panel"
|
||||
title="Enemy info panel"
|
||||
class="info-panel-img"
|
||||
/>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<p class="mb-4">${translateText("help_modal.info_enemy_desc")}</p>
|
||||
<ul>
|
||||
<li class="mb-4">
|
||||
<div class="inline-block icon chat-icon"></div>
|
||||
<span>${translateText("help_modal.info_chat")}</span>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<div class="inline-block icon target-icon"></div>
|
||||
<span>${translateText("help_modal.info_target")}</span>
|
||||
@@ -264,10 +347,16 @@ export class HelpModal extends LitElement {
|
||||
<div class="inline-block icon alliance-icon"></div>
|
||||
<span>${translateText("help_modal.info_alliance")}</span>
|
||||
</li>
|
||||
<li>
|
||||
<li class="mb-4">
|
||||
<div class="inline-block icon emoji-icon"></div>
|
||||
<span>${translateText("help_modal.info_emoji")}</span>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<div class="inline-block icon">
|
||||
<img src="/images/helpModal/stopTrading.webp" />
|
||||
</div>
|
||||
<span>${translateText("help_modal.info_trade")}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -276,13 +365,14 @@ export class HelpModal extends LitElement {
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-col items-center w-full md:w-[62%]">
|
||||
<div class="text-gray-300">
|
||||
<div class="text-gray-300 font-bold">
|
||||
${translateText("help_modal.info_ally_panel")}
|
||||
</div>
|
||||
<img
|
||||
src="/images/helpModal/infoMenuAlly.webp"
|
||||
alt="Ally info panel"
|
||||
title="Ally info panel"
|
||||
class="info-panel-img"
|
||||
/>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
@@ -296,6 +386,10 @@ export class HelpModal extends LitElement {
|
||||
<div class="inline-block icon donate-icon"></div>
|
||||
<span>${translateText("help_modal.ally_donate")}</span>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<div class="inline-block icon donate-gold-icon"></div>
|
||||
<span>${translateText("help_modal.ally_donate_gold")}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -307,6 +401,7 @@ export class HelpModal extends LitElement {
|
||||
<div class="text-2xl font-bold mb-4 text-center">
|
||||
${translateText("help_modal.build_menu_title")}
|
||||
</div>
|
||||
<p class="mb-4">${translateText("help_modal.build_menu_desc")}</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -368,38 +463,92 @@ export class HelpModal extends LitElement {
|
||||
<hr class="mt-6 mb-4" />
|
||||
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-center">
|
||||
<div class="text-2xl mb-4 font-bold text-center">
|
||||
${translateText("help_modal.player_icons")}
|
||||
</div>
|
||||
<p>${translateText("help_modal.icon_desc")}</p>
|
||||
<div class="flex flex-col md:flex-row gap-4 mt-2">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-gray-300">
|
||||
<p class="mb-2">${translateText("help_modal.icon_desc")}</p>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4 mt-4">
|
||||
<div
|
||||
class="flex flex-col items-center w-full md:w-1/3 mb-2 md:mb-0"
|
||||
>
|
||||
<div
|
||||
class="text-gray-300 h-8 md:h-10 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
|
||||
>
|
||||
${translateText("help_modal.icon_crown")}
|
||||
</div>
|
||||
<img
|
||||
src="/images/helpModal/number1.webp"
|
||||
src="/images/helpModal/crown.webp"
|
||||
alt="Number 1 player"
|
||||
title="Number 1 player"
|
||||
class="player-icon-img w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-gray-300">
|
||||
<div
|
||||
class="flex flex-col items-center w-full md:w-1/3 mb-2 md:mb-0"
|
||||
>
|
||||
<div
|
||||
class="text-gray-300 h-8 md:h-10 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
|
||||
>
|
||||
${translateText("help_modal.icon_traitor")}
|
||||
</div>
|
||||
<img
|
||||
src="/images/helpModal/traitor.webp"
|
||||
alt="Traitor"
|
||||
title="Traitor"
|
||||
class="player-icon-img w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-gray-300">
|
||||
<div
|
||||
class="flex flex-col items-center w-full md:w-1/3 mb-2 md:mb-0"
|
||||
>
|
||||
<div
|
||||
class="text-gray-300 h-8 md:h-10 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
|
||||
>
|
||||
${translateText("help_modal.icon_ally")}
|
||||
</div>
|
||||
<img src="/images/helpModal/ally.webp" alt="Ally" title="Ally" />
|
||||
<img
|
||||
src="/images/helpModal/ally.webp"
|
||||
alt="Ally"
|
||||
title="Ally"
|
||||
class="player-icon-img w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4 mt-4 md:justify-center">
|
||||
<div
|
||||
class="flex flex-col items-center w-full md:w-1/3 mb-2 md:mb-0"
|
||||
>
|
||||
<div
|
||||
class="text-gray-300 h-8 md:h-10 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
|
||||
>
|
||||
${translateText("help_modal.icon_embargo")}
|
||||
</div>
|
||||
<img
|
||||
src="/images/helpModal/embargo.webp"
|
||||
alt="Stopped trading"
|
||||
title="Stopped trading"
|
||||
class="player-icon-img w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-col items-center w-full md:w-1/3 mb-2 md:mb-0"
|
||||
>
|
||||
<div
|
||||
class="text-gray-300 h-8 md:h-10 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
|
||||
>
|
||||
${translateText("help_modal.icon_request")}
|
||||
</div>
|
||||
<img
|
||||
src="/images/helpModal/allianceRequest.webp"
|
||||
alt="Alliance Request"
|
||||
title="Alliance Request"
|
||||
class="player-icon-img w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user