Enhance internationalization support across UI components; integrate i18n for dynamic text rendering in menus, forms, and HUD elements. Update climate and weather modules to utilize localized labels and descriptions, ensuring a consistent user experience in multiple languages. Refactor related tests to validate translations and locale settings.
This commit is contained in:
Leonid Pershin
@@ -11,16 +11,19 @@
|
||||
<div class="menu">
|
||||
<header class="menu__header">
|
||||
<div class="menu__titles">
|
||||
<h1>The Living World</h1>
|
||||
<p class="menu__subtitle">Generate a world from OpenStreetMap</p>
|
||||
<h1 data-i18n="app.title">The Living World</h1>
|
||||
<p class="menu__subtitle" data-i18n="app.subtitle">Generate a world from OpenStreetMap</p>
|
||||
</div>
|
||||
<div class="menu__actions">
|
||||
<div id="locale-switch" class="locale-switch"></div>
|
||||
<button id="menu-theme-toggle" type="button" class="theme-button" title="Switch theme">
|
||||
Night
|
||||
</button>
|
||||
</div>
|
||||
<button id="menu-theme-toggle" type="button" class="theme-button" title="Switch theme">
|
||||
Night
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<button id="continue-button" type="button" class="continue" hidden>
|
||||
<span class="continue__kicker">Continue</span>
|
||||
<span class="continue__kicker" data-i18n="menu.continue">Continue</span>
|
||||
<span id="continue-name" class="continue__name"></span>
|
||||
<span class="continue__arrow" aria-hidden="true">→</span>
|
||||
</button>
|
||||
@@ -28,27 +31,27 @@
|
||||
<div class="menu__body">
|
||||
<section class="worlds">
|
||||
<div class="worlds__header">
|
||||
<h2>Worlds</h2>
|
||||
<h2 data-i18n="menu.worlds">Worlds</h2>
|
||||
<span id="slot-count" class="slot-count"></span>
|
||||
</div>
|
||||
<p id="worlds-empty" class="worlds__empty" hidden>
|
||||
<p id="worlds-empty" class="worlds__empty" hidden data-i18n="menu.worldsEmpty">
|
||||
Worlds you generate will show up here. A small town takes a few seconds.
|
||||
</p>
|
||||
<ul id="world-list" class="world-list"></ul>
|
||||
</section>
|
||||
|
||||
<form id="generate-form" class="form">
|
||||
<h2 class="form__title">New world</h2>
|
||||
<h2 class="form__title" data-i18n="form.newWorld">New world</h2>
|
||||
|
||||
<label class="field">
|
||||
<span>Name</span>
|
||||
<input id="field-name" type="text" placeholder="Optional — defaults to the coordinates" autocomplete="off" />
|
||||
<span data-i18n="form.name">Name</span>
|
||||
<input id="field-name" type="text" data-i18n-placeholder="form.namePlaceholder" placeholder="Optional — defaults to the coordinates" autocomplete="off" />
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span class="field__label">
|
||||
Location
|
||||
<button id="use-location" type="button" class="link-button">Use my location</button>
|
||||
<span data-i18n="form.location">Location</span>
|
||||
<button id="use-location" type="button" class="link-button" data-i18n="form.useMyLocation">Use my location</button>
|
||||
</span>
|
||||
<input
|
||||
id="field-coords"
|
||||
@@ -58,18 +61,19 @@
|
||||
autocapitalize="off"
|
||||
autocomplete="off"
|
||||
value="31.8966010, -100.4858591"
|
||||
data-i18n-placeholder="form.coordsPlaceholder"
|
||||
placeholder="Latitude, longitude"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span>Size <output id="field-size-value">10 km</output></span>
|
||||
<span><span data-i18n="form.size">Size</span> <output id="field-size-value">10 km</output></span>
|
||||
<input id="field-size" type="range" min="1" max="20" step="1" value="10" />
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span>Start date & time</span>
|
||||
<span data-i18n="form.start">Start date & time</span>
|
||||
<input
|
||||
id="field-start"
|
||||
type="datetime-local"
|
||||
@@ -79,15 +83,15 @@
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span>Climate</span>
|
||||
<span data-i18n="form.climate">Climate</span>
|
||||
<select id="field-climate">
|
||||
<option value="">From the location</option>
|
||||
<option value="" data-i18n="form.climateFromLocation">From the location</option>
|
||||
</select>
|
||||
<small id="climate-hint" class="field__hint"></small>
|
||||
</label>
|
||||
|
||||
<p id="form-hint" class="form__hint" hidden></p>
|
||||
<button id="generate-button" type="submit" class="button">Generate world</button>
|
||||
<button id="generate-button" type="submit" class="button" data-i18n="form.generate">Generate world</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -99,7 +103,7 @@
|
||||
<div id="stage"></div>
|
||||
|
||||
<header class="game-bar">
|
||||
<button id="back-button" type="button" class="icon-button" title="Back to menu" aria-label="Back to menu">
|
||||
<button id="back-button" type="button" class="icon-button" data-i18n-title="game.back" data-i18n-aria="game.back" title="Back to menu" aria-label="Back to menu">
|
||||
←
|
||||
</button>
|
||||
<span id="world-title" class="game-bar__title"></span>
|
||||
@@ -113,7 +117,7 @@
|
||||
title="Pause"
|
||||
aria-label="Pause"
|
||||
>⏸</button>
|
||||
<div class="sim-controls__speeds" role="group" aria-label="Simulation speed">
|
||||
<div class="sim-controls__speeds" role="group" data-i18n-aria="game.speed" aria-label="Simulation speed">
|
||||
<button type="button" class="speed-button" data-scale="1">x1</button>
|
||||
<button type="button" class="speed-button" data-scale="2">x2</button>
|
||||
<button type="button" class="speed-button" data-scale="3">x3</button>
|
||||
@@ -125,6 +129,7 @@
|
||||
type="button"
|
||||
class="icon-button"
|
||||
title="Hide weather effects"
|
||||
data-i18n-aria="game.weatherAria"
|
||||
aria-label="Weather effects"
|
||||
aria-pressed="true"
|
||||
>🌦</button>
|
||||
|
||||
Reference in New Issue
Block a user