mrleo1nid/the-living-world
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor world generation form and UI components for improved usability; update theme toggle button and enhance world list display with better status indicators and hints for empty states.

Browse Source
This commit is contained in:
Leonid Pershin
2026-08-16 19:06:05 +03:00
parent 28c5d64a2a
commit b75844d11a
5 changed files with 426 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/TheLivingWorld.Web/index.html
+46 -27
View File
@@ -14,45 +14,64 @@
<h1>The Living World</h1>
<p class="menu__subtitle">Generate a world from OpenStreetMap</p>
</div>
<button id="menu-theme-toggle" type="button" class="icon-button" title="Switch theme" aria-label="Switch theme">
☾
<button id="menu-theme-toggle" type="button" class="theme-button" title="Switch theme">
Night
</button>
</header>
<section class="worlds">
<div class="worlds__header">
<h2>Worlds</h2>
<span id="slot-count" class="slot-count"></span>
</div>
<ul id="world-list" class="world-list"></ul>
</section>
<button id="continue-button" type="button" class="continue" hidden>
<span class="continue__kicker">Continue</span>
<span id="continue-name" class="continue__name"></span>
<span class="continue__arrow" aria-hidden="true">→</span>
</button>
<form id="generate-form" class="form">
<h2 class="form__title">Create world</h2>
<div class="menu__body">
<section class="worlds">
<div class="worlds__header">
<h2>Worlds</h2>
<span id="slot-count" class="slot-count"></span>
</div>
<p id="worlds-empty" class="worlds__empty" hidden>
Worlds you generate will show up here. A small town takes a few seconds.
</p>
<ul id="world-list" class="world-list"></ul>
</section>
<label class="field">
<span>Name</span>
<input id="field-name" type="text" placeholder="Robert Lee" autocomplete="off" />
</label>
<form id="generate-form" class="form">
<h2 class="form__title">New world</h2>
<div class="field-row">
<label class="field">
<span>Latitude</span>
<input id="field-lat" type="number" step="any" value="31.8966010" required />
<span>Name</span>
<input id="field-name" type="text" placeholder="Optional — defaults to the coordinates" autocomplete="off" />
</label>
<label class="field">
<span>Longitude</span>
<input id="field-lon" type="number" step="any" value="-100.4858591" required />
<span class="field__label">
Location
<button id="use-location" type="button" class="link-button">Use my location</button>
</span>
<input
id="field-coords"
type="text"
inputmode="decimal"
spellcheck="false"
autocapitalize="off"
autocomplete="off"
value="31.8966010, -100.4858591"
placeholder="Latitude, longitude"
required
/>
</label>
</div>
<label class="field">
<span>Size <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>Size <output id="field-size-value">10 km</output></span>
<input id="field-size" type="range" min="1" max="20" step="1" value="10" />
</label>
<button id="generate-button" type="submit" class="button">Generate world</button>
</form>
<p id="form-hint" class="form__hint" hidden></p>
<button id="generate-button" type="submit" class="button">Generate world</button>
</form>
</div>
<footer id="status" class="status"></footer>
</div>