40 lines
1.3 KiB
Markdown
40 lines
1.3 KiB
Markdown
# Quickstart: Combatant Row UI Polish
|
||
|
||
**Feature**: 027-ui-polish | **Date**: 2026-03-10
|
||
|
||
## Overview
|
||
|
||
Six presentational improvements to the combatant row in the initiative tracker. No domain or application layer changes — all work is in `apps/web/src/components/`.
|
||
|
||
## Key Files
|
||
|
||
- `apps/web/src/components/combatant-row.tsx` — Main component; most changes here
|
||
- `apps/web/src/components/condition-picker.tsx` — May need positioning tweak for inline context
|
||
- `apps/web/src/components/ac-shield.tsx` — New component for shield-shaped AC display
|
||
|
||
## Development
|
||
|
||
```bash
|
||
pnpm --filter web dev # Start dev server
|
||
pnpm check # Run before committing (knip + format + lint + typecheck + test)
|
||
```
|
||
|
||
## Implementation Order
|
||
|
||
1. Inline conditions + remove BookOpen icon (layout restructure)
|
||
2. Row click opens stat block (event delegation)
|
||
3. Hover-only remove button (CSS opacity)
|
||
4. AC shield shape (new component)
|
||
5. Expanded concentration click target (grid/padding tweak)
|
||
6. Larger d20 icon (className change)
|
||
|
||
## Testing
|
||
|
||
No domain tests needed. Verify visually via dev server:
|
||
- Conditions appear inline after creature name
|
||
- "+" and "×" appear only on hover
|
||
- Clicking row opens stat block (bestiary creatures only)
|
||
- AC displays inside shield shape
|
||
- Concentration clickable across full left gutter
|
||
- D20 icon clearly recognizable
|