Interactive Game Timeline - User Guide

Feature: Interactive Game Timeline

Available For: Gold Tier and Challenger Tier users

Location: Scrim Game Results Page

Overview

The Interactive Game Timeline transforms your match data into a visual story, showing how resource advantages were built and lost throughout the game. This powerful tool helps you understand the "why" behind your team's performance, not just the final score.

Getting Started

Accessing the Timeline

1. Navigate to Scrim Results: Go to your completed scrim game results page

2. Find Timeline Section: Scroll down to the "Game Timeline" section

3. View Interactive Graph: See gold and XP differentials plotted over time

What You'll See

Gold Tier Users

• Interactive Timeline Graph: Gold and XP differentials over time
• Objective Markers: Dragon, Baron, Turret, and Inhibitor events
• Key Events Log: Chronological summary of significant events
• Interactive Tooltips: Hover to see exact values at any point

Challenger Tier Users

• All Gold Tier Features: Complete timeline access
• AI Turning Points: AI-identified momentum shifts with explanations
• AI Insights Panel: Detailed analysis of key moments
• Narrative Integration: Timeline insights in AI Scrim Analysis

Understanding the Timeline

Gold Differential Graph

• Blue Line: Shows your team's gold advantage over time
• Positive Values: Your team is ahead in gold
• Negative Values: Your team is behind in gold
• Steep Changes: Indicate significant gold swings

XP Differential Graph

• Green Line: Shows your team's experience advantage
• Positive Values: Your team has level/XP advantage
• Negative Values: Your team is behind in levels
• Smooth Changes: Gradual XP accumulation

Objective Markers

• Dragon: 🐉 Dragon kills
• Baron: 👑 Baron Nashor kills
• Turret: 🏰 Turret destructions
• Inhibitor: 🚪 Inhibitor destructions

Color Coding:

• Blue: Your team secured the objective
• Red: Enemy team secured the objective

Interacting with the Timeline

Hovering

• Move your mouse over the timeline graph
• See tooltip with exact gold/XP values at that moment
• View game time in minutes:seconds format

Scrubbing

• Click and drag along the timeline
• Jump to specific moments in the game
• Analyze critical periods in detail

Key Events Log

• Scroll through events chronologically
• See event descriptions with timestamps
• View event icons for quick identification

AI Turning Points (Challenger Tier)

What Are Turning Points?

AI-identified moments where game momentum shifted significantly. These are automatically detected based on:

• Gold swings of 2,000+ gold within 2 minutes
• Objective captures that changed game state
• Team fight outcomes that shifted momentum

Understanding AI Insights

Each turning point includes:

• Timestamp: Exact moment in the game
• Description: What happened and why it mattered
• Significance Score: How impactful the moment was (0-1 scale)

Example AI Insight

"At 24:15: Gold lead decreased by 4,500g following a lost teamfight at the Dragon pit. This allowed the enemy team to secure Baron Nashor and gain map control."

Using Timeline for Analysis

Identifying Patterns

1. Look for steep changes in gold/XP lines

2. Correlate with objective markers to understand causes

3. Note timing of momentum shifts

4. Compare with AI turning points for validation

Common Patterns to Watch For

• Early Game: Small gold differences, gradual XP accumulation
• Mid Game: Objective fights causing larger swings
• Late Game: Baron/Elder Dragon fights with massive gold swings

Questions to Ask

• When did we lose our lead? Look for negative slope changes
• What caused the swing? Check objective markers at that time
• Could we have prevented it? Analyze positioning and decision-making
• How did we recover? Look for positive momentum shifts

Integration with AI Scrim Analysis

Narrative References

When AI generates your scrim analysis summary, it now includes timeline insights:

• References specific turning points from the timeline
• Explains the impact of key moments
• Provides context for performance metrics

Example AI Summary

"Your team maintained a strong early game lead, but the key turning point occurred at 24:15 when a lost teamfight resulted in a 4,500 gold swing and the loss of Baron Nashor. This event is marked on your timeline for review."

Best Practices

For Coaches

1. Start with AI turning points to identify critical moments

2. Use timeline for VOD review - scrub to specific events

3. Share insights with team using timeline screenshots

4. Track patterns across multiple games

For Players

1. Review your performance at key moments

2. Understand team dynamics through resource changes

3. Learn from turning points to improve decision-making

4. Use for self-analysis and improvement

For Analysts

1. Export timeline data for detailed analysis

2. Compare multiple games to identify trends

3. Correlate with other metrics for comprehensive insights

4. Use for strategic planning and team development

Troubleshooting

Timeline Not Loading

• Check match status: Timeline only appears for completed matches
• Refresh the page: Sometimes data needs to reload
• Contact support: If issues persist

Missing AI Features

• Verify tier: AI turning points require Challenger Tier
• Check subscription: Ensure active subscription
• Wait for processing: AI analysis may take a few minutes

Performance Issues

• Clear browser cache: Old cached data can cause issues
• Check internet connection: Timeline requires stable connection
• Try different browser: Some browsers may have compatibility issues

Tips and Tricks

Keyboard Shortcuts

• Arrow Keys: Navigate timeline in small increments
• Space: Pause/resume timeline scrubbing
• Escape: Close tooltips and return to overview

Mobile Usage

• Touch and drag: Use finger to scrub timeline
• Pinch to zoom: Zoom in on specific time periods
• Tap events: Tap objective markers for details

Sharing Insights

• Screenshot timeline: Share key moments with team
• Copy AI insights: Share turning point explanations
• Export data: Use for external analysis tools

Advanced Features

Custom Time Ranges

• Focus on specific periods: Zoom into critical moments
• Compare phases: Analyze early vs. late game performance
• Isolate events: Study individual team fights

Data Export

• Timeline data: Export for external analysis
• AI insights: Save turning point explanations
• Performance metrics: Download for tracking

Integration with VODs

• Sync with recordings: Match timeline to video timestamps
• Jump to moments: Click timeline to jump to VOD time
• Analyze together: Use timeline and video simultaneously

Embedding in Views

Livewire Component

Add the timeline to a scrim game results page by rendering the Livewire component with a Match instance:

@livewire('scrim-game-timeline', ['match' => $match])

Requirements:

• The Match must have a related timeline with status set to completed.
• Free tier users see the upgrade prompt; Gold+ tiers see the timeline; Challenger also sees AI turning points.

Blade Template Behavior

The component template conditionally shows an upgrade prompt for Free tier and the interactive timeline for Gold+:

@if (auth()->user()->currentTeam?->is_iron_tier ?? true)
    
        subtitle="Upgrade to unlock AI insights and interactive timeline analysis" />
@else
    
@endif

Data and Services

The component pulls processed data via TimelineDataService and (for Challenger) AI insights via TimelineAnalysisService.

Key computed properties (conceptual):

• timelineData: Gold/XP differentials, objectives, key events log
• turningPoints: AI turning points (Challenger only)
• hasTimelineData: Whether the match has completed timeline data

Frontend Visualization

• The timeline graph is rendered on a element and supports hovering/scrubbing.
• Tooltips display game time, gold lead, and XP lead at the cursor.
• Objective markers are drawn along the timeline for quick context.

Design System Integration

• Use x-ai-badge for AI elements and x-ai-panel where an AI analysis container is needed.
• Follow the AI gradient palette: from-[#89d5ef] via-[#e7a9da] to-[#f57488] for accents.

Testing Hooks

Feature tests should assert:

• Free tier: upgrade prompt visible, timeline hidden
• Gold tier: timeline visible, key events present
• Challenger tier: AI turning points visible

Frequently Asked Questions

Q: Why don't I see AI turning points?

A: AI turning points are only available for Challenger Tier users. Upgrade your subscription to access this feature.

Q: How accurate is the timeline data?

A: Timeline data comes directly from Riot's API and is processed in real-time. It's as accurate as the official game data.

Q: Can I use this for ranked games?

A: Currently, the Interactive Game Timeline is only available for scrim matches. Ranked game support may be added in the future.

Q: How often is the timeline updated?

A: Timeline data is processed immediately after match completion and updated in real-time as new data becomes available.

Q: Can I share timeline insights with my team?

A: Yes! You can screenshot the timeline, copy AI insights, and share them with your team for collaborative analysis.

Q: What if the timeline doesn't match what I remember?

A: Timeline data is based on official game data. If you notice discrepancies, please contact support with the match details.

Getting Help

Support Resources

• Documentation: Check our comprehensive guides
• Community: Join our Discord for tips and discussions
• Support: Contact us for technical issues

Feature Requests

• Suggest improvements: We value your feedback
• Request new features: Help us prioritize development
• Report bugs: Help us improve the experience

Last Updated: 2025-01-27

Version: 1.0

Need Help?: Contact support or join our community Discord