RCC Broadcast Architecture

Live Leaderboard Engine v2.1 (Alpha Release)

1. Project Overview

This system is a custom broadcast graphics engine built specifically for the Rip Curl Cup Padang Padang Leaderboard Format. It acts as a middleware state engine, ingesting local heat data from the Liveheats GraphQL API, calculating a global event state (cross-heat leaderboard), and serving high-performance, real-time HTML/Tailwind graphics to the production switcher.

2. The Competition Format

Phase 1: The Leaderboard

Every invited surfer surfs exactly two heats. Surfers are ranked on a global leaderboard based on their Total Score (the sum of their two highest-scoring waves across both heats combined).

The Cutline ("Needs")

There is no elimination within individual heats. A surfer's "Needs" score represents the single wave score required to mathematically overtake the surfer currently sitting in 4th place overall. If the required score is greater than 10.00, the system automatically triggers a COMBO state.

Phase 2: The Final

The top 4 surfers from the Phase 1 leaderboard advance to the Final, which reverts to a standard single-heat format.

3. System Architecture & Tech Stack

4. The Data Flow & State Engine

Because Liveheats only calculates data for the active heat, our Python backend acts as the master calculator for the global event state.

  1. The Heat Vault (10s Polling): Python queries the Liveheats API for the active heat, parses wave arrays, and locks new waves into a persistent "Heat Vault" tied to the specific heat ID (generating a short tag like R1 H2 for future reference).
  2. The Clock Loop (1s): Runs independently to parse the Liveheats startTime and heatDurationMinutes to calculate the real-time countdown.
  3. The Math Engine: Dynamically sorts every surfer's waves across all their logged heats, sums their Top 2 Event waves, ranks the roster, identifies the 4th-place Cutline, and calculates specific "needs".
  4. Bulletproof Persistence: The raw data dictionary and active Event ID are saved continuously to backend_state.json. If the server reboots, Python loads this file to instantly restore the cumulative leaderboard.
  5. The Payload: Exported to liveheats_rcc.json every second.
  6. The Frontend (200ms): The overlay fetches the JSON payload every 200ms, mapping the DOM and triggering CSS transitions.

5. The Graphics Package

The In-Water Bug

Lower-left lower third. Displays active heat info, clock, and current surfers. Features 3 multiplexed drawers for Wave tracking: Heat All, Heat Top 2, and Event Top 2 (w/ Heat ID).

The Live LB Bug

Compact, right-docked leaderboard listing up to 16 surfers. Draws an Elimination Line under 4th place and actively illuminates surfers currently in the water.

Master Leaderboard

High-impact, full-screen graphic featuring a 3-column layout highlighting the Top 4 Qualifiers, the Elimination Line (5-10), and the remaining field. Features local headshot mapping.

6. Broadcast Playout & Transparency

These graphics are built using HTML/CSS and bypass destructive chroma-keying (green screen) entirely. They utilize true RGBA native alpha transparency to preserve perfect anti-aliasing and soft drop shadows across two playout workflows:

Software Switchers (vMix / OBS)

  • Input: Add URL as a Web Browser input (1920x1080).
  • The engine uses background-color: transparent.
  • CRITICAL: Ensure all Color Key/Chroma Key filters are turned OFF in vMix. The browser input inherently passes alpha.

Hardware Switchers (ATEM)

  • Requires a dedicated playout PC running CasparCG Server.
  • Output via Blackmagic DeckLink PCIe card.
  • Generates zero-latency dual SDI output: Cable 1 (Fill) and Cable 2 (Key).
  • Mated together inside the ATEM via a Downstream Keyer (DSK) with "Pre-Multiplied Key" enabled.

7. Failsafes & The Danger Zone

Live production requires manual overrides when external APIs fail. The Director Dashboard includes: