Leader board needs 5 finish games to be qualified

public/app.js

@@ -1324,14 +1324,29 @@ async function showLeaderboard() {
     const rows = await r.json();
     const tbody = $('lb-body');
     tbody.innerHTML = '';
-    rows.forEach((row, i) => {
+    let rank = 0, dividerDone = false;
+
+    rows.forEach(row => {
+      // Players below the minimum game count are listed after the ranking,
+      // under a divider, so a newcomer can see how close they are.
+      if (!row.ranked && !dividerDone) {
+        dividerDone = true;
+        const sep = document.createElement('tr');
+        sep.className = 'lb-divider';
+        sep.innerHTML = `<td colspan="8">Not yet ranked — needs ${
+          row.gamesToRank + row.games_played} games</td>`;
+        tbody.appendChild(sep);
+      }
+
       const tr = document.createElement('tr');
+      if (row.ranked) rank++;
+      else tr.className = 'lb-provisional';
       tr.innerHTML = `
-        <td>${i + 1}</td>
+        <td>${row.ranked ? rank : '—'}</td>
         <td>${escHtml(row.username)}</td>
         <td>${row.win_rate != null ? row.win_rate + '%' : '—'}</td>
         <td>${row.games_won}</td>
-        <td>${row.games_played}</td>
+        <td>${row.games_played}${row.ranked ? '' : ` <span class="lb-togo">+${row.gamesToRank}</span>`}</td>
         <td>${row.avg_score ?? '—'}</td>
         <td>${row.bids_won || 0}</td>
         <td>${row.shelemCount || 0}</td>