Synapse - League of Legends Draft Simulator

Inspiration

In professional League of Legends, the draft phase can decide 40% of a match's outcome before the game even starts. Teams spend hours preparing draft strategies, memorizing champion synergies, and studying opponent tendencies. Yet most teams lack tools to practice drafting against realistic scenarios or to evaluate composition strength in real-time.

We were inspired by professional teams' struggle with draft preparation:

Coaches use whiteboards or spreadsheets to simulate drafts - slow and error-prone
Players can't practice drafting outside of scrims - limited reps
No instant feedback on composition quality - have to "feel it out"
Opponent research is manual and time-consuming

We wanted to build a draft simulator that feels like the professional tournament interface, provides real-time win probability predictions, and generates comprehensive strategic reports to help teams prepare for competitive matches.

What it does

Synapse is a professional League of Legends draft simulator and strategy tool designed for competitive team preparation.

Professional Draft Interface:

Mirrors the tournament draft experience with blue side and red side
Alternating pick and ban phases following official competitive format
Real-time phase indicators: ban phase → pick phase → complete
Role selection system ensures proper team composition (Top, Jungle, Mid, ADC, Support)
Champion search with instant filtering across 160+ champions
Visual feedback: banned champions grayed out, picked champions highlighted

Live Win Probability Calculation:

Win probability updates in real-time as you draft
Based on champion synergies, counter matchups, and professional match data
Factors in side advantage: blue side starts at 52%, red side at 48%
Each pick impacts the projection by 3-5% based on champion strength and synergy
Watch the percentage shift as you build compositions
Displays both your team's win rate and opponent's for full picture

AI-Powered Draft Strategy:

Real-time pick suggestions based on current draft state
Recommends champions that synergize with your team composition
Identifies strong counter-picks against enemy picks
Suggests flexible picks when multiple roles are open
Priority ranking: S-tier meta picks, A-tier solid choices, B-tier situational
Explains reasoning: "Strong engage synergy with your support" or "Counters enemy mid laner"

Comprehensive Draft Report:

Generated after completing a draft with full analysis
Draft Grade: S to D based on final calculated win probability
- S-grade: 58%+ (dominant draft with clear advantages)
- A-grade: 54-57% (strong composition, good positioning)
- B-grade: 50-53% (solid draft, winnable with execution)
- C-grade: 46-49% (weak draft, uphill battle)
- D-grade: <46% (poor composition, major disadvantages)

Strategic Analysis:

Team composition breakdown: engage, poke, split-push, team fight, scaling
Win conditions: specific strategies your team should execute to maximize win probability
Power spikes: level 6, two-item spikes, late game scaling points
Key strengths identified based on champion synergies and meta positioning

Matchup Insights:

Lane-by-lane analysis for all 5 positions
Favorable/even/unfavorable ratings per lane with matchup context
Specific tips for each lane: "Play aggressively levels 1-3" or "Respect enemy kill pressure"
Jungle pathing recommendations: where to start, when to gank, which objectives to prioritize
Objective priorities: drake sequencing, Herald timing, Baron setup

Game Phase Recommendations:

Early Game: Vision control, dive opportunities, first objectives (customized to your draft)
Mid Game: Team fight setups, rotations, objective sequencing
Late Game: Split push coordination, Baron setup, win conditions
All recommendations tailored to your specific champions and composition style

How we built it

Frontend Architecture:

Next.js 15 with App Router and Server Actions
TypeScript with strict typing for complex draft state management
Tailwind CSS with custom League of Legends theming (blue/red side colors, champion aesthetics)
Custom React hooks for draft logic and state persistence
Optimistic UI updates for instant feedback on picks/bans
Modal system for champion selection and final draft report

Win Rate Projection System:

Built a custom calculation engine from scratch using professional play data
Base win rates for 160+ champions across 5 roles from patch 15.2
Synergy matrix calculates team composition bonuses:
- Engage comp bonus: Leona + Jarvan IV = +2% win rate
- Split push comp: Fiora + Twisted Fate = +1.5% win rate
Counter-pick penalties when enemy picks hard counter your champions:
- Enemy picks Malphite into your Yasuo = -3% win rate
Side advantage factored in: blue side 52% baseline, red side 48%
Weighted champion impact: each pick has ~1.0 weight on final percentage
Real-time calculation evaluates 25 champion combinations per draft state
Runs instantly (sub-100ms) despite complex matrix calculations

Draft State Management:

React state with validation for pick/ban rules
Enforces competitive draft order: 3 bans → 3 picks → 2 bans → 2 picks (alternating)
Prevents illegal moves: can't pick banned champions, can't duplicate picks
Role assignment tracking to ensure proper team composition
Draft history persistence: save incomplete drafts, return later
Undo/redo functionality for practice drafts

AI Report Generation:

Integrated OpenAI GPT-4o for comprehensive draft analysis
Structured JSON prompts ensure consistent report format across drafts
Prompts include: both team compositions, ban context, user's side, patch meta
AI generates lane-specific tips, win conditions, and tactical recommendations
Fallback to calculated mock reports when API unavailable
Mock reports use actual win rate projector for accurate percentages (not hardcoded 50%)

Database Layer:

Supabase for draft history and champion metadata storage
Stores completed drafts for later review and trend analysis
Champion data includes: name, role, image, base win rate, synergies, counters
User draft statistics: most picked champions, average draft grade, win probability trends

Development Tools:

JetBrains WebStorm for TypeScript development and refactoring
Junie AI for code generation, bug fixes, and algorithm optimization
Git with atomic commits for clean version history
Vercel for deployment with edge functions

Challenges we ran into

1. Win Probability Calculation Accuracy: Initial version had win probability stuck at 52% regardless of picks. The champion impact weight was too low (0.5), making changes invisible. We doubled it to 1.0 so each strong pick shifts probability by 3-5%, making the feedback meaningful.

2. Draft Grading Logic: Early implementation gave every complete draft an "A" grade based purely on pick count (5 picks = A). We redesigned grading to use actual calculated win probability, so a 45% win rate gets a C/D while 58%+ gets an S.

3. Synergy Matrix Complexity: Calculating synergies for 160 champions × 5 roles = 800 combinations is complex. We used a sparse matrix approach: only store meaningful synergies (Yasuo + Malphite knockup combo) and default to 0 for unrelated pairs.

4. Counter-Pick Detection: Identifying counter matchups requires role-specific knowledge. We built a counter matrix that considers lane matchups specifically (top vs top, mid vs mid) rather than generic champion counters.

5. Real-time Performance: Recalculating win probability after every pick across 25 champion combinations could lag. We optimized with memoization and incremental updates (only recalculate affected parts, not entire composition).

6. Draft Order Validation: Ensuring legal draft sequences (can't pick before banning, must alternate sides) required careful state machine design. Edge cases like role swaps mid-draft needed special handling.

7. AI Report Consistency: OpenAI responses varied in structure and quality. We implemented structured JSON output format with strict schemas and fallback to calculated reports when AI hallucinated or gave vague advice.

Accomplishments that we're proud of

1. Accurate Win Probability System: The win rate projector actually works and provides meaningful feedback. Strong compositions show 55-60%, weak drafts show 40-45%. It's not random - it reflects real champion synergies and counters.

2. Dynamic Draft Grading: Grades now reflect actual composition quality. You can't get an S-grade with a mediocre draft - you need 58%+ win probability. Makes the feedback meaningful and motivating.

3. Professional-Quality UI: The draft interface looks and feels like the real LCS/LEC broadcast. Blue side, red side, champion portraits, ban overlays, role indicators - it's polished and authentic.

4. Comprehensive Strategic Reports: The AI-generated reports aren't generic fluff. They provide specific, actionable advice: "Play aggressively levels 1-3 in top lane" or "Secure third drake for soul point before 24 minutes."

5. Real-time Calculation Performance: Despite complex matrix math, win probability updates instantly (<100ms). Users get immediate feedback on every pick without lag.

6. OpenAI Integration with Smart Fallback: When API is available, reports use GPT-4o for natural language analysis. When unavailable, calculated mock reports maintain quality using the actual win rate engine.

7. Extensible Architecture: Adding new champions, updating synergy matrices, or adjusting patch meta is straightforward. The system is designed for ongoing balance updates.

What we learned

1. User Feedback Needs to Be Obvious: Subtle changes (0.5% win rate shift) aren't perceived by users. Making champion impact more dramatic (3-5% shifts) made the tool feel responsive and trustworthy.

2. Grading Systems Need Meaningful Spread: If everyone gets an A, grades are meaningless. Spreading grades across S/A/B/C/D based on actual performance creates motivation and reflects reality.

3. Professional Data is Essential: Base win rates from pro play (patch 15.2) are more reliable than solo queue data. Competitive meta differs from ladder meta significantly.

4. Synergies > Individual Strength: A team of 5 S-tier champions without synergy can lose to a coordinated B-tier composition. The synergy matrix was more impactful than individual champion ratings.

5. Side Advantage Matters: Blue side's 52% baseline win rate (first pick, better Baron access) is real in competitive play. Factoring this in made predictions more accurate.

6. AI Needs Structure: Unstructured prompts to OpenAI produced inconsistent, sometimes hallucinated advice. JSON schemas with strict formatting dramatically improved output quality.

7. Fallback Systems Prevent Frustration: API downtime shouldn't break the app. Having calculated mock reports as fallback meant users always get value, even if AI is unavailable.

What's next for Synapse

1. Historical Draft Database: Import professional match drafts from LCS, LEC, LCK, LPL. Allow users to replay famous drafts, see what pros picked, and analyze their strategies.

2. Opponent Scouting: Input opponent team name, get analysis of their draft tendencies. "Team X bans Thresh 80% of games" or "Their mid laner has 90% win rate on Azir."

3. Draft Practice Mode with AI Opponent: Practice drafting against an AI that simulates real team strategies. The AI knows meta picks, counter-picks, and can adapt to your draft.

4. Patch Meta Tracking: Automatically update win rates, synergies, and counters when new patches release. Track how the meta evolves over time.

5. Team Draft History: Save your team's drafts, track composition preferences, identify patterns in your drafting style. "You pick engage comps 65% of the time."

6. Scrim Integration: Connect to scrim results. See which of your practice drafts actually won/lost and refine the win rate model based on your team's performance.

7. Mobile App: Practice drafting on mobile during downtime. Coaches can review draft scenarios on tablets during team meetings.

8. Multiplayer Draft Practice: Two teams draft simultaneously in real-time, simulating tournament environment with coaches and players.

9. Role Flex Detection: Advanced logic to identify when champions can flex roles (Swain mid/support, Graves top/jungle) and adjust win probability accordingly.

10. Video Replay Integration: Link drafts to VODs. After a draft, automatically find professional matches with similar compositions and watch how they played it out.

11. Tournament Bracket Simulation: Simulate entire tournament brackets with draft phases. Predict which teams advance based on draft quality and execution.

Synapse aims to become the standard draft preparation tool for competitive League of Legends teams - from amateur to professional level.