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

// ── Who is on the server right now ────────────────────────────────────────
//
// Read from the presence BOARD, not counted from connect and disconnect events:
// the bridge re-sends the whole board on every connect and every sixty seconds,
// so this is right even after the website has missed something (PROTOCOL.md
// §8.3). Counting transitions instead would drift, and drift in the direction
// people notice — players who never left.
//
// It polls with the feed, because "who is on" is the one thing on this page that
// is a live question.

import { ErrorState, Loading } from '../core.js'
import Empty from './Empty.jsx'
import { duration, shortId } from '../lib/format.js'
import usePolled from '../hooks/usePolled.js'
import api from '../api.js'

export default function Online({ serverId, online }) {
  const { data, error, loading } = usePolled(() => api.servers.online(serverId), {
    key: serverId,
    intervalMs: 20_000,
  })

  const players = data ? data.players : []

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

  // Nothing names who is online by default (the org lead's rule). Below the
  // operator's audience the server answers a count and no names, and the page
  // says so — an empty list here would read as "nobody is on", which is a
  // different claim and a false one.
  if (data && data.hidden) {
    const count = Number(data.count) || 0
    return (
      <Empty
        title={online ? `${count.toLocaleString()} ${count === 1 ? 'player' : 'players'} online` : 'The server is offline'}
        message={hiddenMessage(data.audience)}
      />
    )
  }

  if (players.length === 0) {
    return (
      <Empty
        title={online ? 'Nobody is on' : 'The server is offline'}
        message={
          online
            ? 'The server is up and the island is empty. Somebody has to be first.'
            : 'Presence is the one thing on this page that cannot be answered from the record — it is who is connected now, and nothing is.'
        }
      />
    )
  }

  return (
    <>
      {/* A board is the last one that ARRIVED, and an unreachable sidecar does not
          clear it — deliberately, because the rows are still the best answer
          anybody has. But presented bare they read as "these people are on right
          now", which is the one thing an offline server cannot be saying. The
          page walk found this with a fixture server whose header said Offline
          above three apparently-connected players. */}
      {!online && (
        <p className="sans" style={{ color: 'var(--dim)', fontSize: '0.8rem', marginTop: 0 }}>
          This server is offline. Below is the last board it sent, not who is on it now.
        </p>
      )}
      <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
      {players.map((player) => (
        <li
          key={player.steamId}
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'baseline',
            gap: 12,
            padding: '8px 0',
            borderBottom: '1px solid var(--line-soft, var(--line))',
          }}
        >
          <span>
            <strong style={{ color: 'var(--ink)' }}>{player.name || shortId(player.steamId)}</strong>
            {/* Sleeping is not idle and not offline — a sleeping player's body is
                in the world and can be killed, which is why the board carries the
                flag at all. */}
            {player.sleeping && (
              <span className="sans" style={{ color: 'var(--dim)', fontSize: '0.76rem' }}> · sleeping</span>
            )}
          </span>
          {/* `connectedAt` is absent for a player who was already on when the
              plugin loaded — an unknown session length, which is not a session of
              no length. Saying nothing is the honest render of that. */}
          <span className="sans" style={{ color: 'var(--dim)', fontSize: '0.78rem', whiteSpace: 'nowrap' }}>
            {player.connectedAt ? `on for ${sessionSoFar(player.connectedAt)}` : ''}
          </span>
          </li>
        ))}
      </ul>
    </>
  )
}

/** How long a player has been on, from the DATETIME the board reported. */
function sessionSoFar(connectedAt) {
  const since = Date.parse(connectedAt)
  if (Number.isNaN(since)) return ''
  return duration((Date.now() - since) / 1000)
}

/**
 * Why something was withheld, in words a visitor can act on.
 *
 * `what` completes the sentence — "who they are", "what players did". The
 * audience is the operator's (`staff` unless widened), and only `signed_in` is
 * something a visitor can do anything about.
 */
export function hiddenMessage(audience, what = 'who they are') {
  if (audience === 'signed_in') return `Sign in to see ${what}.`
  if (audience === 'public') return `This site is not showing ${what} right now.`
  return `Only this site’s staff can see ${what}.`
}