[UI] Client interface overhaul: layout, hierarchy & design-system consistency #44

New issue

Closed

opened 2026-10-19 10:53:44 +02:00 by agent-claude · 2 comments

agent-claude commented

2026-10-19 10:53:44 +02:00

Collaborator

The current client UI (after #40/#42) has usability and visual-consistency problems. Overhaul the client HUD and menus:

Audit layout, hierarchy, density and readability of HUD, toolbar, inspector, panels, login and world map overlay
Consolidate the styling into a coherent design system (tokens, consistent panel/button components, spacing scale)
Keep the 16-bit SNES aesthetic but make it legible and uncluttered
Responsive behaviour for smaller viewports
No sim-core/server behaviour changes

The current client UI (after #40/#42) has usability and visual-consistency problems. Overhaul the client HUD and menus: - Audit layout, hierarchy, density and readability of HUD, toolbar, inspector, panels, login and world map overlay - Consolidate the styling into a coherent design system (tokens, consistent panel/button components, spacing scale) - Keep the 16-bit SNES aesthetic but make it legible and uncluttered - Responsive behaviour for smaller viewports - No sim-core/server behaviour changes

agent-claude added the

agent/claude

type/feature

area/client

labels

2026-10-19 10:53:44 +02:00

agent-bot referenced this issue from a commit

2026-10-19 11:18:32 +02:00

feat(client): 16-bit JRPG-window UI overhaul (#44)

agent-claude referenced this issue from a pull request that will close it,

2026-10-19 11:18:47 +02:00

[PR] Client UI overhaul: 16-bit design system, layout & modal fixes (#44) #45

agent-claude commented

2026-10-19 11:18:59 +02:00

Author

Collaborator

Handoff: PR #45 opened (agent-claude)

Completed

client/index.html: restructured the HUD (top bar, viewport overlay anchors, architect dock, controls panel) and all modals. Element IDs are unchanged.
client/src/styles.css: rewritten as a token-based 16-bit "JRPG window" design system with responsive breakpoints at 1560, 1400, 1200, 1080, 860 and 640px.
client/src/ui-icons.ts (new): pixel-art SVG icons, hydrated from data-icon.
client/src/main.ts:
- New central modal manager (Esc, backdrop click, one window at a time).
- Inspectors diff their markup and use delegated events.
- Schedule supports drag painting.
- Strings rendered via innerHTML are now escaped.
- Inline styles replaced with classes.

Remaining

Peer review by agent-gemini, then merge approval from @johnw.
Optional follow-up: pixel icons for item glyphs (stockpile, market and wonders still use emoji).

Gotchas

renderPawnInspector and renderTileInspector cache their last HTML. Anything that mutates state without changing the rendered markup won't repaint, and that's intentional.
Modal open state now lives in openModalId. The old marketModalOpen, allianceModalOpen and similar flags were removed.
The Jersey 10 font comes from Google Fonts, with Segoe UI as the fallback.

## Handoff: PR #45 opened (agent-claude) **Completed** - `client/index.html`: restructured the HUD (top bar, viewport overlay anchors, architect dock, controls panel) and all modals. Element IDs are unchanged. - `client/src/styles.css`: rewritten as a token-based 16-bit "JRPG window" design system with responsive breakpoints at 1560, 1400, 1200, 1080, 860 and 640px. - `client/src/ui-icons.ts` (new): pixel-art SVG icons, hydrated from `data-icon`. - `client/src/main.ts`: - New central modal manager (Esc, backdrop click, one window at a time). - Inspectors diff their markup and use delegated events. - Schedule supports drag painting. - Strings rendered via `innerHTML` are now escaped. - Inline styles replaced with classes. **Remaining** - Peer review by agent-gemini, then merge approval from @johnw. - Optional follow-up: pixel icons for item glyphs (stockpile, market and wonders still use emoji). **Gotchas** - `renderPawnInspector` and `renderTileInspector` cache their last HTML. Anything that mutates state without changing the rendered markup won't repaint, and that's intentional. - Modal open state now lives in `openModalId`. The old `marketModalOpen`, `allianceModalOpen` and similar flags were removed. - The Jersey 10 font comes from Google Fonts, with Segoe UI as the fallback.

agent-claude added the

status/needs-review

label

2026-10-19 11:19:00 +02:00

agent-bot referenced this issue from a commit

2026-10-19 12:38:40 +02:00

Merge branch 'claude/44-ui-overhaul' into main (#45)

agent-bot closed this issue

2026-10-19 12:38:40 +02:00

agent-claude commented

2026-10-19 12:40:22 +02:00

Author

Collaborator

Merged to main in 6537ab3 (PR #45, approved by @johnw via Claude Code chat) and deployed to https://ricosworld.themels.online — live screenshot verified, no console errors.

Merged to main in 6537ab3 (PR #45, approved by @johnw via Claude Code chat) and deployed to https://ricosworld.themels.online — live screenshot verified, no console errors.