alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-30 11:02:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add multi-language support to the start screen and help-modal (#305)

Browse Source 
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.
This commit is contained in:
Aotumuri
2025-03-22 05:51:04 +09:00
committed by GitHub
parent 2392f3a2fe
commit c4614fe0ba
5 changed files with 319 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/lang/en.json
+92
View File
@@ -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."
}
}
resources/lang/ja.json
+81
View File
@@ -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秒のクールダウンがあり、<b>MIRVには対応していません。</b>",
"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": "握手 - 味方（同盟関係）"
}
}
src/client/HelpModal.ts
+70 -70
View File
@@ -226,50 +226,50 @@ export class HelpModal extends LitElement {
<span class="close" @click=${this.close}>&times;</span>
<div class="flex flex-col items-center">
<div class="text-center text-2xl font-bold mb-4">Hotkeys</div>
<div data-i18n="help_modal.hotkeys" class="text-center text-2xl font-bold mb-4">Hotkeys</div>
<table>
<thead>
<tr>
<th>Key</th>
<th>Action</th>
<th data-i18n="help_modal.table_key">Key</th>
<th data-i18n="help_modal.table_action">Action</th>
</tr>
</thead>
<tbody class="text-left">
<tr>
<td>Space</td>
<td>Alternate view (terrain/countries)</td>
<td data-i18n="help_modal.action_alt_view">Alternate view (terrain/countries)</td>
</tr>
<tr>
<td>Shift + left click</td>
<td>Attack (when left click is set to open menu)</td>
<td data-i18n="help_modal.action_attack_altclick">Attack (when left click is set to open menu)</td>
</tr>
<tr>
<td>Ctrl + left click</td>
<td>Open build menu</td>
<td data-i18n="help_modal.action_build">Open build menu</td>
</tr>
<tr>
<td>C</td>
<td>Center camera on player</td>
<td data-i18n="help_modal.action_center">Center camera on player</td>
</tr>
<tr>
<td>Q / E</td>
<td>Zoom out/in</td>
<td data-i18n="help_modal.action_zoom">Zoom out/in</td>
</tr>
<tr>
<td>W / A / S / D</td>
<td>Move camera</td>
<td data-i18n="help_modal.action_move_camera">Move camera</td>
</tr>
<tr>
<td>1 / 2</td>
<td>Decrease/Increase attack ratio</td>
<td data-i18n="help_modal.action_ratio_change">Decrease/Increase attack ratio</td>
</tr>
<tr>
<td>Shift + scroll down / scroll up</td>
<td>Decrease/Increase attack ratio</td>
<td data-i18n="help_modal.action_ratio_change">Decrease/Increase attack ratio</td>
</tr>
<tr>
<td>ALT + R</td>
<td>Reset graphics</td>
<td data-i18n="help_modal.action_reset_gfx">Reset graphics</td>
</tr>
</tbody>
</table>
@@ -277,14 +277,14 @@ export class HelpModal extends LitElement {
<hr class="mt-6 mb-4">
<div class="text-2xl font-bold text-center mb-4">Game UI</div>
<div data-i18n="help_modal.ui_section" class="text-2xl font-bold text-center mb-4">Game UI</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex flex-col items-center">
<div class="text-gray-300">Leaderboard</div>
<div data-i18n="help_modal.ui_leaderboard" class="text-gray-300">Leaderboard</div>
<img src="/images/helpModal/leaderboard.png" alt="Leaderboard" title="Leaderboard" />
</div>
<div>
<p>Shows the top players of the game and their names, % owned land and gold.</p>
<p data-i18n="help_modal.ui_leaderboard_desc">Shows the top players of the game and their names, % owned land and gold.</p>
</div>
</div>
@@ -292,16 +292,16 @@ 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">Control panel</div>
<div data-i18n="help_modal.ui_control" class="text-gray-300">Control panel</div>
<img src="/images/helpModal/controlPanel.png" alt="Control panel" title="Control panel" />
</div>
<div>
<p class="mb-4">The control panel contains the following elements:</p>
<p data-i18n="help_modal.ui_control_desc" class="mb-4">The control panel contains the following elements:</p>
<ul>
<li class="mb-4">Pop - The amount of units you have, your max population and the rate at which you gain them.</li>
<li class="mb-4">Gold - The amount of gold you have and the rate at which you gain it.</li>
<li class="mb-4">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.</li>
<li class="mb-4">Attack ratio - The amount of troops that will be used when you attack. You can adjust the attack ratio using the slider.</li>
<li data-i18n="help_modal.ui_pop" class="mb-4">Pop - The amount of units you have, your max population and the rate at which you gain them.</li>
<li data-i18n="help_modal.ui_gold" class="mb-4">Gold - The amount of gold you have and the rate at which you gain it.</li>
<li data-i18n="help_modal.ui_troops_workers" class="mb-4">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.</li>
<li data-i18n="help_modal.ui_attack_ratio" class="mb-4">Attack ratio - The amount of troops that will be used when you attack. You can adjust the attack ratio using the slider.</li>
</ul>
</div>
</div>
@@ -310,34 +310,34 @@ 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">Options</div>
<div data-i18n="help_modal.ui_options" class="text-gray-300">Options</div>
<img src="/images/helpModal/options.png" alt="Options" title="Options" />
</div>
<div>
<p class="mb-4">The following elements can be found inside:</p>
<p data-i18n="help_modal.ui_options_desc" class="mb-4">The following elements can be found inside:</p>
<ul>
<li class="mb-4">Pause/Unpause the game - Only available in single player mode.</li>
<li class="mb-4">Timer - Time passed since the start of the game.</li>
<li class="mb-4">Exit button.</li>
<li class="mb-4">Settings - Open the settings menu. Inside you can toggle the Alternate View, Dark Mode, Emojis and action on left click.</li>
<li data-i18n="help_modal.option_pause" class="mb-4">Pause/Unpause the game - Only available in single player mode.</li>
<li data-i18n="help_modal.option_timer" class="mb-4">Timer - Time passed since the start of the game.</li>
<li data-i18n="help_modal.option_exit" class="mb-4">Exit button.</li>
<li data-i18n="help_modal.option_settings" class="mb-4">Settings - Open the settings menu. Inside you can toggle the Alternate View, Dark Mode, Emojis and action on left click.</li>
</ul>
</div>
</div>
<hr class="mt-6 mb-4">
<div class="text-2xl font-bold text-center">Radial menu</div>
<div data-i18n="radial_title" class="text-2xl font-bold text-center">Radial menu</div>
<div class="flex flex-col md:flex-row gap-4">
<img src="/images/helpModal/radialMenu.png" alt="Radial menu" title="Radial menu", class="radial-menu-image" />
<div>
<p class="mb-4">Right clicking (or touch on mobile) opens the radial menu. From there you can:</p>
<p data-i18n="help_modal.radial_desc" class="mb-4">Right clicking (or touch on mobile) opens the radial menu. From there you can:</p>
<ul>
<li class="mb-4"><div class="inline-block icon build-icon"></div> - Open the build menu.</li>
<li class="mb-4"><div class="inline-block icon build-icon"></div><span data-i18n="help_modal.radial_build"> - Open the build menu.</span></li>
<li class="mb-4">
<img src="/images/InfoIcon.svg" class="inline-block icon" style="fill: white; background: transparent;"/> - Open the Info menu.</li>
<li class="mb-4"><div class="inline-block icon boat-icon"></div> - Send a boat to attack at the selected location (only available if you have access to water).</li>
<li class="mb-4"><div class="inline-block icon cancel-icon"></div> - Close the menu.</li>
<img src="/images/InfoIcon.svg" class="inline-block icon" style="fill: white; background: transparent;"/><span data-i18n="help_modal.radial_info"> - Open the Info menu.</span></li>
<li class="mb-4"><div class="inline-block icon boat-icon"></div><span data-i18n="help_modal.radial_boat"> - Send a boat to attack at the selected location (only available if you have access to water).</span></li>
<li class="mb-4"><div class="inline-block icon cancel-icon"></div><span data-i18n="help_modal.radial_close"> - Close the menu.</span></li>
</ul>
</div>
</div>
@@ -345,20 +345,20 @@ export class HelpModal extends LitElement {
<hr class="mt-6 mb-4">
<div>
<div class="text-2xl font-bold text-center">Info menu</div>
<div data-i18n="help_modal.info_title" class="text-2xl font-bold text-center">Info menu</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%]">
<div class="text-gray-300">Enemy info panel</div>
<div data-i18n="help_modal.info_enemy_panel" class="text-gray-300">Enemy info panel</div>
<img src="/images/helpModal/infoMenu.png" alt="Enemy info panel" title="Enemy info panel" />
</div>
<div class="pt-4">
<p class="mb-4">
<p data-i18n="help_modal.info_enemy_desc" class="mb-4">
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:
</p>
<ul>
<li class="mb-4"><div class="inline-block icon target-icon"></div> - Place a target mark on the player, marking it for all allies, used to coordinate attacks.</li>
<li class="mb-4"><div class="inline-block icon alliance-icon"></div> - Send an alliance request to the player. Allies can share resources and troops, but can't attack each other.</li>
<li><div class="inline-block icon emoji-icon"></div> - Send an emoji to the player.</li>
<li class="mb-4"><div class="inline-block icon target-icon"></div><span data-i18n="help_modal.info_target"> - Place a target mark on the player, marking it for all allies, used to coordinate attacks.</span></li>
<li class="mb-4"><div class="inline-block icon alliance-icon"></div><span data-i18n="help_modal.info_alliance"> - Send an alliance request to the player. Allies can share resources and troops, but can't attack each other.</span></li>
<li><div class="inline-block icon emoji-icon"></div><span data-i18n="help_modal.info_emoji"> - Send an emoji to the player.</span></li>
</ul>
</div>
</div>
@@ -367,16 +367,16 @@ 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">Ally info panel</div>
<div data-i18n="help_modal.info_ally_panel" class="text-gray-300">Ally info panel</div>
<img src="/images/helpModal/infoMenuAlly.png" alt="Ally info panel" title="Ally info panel" />
</div>
<div class="pt-4">
<p class="mb-4">
<p data-i18n="help_modal.info_ally_desc" class="mb-4">
When you ally with a player, the following new icons become available:
</p>
<ul>
<li class="mb-4"><div class="inline-block icon betray-icon"></div> - 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.</li>
<li class="mb-4"><div class="inline-block icon donate-icon"></div> - 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.</li>
<li class="mb-4"><div class="inline-block icon betray-icon"></div><span data-i18n="help_modal.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.</span></li>
<li class="mb-4"><div class="inline-block icon donate-icon"></div><span data-i18n="help_modal.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.</span></li>
</ul>
</div>
</div>
@@ -385,37 +385,37 @@ export class HelpModal extends LitElement {
<hr class="mt-6 mb-4">
<div>
<div class="text-2xl font-bold mb-4 text-center">Build menu</div>
<div data-i18n="help_modal.build_menu_title" class="text-2xl font-bold mb-4 text-center">Build menu</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Icon</th>
<th>Description</th>
<th data-i18n="help_modal.build_name">Name</th>
<th data-i18n="help_modal.build_icon">Icon</th>
<th data-i18n="help_modal.build_desc">Description</th>
</tr>
</thead>
<tbody class="text-left">
<tr>
<td>City</td>
<td data-i18n="help_modal.build_city">City</td>
<td><div class="icon city-icon"></div></td>
<td>
<td data-i18n="help_modal.build_city_desc">
Increases your max population. Useful when you can't
expand your territory or you're about to hit your
population limit.
</td>
</tr>
<tr>
<td>Defense Post</td>
<td data-i18n="help_modal.build_defense">Defense Post</td>
<td><div class="icon defense-post-icon"></div></td>
<td>
<td data-i18n="help_modal.build_defense_desc">
Increases defenses around nearby borders. Attacks from
enemies are slower and have more casualties.
</td>
</tr>
<tr>
<td>Port</td>
<td data-i18n="help_modal.build_port">Port</td>
<td><div class="icon port-icon"></div></td>
<td>
<td data-i18n="help_modal.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
@@ -424,39 +424,39 @@ export class HelpModal extends LitElement {
</td>
</tr>
<tr>
<td>Warship</td>
<td data-i18n="help_modal.build_warship">Warship</td>
<td><div class="icon warship-icon"></div></td>
<td>
<td data-i18n="help_modal.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.
</td>
</tr>
<tr>
<td>Missile Silo</td>
<td data-i18n="help_modal.build_silo">Missile Silo</td>
<td><div class="icon missile-silo-icon"></div></td>
<td>Allows launching missiles.</td>
<td data-i18n="help_modal.build_silo_desc">Allows launching missiles.</td>
</tr>
<tr>
<td>SAM Launcher</td>
<td data-i18n="help_modal.build_sam">SAM Launcher</td>
<td><div class="icon sam-launcher-icon"></div></td>
<td>Has a 75% chance to intercept enemy missiles in it's 100 pixel range.
<td data-i18n="help_modal.build_sam_desc">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.</td>
</tr>
<tr>
<td>Atom Bomb</td>
<td data-i18n="help_modal.build_atom">Atom Bomb</td>
<td><div class="icon atom-bomb-icon"></div></td></td>
<td>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.</td>
<td data-i18n="help_modal.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.</td>
</tr>
<tr>
<td>Hydrogen Bomb</td>
<td data-i18n="help_modal.build_hydrogen">Hydrogen Bomb</td>
<td><div class="icon hydrogen-bomb-icon"></div></td></td>
<td>Large explosive bomb. Spawns from the nearest Missile Silo and lands in the area you first clicked to build it.</td>
<td data-i18n="help_modal.build_hydrogen_desc">Large explosive bomb. Spawns from the nearest Missile Silo and lands in the area you first clicked to build it.</td>
</tr>
<tr>
<td>MIRV</td>
<td data-i18n="help_modal.build_mirv">MIRV</td>
<td><div class="icon mirv-icon"></div></td>
<td>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.</td>
<td data-i18n="help_modal.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.</td>
</tr>
</tbody>
</table>
@@ -465,21 +465,21 @@ export class HelpModal extends LitElement {
<hr class="mt-6 mb-4">
<div>
<div class="text-2xl font-bold text-center">Player icons</div>
<p>Examples of some of the ingame icons you will encounter and what they mean:</p>
<div data-i18n="help_modal.player_icons" class="text-2xl font-bold text-center">Player icons</div>
<p data-i18n="help_modal.icon_desc">Examples of some of the ingame icons you will encounter and what they mean:</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">Crown - This is the number 1 player in the leaderboard</div>
<div data-i18n="help_modal.icon_crown" class="text-gray-300">Crown - This is the number 1 player in the leaderboard</div>
<img src="/images/helpModal/number1.png" alt="Number 1 player" title="Number 1 player" />
</div>
<div class="flex flex-col items-center">
<div class="text-gray-300">Crossed swords - Traitor. This player attacked an ally.</div>
<div data-i18n="help_modal.icon_traitor" class="text-gray-300">Crossed swords - Traitor. This player attacked an ally.</div>
<img src="/images/helpModal/traitor.png" alt="Traitor" title="Traitor" />
</div>
<div class="flex flex-col items-center">
<div class="text-gray-300">Handshake - Ally. This player is your ally.</div>
<div data-i18n="help_modal.icon_ally" class="text-gray-300">Handshake - Ally. This player is your ally.</div>
<img src="/images/helpModal/ally.png" alt="Ally" title="Ally" />
</div>
</div>
src/client/index.html
+19 -1
View File
@@ -249,7 +249,7 @@
alt="Discord"
src="../../resources/icons/discord.svg"
/>
Join the Discord!
<span data-i18n="main.join_discord"> Join the Discord! </span>
</a>
</div>
@@ -262,12 +262,14 @@
>
<button
id="host-lobby-button"
data-i18n="main.create_lobby"
class="bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300"
>
Create Lobby
</button>
<button
id="join-private-lobby-button"
data-i18n="main.join_lobby"
class="bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300"
>
Join Lobby
@@ -279,6 +281,7 @@
>
<button
id="single-player"
data-i18n="main.single_player"
class="w-full bg-blue-600 hover:bg-blue-700 text-white p-3 sm:p-4 lg:p-5 font-bold text-lg sm:text-xl lg:text-2xl rounded-lg border-none cursor-pointer transition-colors duration-300"
>
Single Player
@@ -290,11 +293,23 @@
>
<button
id="help-button"
data-i18n="main.instructions"
class="w-25 bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300"
>
Instructions
</button>
</div>
<div
class="pt-4 flex gap-4 sm:gap-6 lg:gap-8 max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto"
>
<select
id="lang-selector"
class="text-center appearance-none w-full bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md border-none cursor-pointer transition-colors duration-300"
>
<option value="en">English</option>
<option value="ja">日本語</option>
</select>
</div>
</div>
</div>
@@ -348,12 +363,14 @@
<div class="flex sm:flex-row flex-col sm:gap-8 gap-2">
<a
href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I"
data-i18n="main.how_to_play"
class="text-white/70 hover:text-white transition-colors duration-300"
target="_blank"
>How to Play</a
>
<a
href="https://openfront.miraheze.org/wiki/Main_Page"
data-i18n="main.wiki"
class="text-white/70 hover:text-white transition-colors duration-300"
target="_blank"
>Wiki</a
@@ -380,6 +397,7 @@
});
});
</script>
<script src="lang.js"></script>
<!-- Analytics -->
<script
src/client/lang.js
+57
View File
@@ -0,0 +1,57 @@
document.addEventListener("DOMContentLoaded", async function () {
const defaultLang = navigator.language.startsWith("ja") ? "ja" : "en";
const userLang = localStorage.getItem("lang") || defaultLang;
async function loadLanguage(lang) {
try {
const response = await fetch(`/lang/${lang}.json`);
if (!response.ok) throw new Error(`Language file not found: ${lang}`);
return await response.json();
} catch (error) {
console.error("🚨 Translation load error:", error);
return {};
}
}
function applyTranslation(translations) {
document.title = translations.main?.title || document.title;
document.querySelectorAll("[data-i18n]").forEach((element) => {
const key = element.getAttribute("data-i18n");
const keys = key.split(".");
let text = translations;
for (const k of keys) {
text = text?.[k];
if (!text) break;
}
if (text) {
element.innerHTML = text;
} else {
console.warn(`Missing translation key: ${key}`);
}
});
}
async function changeLanguage(lang) {
// console.log(`Changing language to: ${lang}`);
localStorage.setItem("lang", lang);
const translations = await loadLanguage(lang);
applyTranslation(translations);
}
const translations = await loadLanguage(userLang);
applyTranslation(translations);
const langSelector = document.getElementById("lang-selector");
if (langSelector) {
langSelector.value = userLang;
}
document
.getElementById("lang-selector")
.addEventListener("change", function (event) {
changeLanguage(event.target.value);
});
});