39 lines
3.4 KiB
Markdown
39 lines
3.4 KiB
Markdown
# Frontend Rebuild Progress (Blazor)
|
|
|
|
Tracking against `UX.md` tasks and decisions.
|
|
|
|
## Status Snapshot
|
|
|
|
- Branch: `feature/blazor-frontend-rebuild-ux`
|
|
- Runtime frontend stack: Blazor (`RpgRoller/Components/*`) + browser JS interop (`wwwroot/js/rpgroller-api.js`)
|
|
- Legacy TypeScript frontend/runtime artifacts: removed
|
|
- Home page orchestration split by concern (`Home.*.cs` partials + `HomeControls/*`) to reduce merge churn and keep auth/campaign/character/skill flows isolated.
|
|
- Concern controls now own their local form state and mutation workflows; `Home` handles shared cross-control state refresh.
|
|
|
|
## UX Checklist
|
|
|
|
| UX area | Status | Notes |
|
|
|---|---|---|
|
|
| 9.1 App load + session restore | Implemented | Health check on load, rulesets/session load, unauthorized session reset, API unhealthy retry banner. |
|
|
| 9.2 Authentication view | Implemented | Register/login cards, required validation, register password length check, server-error display. |
|
|
| 9.3 Shared authenticated header | Implemented | User chip, campaign/active context, connection state, screen switch, refresh, logout. |
|
|
| 9.4 Play screen character column | Implemented | Character icon tabs, sheet, modal edit/create flows, selected-tab-as-active behavior, skill list, d6 skill options (wild/fumble), roll controls, and die-state visualized last roll card. |
|
|
| 9.5 Play screen log column | Implemented | Chronological feed, private/public badges, private perspective styles (roller vs GM), per-entry dice visualization with die-state flags, local time + ISO tooltip. |
|
|
| 9.6 Campaign management screen | Implemented | Campaign selector/summary, create form, details card, character management actions with modal edit pattern. |
|
|
| 9.7 Tablet/mobile bottom bar | Implemented | `Character` / `Log` panel switch in play screen and per-tab session persistence. |
|
|
| 10 Validation and error UX | Partially implemented | Required-field and common API errors are mapped; message/code-specific mapping is limited by current API exposing only text messages. |
|
|
| 11 Empty/loading/disabled states | Implemented | Empty states, skeleton placeholders, mutation button disabling. |
|
|
| 12 Real-time and sync rules | Implemented | Campaign-scoped SSE subscribe/unsubscribe, reconnect with exponential backoff, manual refresh fallback. |
|
|
| 13 Accessibility requirements | Partially implemented | Keyboard-friendly controls, labels, focus styling, `aria-live` announcements; screen-reader validation for all flows still needs dedicated accessibility QA. |
|
|
| 14 Content and copy guidance | Implemented | Direct action labels and corrective error copy used throughout. |
|
|
| 15 Visual direction | Implemented | Tabletop utility styling, tokenized colors, responsive layout, private/public visual differentiation. |
|
|
| 17 Next iteration targets: wireframes | Not yet implemented | No separate low-fidelity wireframe artifact added in repo. |
|
|
| 17 Next iteration targets: component contracts doc | Not yet implemented | Component contract document not yet extracted from implementation. |
|
|
| 17 Next iteration targets: visual token doc | Not yet implemented | Tokens are implemented in CSS but not yet documented in a dedicated spec file. |
|
|
|
|
## Follow-up Candidates
|
|
|
|
1. Add explicit machine-readable API error codes to HTTP responses for richer field-level mapping.
|
|
2. Add automated accessibility checks (focus order, contrast, and screen-reader behavior assertions).
|
|
3. Document component contracts and visual token references as separate markdown artifacts.
|