Build an asset-backed HTML client UI style guide
Create a browsable HTML reference for a cohesive PRK.Client UI using locally extracted game GUI artwork. Inspect current window/layout/rendering conventions; distinguish current implementation evidence from proposed design rules. Cover window anatomy, border ownership and slicing, spacing/type/color, buttons and states, inputs, sliders, selection controls, tabs, scrolling, lists, tooltips and representative window compositions. Added square inventory slots, NCU/pet NCU slots and compact/inset game tables with sourced geometry, actual slot/effect/selection artwork and eight local SQLite RDB icons (100 graphics total). Per user correction, NCU icons uniformly zoom to cover and center-crop the inset, not fit or non-uniform stretch; current templates differ and later runtime work must adopt that target. Table header/rows retain19px height; numeric alignment and session-only resizing are specified. Focused local checks verify cell sizes, icon decode/metadata, inventory selection/unavailable guard, NCU inspection, raw-numeric sorting, selection persistence, pointer/keyboard resizing, compact/inset, empty/restore and sticky header. Desktop/phone screenshots reviewed, phone width/scrollWidth390px; no runtime/gameplay changes. Earlier compound browser command timed out at automation refusing an aria-disabled click, so no outcome claimed from that run; replacement short checks passed, including a forced click validating the refusal guard. JS syntax, Python compilation/extraction and source lint have zero failures; lint warnings are timestamp padding, source prose saying no shadow, and authentic counter text shadows. Real icon pixels are extracted; sample labels/values are not canonical gameplay data. Keep extraction reproducible and proprietary generated assets local. No client runtime changes in this pass. Validated in Chrome at 1440/768/390 px, including interactive controls, invalid quantity retention, tab/reopen focus, confirmation focus cycling, internal scrolling and asset filtering. All images decode; font loads; 82 graphics and tint variants pass dimension/transparency validation. Initial visual inspector: zero failures, two justified reference-page warnings (long reference and editorial title); all emitted screenshot sheets reviewed. Guide lives at PRK.Client/StyleGuide with setup and validation limits in README.md, linked as the visual baseline from PRK.Client/CLAUDE.md. Relocation verified by re-extracting100 graphics, resolving the documentation links and serving preview scripts/styles/manifest/font from the new directory. Generated assets remain ignored. User-reviewed corrections implemented: nine-slice slider tracks; asset-backed scrollbar with cropped thumb and both end arrows; Wear-style shared inner Tab frame. Reference UI/Packages/Wear/content.xml and user-provided screenshots. Selected tab overlaps 1 px and opens into the page; window-wide actions stay outside. Focused local Playwright checks replace cancelled standalone browser runs (user prefers focused checks here). Measured slider side borders stay1px at117/400px widths; control restoring stretching widens the border. Scrollbar arrow step/repeat/release, Home/End/PageDown, track paging, dragging and wheel passed. Pixel checks confirm seam is open only under the selected tab, and opening follows selection. User confirms prior controls now look correct and attributes overlap to browser zoom. Latest input correction follows supplied AO login screenshot: plain1px neutral rounded outline with transparent interior, no Border02 asset/black fill; selects share outline. Removed JS sprite focus repaint; focus/error change same border. Focused screenshots reviewed for normal/focused/invalid states, quantity validation retains invalid entry and accepts valid entry; computed fields28px tall, transparent, zero sprites. Desktop/phone component screenshots reviewed, phone document width/scrollWidth both390px. Cropped arrow/thumb dimensions validated; JS syntax, Python compile/extraction and source lint pass. No runtime changes. Browser select/scroll behavior and text rasterization are approximations; runtime scaling/world contrast/input capture are later implementation checks. Direct file protocol blocked by harness; HTTP preview verified. No runtime changes. Pull request #2982: https://git.project-rk.com/prk/engines/pulls/2982 Head: docs/client-ui-style-guide; base: develop. Commit: 763fde4da.
Checklist
5 of 5 complete- Inspect client UI conventions and provide reproducible local game-art extraction with provenance.
- Build HTML rules and interactive component/window specimens, separating proposals from existing behavior.
- Verify assets, keyboard interactions and responsive layout in Chrome; record remaining limitations.
- Add asset-backed inventory and NCU slot specimens with sourced geometry and explicit layer/state rules; verify screenshots and interactions locally.
- Add compact/inset game-table specimens and rules; verify sorting, selection, empty state and narrow viewport scrolling with focused local checks.
- Area
- Project Rubi-Ka
- Project
- engines
- Kind
- Feature
- Task ID
tsk_ccev9ez4p5- Updated