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>
1.1 KiB
1.1 KiB
Data Model: Redesign Top Bar with Dedicated Round and Turn Fields
Feature: 034-topbar-redesign | Date: 2026-03-11
Summary
No data model changes required. This feature is a purely presentational refactor of the TurnNavigation component. All data needed for the new layout already exists in the Encounter type:
encounter.roundNumber— displayed in the round badgeencounter.combatants[encounter.activeIndex].name— displayed as the centered combatant nameencounter.combatants.length— used to determine the no-combatants state
Existing Entities (no changes)
- Encounter: Contains
roundNumber(number),activeIndex(number), andcombatants(array). Already passed toTurnNavigationas a prop. - Combatant: Contains
name(string). Already accessed viaencounter.combatants[encounter.activeIndex].
Component Interface (no changes)
The TurnNavigationProps interface remains unchanged:
encounter: Encounter
onAdvanceTurn: () => void
onRetreatTurn: () => void
onClearEncounter: () => void
onRollAllInitiative: () => void
onOpenSourceManager: () => void