49 lines
4.6 KiB
Markdown
49 lines
4.6 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 was simplified to a minimal gateway (`Loading` / `Anonymous` / `Workspace`) in a single `Home.razor.cs` class.
|
|
- The authenticated workspace shell/state/behavior was moved to `Components/Pages/Workspace.razor`.
|
|
- Workspace header user identity rendering is now null-safe during first render (`Loading user...` fallback until `/api/me` loads).
|
|
- Workspace header was compacted into a single horizontal row with hamburger menu screen switching and link-style logout.
|
|
- Header alignment was tightened so connection status occupies the growing middle cell and the hamburger menu remains pinned to the right edge.
|
|
- Concern controls now own their local form state and mutation workflows; the workspace host handles shared cross-control state refresh.
|
|
- Skill create/edit flow is now owned by `CharacterPanel` (where characters and their skills are presented together).
|
|
- Skill interactions are now row-local chip actions (edit/roll) with an inline dummy `+` row for create-skill.
|
|
- Character picker was reduced to a compact single-row horizontal scroller to minimize vertical footprint.
|
|
- The standalone "Last Roll" panel was removed; campaign log entries are the roll history surface.
|
|
- Card layout now uses condensed flex stacking (instead of stretching grid tracks), with remaining character-panel height absorbed by a post-skills spacer.
|
|
- Campaign log now auto-scrolls to the newest entry when new entries arrive.
|
|
|
|
## 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 | Compact single-row header with user/campaign context, growing connection-status cell, right-aligned hamburger screen switch, and link-style logout. |
|
|
| 9.4 Play screen character column | Implemented | Compact character picker, merged character+skills header row, modal edit/create flows, inline per-skill edit/roll chips, d6 skill options (wild/fumble), and no separate last-roll panel. |
|
|
| 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.
|