GameLeaderboard

Methods

.resultCallback(shell)

.define(tag, registry)

.subscribe(context, callback)

Shadow DOM Parts

Displays a leaderboard table showing the best and worst scores. Fetches data from the score service when the game enters the result scene.

Behavior

When the game enters the result state, the component automatically fetches leaderboard data by calling scores.fetchBest(best) and scores.fetchWorst(worst) in parallel. A PendingTaskEvent is dispatched to expose the in-flight promise to any external loading coordinator.

The leaderboard re-fetches each time a new result is reached (but not on repeated visits to the same result).

Attributes

score-label

string -- Column header for the score column. Defaults to "Score".

<game-leaderboard score-label="JND"></game-leaderboard>

best

long -- Number of top scores to show. Defaults to 3. Set to 0 to omit the top section entirely.

worst

long -- Number of bottom scores to show. Defaults to 3. Set to 0 to omit the bottom section entirely.

Properties

.formatScore

set (function) — Override for formatting leaderboard scores. Receives the full score entry object. If not set, the component uses the shell's formatScoreSignal (i.e. shell.formatScore) with entry.score, which is sufficient for most cases.

Only set this if you need fields beyond entry.score:

const lb = document.querySelector("game-leaderboard");
lb.formatScore = (entry) => `${entry.score}ms`;
// Useful when combining fields:
lb.formatScore = (entry) => `${entry.score}ms (${entry.name})`;

Events Dispatched

pending-task

Dispatched when the leaderboard data is being fetched. The promise is exposed so external loading coordinators can track completion.

Histogram

The score histogram is provided by a separate <game-score-histogram> component, not by <game-leaderboard> itself. Place both inside the result overlay if you want both.

Signal Access

Usage

<game-leaderboard></game-leaderboard>

See the Scoring guide for how to configure the score service.