S02: Vertical health bars on outer edges #47

New issue

Closed

opened 2026-06-03 02:36:02 +00:00 by Mark · 0 comments

Mark commented

2026-06-03 02:36:02 +00:00

Owner

Parent

#45

What to build

Display health bars (vitality + will) in vertical orientation on the outer edges of the arena — opponent stats on left edge, player stats on right edge. Currently health bars are inside the player section; they need to move to the outer perimeter.

Changes

Create VerticalStatsBar component or modify HealthBar to support vertical orientation (via CSS transform)
Position stats on outer edges of the horizontal arena (left = opponent, right = player)
Health bars show: current/max value, animated transitions, damage/heal flashes

Acceptance criteria

Health bars are displayed vertically on outer edges
Opponent stats visible on left edge, player stats on right edge
Bars animate smoothly when resources change
No overflow or clipping on supported viewports (≥640px landscape)

Blocked by

Blocked by #46

From milestone brief at .gsd/milestones/M45/M45-ROADMAP.md.

## Parent #45 ## What to build Display health bars (vitality + will) in vertical orientation on the outer edges of the arena — opponent stats on left edge, player stats on right edge. Currently health bars are inside the player section; they need to move to the outer perimeter. ### Changes - Create `VerticalStatsBar` component or modify `HealthBar` to support vertical orientation (via CSS transform) - Position stats on outer edges of the horizontal arena (left = opponent, right = player) - Health bars show: current/max value, animated transitions, damage/heal flashes ### Acceptance criteria - [ ] Health bars are displayed vertically on outer edges - [ ] Opponent stats visible on left edge, player stats on right edge - [ ] Bars animate smoothly when resources change - [ ] No overflow or clipping on supported viewports (≥640px landscape) ## Blocked by Blocked by #46 --- From milestone brief at `.gsd/milestones/M45/M45-ROADMAP.md`.