About
Renders a sorted score table. Entries are automatically ordered by score descending.
Supports a max-entries limit and highlight-id to visually
emphasize a specific row. Data is injected programmatically via setEntries().
Basic Usage
<ars-leaderboard></ars-leaderboard>
const board = document.getElementById('basic-board');
board.setEntries([
{ id: 'a', name: 'Alice', score: 1250 },
{ id: 'b', name: 'Bob', score: 3400 },
{ id: 'c', name: 'Carol', score: 2100 },
]);
Highlighted Row
<ars-leaderboard highlight-id="player-2"></ars-leaderboard>
Max Entries (Top 5)
<ars-leaderboard max-entries="5"></ars-leaderboard>
With Meta Column
board.setEntries([
{ id: 'p1', name: 'Alice', score: 1250, meta: 'Level 12' },
{ id: 'p2', name: 'Bob', score: 3400, meta: 'Level 24' },
{ id: 'p3', name: 'Carol', score: 2100, meta: 'Level 18' },
]);
Interactive Controls
Theme Toggle
Usage
<ars-leaderboard
id="leaderboard"
max-entries="10"
highlight-id="player-1"
></ars-leaderboard>
<script type="module">
import { ArsLeaderboard } from '/dist/components/ars-leaderboard/ars-leaderboard.js';
const board = document.getElementById('leaderboard');
board.setEntries([
{ id: 'player-1', name: 'Alice', score: 3400, meta: 'Level 24' },
{ id: 'player-2', name: 'Bob', score: 2100 },
{ id: 'player-3', name: 'Carol', score: 1250, meta: 'Level 12' },
]);
// Highlight a different row
board.highlightId = 'player-2';
</script>