Module-Rust/client/src/components/Leaderboard.jsx

// ── The leaderboard ───────────────────────────────────────────────────────
//
// Per wipe when a wipe is selected, all-time when it is not (R12). The two are
// the same rows summed differently rather than two sets of counters, so they can
// never disagree — which is worth knowing here because it means "All time" is
// not a slower or less accurate answer, it is the same table without a WHERE.
//
// It does NOT poll. A leaderboard moves on the scale of a session; a table that
// re-sorted itself under the reader's cursor every twenty seconds would be worse
// than one that is four minutes old, and the page has a `Refresh` on the tab
// strip for anybody who disagrees.

import { EmptyState, ErrorState, Loading, useAsync } from '../core.js'
import { ago, count, duration, shortId } from '../lib/format.js'
import api from '../api.js'

// `sort` is the API's own vocabulary (`kills`, `deaths`, `npcKills`, `playtime`),
// and the column it maps to is this file's. Keeping them in one list is what
// stops a header that sorts by something other than what it says.
const COLUMNS = [
  { key: 'kills', label: 'Kills', sort: 'kills', value: (r) => count(r.kills) },
  { key: 'deaths', label: 'Deaths', sort: 'deaths', value: (r) => count(r.deaths) },
  { key: 'npcKills', label: 'NPC kills', sort: 'npcKills', value: (r) => count(r.npcKills) },
  { key: 'structures', label: 'Structures', sort: null, value: (r) => count(r.structures) },
  { key: 'playtimeSec', label: 'Played', sort: 'playtime', value: (r) => duration(r.playtimeSec) },
]

export default function Leaderboard({ serverId, wipeId, sort, onSort }) {
  const { data, loading, error } = useAsync(
    () => api.servers.leaderboard(serverId, { wipe: wipeId, sort, limit: 50 }),
    [serverId, wipeId, sort],
  )

  const rows = data ? data.leaderboard : []

  if (loading) return <Loading />
  if (error) return <ErrorState error={error} />

  if (rows.length === 0) {
    return (
      <EmptyState
        title="No scores yet"
        message={
          wipeId
            ? 'Nobody has done anything countable on this wipe yet.'
            : 'This server has not reported anything countable yet.'
        }
      />
    )
  }

  return (
    <div style={{ overflowX: 'auto' }}>
      <table className="sans" style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.86rem' }}>
        <thead>
          <tr style={{ textAlign: 'left', color: 'var(--dim)', fontSize: '0.72rem', letterSpacing: '0.08em' }}>
            <th style={{ ...cell, textTransform: 'uppercase' }}>Player</th>
            {COLUMNS.map((column) => (
              <th key={column.key} style={{ ...cell, textAlign: 'right', textTransform: 'uppercase' }}>
                {column.sort ? (
                  <button
                    type="button"
                    onClick={() => onSort(column.sort)}
                    aria-label={`Sort by ${column.label}`}
                    style={{
                      cursor: 'pointer',
                      background: 'none',
                      border: 'none',
                      padding: 0,
                      font: 'inherit',
                      letterSpacing: 'inherit',
                      textTransform: 'inherit',
                      color: column.sort === sort ? 'var(--accent-bright)' : 'var(--dim)',
                    }}
                  >
                    {column.label}
                  </button>
                ) : (
                  column.label
                )}
              </th>
            ))}
            <th style={{ ...cell, textAlign: 'right', textTransform: 'uppercase' }}>Last seen</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row, index) => (
            <tr key={row.steamId} style={{ borderTop: '1px solid var(--line-soft, var(--line))' }}>
              <td style={cell}>
                <span style={{ color: 'var(--dim)', marginRight: 8 }}>{index + 1}</span>
                {/* A player this module has never seen NAMED is shown by the tail
                    of their id rather than as a blank: the row is real, and a
                    nameless one reads as a rendering fault. */}
                <strong style={{ color: 'var(--ink)' }}>{row.name || shortId(row.steamId)}</strong>
              </td>
              {COLUMNS.map((column) => (
                <td key={column.key} style={{ ...cell, textAlign: 'right' }}>
                  {column.value(row)}
                </td>
              ))}
              <td style={{ ...cell, textAlign: 'right', color: 'var(--dim)' }}>{ago(row.lastSeen)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

const cell = { padding: '8px 10px', whiteSpace: 'nowrap' }