mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-28 18:04:49 +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
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 582 B After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 290 B |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 59 KiB |
+28
-15
@@ -33,50 +33,61 @@
|
||||
"action_reset_gfx": "Reset graphics",
|
||||
"ui_section": "Game UI",
|
||||
"ui_leaderboard": "Leaderboard",
|
||||
"ui_leaderboard_desc": "Shows the top players of the game and their names, % owned land and gold.",
|
||||
"ui_leaderboard_desc": "Shows the top players of the game and their names, % owned land, gold and troops. Using Show All shows all players in the game. If you don't want to see the leaderboard, click Hide.",
|
||||
"ui_control": "Control panel",
|
||||
"ui_control_desc": "The control panel contains the following elements:",
|
||||
"ui_pop": "Pop - The amount of units you have, your max population and the rate at which you gain them.",
|
||||
"ui_gold": "Gold - The amount of gold you have and the rate at which you gain it.",
|
||||
"ui_troops_workers": "Troops and Workers - The amount of allocated troops and workers. Troops are used to attack or defend against attacks. Workers are used to generate gold. You can adjust the number of troops and workers using the slider.",
|
||||
"ui_attack_ratio": "Attack ratio - The amount of troops that will be used when you attack. You can adjust the attack ratio using the slider. Having more attacking troops than defending troops will make you lose fewer troops in the attack, while having less will increase the damage dealt to your attacking troops. The effect doesn't go beyond ratios of 2:1.",
|
||||
"ui_events": "Event panel",
|
||||
"ui_events_desc": "The Event panel displays the latest events, requests and Quick Chat messages. Some examples are:",
|
||||
"ui_events_alliance": "Alliance - Alliance requests can be accepted or rejected. Allies can share resources and troops, but can't attack each other. Clicking Focus moves the view to the player who sent the request.",
|
||||
"ui_events_attack": "Attacks - Incoming attacks and your outgoing attacks are shown. Click the message to center the view on the attack, nuke or Boat (transport ship). You can retreat troops by clicking the red X button. This will cost the lives of 25% of your attacking troops. If you retrieve a Boat attack, the boat returns to its starting point and will attack there if the land has been captured since. Nukes can't be retreated once launched.",
|
||||
"ui_events_quickchat": "Quick Chat - You can see sent and recieved chat messages here. Send a message to a player by clicking the Quick Chat icon in their Info menu.",
|
||||
"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 (smart bot), or Bot. 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.",
|
||||
"option_pause": "Pause/Unpause the game - Only available in single player mode.",
|
||||
"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, Dark Mode, Emojis and action on left click.",
|
||||
"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.",
|
||||
"radial_title": "Radial menu",
|
||||
"radial_desc": "Right clicking (or touch on mobile) opens the radial menu. From there you can:",
|
||||
"radial_build": "Open the build 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.",
|
||||
"radial_info": "Open the Info menu.",
|
||||
"radial_boat": "Send a boat to attack at the selected location (only available if you have access to water).",
|
||||
"radial_boat": "Send a Boat (transport ship) to attack at the selected location. Only available if you have access to water.",
|
||||
"radial_close": "Close the menu.",
|
||||
"info_title": "Info menu",
|
||||
"info_enemy_desc": "Contains information such for the selected player name, gold, troops, and if the player is a traitor.Traitor is a player who betrayed and attacked a player who was in an alliance with them. The icons below represent the following interactions:",
|
||||
"info_enemy_desc": "Contains information such as the selected player's name, gold, troops, stopped trading with you, nukes sent to you, and if the player is a traitor. Stopped trading means you won't receive gold from them and they won't sent you gold via trade ships. Manually (if the player clicked \"Stop trading\", which lasts until you both click \"Start trading\") or automatically (if you betrayed your alliance, which lasts until you become allies again or after 5 minutes). Traitor displays Yes for 30 seconds when the player betrayed and attacked a player who was in an alliance with them. The icons below represent the following interactions:",
|
||||
"info_chat": "Send a quick chat message to the player. Select a Category, a Phrase, and if the phrase contains [P1] select a Player name to replace it with. Hit Send.",
|
||||
"info_target": "Place a target mark on the player, marking it for all allies, used to coordinate attacks.",
|
||||
"info_alliance": "Send an alliance request to the player. Allies can share resources and troops, but can't attack each other.",
|
||||
"info_emoji": "Send an emoji to the player.",
|
||||
"info_trade": "Use \"Stop trading\" to stop giving the player gold and receiving their gold via trade ships. If you both click \"Start trading\" it will start again.",
|
||||
"info_ally_panel": "Ally info panel",
|
||||
"info_ally_desc": "When you ally with a player, the following new icons become available:",
|
||||
"ally_betray": "Betray your ally, ending the alliance. You will now have a permanent icon stuck next to your name, unless the other nation was a traitor themselves. Attacks against you will incur less losses for the attacker until the end of the game, bots are less likely to ally with you and players will think twice before doing so.",
|
||||
"ally_betray": "Betray your ally, ending the alliance, halting trade, and weakening your defense. Trading between you is paused for 5 minutes (or until you become allies again) and others may stop trading too. And unless the other player was a traitor themselves, you'll be marked a traitor for 30 seconds. During this time an icon will be above your name and you will have a 50% defense debuff. Bots are less likely to ally with you and players will think twice before doing so.",
|
||||
"ally_donate": "Donate some of your troops to your ally. Used when they're low on troops and are being attacked, or when they need that extra power to crush an enemy.",
|
||||
"ally_donate_gold": "Donate some of your gold to your ally. Used when they're low on gold and need it for buildings, or when your team member is saving for that MIRV.",
|
||||
"build_menu_title": "Build menu",
|
||||
"build_menu_desc": "Build these or see how many of each you already build:",
|
||||
"build_name": "Name",
|
||||
"build_icon": "Icon",
|
||||
"build_desc": "Description",
|
||||
"build_city": "City",
|
||||
"build_city_desc": "Increases your max population. Useful when you can't expand your territory or you're about to hit your population limit.",
|
||||
"build_defense": "Defense Post",
|
||||
"build_defense_desc": "Increases defenses around nearby borders. Attacks from enemies are slower and have more casualties.",
|
||||
"build_defense_desc": "Increases defenses around nearby borders, which show a checkered pattern. Attacks from enemies are slower and have more casualties.",
|
||||
"build_port": "Port",
|
||||
"build_port_desc": "Automatically sends trade ships between ports of your country and other countries (except if you clicked \"stop trade\" on them or they clicked \"stop trade on you\"), giving gold to both sides. Allows building Battleships. Can only be built near water.",
|
||||
"build_port_desc": "Can only be built near water. Allows building Warships. Automatically sends trade ships between ports of your country and other countries (except when trade is stopped), giving gold to both sides. Trade stops automatically when you attack or are attacked by a player. It resumes after 5 minutes or if you become allies. You can manually toggle trading with \"Stop trading\" or \"Start trading\".",
|
||||
"build_warship": "Warship",
|
||||
"build_warship_desc": "Patrols in an area, capturing trade ships and destroying enemy Warships and Boats. Spawns from the nearest Port and patrols the area you first clicked to build it. You can control Warships by attack-clicking on them and then attack-clicking the new area you want them to move to.",
|
||||
"build_warship_desc": "Patrols in an area, capturing enemy trade ships and destroying their Boats (transport ships) and Warships. Spawns from the nearest Port and patrols the area you first clicked to build it. You can control Warships by attack-clicking on them (see action Attack under Hotkeys) and then attack-clicking the new area you want them to move to.",
|
||||
"build_silo": "Missile Silo",
|
||||
"build_silo_desc": "Allows launching missiles.",
|
||||
"build_sam": "SAM Launcher",
|
||||
"build_sam_desc": "Has a 75% chance to intercept enemy missiles in its 100 pixel range. The SAM has a 7.5 second cooldown and cannot intercept MIRVs.",
|
||||
"build_sam_desc": "Can intercept enemy missiles in its 100 pixel range. With a 100% hit chance for Atom Bomb, 80% for Hydrogen Bomb and 50% for individual MIRV Warheads. The SAM has a 7.5 second cooldown.",
|
||||
"build_atom": "Atom Bomb",
|
||||
"build_atom_desc": "Small explosive bomb that destroys territory, buildings, ships and boats. Spawns from the nearest Missile Silo and lands in the area you first clicked to build it.",
|
||||
"build_hydrogen": "Hydrogen Bomb",
|
||||
@@ -85,9 +96,11 @@
|
||||
"build_mirv_desc": "The most powerful bomb in the game. Splits up into smaller bombs that will cover a huge range of territory. Only damages the player that you first clicked on to build it. Spawns from the nearest Missile Silo and lands in the area you first clicked to build it.",
|
||||
"player_icons": "Player icons",
|
||||
"icon_desc": "Examples of some of the ingame icons you will encounter and what they mean:",
|
||||
"icon_crown": "Crown - This is the number 1 player in the leaderboard",
|
||||
"icon_traitor": "Crossed swords - Traitor. This player attacked an ally.",
|
||||
"icon_crown": "Crown - Number 1. This is the top player in the leaderboard.",
|
||||
"icon_traitor": "Broken shield - Traitor. This player attacked an ally.",
|
||||
"icon_ally": "Handshake - Ally. This player is your ally.",
|
||||
"icon_embargo": "Dollar stop sign - Embargo. This player has stopped trading with you automatically or manually.",
|
||||
"icon_request": "Envelope - Alliance request. This player has sent you an alliance request.",
|
||||
"info_enemy_panel": "Enemy info panel"
|
||||
},
|
||||
"single_modal": {
|
||||
@@ -328,7 +341,7 @@
|
||||
"missile_silo": "Used to launch nukes",
|
||||
"sam_launcher": "Defends against incoming nukes",
|
||||
"warship": "Captures trade ships, destroys ships and boats",
|
||||
"port": "Sends trade ships to allies to generate gold",
|
||||
"port": "Sends trade ships to generate gold",
|
||||
"defense_post": "Increase defenses of nearby borders",
|
||||
"city": "Increase max population"
|
||||
},
|
||||
@@ -387,7 +400,7 @@
|
||||
"gold": "Gold",
|
||||
"troops": "Troops",
|
||||
"traitor": "Traitor",
|
||||
"embargo": "Embargo against you",
|
||||
"embargo": "Stopped trading with you",
|
||||
"nuke": "Nukes sent by them to you",
|
||||
"start_trade": "Start trading",
|
||||
"stop_trade": "Stop trading",
|
||||
|
||||
+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>
|
||||
|
||||
+31
-5
@@ -309,11 +309,6 @@ label.option-card:hover {
|
||||
background: rgba(74, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.radial-menu-image {
|
||||
width: 211px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#helpModal table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
@@ -333,6 +328,28 @@ label.option-card:hover {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#helpModal .default-image {
|
||||
width: 12rem;
|
||||
max-width: 12rem;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#helpModal .info-panel-img {
|
||||
width: 12rem;
|
||||
max-width: 12rem;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#helpModal .player-icon-img {
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#helpModal .icon {
|
||||
background-color: white;
|
||||
width: 32px;
|
||||
@@ -380,6 +397,10 @@ label.option-card:hover {
|
||||
mask: url("../../resources/images/MIRVIcon.svg") no-repeat center / cover;
|
||||
}
|
||||
|
||||
#helpModal .chat-icon {
|
||||
mask: url("../../resources/images/ChatIconWhite.svg") no-repeat center / cover;
|
||||
}
|
||||
|
||||
#helpModal .target-icon {
|
||||
mask: url("../../resources/images/TargetIcon.svg") no-repeat center / cover;
|
||||
}
|
||||
@@ -404,6 +425,11 @@ label.option-card:hover {
|
||||
center / cover;
|
||||
}
|
||||
|
||||
#helpModal .donate-gold-icon {
|
||||
mask: url("../../resources/images/DonateGoldIconWhite.svg") no-repeat center /
|
||||
cover;
|
||||
}
|
||||
|
||||
#helpModal .build-icon {
|
||||
mask: url("../../resources/images/BuildIconWhite.svg") no-repeat center /
|
||||
cover;
|
||||
|
||||
Reference in New Issue
Block a user