Credit to spacemanspumoni for the original ticker.
Renders a 1920x1080 ticker with XBL scores and stats across the bottom of the screen. This ticker is meant for use in OBS (or similar broadcasting software).
How to use the ticker in your broadcast: link
In your broadcasting software, add a browser source pointed to either:
- https://xblbaseball.github.io/ticker/ for a small bar at the bottom of the screen
- https://xblbaseball.github.io/ticker/news for the full sports news style frame
Put the browser layer below your content.
By default, you'll see regular season games and stats. If you want playoff games and stats, use one of these links:
- Every league in playoffs: https://xblbaseball.github.io/ticker/?xbl-playoffs=true&aaa-playoffs=true&aa-playoffs=true
- Only AA in playoffs: https://xblbaseball.github.io/ticker/?aa-playoffs=true
We load every single score and marquee element into the page on the first load, then we use CSS animations (with overflow: hidden) to scroll through them. The animations are programmatically generated beforehand using the calc-keyframes.py script, which does all the math to make sure animation keyframes make sense and are mostly synced up.
You'll need Node available in the dev environemnt of your choice.
First, run the development server:
npm i
npm run devOpen http://localhost:3000 with your browser to see the result. The page auto-updates as you edit files. OBS uses a Chromium renderer, so we recommend you do the same when testing changes.
Open http://localhost:3000/news to view the larger ticker rendered.
You'll need Node and Python 3 available in the development environment of your choice.
To see the same static HTML, CSS, JS files that are served on GH Pages, you need to:
- Build the site.
npm i
npm run build- Serve the
out/directory. An easy way to do so is:
python3 -m http.server -d out 8000- Navigate Chrome to http://localhost:8000
If the models in the stats repo have changed, collect the new JSON schemas and rebuild our TS type interfaces.
# download new schemas and turn the JSON schemas into TS interfaces
npm run typesThen commit the changes to src/typings.