Change lang modal (#432)

## Description: I updated the language modal to match the style of the other modals. <img width="564" alt="スクリーンショット 2025-04-05 18 17 56" src="https://github.com/user-attachments/assets/bbca2157-6842-46f7-83f7-f76b255d35b7" /> Fixes #473 ## 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: aotumuri
2026-06-21 11:10:42 +00:00 · 2025-04-13 10:01:01 +09:00
parent 58b151f585
commit adb29035c0
5 changed files with 184 additions and 112 deletions
@@ -28,7 +28,7 @@
    "ui_pop": "Pop (Популация) - Количеството популация, която притежавате, максималната Ви популация и скоростта, с която тя се увеличава.",
    "ui_gold": "Gold (Злато) - Количеството злато, което притежавате и скоростта, с която го получавате.",
    "ui_troops_workers": "Войници и Работници - Количеството разпределени войници и работници. Войниците се използват за атакуване или защитаване срещу атаки. Работниците се използват за генериране на злато. Можете да коригирате количеството войници и работници, използвайки плъзгача.",
-    "ui_attack_ratio": "Съотношение на атака - Количеството войници, които ще се използват при атака. Можете да коригирате съотношението на атака, използвайки плъзгача.",
+    "ui_attack_ratio": "Съотношение на атака - Количеството войници, които ще се използват при атака. Можете да коригирате съотношението на атака, използвайки плъзгача. Притежаването на повече атакуващи войници от тези в защита ще ви накара да загубите по-малко войници при атаката, докато притежаването на по-малко ще увеличи щетите, нанесени на вашите атакуващи войници. Ефектът не надхвърля съотношения 2:1.",
    "ui_options": "Опции",
    "ui_options_desc": "Следните елементи могат да бъдат намерени вътре:",
    "option_pause": "Поставяне/Премахване на пауза на играта - Налични само в самостоятелна игра.",
@@ -48,7 +48,7 @@
    "info_emoji": "Изпращане на емоджи до играча.",
    "info_ally_panel": "Информационно меню за съюзници",
    "info_ally_desc": "Когато се съюзите с играч, следните иконки стават налични:",
-    "ally_betray": "Предаване на съюзника Ви, прекратявайки съюзничеството. Сега ще имате перманентна иконка, заседнала до името Ви. Има по-малка вероятност ботове да се съюзят с Вас, а играчи ще мислят два пъти преди да го направят.",
+    "ally_betray": "Предаване на съюзника Ви, прекратявайки съюзничеството. Сега ще имате постоянна икона, залепена до името Ви, освен ако самата друга нация не е била предател. Атаките срещу вас ще доведат до по-малко загуби за нападателя до края на играта, по-малко вероятно е ботовете да се съюзят с Вас и играчите ще мислят два пъти, преди да го направят.",
    "ally_donate": "Даряване на част от войниците си на съюзника Ви. Използвано, когато той е с малко войници и бива атакуван или когато му е нужна тази допълнителна сила, за да размаже противника.",
    "build_menu_title": "Меню за строене",
    "build_name": "Име",
@@ -61,7 +61,7 @@
    "build_port": "Пристанище",
    "build_port_desc": "Автоматично изпраща търговски кораби между пристанищата на вашата страна и други държави (освен ако сте щракнали върху \"спиране на търговията\" върху тях или те са щракнали върху \"спиране на търговията с вас\"), давайки злато и на двете страни. Позволява изграждането на бойни кораби. Може да се строи само близо до вода.",
    "build_warship": "Боен кораб",
-    "build_warship_desc": "Патрулира в даден район, като превзема търговски кораби и унищожава вражески военни кораби и лодки. Създава се от най-близкото пристанище и патрулира района, в който първо сте щракнали, за да го построите.",
+    "build_warship_desc": "Патрулира в даден район, като превзема търговски кораби и унищожава вражески военни кораби и лодки. Създава се от най-близкото пристанище и патрулира района, в който първо сте щракнали, за да го построите. Можете да контролирате бойните кораби, като щракнете с атака върху тях и след това щракнете с атака върху новата област, към която искате да се преместят.",
    "build_silo": "Ракетен силоз",
    "build_silo_desc": "Позволява изстрелване на ракети.",
    "build_sam": "Противоракетна установка земя-въздух SAM",
@@ -150,7 +150,8 @@
    "players": "Играчи",
    "waiting": "Изчакване на играчи...",
    "start": "Започване на игра",
-    "mode": "Начин на игра"
+    "mode": "Начин на игра",
+    "action_emote": "Отваряне на менюто за емоджита"
  },
  "difficulty": {
    "Relaxed": "Релаксирано",
@@ -172,5 +173,8 @@
  "game_mode": {
    "ffa": "Всеки срещу всеки (FFA)",
    "teams": "Отбори"
+  },
+  "select_lang": {
+    "title": "Изберете език"
  }
 }
@@ -174,5 +174,8 @@
  "game_mode": {
    "ffa": "Free for All",
    "teams": "Teams"
+  },
+  "select_lang": {
+    "title": "Select Language"
  }
 }
@@ -1,88 +1,83 @@
 {
-  "lang": {
-    "en": "Esperanto",
-    "native": "Esperanto",
-    "svg": "eo",
-    "lang_code": "eo"
-  },
  "main": {
    "join_discord": "Kunigu la Discord-servilon !",
    "create_lobby": "Krei salonon",
    "join_lobby": "Kunigi salonon",
-    "single_player": "Ludi solan",
-    "instructions": "Instruadoj",
-    "how_to_play": "Kiel ludi ?",
+    "single_player": "Sola Ludanto",
+    "instructions": "Instrukcioj",
+    "how_to_play": "Kiel ludi",
    "wiki": "Vikio"
  },
  "help_modal": {
-    "hotkeys": "Agklavoj",
+    "hotkeys": "Rapidklavoj",
    "table_key": "Klavo",
    "table_action": "Influo",
    "action_alt_view": "Alternativa vido (tereno/lando)",
    "action_attack_altclick": "Ataki (kiam la maldekstra klako estas formi por malfermi la menuon)",
    "action_build": "Malfermi la konstruan menuon",
-    "action_center": "Reenfokusigi la fotilon",
+    "action_center": "Recentrigi la kameraon sur la ludanto",
    "action_zoom": "Zomi",
-    "action_move_camera": "Movi la fotilon",
+    "action_move_camera": "Moviĝi kameraon",
    "action_ratio_change": "Malgrandigi/Pligrandigi la atakan kvocienton",
    "action_reset_gfx": "Restarigi la grafismoj",
    "ui_section": "Ludo uzantinterfaco",
-    "ui_leaderboard": "Ordigo",
+    "ui_leaderboard": "Ĉampionejo",
    "ui_leaderboard_desc": "Afiŝas la plej bonajn ludantojn kun iliaj nomoj, la % de la poseda teritorio kaj la oro.",
    "ui_control": "Kontrolpanelo",
-    "ui_control_desc": "La kontrolpanelo enhavas la sekvajn elementojn :",
-    "ui_pop": "Pop - La nombro de trupunoj ke vi havas, via maximuma populado kaj la procento kun kiu vi recivas ilin.",
-    "ui_gold": "Oro - La kvanto da oro ke vi havas kaj la procento kun kiu vi recivas ilin.",
+    "ui_control_desc": "La kontrolpanelo enhavas la sekvajn elementojn:",
+    "ui_pop": "Pop - La nombro de trupunoj ke vi havas, via maksimuma populacio kaj la procento kun kiu vi ricevas ilin.",
+    "ui_gold": "La kvanto da oro ke vi havas kaj la procento kun kiu vi ricevas ilin.",
    "ui_troops_workers": "Trupoj kaj Laboristoj - La nombro da soldatoj kaj laboristoj asignitaj. Trupoj kutimas ataki aŭ defendi. Laboristoj kutimas generi oron. Vi povas ĝustigi la nombron da trupoj kaj laboristoj uzante la glitilon.",
-    "ui_attack_ratio": "Ataka kvociento - La nombro da uzaj soldatoj kiam vi atakas. Vi povas ĝustigi la atakan kvocienton uzante la glitilon",
+    "ui_attack_ratio": "Ataka kvociento - La nombro da uzaj soldatoj kiam vi atakas. Vi povas ĝustigi la atakan kvocienton uzante la glitilon. Havi pli da atakaj trupoj ol la defendaj trupoj malpliigos la perdojn dum atako, dum havi malpli multe pliigos la damaĝon ricevitajn de viaj atakaj trupoj. La efiko ne superas rilatumon de 2:1.",
    "ui_options": "Opcioj",
-    "ui_options_desc": "La sekvaj elementoj povas esti trovigita interne :",
-    "option_pause": "Paŭzigi/Rekomenci la ludon - Nur elbla en la solan modo",
-    "option_timer": "Kronometro - Pasinta tempo écoulé ekde la luda komenco.",
+    "ui_options_desc": "La sekvaj elementoj povas esti trovigita interne:",
+    "option_pause": "Paŭzigi/Rekomenci la ludon - Nur ebla en la solan modo.",
+    "option_timer": "Kronometro - Pasinta tempo ekde la luda komenco.",
    "option_exit": "Elira butono",
-    "option_settings": "Parametroj - Malfermi la parametran menuon. Vi povas aktivi la ous pouvez y eblegi la alterna vido, la malhela reĝimo, la emoĝioj kaj la maldekstra alklaku ago.",
+    "option_settings": "Parametroj - Malfermi la parametran menuon. Vi povas aktivi la alterna vido, la malhela reĝimo, la emoĝioj kaj la maldekstra alklako.",
    "radial_title": "Radia menuo",
    "radial_desc": "Dekstra klako (aŭ tuŝo sur poŝtelefono) malfermas la radian menuon. De tie, vi povas:",
    "radial_build": "Malfermi la konstrumenuon.",
    "radial_info": "Malfermi la informmenuon.",
    "radial_boat": "Sendi boaton por ataki ĉe la elektita loko (disponebla nur se vi havas aliron al akvo).",
-    "radial_close": "Fermi la menuon."
+    "radial_close": "Fermi la menuon.",
    "info_title": "Informmenuo",
    "info_enemy_desc": "Enhavas informojn kiel la nomon de la elektita ludanto, la oron, la trupojn, kaj ĉu la ludanto estas perfidulo. Perfidulo estas ludanto, kiu perfidis kaj atakis alian ludanton kun kiu li estis en alianco. La subaj piktogramoj reprezentas la jenajn interagojn:",
    "info_target": "Meti celmarkon sur la ludanton, videblan por ĉiuj aliancanoj, uzata por kunordigi atakojn.",
    "info_alliance": "Sendi aliancpeton al la ludanto. Aliancanoj povas dividi rimedojn kaj trupojn, sed ne povas ataki unu la alian.",
-    "info_emoji": "Sendi emoji al la ludanto."
+    "info_emoji": "Sendi emoĝioj al la ludanto.",
    "info_ally_panel": "Aliancana informpanelo",
    "info_ally_desc": "Kiam vi alianciĝas kun ludanto, la jenaj novaj piktogramoj fariĝas disponeblaj:",
-    "ally_betray": "Perfidi aliancanon, finante la aliancon. Vi tiam havos konstantan ikonon apud via nomo. La robotoj malpli verŝajne alianciĝos kun vi, kaj ludantoj, al kiuj vi petos aliancon, pli atente pripensos.",
-    "ally_donate": "Doni parton de viaj trupoj al aliancano. Uzata kiam ili mankas da trupoj kaj estas atakataj, aŭ kiam ili bezonas kroman potencon por venki malamikon."
+    "ally_betray": "Kronometro - Pasinta tempo ekde la luda komenco.",
+    "ally_donate": "Doni parton de viaj trupoj al aliancano. Uzata kiam ili mankas da trupoj kaj estas atakataj, aŭ kiam ili bezonas kroman potencon por venki malamikon.",
    "build_menu_title": "Konstrua menuo",
    "build_name": "Nomo",
    "build_icon": "Ikono",
-    "build_desc": "Priskribo"
+    "build_desc": "Priskribo",
    "build_city": "Urbo",
-    "build_city_desc": "Utila kiam vi ne povas pligrandigi vian teritorion aŭ kiam vi atingas vian loĝlimon.",
+    "build_city_desc": "Utila kiam vi ne povas pligrandigi vian teritorion aŭ kiam vi atingas vian loĝantlimon.",
    "build_defense": "Defenda posteno",
    "build_defense_desc": "Plifortigas la defendojn ĉirkaŭ proksimaj limoj. Malamikaj atakoj fariĝas pli malrapidaj kaj kaŭzas pli da perdoj.",
    "build_port": "Haveno",
-    "build_port_desc": "Aŭtomate sendas komercajn ŝipojn de viaj havenoj al aliaj landoj (krom se vi elektis 'ĉesi komercon' kun ludanto, aŭ se ili faris same kun vi), donante oron al ambaŭ flankoj. Permesas konstrui militŝipojn. Povas esti konstruita nur proksime de akvo.",
+    "build_port_desc": "Aŭtomate sendas komercŝipojn inter la havenoj de via lando kaj aliaj landoj (krom se vi alklakis \"ĉesi komerco\" kun ili aŭ ili alklakis \"ĉesi komerco\" kun vi), donante oron al ambaŭ flankoj. Permesas konstrui batalŝipojn. Eblas konstrui nur proksime de akvo.",
    "build_warship": "Militŝipo",
-    "build_warship_desc": "Patrolas en areo, kaptante komercajn ŝipojn kaj detruante militŝipojn kaj malamikajn boatojn. Aperas en la plej proksima haveno kaj patrolas la elektitan areon.",
+    "build_warship_desc": "Patroloj en areo, kaptante komercajn ŝipojn kaj detruante militŝipojn kaj malamikajn boatojn. Aperas en la plej proksima haveno kaj patrolas la elektita areo.",
    "build_silo": "Misila silo",
    "build_silo_desc": "Ebligas lanĉi misilojn.",
    "build_sam": "SAM-lanĉilo",
-    "build_sam_desc": "Havas 75 % da ŝanco interkapti malamikajn misilojn ene de sia 100-piksela atingo. La SAM havas reŝarĝotempon de 7,5 sekundoj kaj ne povas interkapti MIRV-ojn.",
+    "build_sam_desc": "Havas 75 % da ŝanco interkapti malamikajn misilojn ene de sia 100-piksela atingo. La SAM havas reŝarĝa tempon de 7,5 sekundoj kaj ne povas interkapti MIRV-ojn.",
    "build_atom": "Atombombo",
    "build_atom_desc": "Eta eksploda bombo kiu detruas teritorion, konstruaĵojn, ŝipojn kaj boatojn. Aperas el la plej proksima Misila silo kaj atingas la elektitan areon.",
    "build_hydrogen": "Hidrogenbombo",
    "build_hydrogen_desc": "Granda eksploda bombo. Aperas el la plej proksima Misila silo kaj atingas la elektitan areon.",
    "build_mirv": "MIRV",
-    "build_mirv_desc": "La plej potenca bombo en la ludo. Dividiĝas en pli malgrandajn bombojn kiuj kovros vastan teritorion. Damaĝas nur la ludanton, kontraŭ kiu vi celis ĝin. Aperas el la plej proksima Misila silo kaj atingas la elektitan areon."
+    "build_mirv_desc": "La plej potenca bombo en la ludo. Dividiĝas en pli malgrandajn bombojn kiuj kovros vastan teritorion. Damaĝas nur la ludanton, kontraŭ kiu vi celis ĝin. Aperas el la plej proksima Misila silo kaj atingas la elektitan areon.",
    "player_icons": "Ludantaj Ikonoj",
-    "icon_desc": "Ekzemploj de iuj ludikonoj, kiujn vi renkontos, kaj ilia signifo:",
-    "icon_crown": "Krono - Ĉi tiu ludanto estas numero 1 en la ranglisto.",
+    "icon_desc": "Ekzemploj de iuj ludaj ikonoj, kiujn vi renkontos, kaj ilia signifo:",
+    "icon_crown": "Krono - Ĉi tiu ludanto estas numero 1 en la ranglisto",
    "icon_traitor": "Krucitaj glavoj - Perfida. Ĉi tiu ludanto atakis aliancanon.",
-    "icon_ally": "Manpremo - Aliancano. Ĉi tiu ludanto estas via aliancano."
+    "icon_ally": "Manpremo - Aliancano. Ĉi tiu ludanto estas via aliancano.",
+    "info_enemy_panel": "Malamiko informpanelo"
  },
  "single_modal": {
    "title": "Sola Ludanto",
@@ -98,10 +93,9 @@
    "start": "Komenci la ludon"
  },
  "map": {
-    "map": "Mapo",
    "world": "Mondo",
    "europe": "Eŭropo",
-    "mena": "MENA",
+    "mena": "Mezoriento kaj Nordafriko",
    "northamerica": "Nordameriko",
    "oceania": "Oceanio",
    "blacksea": "Nigra Maro",
@@ -112,8 +106,13 @@
    "britannia": "Granda Britio",
    "gatewaytotheatlantic": "Pordo al Atlantiko",
    "australia": "Aŭstralio",
+    "random": "Hazarda",
    "iceland": "Islando",
-    "random": "Hazarda"
+    "pangaea": "Pangeo",
+    "map": "Karto",
+    "betweentwoseas": "Inter du maroj",
+    "japan": "Japanio kaj najbaroj",
+    "knownworld": "Konata Mondo"
  },
  "private_lobby": {
    "title": "Aliĝi al privata salono",
@@ -124,11 +123,11 @@
    "checking": "Kontrolado de la salono...",
    "not_found": "Salono ne trovita. Bonvolu kontroli la ID kaj reprovi.",
    "error": "Eraro okazis. Bonvolu reprovi.",
-    "joined_waiting": "Sukcese aliĝite! Atendante la komencon de la ludo..."
+    "joined_waiting": "Sukcese aliĝis! Atendante la komencon de la ludo..."
  },
  "public_lobby": {
-    "join": "Kunigi la baldaŭa ludo",
-    "waiting": "Atendante ludantoj"
+    "join": "Kunigi la baldaŭan ludon",
+    "waiting": "atendante ludantoj"
  },
  "username": {
    "enter_username": "Enigu vian uzantnomon",
@@ -143,20 +142,39 @@
    "bots": "Robotoj :",
    "bots_disabled": "Malŝaltita",
    "disable_nations": "Malŝalti naciojn",
-    "instant_build": "Imposta Konstruado",
+    "instant_build": "Tujkonstruaĵo",
    "infinite_gold": "Senfina oro",
    "infinite_troops": "Senfinaj trupoj",
    "disable_nukes": "Malŝalti nukleajn armilojn",
    "player": "Ludanto",
    "players": "Ludantoj",
    "waiting": "Atendante ludantojn...",
-    "start": "Komenci la ludon"
+    "start": "Komenci la ludon",
+    "mode": "Reĝimo",
+    "action_emote": "Malfermi miensimbolan menuon"
  },
  "difficulty": {
-    "difficulty": "Malfacileco",
-    "Relaxed": "Relaksa",
+    "Relaxed": "Senstreĉa",
    "Balanced": "Ekvilibriga",
    "Intense": "Intensa",
-    "Impossible": "Neebla"
+    "Impossible": "Neebla",
+    "difficulty": "Malfacileco"
+  },
+  "game_starting_modal": {
+    "title": "Ludo komenciĝas...",
+    "desc": "Preparante por komenci la salonon. Bonvolu atendi."
+  },
+  "lang": {
+    "en": "Esperanto",
+    "native": "Esperanto",
+    "svg": "eo",
+    "lang_code": "eo"
+  },
+  "game_mode": {
+    "ffa": "Senpaga por ĉiuj",
+    "teams": "Teamoj"
+  },
+  "select_lang": {
+    "title": "Elekti lingvon"
  }
 }
@@ -173,5 +173,8 @@
  "game_mode": {
    "ffa": "バトルロワイヤル",
    "teams": "チーム戦"
+  },
+  "select_lang": {
+    "title": "言語を選択"
  }
 }
@@ -1,5 +1,6 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { translateText } from "../client/Utils";

@customElement("language-modal")
 export class LanguageModal extends LitElement {
@@ -8,35 +9,55 @@ export class LanguageModal extends LitElement {
  @property({ type: String }) currentLang = "en";

  static styles = css`
-    .modal {
+    .c-modal {
      position: fixed;
-      inset: 0;
+      padding: 1rem;
+      z-index: 1000;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      top: 0;
      background-color: rgba(0, 0, 0, 0.5);
-      z-index: 50;
+      overflow-y: auto;
      display: flex;
-      justify-content: center;
      align-items: center;
-    }
-    .hidden {
-      display: none;
-    }
-    .modal-content {
-      background: white;
-      border-radius: 0.5rem;
-      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
-      padding: 1.5rem;
-      width: 24rem;
-      max-width: 100%;
-      max-height: 90vh;
-      display: flex;
-      flex-direction: column;
+      justify-content: center;
    }

-    .language-list {
+    .c-modal__wrapper {
+      background: #23232382;
+      border-radius: 8px;
+      min-width: 340px;
+      max-width: 480px;
+      width: 100%;
+    }
+
+    .c-modal__header {
+      position: relative;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      font-size: 18px;
+      background: #000000a1;
+      text-align: center;
+      color: #fff;
+      padding: 1rem 2.4rem 1rem 1.4rem;
+    }
+
+    .c-modal__close {
+      cursor: pointer;
+      position: absolute;
+      right: 1rem;
+      top: 1rem;
+      font-weight: bold;
+    }
+
+    .c-modal__content {
+      position: relative;
+      color: #fff;
+      padding: 1.4rem;
+      max-height: 60dvh;
      overflow-y: auto;
-      flex: 1;
-      min-height: 0;
-      margin-bottom: 1rem;
+      backdrop-filter: blur(8px);
    }

    .lang-button {
@@ -44,19 +65,23 @@ export class LanguageModal extends LitElement {
      display: flex;
      align-items: center;
      gap: 0.5rem;
-      padding: 0.5rem;
+      padding: 0.5rem 1rem;
+      margin-bottom: 0.5rem;
      border-radius: 0.375rem;
      transition: background-color 0.3s;
-      border: 1px solid #ccc;
-      background-color: #f8f8f8;
+      border: 1px solid #aaa;
+      background-color: #505050;
+      color: #fff;
    }

    .lang-button:hover {
-      background-color: #ebf8ff;
+      background-color: #969696;
    }

    .lang-button.active {
-      background-color: #bee3f8;
+      background-color: #aaaaaa;
+      border-color: #bbb;
+      color: #000;
    }

    .flag-icon {
@@ -65,30 +90,44 @@ export class LanguageModal extends LitElement {
      object-fit: contain;
    }

-    .close-button {
-      background-color: #3182ce;
-      color: white;
-      padding: 0.5rem 1rem;
-      border-radius: 0.375rem;
-      cursor: pointer;
-      font-weight: bold;
-      border: none;
+    @keyframes rainbow {
+      0% {
+        background-color: #990033;
+      }
+      20% {
+        background-color: #996600;
+      }
+      40% {
+        background-color: #336600;
+      }
+      60% {
+        background-color: #008080;
+      }
+      80% {
+        background-color: #1c3f99;
+      }
+      100% {
+        background-color: #5e0099;
+      }
    }

-    .close-button:hover {
-      background-color: #2b6cb0;
+    .lang-button.debug {
+      animation: rainbow 10s infinite;
+      font-weight: bold;
+      color: #fff;
+      border: 2px dashed aqua;
+      box-shadow: 0 0 4px aqua;
    }
  `;

-  private selectLanguage(lang: string) {
+  private close = () => {
    this.dispatchEvent(
-      new CustomEvent("language-selected", {
-        detail: { lang },
+      new CustomEvent("close-modal", {
        bubbles: true,
        composed: true,
      }),
    );
-  }
+  };

  updated(changedProps: Map<string, unknown>) {
    if (changedProps.has("visible")) {
@@ -105,18 +144,36 @@ export class LanguageModal extends LitElement {
    document.body.style.overflow = "auto";
  }

-  render() {
-    return html`
-      <div class="modal ${this.visible ? "" : "hidden"}">
-        <div class="modal-content">
-          <h2 class="text-xl font-semibold mb-4">Select Language</h2>
+  private selectLanguage = (lang: string) => {
+    this.dispatchEvent(
+      new CustomEvent("language-selected", {
+        detail: { lang },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };

-          <div class="language-list">
+  render() {
+    if (!this.visible) return null;
+
+    return html`
+      <aside class="c-modal">
+        <div class="c-modal__wrapper">
+          <header class="c-modal__header">
+            ${translateText("select_lang.title")}
+            <div class="c-modal__close" @click=${this.close}>X</div>
+          </header>
+
+          <section class="c-modal__content">
            ${this.languageList.map((lang) => {
              const isActive = this.currentLang === lang.code;
              return html`
                <button
-                  class="lang-button ${isActive ? "active" : ""}"
+                  class="lang-button ${isActive ? "active" : ""} ${lang.code ===
+                  "debug"
+                    ? "debug"
+                    : ""}"
                  @click=${() => this.selectLanguage(lang.code)}
                >
                  <img
@@ -128,22 +185,9 @@ export class LanguageModal extends LitElement {
                </button>
              `;
            })}
-          </div>
-
-          <button
-            class="close-button"
-            @click=${() =>
-              this.dispatchEvent(
-                new CustomEvent("close-modal", {
-                  bubbles: true,
-                  composed: true,
-                }),
-              )}
-          >
-            Close
-          </button>
+          </section>
        </div>
-      </div>
+      </aside>
    `;
  }
 }