Score Bar Leaderboard Stats Block for React

Edit PLAYERS: a name, the points, the number of quizzes and the share of answers correct (correct). The rows are sorted and ranked when the module loads; the bar width is the player's points over the highest score, the share text and the headline gap come from the same numbers. To rank on another measure, change points and the unit words in the row.

A share of the total would make every bar short in a long list and hide the gap that matters. Against the leader, the first bar always fills the row, and a bar's length is the answer to "how close is this player?", which is what a leaderboard asks. The text beside each bar says the same ("86% of the leader"), so the bars are decoration.

Weight is the only difference between the bars, because colour can't be relied on across presets and for everyone. The leader's bar is the theme's foreground; the others are a mix of the foreground and the background, which keeps contrast against the light track in every theme.

Yes. The list is ordered and named ("Points this month"); every row says its rank, the player, the context line, the points and the share of the leader in text, and the bars are hidden from assistive technology because they add nothing the text doesn't say. Points and shares sit in bdi elements for right-to-left pages. With reduced motion the bars are drawn at full length at once.

The row keeps its shape: rank, name and context line, then the points and share at the end, and the bar full width under them. The band spans the screen between the rails. Long names are truncated, and nothing scrolls sideways at 320 pixels.