Tournament Leaderboard

Usage

import { Leaderboard } from '@wdzyi/ui';

<Leaderboard
  title='Weekend Slots Race'
  players={standings}
  you={player.id}
  prizes={[500, 250, 100, 50, 25]}
  endsAt={tournament.endsAt}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

playersLeaderboardPlayer[]

Everyone in it, in any order, each with an id, a name, a character and their points. They’re placed by their points. A sample of seven by default.

youstring = 'you'

Your player’s id. Your row is on a plate and says You, and is pinned at the foot while you’re below the top places.

prizesnumber[]

What each place wins, in dollars, first place first, shown in gold. A place without one shows a dash.

endsAtnumber

When it ends, in ms since 1970, as Date.now() gives it. The countdown says Ended once it has.

titlestring = 'Weekend Slots Race'

Over the table, beside its trophy, and its name for screen readers.

rowsnumber = 5

How many of the top places are always shown. One row more shows the next place, or you.

classNamestring

Added to the table. It’s 420px wide at most, and narrows with the space it’s in.

Notes

• Every row is on one grid: the place’s 24px badge, then 8px on, the player’s avatar, their name and their points, and what the place wins at the right in gold. The first three places are gold, silver and bronze, on their badges and on the plates behind their players’ faces, which take their new place’s metal as they arrive.
• Send new points and everyone is placed again. Points roll up to their new values, and a player who moves slides to their new place over 640ms on a spring; one moving up is lifted over the rows it passes, its shadow settling as it lands. How far they moved shows beside their name for 2.8s, as ▲2 in green or ▼1 in pink. A tie keeps the order players were already in.
• Your row is on a plate with an ink rule down its edge, and lights up for 1.4s as you climb, the only moment it sends a sound, a pop. Below the next place down, it’s pinned at the foot with a break above it for the places between.
• The places stay where they are, with their badges and prizes, and only the players move between them. Screen readers hear when you move up or down, and nothing about anyone else, and the countdown stays quiet to the end, with no colour or pulse.
• With reduced motion, players go straight to their new places and your row doesn’t light up.