95cb2edc23
Replace the combined "Round N — Name" string with a three-zone flex layout:
left (prev button + R{n} pill badge), center (prominent combatant name with
truncation), right (action buttons + next button). Adds 13 unit tests
covering all user stories including layout robustness and empty state.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
62 lines
2.9 KiB
Markdown
62 lines
2.9 KiB
Markdown
# Implementation Plan: Redesign Top Bar with Dedicated Round and Turn Fields
|
||
|
||
**Branch**: `034-topbar-redesign` | **Date**: 2026-03-11 | **Spec**: [spec.md](spec.md)
|
||
**Input**: Feature specification from `/specs/034-topbar-redesign/spec.md`
|
||
|
||
## Summary
|
||
|
||
Refactor the `TurnNavigation` component to replace the combined "Round N — Name" text with a left-center-right layout: a muted round badge/pill on the left (after the prev button), a prominent centered combatant name, and action buttons grouped on the right. This is a purely presentational change in the adapter layer — no domain or application changes needed.
|
||
|
||
## Technical Context
|
||
|
||
**Language/Version**: TypeScript 5.8 (strict mode, `verbatimModuleSyntax`)
|
||
**Primary Dependencies**: React 19, Tailwind CSS v4, Lucide React
|
||
**Storage**: N/A (no persistence changes — display-only refactor)
|
||
**Testing**: Vitest + @testing-library/react
|
||
**Target Platform**: Web (desktop + mobile browsers)
|
||
**Project Type**: Web application (React SPA)
|
||
**Performance Goals**: No layout shift on turn/round changes; responsive across 320px–1920px
|
||
**Constraints**: Single component refactor; no domain or application layer changes
|
||
**Scale/Scope**: 1 component file (`turn-navigation.tsx`), 1 new test file
|
||
|
||
## Constitution Check
|
||
|
||
*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
|
||
|
||
| Principle | Status | Notes |
|
||
|-----------|--------|-------|
|
||
| I. Deterministic Domain Core | PASS | No domain changes — purely adapter-layer UI refactor |
|
||
| II. Layered Architecture | PASS | Change is entirely in `apps/web/` (adapter layer) |
|
||
| III. Clarification-First | PASS | Spec is clear; no non-trivial assumptions needed |
|
||
| IV. Escalation Gates | PASS | Implementation matches spec scope exactly |
|
||
| V. MVP Baseline Language | PASS | No scope constraints affected |
|
||
| VI. No Gameplay Rules | PASS | No gameplay logic involved |
|
||
|
||
**Post-Phase 1 re-check**: All gates still PASS. Design introduces no new layers, domain changes, or scope expansion.
|
||
|
||
## Project Structure
|
||
|
||
### Documentation (this feature)
|
||
|
||
```text
|
||
specs/034-topbar-redesign/
|
||
├── plan.md # This file
|
||
├── research.md # Phase 0 output
|
||
├── data-model.md # Phase 1 output (minimal — no data changes)
|
||
├── quickstart.md # Phase 1 output
|
||
└── tasks.md # Phase 2 output (/speckit.tasks command)
|
||
```
|
||
|
||
### Source Code (repository root)
|
||
|
||
```text
|
||
apps/web/src/
|
||
├── components/
|
||
│ ├── turn-navigation.tsx # Primary file to refactor
|
||
│ └── ui/
|
||
│ ├── button.tsx # Existing — reused for badge styling
|
||
│ └── confirm-button.tsx # Existing — no changes
|
||
```
|
||
|
||
**Structure Decision**: No new files or directories needed. The refactor modifies `turn-navigation.tsx` in place. A new test file `apps/web/src/components/__tests__/turn-navigation.test.tsx` will be created.
|