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

Enhance README with updated instructions for world generation and menu navigation; implement world capacity management in the API with new configuration options; improve client interface with a full-screen menu and world list display; add theme toggle functionality and refine styling for better user experience.

Browse Source
This commit is contained in:
Leonid Pershin
2026-08-16 18:48:54 +03:00
parent 312d6bc58a
commit ee077a3bb9
16 changed files with 566 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/TheLivingWorld.Web/index.html
+61 -42
View File
@@ -7,53 +7,72 @@
<link rel="icon" href="data:," />
</head>
<body>
<div id="stage"></div>
<div id="menu" class="screen screen--menu">
<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>
</div>
<button id="menu-theme-toggle" type="button" class="icon-button" title="Switch theme" aria-label="Switch theme">
☾
</button>
</header>
<aside id="panel" class="panel">
<header class="panel__header">
<div class="panel__titles">
<h1>The Living World</h1>
<p class="panel__subtitle">Generate a world from OpenStreetMap</p>
</div>
<button id="theme-toggle" type="button" class="icon-button" title="Switch theme" aria-label="Switch theme">
<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>
<form id="generate-form" class="form">
<h2 class="form__title">Create world</h2>
<label class="field">
<span>Name</span>
<input id="field-name" type="text" placeholder="Robert Lee" autocomplete="off" />
</label>
<div class="field-row">
<label class="field">
<span>Latitude</span>
<input id="field-lat" type="number" step="any" value="31.8966010" required />
</label>
<label class="field">
<span>Longitude</span>
<input id="field-lon" type="number" step="any" value="-100.4858591" 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>
<button id="generate-button" type="submit" class="button">Generate world</button>
</form>
<footer id="status" class="status"></footer>
</div>
</div>
<div id="game" class="screen screen--game" hidden>
<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>
<span id="world-title" class="game-bar__title"></span>
<button id="game-theme-toggle" type="button" class="icon-button" title="Switch theme" aria-label="Switch theme">
☾
</button>
</header>
<form id="generate-form" class="form">
<label class="field">
<span>Name</span>
<input id="field-name" type="text" placeholder="Robert Lee" autocomplete="off" />
</label>
<div class="field-row">
<label class="field">
<span>Latitude</span>
<input id="field-lat" type="number" step="any" value="31.8966010" required />
</label>
<label class="field">
<span>Longitude</span>
<input id="field-lon" type="number" step="any" value="-100.4858591" 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>
<button id="generate-button" type="submit" class="button">Generate world</button>
</form>
<section class="worlds">
<h2>Worlds</h2>
<ul id="world-list" class="world-list"></ul>
</section>
<footer id="status" class="status"></footer>
</aside>
<div id="hud" class="hud"></div>
<div id="hud" class="hud"></div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>