Drafting (Ban/Pick) - User Guide

Feature: Native Draft Tool (Ban/Pick, Spectator, Streamer overlays)

Locations: Draft lobby/captain/spectator/streamer routes and Livewire views

Overview

RiftSurge includes a native drafting experience for practice and events. It supports team captains, spectators, and streamer-friendly overlays, with timers, ban/pick phases, and live state updates.

Accessing Draft Views

Draft Routes

These routes are available for lobby management and viewing:

• draft.lobby: /draft/{uuid}
• draft.interface: /draft/{uuid}/interface
• draft.view (spectator fallback): /draft/{uuid}
• draft.blue-captain: /draft/{uuid}/blue-captain
• draft.red-captain: /draft/{uuid}/red-captain
• draft.spectator: /draft/{uuid}/spectator
• draft.streamer: /draft/{uuid}/streamer

Provide a valid uuid for an existing DraftLobby to load the appropriate view.

Embedding in Views

Launching From a Page

Use the draft launcher UI to deep-link captains directly to their views:

@if ($scrimDraftLobby)
    

        Start Draft (Blue Captain)
    
@endif

Common links you may surface:

• Blue captain: route('draft.blue-captain', ['uuid' => $uuid])
• Red captain: route('draft.red-captain', ['uuid' => $uuid])
• Spectator: route('draft.spectator', ['uuid' => $uuid])
• Streamer overlay: route('draft.streamer', ['uuid' => $uuid])

Livewire Component Embeds

For full-page Livewire experiences you can embed:

@livewire(App\Livewire\Draft\DraftLobbyView::class, ['uuid' => $lobby->uuid])

Or use route/model-bound variants:

@livewire('draft-interface', ['lobby' => $lobby])

Draft Phases & State

The draft advances through lobby, bans, and picks with explicit turn tracking.

• Turn state: currentTeam, currentAction (pick/ban), actionNumber
• Timer state: secondsRemaining, timerEndsAt
• Selections: bluePicks, redPicks, blueBans, redBans

Livewire listeners keep all connected clients in sync (captains, spectators, streamer overlay).

Roles & Views

• Blue/Red captain views: perform picks/bans, see timers and filters
• Spectator view: watch the draft progress in real time
• Streamer view: configurable overlay (team names, champion names, timer, phase info)

Filters & Champion Search

Draft interfaces include search and role filters to quickly locate champions:

• Filters: search, role, difficulty
• Champion list updates reactively as filters change

Design System & UX

• Use platform components and gradients consistently (AI gradient palette for accents when applicable)
• Maintain clear state indicators: whose turn, timer, current phase
• Keep spectator/streamer UIs uncluttered and legible

Embedding Tips

• Provide deep links for both captains and spectators
• Open captain views in new tabs/windows when launched mid-scrim
• Expose a streamer link with stable overlay layout

Troubleshooting

• Draft doesn’t load: verify DraftLobby exists for the uuid
• Not your turn: UI disables actions until your turn begins
• Timer not ticking: check broadcast/websocket connectivity

Last Updated: 2025-01-27

Version: 1.0

Need Help?: Contact support or join our community Discord