M50 Responsive UI Element Slice

Status

Plan: M50_RESPONSIVE_UI_ELEMENT_SLICE
Status: IN_PROGRESS
Activated: 2026-09-06
Baseline: 258bae4 (M49 local iOS validation branch)
Owner request: prove a responsive, reusable UI treatment with real game-art elements before migrating every page.

Objective

Build one player-visible Market slice that separates world art from runtime UI and demonstrates fixed-size text with adaptive buttons, task boards and recruit cards. Preserve gameplay, controllers, routing, Save/Receipt and localization semantics. Generate only the smallest compatible element batch when the existing masters cannot provide clean reusable pieces.

Player-visible stopping point

Market fills the available landscape viewport without black side matte or accidental crop of the focal world/actors.
Button corners, panel borders and card frames retain their authored scale while their center/spacing expands or contracts; text remains fixed-size and stays inside content margins.
One dominant action, one secondary navigation action and one selected offer are immediately legible in both locales.
The page uses a reusable element family whose states are visible without relying on color alone.
At least one idle actor/environment loop and one committed selection or inspection feedback are visible in a normal-render capture.

UI and asset contract

Full-screen world background is opaque and may bleed/crop only at decorative edges; important subjects stay in a declared safe rect.
Buttons, task boards and recruit cards use NinePatchRect or equivalent stretch-safe construction with fixed corner/border margins.
Runtime text is engine-rendered. No generated image may contain UI text, labels, debug IDs or baked controls.
Shared tokens/factory own typography, semantic colors, spacing, focus and command states. Page code owns composition, not private visual vocabularies.
New generated elements must be delivered as a compatible regular sheet or transparent independent assets with provenance, processing and import notes.

Ordered steps

M50-A — Contract and responsive blockout (`COMPLETE`)

Record the fixed Market states, viewports and locales for comparison.
Define safe rect, focal order, NinePatch margins, component states and z-order.
Build a graybox using existing art only; decide which elements need generation after inspecting the blockout.

Closure: M50-A closes at source 969b715. The responsive contract, fixed viewport set and graybox boundary are recorded; the owner-approved scope is limited to one Market slice and one compatible element batch.

M50-B — Element batch and runtime component integration (`COMPLETE`)

Generate or process one small compatible element batch: button chrome, task-board frame, recruit-card frame and four semantic seals/icons.
Import the elements and integrate them into the Market slice without changing gameplay or intent payloads.

Closure: M50-B closes at source 78dd235. The generated element sheet and UI-free Market background are imported and integrated into the responsive Market slice; focused contract and layout checks pass.

M50-C — Responsive and feel verification (`IN_PROGRESS`)

Verify 760x360, 844x390 and 1280x720 in zh_CN and en.
Verify touch/focus, selection, inspection, reduced-motion fallback and the first idle/action feedback loop with normal rendering.
Record remaining asset, device and human-review gaps before handoff.

Acceptance checks

No text exits its content container in the fixed locales/viewports.
NinePatch corners/borders do not visibly distort across target widths.
World background has no black side matte and no focal crop at reference size.
Market has exactly one primary action and a visible selected state.
Required controls expose default, pressed, disabled and focus/selected cues through shape/icon/text as well as color.
Existing Market controller, route, Save/Receipt and focused regressions stay green with strict diagnostics.
A normal-render capture demonstrates at least one event-bound motion or transition; static screenshots do not count as motion evidence.

Frozen scope

No new gameplay, economy, content, battle rules, routing or Save changes.
No migration of Readiness, Result, Guild or other pages until this slice is owner-reviewed.
No bulk art generation; maximum one compatible element batch plus surgical retries within the workspace image-generation ceiling.
No TestFlight, App Store or release packaging work.
Preserve untracked .uid, .import and prototype_incremental/ files.

Commit boundaries

M50-A: plan/checkpoint and graybox contract.
M50-B: element assets and Market component integration.
M50-C: focused/runtime verification and owner handoff.

Final handoff

ABG M50 RESPONSIVE MARKET ELEMENT SLICE READY FOR OWNER TRYOUT

4.8 KiB Raw Blame History