Leaderboard

Displays ranked list of players with scores.

Why Use This

• Performance optimized — Handles 1000+ entries with virtual scrolling
• Real-time ready — Efficient updates for live leaderboards
• Highlight support — Emphasize current user's position

When to Use

✅ Tournament rankings ✅ High score tables ✅ Competition standings ✅ Achievement rankings

Usage

<script setup>
import { FkLeaderboard } from '@fortune-kit/components'

const entries = [
  { id: '1', rank: 1, name: 'Player1', score: 10000, avatar: '/avatars/1.png' },
  { id: '2', rank: 2, name: 'Player2', score: 8500 },
  { id: '3', rank: 3, name: 'Player3', score: 7200 }
]
</script>

<template>
  <FkLeaderboard
    :entries="entries"
    highlight-id="2"
    show-change
  />
</template>

Props

Prop	Type	Default	Description
entries	LeaderboardEntry[]	Required	Array of player entries
highlightId	string	—	ID of entry to highlight (current user)
showChange	boolean	false	Show rank change indicators
maxVisible	number	—	Limit visible entries

Entry Type

interface LeaderboardEntry {
  id: string
  rank: number
  name: string
  score: number
  avatar?: string
  change?: 'up' | 'down' | 'same'
}

Examples

Basic Leaderboard

<FkLeaderboard :entries="topPlayers" />

With Current User Highlighted

<FkLeaderboard
  :entries="entries"
  :highlight-id="currentUser.id"
/>

With Rank Changes

<FkLeaderboard
  :entries="entriesWithChanges"
  show-change
/>

Limited Display

<FkLeaderboard
  :entries="allPlayers"
  :max-visible="10"
/>

Performance

Large Lists

For 100+ entries, consider pagination:

<FkLeaderboard
  :entries="paginatedEntries"
  :max-visible="50"
/>
<button @click="loadMore">Load More</button>

Real-time Updates

Batch updates for frequent changes:

const pending = []
socket.on('score-update', (data) => pending.push(data))

setInterval(() => {
  if (pending.length) {
    updateLeaderboard(pending.splice(0))
  }
}, 100) // Batch every 100ms

Styling

/* Custom highlight color */
.my-leaderboard :deep(.fk-leaderboard__row--highlight) {
  background: linear-gradient(90deg, #6366f1 0%, transparent 100%);
}

/* Custom medal styling */
.my-leaderboard :deep(.fk-leaderboard__medal) {
  font-size: 1.5rem;
}

Accessibility

• Keyboard navigation with ↑/↓ keys
• Screen reader announces rank changes
• High contrast mode support