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

43
apps/web/src/components/turn-navigation.tsx
View File

@@ -26,34 +26,35 @@ export function TurnNavigation({
const activeCombatant = encounter.combatants[encounter.activeIndex];
return (
<div className="flex items-center justify-between rounded-md border border-border bg-card px-4 py-3">
<Button
variant="outline"
size="icon"
className="h-8 w-8 text-foreground border-foreground hover:text-hover-action hover:border-hover-action hover:bg-transparent"
onClick={onRetreatTurn}
disabled={!hasCombatants || isAtStart}
title="Previous turn"
aria-label="Previous turn"
>
<StepBack className="h-5 w-5" />
</Button>
<div className="flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3">
<div className="flex flex-shrink-0 items-center gap-3">
<Button
variant="outline"
size="icon"
className="h-8 w-8 text-foreground border-foreground hover:text-hover-action hover:border-hover-action hover:bg-transparent"
onClick={onRetreatTurn}
disabled={!hasCombatants || isAtStart}
title="Previous turn"
aria-label="Previous turn"
>
<StepBack className="h-5 w-5" />
</Button>
<span className="rounded-full bg-muted text-foreground text-sm px-2 py-0.5 font-semibold">
R{encounter.roundNumber}
</span>
</div>
<div className="text-center text-sm">
<div className="min-w-0 flex-1 text-center text-sm">
{activeCombatant ? (
<>
<span className="font-medium">Round {encounter.roundNumber}</span>
<span className="text-muted-foreground">
{" "}
— {activeCombatant.name}
</span>
</>
<span className="truncate block font-medium">
{activeCombatant.name}
</span>
) : (
<span className="text-muted-foreground">No combatants</span>
)}
</div>
<div className="flex items-center gap-3">
<div className="flex flex-shrink-0 items-center gap-3">
<div className="flex items-center gap-0">
<Button
variant="ghost"