dostulata/initiative
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign top bar with dedicated round badge and centered combatant name

Browse Source 
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>
This commit is contained in:
Lukas
2026-03-11 12:39:57 +01:00
parent 55d322a727
commit 95cb2edc23
10 changed files with 703 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
specs/034-topbar-redesign/plan.md Normal file
View File

@@ -0,0 +1,61 @@
# 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.