Package: @oddsmith/ui. Class: OsLeaderboardCasino.
Oddsmith is the UI. You provide the data. Construct the class, pass props, mount it, listen for clicks, and destroy it when the page goes away.
npm install @oddsmith/ui lit
lit ^3.3.3 is a peer dependency.
Give the leaderboard an empty DOM node. Do not put <os-leaderboard-casino> in HTML.
<div id="leaderboard"></div>
import { OsLeaderboardCasino } from '@oddsmith/ui/os-leaderboard-casino';
const host = document.getElementById('leaderboard');
const leaderboard = new OsLeaderboardCasino();
leaderboard.mount(host);
With no constructor args, the leaderboard will render with demo campaign, English labels, and default theme.
Type: LeaderboardHostProps. All optional.
| Parameter | Type | If omitted | Required |
|---|---|---|---|
data |
LeaderboardData |
Hardcoded demo campaign | Optional |
theme |
LeaderboardTheme |
Glam defaults | Optional |
labels |
LeaderboardLabels |
English defaults | Optional |
const leaderboard = new OsLeaderboardCasino({
data: yourCampaign,
theme,
labels,
});
leaderboard.mount(host);
You can pass one key at a time. This way you can add a piece at a time.
new OsLeaderboardCasino({ data: yourCampaign });
Pass a .data object to control what the leaderboard renders. Each key is a campaign group: omit it to keep the demo default, pass null to hide that section, pass [] for empty copy, or pass your own values to replace what is shown.
| You send | What happens |
|---|---|
| Omit the key | Keep the built-in default for that part |
null |
Hide that section |
[] (or empty items / links) |
Show the section with empty copy (“No players yet.”) |
| An array | Replace the default array |
An object (hero, stats, …) |
Mix keys inside that object |