Battle analytics — score evolution chart over time

[Empreiteiro]

Description

Add a line chart visualization showing how each participant's score evolved over the duration of the battle, making it easy to see momentum shifts and catch-up moments.

Details

• Line chart: X-axis = time, Y-axis = cumulative score. One line per participant, colored by their territory color
• Placement: Below the territory grid in the battle room, collapsible section
• Data source: Score snapshots recorded at each refresh interval (see Battle replays — animated timelapse of territory conquest #3 for scoreHistory data model)
• Interactive features:
  • Hover/tap to see exact scores at a point in time
  • Tooltip showing all participant scores at the hovered timestamp
  • Highlight/dim lines on participant hover
• Key moments: Annotate crossover points (when a player overtakes another) with markers
• Library: Use a lightweight charting solution — either Canvas-based custom rendering (consistent with existing approach) or a minimal library like chart.js or recharts

Data Dependency

This feature depends on score history tracking. Each battle refresh should append:

{ timestamp: string, scores: Record<string, number> }

to a scoreHistory array in the battle data (same data as #3).

Acceptance Criteria

• Line chart renders in battle room below territory grid
• One colored line per participant matching their territory color
• Interactive tooltips on hover/tap
• Crossover moments visually marked
• Chart is responsive (works on mobile)
• Collapsible/expandable section to save screen space