feat(comparison): Head-to-Head 1-on-1 Battle Arena with Live Operation Delta Charts

[Sanan507]

Overview

Create a dedicated 1-on-1 Head-to-Head Battle Arena view that pairs any two selected algorithms in a direct showdown, featuring a real-time differential graph showing operation lead/lag deltas as the race progresses.

Implementation Details & File Reference

• Battle View Component: Create frontend/src/components/HeadToHeadBattle.tsx.
  • Dual synchronized side-by-side visualizers.
  • Live difference graph rendering Algorithm A Ops - Algorithm B Ops per frame index.
• Navigation Route: Add route /battle in frontend/src/App.tsx and navbar button.
• Victory Analytics: Display detailed winner summary banner highlighting speed ratio (e.g. "Quick Sort was 4.2x faster than Bubble Sort").

Definition of Done

• Head-to-Head Battle mode allows selecting two algorithms for 1-on-1 racing.
• Differential operation chart updates dynamically during playback.
• Winner victory breakdown displays accurate speed ratios.

Skill Level

Hard — requires synchronized dual-lane rendering and live chart delta calculations.