game-dev/RicosWorld

Watch

Fork 0

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

Open

agent-claude wants to merge 0 commits from claude/44-ui-overhaul into main

agent-claude commented

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

Collaborator

Fixes #44

Summary

A full overhaul of the client HUD and menus into a consistent 16-bit "JRPG window" design system. No sim-core or server changes.

Layout fixes

Top bar no longer overflows. At 1600px, World, Market, Alliance and Logout used to be pushed off-screen. The bar now has compact stat chips and icon nav buttons with corner badges, and the labels collapse to icons only below 1560px.
Colonist bar moved to the top centre of the viewport. Before, the top bar squeezed it to zero width.
Architect dock: the tabs and tools are now one window. The shortcut-hint strip that overlapped them is replaced by a ? controls panel.
Inspector sidebar can be collapsed with I and becomes a drawer below 1080px.

Behaviour fixes

Modal manager: Esc and backdrop clicks close windows, only one window is open at a time, and the active nav button is highlighted. Previously Esc did nothing and windows stacked.
Pawn and tile inspectors used to rebuild innerHTML on every delta, which could swallow clicks at 10 Hz. They now diff their markup and use delegated listeners.
Schedule now supports click-and-drag painting, which the hint text always promised.
"Hunger 0%" is relabelled "Food — Starving", and raw basis points moved into tooltips.
Escaping: server and user strings rendered via innerHTML (log, settlements, trades, etc.) are now escaped.

Visual

Navy windows with a light/dark double border, gold selection colour, segmented meters, and the Jersey 10 display font. I tried Pixelify Sans first, but its capital C reads as an O.
A new client/src/ui-icons.ts adds a 12×12 pixel-art SVG icon set to replace the emoji in the HUD chrome.
Inline style="" in main.ts went from 179 down to 15, and those are just dynamic widths and one CSS variable.

Verification

npm run typecheck ✅ · npm test ✅ (41 sim-core + 5 server) · vite build ✅
Playwright against a local server confirmed: T opens Research, M switches to World (Research closes), Esc closes, backdrop click closes, and inspector tab clicks register 5/5 while the sim ticks. No page errors.
Checked visually at 1600×900, 1100×760 and 800×700.

Review notes

Element IDs used by main.ts were kept; the only new IDs are btn-toggle-sidebar, btn-keybind-help and keybind-help.
The Jersey 10 font loads from Google Fonts. If it's unavailable offline, it falls back to Segoe UI.
Item glyphs in the stockpile, market and wonders panels are still emoji. A follow-up could add pixel icons for those too.

🤖 Generated with Claude Code

Fixes #44 ## Summary A full overhaul of the client HUD and menus into a consistent 16-bit "JRPG window" design system. No sim-core or server changes. ### Layout fixes - **Top bar no longer overflows.** At 1600px, World, Market, Alliance and Logout used to be pushed off-screen. The bar now has compact stat chips and icon nav buttons with corner badges, and the labels collapse to icons only below 1560px. - **Colonist bar** moved to the top centre of the viewport. Before, the top bar squeezed it to zero width. - **Architect dock**: the tabs and tools are now one window. The shortcut-hint strip that overlapped them is replaced by a `?` controls panel. - **Inspector sidebar** can be collapsed with `I` and becomes a drawer below 1080px. ### Behaviour fixes - **Modal manager**: Esc and backdrop clicks close windows, only one window is open at a time, and the active nav button is highlighted. Previously Esc did nothing and windows stacked. - **Pawn and tile inspectors** used to rebuild `innerHTML` on every delta, which could swallow clicks at 10 Hz. They now diff their markup and use delegated listeners. - **Schedule** now supports click-and-drag painting, which the hint text always promised. - **"Hunger 0%"** is relabelled **"Food — Starving"**, and raw basis points moved into tooltips. - **Escaping**: server and user strings rendered via `innerHTML` (log, settlements, trades, etc.) are now escaped. ### Visual - Navy windows with a light/dark double border, gold selection colour, segmented meters, and the Jersey 10 display font. I tried Pixelify Sans first, but its capital C reads as an O. - A new `client/src/ui-icons.ts` adds a 12×12 pixel-art SVG icon set to replace the emoji in the HUD chrome. - Inline `style=""` in `main.ts` went from 179 down to 15, and those are just dynamic widths and one CSS variable. ## Verification - `npm run typecheck` ✅ · `npm test` ✅ (41 sim-core + 5 server) · `vite build` ✅ - Playwright against a local server confirmed: T opens Research, M switches to World (Research closes), Esc closes, backdrop click closes, and inspector tab clicks register 5/5 while the sim ticks. No page errors. - Checked visually at 1600×900, 1100×760 and 800×700. ## Review notes - Element IDs used by `main.ts` were kept; the only new IDs are `btn-toggle-sidebar`, `btn-keybind-help` and `keybind-help`. - The Jersey 10 font loads from Google Fonts. If it's unavailable offline, it falls back to Segoe UI. - Item glyphs in the stockpile, market and wonders panels are still emoji. A follow-up could add pixel icons for those too. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

agent-claude added 1 commit

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

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

Layout
- Top bar no longer overflows: compact stat chips + icon nav buttons with
  corner badges; labels collapse to icon-only below 1560px
- Colonist bar moved to the top-centre of the viewport (was squeezed out)
- Architect tabs and tools merged into one docked window; the shortcut
  strip that overlapped it is replaced by a "?" controls panel
- World event chip and tick/hash moved to a viewport corner
- Inspector sidebar is collapsible (I) and becomes a drawer below 1080px

Behaviour
- Central modal manager: Esc and backdrop click close, one window at a
  time, active nav button highlighted
- Pawn/tile inspectors only touch the DOM when their markup changes and use
  delegated listeners, so buttons no longer eat clicks at 10 Hz
- Schedule supports click-and-drag painting (as the hint always claimed)
- "Hunger 0%" relabelled "Food — Starving"; raw basis points moved to tooltips
- Escaped server/user strings rendered into innerHTML (log, settlements, etc.)

Visual
- New design system: SNES-style navy windows with light/dark double border,
  gold selection, segmented meters, Jersey 10 display font
- 12x12 pixel-art SVG icon set (ui-icons.ts) replaces emoji in HUD chrome
- Inline styles in main.ts reduced from 179 to dynamic widths only

Co-Authored-By: Claude Opus 5.5 <[email protected]>

agent-claude referenced this pull request

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

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

agent-claude commented

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

Author

Collaborator

Merge approved by @johnw via Claude Code chat on 2026-10-19: "Approve and merge and get on production"

agent-bot referenced this pull request from a commit

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

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

agent-claude referenced this pull request

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

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

This branch is already included in the target branch. There is nothing to merge.

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u origin claude/44-ui-overhaul:claude/44-ui-overhaul

git switch claude/44-ui-overhaul

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch main

git merge --no-ff claude/44-ui-overhaul

git switch claude/44-ui-overhaul

git rebase main

git switch main

git merge --ff-only claude/44-ui-overhaul

git switch claude/44-ui-overhaul

git rebase main

git switch main

git merge --no-ff claude/44-ui-overhaul

git switch main

git merge --squash claude/44-ui-overhaul