110 lines
4.8 KiB
Markdown
110 lines
4.8 KiB
Markdown
# 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`
|