From c4614fe0baf8fc5ba45e8b89146278d605c12544 Mon Sep 17 00:00:00 2001 From: Aotumuri Date: Sat, 22 Mar 2025 05:51:04 +0900 Subject: [PATCH] Add multi-language support to the start screen and help-modal (#305) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This pull request adds multi-language support to the start screen. Languages are managed via JSON files, making it easy to add new languages in the future. I added a basic language selection button for switching between languages. However, I believe it would benefit from a better design — my design skills are limited, so I apologize in advance. Looking forward to your feedback and possible design improvements. --- resources/lang/en.json | 92 ++++++++++++++++++++++++++ resources/lang/ja.json | 81 +++++++++++++++++++++++ src/client/HelpModal.ts | 140 ++++++++++++++++++++-------------------- src/client/index.html | 20 +++++- src/client/lang.js | 57 ++++++++++++++++ 5 files changed, 319 insertions(+), 71 deletions(-) create mode 100644 resources/lang/en.json create mode 100644 resources/lang/ja.json create mode 100644 src/client/lang.js diff --git a/resources/lang/en.json b/resources/lang/en.json new file mode 100644 index 000000000..1c2795114 --- /dev/null +++ b/resources/lang/en.json @@ -0,0 +1,92 @@ +{ + "main": { + "join_discord": "Join the Discord!", + "create_lobby": "Create Lobby", + "join_lobby": "Join Lobby", + "single_player": "Single Player", + "instructions": "Instructions", + "how_to_play": "How to Play", + "wiki": "Wiki" + }, + "help_modal": { + "hotkeys": "Hotkeys", + + "table_key": "Key", + + "table_action": "Action", + + "action_alt_view": "Alternate view (terrain/countries)", + "action_attack_altclick": "Attack (when left click is set to open menu)", + "action_build": "Open build menu", + "action_center": "Center camera on player", + "action_zoom": "Zoom out/in", + "action_move_camera": "Move camera", + "action_ratio_change": "Decrease/Increase attack ratio", + "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_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.", + + "ui_options": "Options", + "ui_options_desc": "The following elements can be found inside:", + "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.", + + "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_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_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_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_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. 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.", + + "build_menu_title": "Build menu", + "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_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_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.", + "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_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", + "build_hydrogen_desc": "Large explosive bomb. Spawns from the nearest Missile Silo and lands in the area you first clicked to build it.", + "build_mirv": "MIRV", + "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_ally": "Handshake - Ally. This player is your ally." + } +} diff --git a/resources/lang/ja.json b/resources/lang/ja.json new file mode 100644 index 000000000..05ebc89a2 --- /dev/null +++ b/resources/lang/ja.json @@ -0,0 +1,81 @@ +{ + "main": { + "join_discord": "Discordサーバーに参加！", + "create_lobby": "ロビーを作成", + "join_lobby": "ロビーに参加", + "single_player": "シングルプレイヤー", + "instructions": "説明書", + "how_to_play": "遊び方", + "wiki": "ウィキ" + }, + "help_modal": { + "hotkeys": "ホットキー", + "table_key": "キー", + "table_action": "アクション", + "action_alt_view": "表示切替（地形/国家）", + "action_attack_altclick": "攻撃（左クリックがメニューの場合）", + "action_build": "建設メニューを開く", + "action_center": "カメラをプレイヤーに寄せる", + "action_zoom": "ズームアウト/イン", + "action_move_camera": "カメラ移動", + "action_ratio_change": "攻撃比率を増減", + "action_reset_gfx": "グラフィックをリセット", + "ui_section": "ゲームUI", + "ui_leaderboard": "リーダーボード", + "ui_leaderboard_desc": "上位プレイヤーの名前、占領率、資産を表示します。", + "ui_control": "コントロールパネル", + "ui_control_desc": "コントロールパネルには以下が含まれます：", + "ui_pop": "人口 - 現在のユニット数、最大人口、増加速度を表示。", + "ui_gold": "資産 - 所持金と増加速度を表示。", + "ui_troops_workers": "兵士と労働者 - 攻撃/防御/金生成のための配分。", + "ui_attack_ratio": "攻撃比率 - 攻撃時の使用兵士の割合。", + "ui_options": "オプション", + "ui_options_desc": "以下の項目が含まれます：", + "option_pause": "ゲームの一時停止（シングルプレイヤーのみ）", + "option_timer": "タイマー - ゲーム開始からの経過時間", + "option_exit": "終了ボタン", + "option_settings": "設定メニュー（表示/ダークモード/クリック設定など）", + "radial_title": "ラジアルメニュー", + "radial_desc": "右クリックまたはタップでメニューを開きます：", + "radial_build": "建設メニューを開く。", + "radial_info": "情報メニューを開く。", + "radial_boat": "ボートを送る（海にアクセスできる場合）。", + "radial_close": "メニューを閉じる。", + "info_title": "情報メニュー", + "info_enemy_desc": "選択プレイヤーの名前、資産、兵士数、裏切り者かどうかを表示。裏切り者とは、同盟を結んでいたプレイヤーを裏切り、攻撃したプレイヤーのことです。以下のアイコンは、以下のやりとりを表しています：", + "info_target": "ターゲットマークを付ける（攻撃協調用）。", + "info_alliance": "同盟を申し込む。", + "info_emoji": "絵文字を送る。", + "info_ally_panel": "同盟情報パネル", + "info_ally_desc": "同盟後に使える新しいアイコン：", + "ally_betray": "同盟を裏切る（アイコンが固定されます）。", + "ally_donate": "兵士を味方に寄付。", + "build_menu_title": "建設メニュー", + "build_name": "名前", + "build_icon": "アイコン", + "build_desc": "説明", + "build_city": "都市", + "build_city_desc": "最大人口を増加します。領土を拡張できない時や人口上限に近い時に有効です。", + "build_defense": "防衛ポスト", + "build_defense_desc": "国境の防御力を上げます。敵の攻撃が遅くなり、敵の被害が増加します。", + "build_port": "港", + "build_port_desc": "自国と他国の港の間で自動的に貿易船を送ります（相手か自分が貿易停止していない場合）。両者にゴールドをもたらします。バトルシップの建造も可能。水辺にのみ建設可能です。", + "build_warship": "戦艦", + "build_warship_desc": "周囲を巡回し、貿易船を拿捕したり、敵の戦艦やボートを破壊します。最寄りの港から出撃し、建設時に指定した場所を巡回します。", + "build_silo": "ミサイル格納庫", + "build_silo_desc": "ミサイルの発射を可能にします。", + "build_sam": "SAMランチャー", + "build_sam_desc": "100ピクセル範囲内の敵ミサイルを75%の確率で迎撃します。7.5秒のクールダウンがあり、MIRVには対応していません。", + "build_atom": "原子爆弾", + "build_atom_desc": "小型の爆弾で、領土・建物・船舶・ボートを破壊します。最寄りのミサイル格納庫から発射され、最初にクリックした場所に着弾します。", + "build_hydrogen": "水素爆弾", + "build_hydrogen_desc": "大型の爆弾。最寄りのミサイル格納庫から発射され、クリックした場所に着弾します。", + "build_mirv": "MIRV", + "build_mirv_desc": "ゲーム中最強の爆弾。複数の小型爆弾に分裂し、広範囲を攻撃します。最初に指定したプレイヤーのみを攻撃し、最寄りのミサイル格納庫から発射されます。", + "player_icons": "プレイヤーアイコン", + "icon_desc": "ゲーム内アイコンとその意味：", + "icon_crown": "王冠 - リーダーボード1位のプレイヤー", + "icon_traitor": "交差した剣 - 裏切り者（同盟を攻撃）", + "icon_ally": "握手 - 味方（同盟関係）" + } +} diff --git a/src/client/HelpModal.ts b/src/client/HelpModal.ts index de76c943e..0dec60f7f 100644 --- a/src/client/HelpModal.ts +++ b/src/client/HelpModal.ts @@ -226,50 +226,50 @@ export class HelpModal extends LitElement { ×
-
Hotkeys
+
Hotkeys
- - + + - + - + - + - + - + - + - + - + - +
KeyActionKeyAction
SpaceAlternate view (terrain/countries)Alternate view (terrain/countries)
Shift + left clickAttack (when left click is set to open menu)Attack (when left click is set to open menu)
Ctrl + left clickOpen build menuOpen build menu
CCenter camera on playerCenter camera on player
Q / EZoom out/inZoom out/in
W / A / S / DMove cameraMove camera
1 / 2Decrease/Increase attack ratioDecrease/Increase attack ratio
Shift + scroll down / scroll upDecrease/Increase attack ratioDecrease/Increase attack ratio
ALT + RReset graphicsReset graphics
@@ -277,14 +277,14 @@ export class HelpModal extends LitElement {
-
Game UI
+
Game UI
-
Leaderboard
+
Leaderboard
Leaderboard
-

Shows the top players of the game and their names, % owned land and gold.

+

Shows the top players of the game and their names, % owned land and gold.

@@ -292,16 +292,16 @@ export class HelpModal extends LitElement {
-
Control panel
+
Control panel
Control panel
-

The control panel contains the following elements:

+

The control panel contains the following elements:

    -
  • Pop - The amount of units you have, your max population and the rate at which you gain them.
    • -
  • Gold - The amount of gold you have and the rate at which you gain it.
    • -
  • 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.
    • -
  • Attack ratio - The amount of troops that will be used when you attack. You can adjust the attack ratio using the slider.
    • +
  • Pop - The amount of units you have, your max population and the rate at which you gain them.
    • +
  • Gold - The amount of gold you have and the rate at which you gain it.
    • +
  • 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.
    • +
  • Attack ratio - The amount of troops that will be used when you attack. You can adjust the attack ratio using the slider.
@@ -310,34 +310,34 @@ export class HelpModal extends LitElement {
-
Options
+
Options
Options
-

The following elements can be found inside:

+

The following elements can be found inside:

    -
  • Pause/Unpause the game - Only available in single player mode.
    • -
  • Timer - Time passed since the start of the game.
    • -
  • Exit button.
    • -
  • Settings - Open the settings menu. Inside you can toggle the Alternate View, Dark Mode, Emojis and action on left click.
    • +
  • Pause/Unpause the game - Only available in single player mode.
    • +
  • Timer - Time passed since the start of the game.
    • +
  • Exit button.
    • +
  • Settings - Open the settings menu. Inside you can toggle the Alternate View, Dark Mode, Emojis and action on left click.
-
Radial menu
+
Radial menu
Radial menu
-

Right clicking (or touch on mobile) opens the radial menu. From there you can:

+

Right clicking (or touch on mobile) opens the radial menu. From there you can:

    -
  • - Open the build menu.
    • +
  • - Open the build menu.
  • - - Open the Info menu.
    • -
  • - Send a boat to attack at the selected location (only available if you have access to water).
    • -
  • - Close the menu.
    • + - Open the Info menu. +
  • - Send a boat to attack at the selected location (only available if you have access to water).
    • +
  • - Close the menu.
@@ -345,20 +345,20 @@ export class HelpModal extends LitElement {
-
Info menu
+
Info menu
-
Enemy info panel
+
Enemy info panel
Enemy info panel
-

+

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:

    -
  • - Place a target mark on the player, marking it for all allies, used to coordinate attacks.
    • -
  • - Send an alliance request to the player. Allies can share resources and troops, but can't attack each other.
    • -
  • - Send an emoji to the player.
    • +
  • - Place a target mark on the player, marking it for all allies, used to coordinate attacks.
    • +
  • - Send an alliance request to the player. Allies can share resources and troops, but can't attack each other.
    • +
  • - Send an emoji to the player.
@@ -367,16 +367,16 @@ export class HelpModal extends LitElement {
-
Ally info panel
+
Ally info panel
Ally info panel
-

+

When you ally with a player, the following new icons become available:

    -
  • - Betray your ally, ending the alliance. You will now have a permanent icon stuck next to your name. Bots are less likely to ally with you and players will think twice before doing so.
    • -
  • - 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.
    • +
  • - Betray your ally, ending the alliance. You will now have a permanent icon stuck next to your name. Bots are less likely to ally with you and players will think twice before doing so.
    • +
  • - 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.
@@ -385,37 +385,37 @@ export class HelpModal extends LitElement {
-
Build menu
+
Build menu
- - - + + + - + - - + - - + - - + - - + - + - + - - + - + - + - + - + - +
NameIconDescriptionNameIconDescription
CityCity
+ Increases your max population. Useful when you can't expand your territory or you're about to hit your population limit.
Defense PostDefense Post
+ Increases defenses around nearby borders. Attacks from enemies are slower and have more casualties.
PortPort
+ 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 @@ -424,39 +424,39 @@ export class HelpModal extends LitElement {
WarshipWarship
+ 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.
Missile SiloMissile Silo
Allows launching missiles.Allows launching missiles.
SAM LauncherSAM Launcher
Has a 75% chance to intercept enemy missiles in it's 100 pixel range. + Has a 75% chance to intercept enemy missiles in it's 100 pixel range. The SAM has a 7.5 second cooldown and can not intercept MIRVs.
Atom BombAtom Bomb
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.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.
Hydrogen BombHydrogen Bomb
Large explosive bomb. Spawns from the nearest Missile Silo and lands in the area you first clicked to build it.Large explosive bomb. Spawns from the nearest Missile Silo and lands in the area you first clicked to build it.
MIRVMIRV
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.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.
@@ -465,21 +465,21 @@ export class HelpModal extends LitElement {
-
Player icons
-

Examples of some of the ingame icons you will encounter and what they mean:

+
Player icons
+

Examples of some of the ingame icons you will encounter and what they mean:

-
Crown - This is the number 1 player in the leaderboard
+
Crown - This is the number 1 player in the leaderboard
Number 1 player
-
Crossed swords - Traitor. This player attacked an ally.
+
Crossed swords - Traitor. This player attacked an ally.
Traitor
-
Handshake - Ally. This player is your ally.
+
Handshake - Ally. This player is your ally.
Ally
diff --git a/src/client/index.html b/src/client/index.html index 9a1e95eeb..6ede5b98f 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -249,7 +249,7 @@ alt="Discord" src="../../resources/icons/discord.svg" /> - Join the Discord! + Join the Discord!
@@ -262,12 +262,14 @@ >
+
+ +
@@ -348,12 +363,14 @@
How to Play Wiki +