feat: Add replay recording and video export functionality

[unhappychoice]

Description

Add the ability to record typing sessions as replays and export them as animated videos/GIFs for sharing and analysis.

Features

Core Functionality

• Replay Recording: Capture keystroke data, timing, and typing statistics during gameplay
• Replay Management: Save, load, and manage replay files locally
• Replay Playback: Watch recorded typing sessions with playback controls (play/pause/speed control)
• Video Export: Convert replays to animated formats (GIF, MP4, WebM, HTML)

Replay Data Structure

#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct TypingReplay {
    pub challenge: Challenge,
    pub keystrokes: Vec<Keystroke>,
    pub final_stats: TypingStats,
    pub metadata: ReplayMetadata,
}

#[derive(Debug, Clone)]
pub struct Keystroke {
    pub timestamp: Duration,
    pub key: char,
    pub is_correct: bool,
    pub cursor_position: usize,
    pub wpm_at_time: f64,
    pub accuracy_at_time: f64,
}

Video Export Formats

• Animated GIF: Lightweight, shareable format
• HTML Animation: Browser-playable with CSS/JavaScript
• SVG Animation: Vector-based smooth animation
• ANSI Animation: Terminal-compatible format for asciinema
• MP4/WebM: High-quality video format (optional, ffmpeg-based)

Visual Enhancements

To make replays more engaging than just "flowing text":

• Typing Rhythm Visualization: Real-time WPM waveform display
• Character Physics Effects:
  • Correct keystrokes: falling/landing animation
  • Mistakes: explosion/error effects
• Gaming Effects:
  • Rainbow border based on typing speed
  • Combo counter with special effects for streaks
  • Speed trails during fast typing
• Progress Meters: Real-time vertical bar graphs for WPM, accuracy, combo
• Story Elements:
  • Character reactions to code elements (functions, classes, strings)
  • Contextual feedback based on typing performance

UI Integration

New Menu Options

• Replay Management Screen: List, preview, and manage saved replays
• Replay Playback Screen: Watch replays with video-like controls
• Export Settings Screen: Configure video output options

Session End Options

Extend existing session end screen with:

• "Save Replay" option
• "Export Video" option
• "Share Replay" option

Technical Implementation

Efficient Video Generation

• Direct frame rendering without terminal intermediation
• Memory-based encoding (no temporary files)
• Delta compression for minimal file sizes
• Streaming output for large replays

Storage Format

• JSON-based replay files in ~/.gittype/replays/
• Lightweight keystroke data with timing information
• Challenge metadata for replay context

User Stories

• As a developer, I want to record my typing sessions so I can analyze my typing patterns and improve
• As a content creator, I want to export typing videos to share impressive sessions on social media
• As a learner, I want to watch replays of difficult code to practice specific patterns
• As a competitive typist, I want to save and share my personal best performances

Implementation Priority

1. Phase 1: Basic replay recording and playback
2. Phase 2: Simple video export (GIF/HTML)
3. Phase 3: Visual enhancements and effects
4. Phase 4: Advanced export formats and sharing

Technical Considerations

• Minimize performance impact during recording
• Efficient storage format for replay data
• Cross-platform video export compatibility
• Configurable visual effects (enable/disable for performance)

Related Issues

This feature would complement:

• Statistics tracking
• Social sharing features
• Achievement system

[linear]

E-609 feat: Add replay recording and video export functionality