UI/UX: High-Performance Canvas HUD for Challenge Modes (Part 2)

[SoNdA11]

Objective

Replace the standard telemetry displays with dynamic, high-performance HTML5 Canvas elements using requestAnimationFrame. This phase focuses on the core visual logic for each specific game mode to ensure maximum responsiveness and immersion during active challenges.

Implementation Tasks

Phase 4: In-Game HUD Integration (Canvas Overhaul)

• Sprint Mode: Implement the wind-tunnel particle system and integrate the haloCanvas design (dynamic anti-overlap radius) to protect central typography.
• Time Trial Mode: Build the analytical precision radar UI. Implement Bezier curve smoothing (quadraticCurveTo) for the live power graph.
• KOM Mode: Apply gamified aesthetic updates to the climbing simulation, including vertical grade visualization and relative distance progress bars.
• Responsive HUD: Implement clamp() based fluid typography and adaptive canvas scaling for different screen resolutions.