Browser-based overlays for Garden State Robot League live streaming production.

A collection of self-contained HTML overlays designed for use as OBS browser sources. No build step required — just static files that work anywhere.

• Standalone overlays — Self-contained HTML files with transparent backgrounds
• Configurable — Settings panels and URL parameters for on-the-fly adjustments
• Consistent branding — Shared color schemes, fonts, and visual style
• Integration-ready — Designed to work with True Finals tournament management
• Low maintenance — Static files, no backend required

Visit the deployed site or open an overlay file in your browser to configure it.

1. In OBS, add a Browser source
2. Set the URL to your overlay (local file or hosted URL)
3. Set dimensions (e.g., 400x450 for Break Timer)
4. Add Custom CSS: body { background: transparent !important; }

break-timer.html?duration=10&label=BRB&color=FF6B6B&hidecontrols=true

GitHub Pages is the simplest way to host these overlays for free.

1. Go to your repository on GitHub
2. Click Settings (gear icon in the top menu)
3. In the left sidebar, click Pages (under "Code and automation")
4. Under Build and deployment:
   • Source: Select Deploy from a branch
   • Branch: Select main (or master)
   • Folder: Select / (root)
5. Click Save

After saving, GitHub will build and deploy your site. This takes 1-2 minutes. Your overlays will be available at:

https://ricklon.github.io/gscrl-obs/
https://ricklon.github.io/gscrl-obs/overlays/break-timer.html

To use a custom domain like obs.gscrl.org:

1. In Pages settings, enter your custom domain
2. Add a CNAME record in your DNS pointing to ricklon.github.io
3. Enable Enforce HTTPS once DNS propagates

1. Go to Cloudflare Pages
2. Click Create a project > Connect to Git
3. Select this repository
4. Build settings:
   • Build command: (leave empty)
   • Build output directory: /
5. Click Save and Deploy

Your overlays will be available at:

https://gscrl-obs.pages.dev/overlays/break-timer.html

Just open the HTML files directly in your browser — no server required.

For a local server (enables localStorage persistence):

npx serve .
# or
python -m http.server 8000

gscrl-obs/
├── index.html                 # Landing page / overlay directory
├── overlays/
│   ├── break-timer.html       # Countdown timer for breaks
│   ├── match-info.html        # (planned) Current match display
│   ├── countdown.html         # (planned) Pre-match countdown
│   ├── lower-third.html       # (planned) Lower third graphic
│   ├── bracket.html           # (planned) Tournament bracket
│   └── sponsors.html          # (planned) Rotating sponsor logos
├── shared/
│   ├── styles.css             # Common styles, CSS variables
│   ├── config.js              # Shared configuration
│   └── utils.js               # Common utilities
├── assets/
│   ├── fonts/                 # Custom fonts
│   ├── logos/                 # Logo files
│   └── sounds/                # Sound effects
├── docs/
│   ├── OBS-SETUP.md           # OBS configuration guide
│   └── CUSTOMIZATION.md       # Theming and customization
└── README.md

Override CSS variables to customize the look:

:root {
  --gscrl-primary: #FF6B6B;    /* Main accent color */
  --gscrl-secondary: #4ECDC4;  /* Secondary accent */
  --gscrl-dark: #1a1a2e;       /* Dark background */
  --gscrl-light: #ffffff;      /* Light text */
  --font-display: 'Russo One', sans-serif;
}

See CUSTOMIZATION.md for detailed theming options.

• OBS Setup Guide — How to add overlays to OBS
• Customization Guide — Theming and branding

• Phase 1: Foundation — Break timer, repo setup, deployment
• Phase 2: Core Overlays — Match info ✓, countdown, lower third
• Phase 3: Integration — True Finals API, WebSocket control
• Phase 4: Polish — Sponsors, sound effects, animations

The Event Info overlay is a versatile, multi-purpose overlay designed to provide general updates, schedule information, sponsor messages, and engagement prompts throughout the streaming event.

• Multiple Content Types: Schedule, Standings, Sponsors, Engagement
• URL Parameter Control: Full configuration via URL parameters
• Settings Panel: Comprehensive customization with localStorage persistence
• Smooth Animations: Professional transitions between content
• Responsive Design: Works on all screen sizes
• Real-time Updates: Clock and timer functionality

Shows upcoming matches with times, weight classes, and round information.

Displays current standings table with competitor names, records, and points.

Rotating sponsor messages with logos, CTAs, and social media links.

Interactive polls and questions for viewer participation.

Basic Schedule:

overlays/event-info.html

Standings View:

overlays/event-info.html?type=standings&event=Summer%20Showdown

Custom Schedule Data:

overlays/event-info.html?schedule=[{"match":"Team%20A%20vs%20Team%20B","time":"15:00","weight":"12lb","round":"Final"}]

Sponsor Message:

overlays/event-info.html?type=sponsor&sponsormessage=Presented%20by%20Our%20Amazing%20Sponsors!

Engagement Prompt:

overlays/event-info.html?type=engagement&prompt=WHO%20WILL%20WIN%20THE%20NEXT%20MATCH?

Complex Configuration:

overlays/event-info.html?event=National%20Championship&type=schedule&schedule=[{"match":"Match%201","time":"14:00","weight":"3lb","round":"Quarterfinal"},{"match":"Match%202","time":"14:30","weight":"12lb","round":"Quarterfinal"}]&standings=[{"name":"Competitor%201","wins":2,"losses":0,"points":6},{"name":"Competitor%202","wins":1,"losses":1,"points":3}]&color=4ECDC4

Press Ctrl+S to open the settings panel for comprehensive configuration:

• General Settings: Event title, status
• Content Settings: Active content type selection
• Schedule Settings: JSON editor for schedule data
• Display Options: Show/hide header, footer
• Styling: Custom accent colors
• Data Management: Import/export configuration

Schedule Data:

[
  {
    "match": "John Doe vs Jane Smith",
    "time": "14:30",
    "weight": "3lb",
    "round": "Quarterfinal"
  }
]

Standings Data:

[
  {
    "name": "John Doe",
    "wins": 3,
    "losses": 1,
    "points": 9
  }
]

Sponsor Data:

[
  {
    "name": "Acme Robotics",
    "message": "Proud sponsor of the event!",
    "logo": "logo.png",
    "url": "https://acme.com",
    "social": "@AcmeRobotics",
    "cta": "Visit our website!"
  }
]

Engagement Data:

[
  {
    "prompt": "WHO WILL WIN THE NEXT MATCH?",
    "options": ["Team A", "Team B"],
    "hashtag": "#GSCRLVote",
    "social": "@GSCRL on Twitter",
    "timer": 60
  }
]

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test in OBS (not just browser)
5. Submit a pull request

MIT License — feel free to use and modify for your own robot combat events.

Garden State Robot League — Website