vimp-engine 0.19.0 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vimp-engine",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "description": "VIMP — движок-приложение (мастер, P2P-транспорт, Worker-хост, мета, MVC-каркас клиента)",
   "license": "MIT",
   "repository": {

package/src/client/components/controller/Lobby.js

@@ -27,6 +27,7 @@ export default class LobbyCtrl {
     this._model = model;
     this._view = view;
     this._clock = clock;
+    this._periods = [];
 
     this.publisher = new Publisher();
 
@@ -37,6 +38,12 @@ export default class LobbyCtrl {
     vp.on('visible', 'pingHost', this);
     vp.on('join', 'join', this);
     vp.on('show-tab', 'showTab', this);
+    vp.on('show-period', 'showPeriod', this);
+
+    // активная игра и открытый срез рейтинга (rank-periods): запрос за
+    // лидербордом всегда несёт обе координаты, а меняется каждый раз одна
+    this._gameId = null;
+    this._period = null;
   }
 
   // показывает лобби и запрашивает первую страницу
@@ -69,13 +76,47 @@ export default class LobbyCtrl {
     this._view.showTab(tab);
   }
 
+  // срез рейтинга: подсветить кнопку и перезапросить список. Данных за день
+  // и за месяц у клиента нет — это другой ответ сервера, а не другая
+  // сортировка того же (rank-periods)
+  showPeriod(period) {
+    if (period === this._period) {
+      return;
+    }
+
+    this._period = period;
+    this._view.setPeriod(period, this._titleOf(period));
+
+    if (this._gameId !== null) {
+      this.publisher.emit('leaderboard-needed', {
+        gameId: this._gameId,
+        period,
+      });
+    }
+  }
+
+  // подпись среза для заголовка списка; неизвестный id остаётся без подписи
+  _titleOf(period) {
+    return this._periods.find(item => item.id === period)?.title ?? '';
+  }
+
   // вызывается main.js при смене #lobby-game (селектор игры вне этого MVC),
   // а также один раз при открытии лобби для активной по умолчанию игры —
   // Leaderboard всегда готов заранее, до того как пользователь откроет
   // вкладку (см. класс-комментарий выше)
   gameChanged(gameId, title) {
+    this._gameId = gameId;
     this._view.setGameTitle(title);
 
-    this.publisher.emit('leaderboard-needed', gameId);
+    this.publisher.emit('leaderboard-needed', { gameId, period: this._period });
+  }
+
+  // срезы рейтинга и открытый по умолчанию (main.js передаёт их из
+  // lobbyConfig): контроллер не знает их наизусть, чтобы список срезов
+  // правился в конфиге, а не здесь
+  setPeriods(periods, defaultPeriod) {
+    this._periods = periods || [];
+    this._period = defaultPeriod;
+    this._view.setPeriod(defaultPeriod, this._titleOf(defaultPeriod));
   }
 }

package/src/client/components/model/Stat.js

@@ -1,27 +1,67 @@
 import Publisher from '../../../lib/Publisher.js';
+import { nickKey } from '../../../lib/validators.js';
 
 // Singleton StatModel
 
 let statModel;
 
 export default class StatModel {
-  constructor(data) {
+  // data — params схемы игры; deps — то, чего у модуля своего нет: топ,
+  // привезённый хостом, свой gameId и свой ник (режим 'leaderboard')
+  constructor(data, deps = {}) {
+    // Синглтон переиспользуется, но НЕ замораживается: runModules зовётся на
+    // каждый вход в матч (порт CONFIG_DATA), и вернуть старый экземпляр
+    // как есть значило бы играть в snakes с параметрами tanks — режим,
+    // период и число строк приезжают из схемы КОНКРЕТНОЙ игры
     if (statModel) {
+      statModel._configure(data, deps);
+
       return statModel;
     }
 
     statModel = this;
 
+    this.publisher = new Publisher();
+    this._configure(data, deps);
+  }
+
+  // всё, что зависит от схемы игры и её сервисов: выделено из конструктора
+  // ровно затем, чтобы переиспользованный синглтон обновлялся, а не врал
+  _configure(data, deps = {}) {
     this._heads = data.heads;
     this._bodies = data.bodies;
     this._sortList = data.sortList;
-    this.publisher = new Publisher();
+
+    // snakes-v3 этап 4: режим 'leaderboard' — по Tab показывается не
+    // таблица комнаты, а глобальный топ игры. Данные хоста в этом режиме не
+    // рисуются (хост их и не шлёт), список приезжает портом ACCOLADES_DATA
+    this._mode = data.mode ?? null;
+    this._period = data.period ?? 'day';
+    this._limit = data.limit ?? 10;
+
+    // сервисы движка, а не сеть: топ уже привезён хостом (см.
+    // client/lib/accolades.js), свой gameId знает клиентское ядро
+    this._accolades = deps.accolades ?? null;
+    this._localPlayer = deps.localPlayer ?? null;
+    this._getNick = deps.getNick ?? (() => null);
+
+    this._rows = [];
+  }
+
+  get isLeaderboard() {
+    return this._mode === 'leaderboard';
   }
 
   // открывает статистику
   open() {
     this.publisher.emit('open');
     this.publisher.emit('mode', { name: 'stat', status: 'opened' });
+
+    if (this.isLeaderboard) {
+      // сети здесь нет вовсе: рисуется последняя рассылка хоста, а
+      // следующая перерисует список сама (см. applyAccolades)
+      this.refreshLeaderboard();
+    }
   }
 
   // закрывает статистику
@@ -32,6 +72,11 @@ export default class StatModel {
 
   // обновляет данные статистики
   update(data) {
+    // в режиме 'leaderboard' данные комнаты не рисуются вовсе
+    if (this.isLeaderboard) {
+      return;
+    }
+
     const tBodiesData = data[0];
     const tHeadData = data[1];
     const fullStatFlag = data[2];
@@ -74,4 +119,80 @@ export default class StatModel {
       }
     }
   }
+
+  // пришла новая рассылка мест и топа (порт ACCOLADES_DATA). Перерисовывать
+  // список стоит только пока статистика открыта? — нет: сборка строк это
+  // десяток объектов, а держать модель в актуальном виде дешевле, чем
+  // объяснять, почему первый Tab показывает вчерашнее
+  applyAccolades() {
+    if (this.isLeaderboard) {
+      this.refreshLeaderboard();
+    }
+  }
+
+  // Пересобирает список из того, что привёз хост. Ни одного запроса: в
+  // матче клиент с мастером не разговаривает (см. client/lib/accolades.js).
+  // Пустой список до первой рассылки — нормальное состояние
+  refreshLeaderboard() {
+    if (!this._accolades) {
+      return;
+    }
+
+    const board = this._accolades.boardOf(this._period);
+    const rows = board.slice(0, this._limit).map(row => ({
+      place: row.place,
+      nick: row.nick,
+      score: row.score,
+      isSelf: false,
+    }));
+
+    this._rows = this._withSelf(rows);
+
+    this.publisher.emit('leaderboard', this._rows);
+  }
+
+  // Своя строка: если игрок в топе — подсвечивается на своём месте, если
+  // нет — заменяет последнюю (решение пользователя 7). Неранжированный за
+  // период получает прочерк вместо места и свои очки (то есть 0).
+  //
+  // `rows` здесь ВСЕГДА чистый топ от хоста, а не результат прошлого прохода:
+  // подставленная своя строка в него не попадает, и сравнение по нику
+  // поэтому честное. Раньше список пересобирался поверх самого себя, и
+  // синтетическая строка выдавала себя за строку из топа — своё место потом
+  // не обновлялось никогда
+  _withSelf(rows) {
+    const nick = this._getNick();
+    const lower = nick ? nickKey(nick) : null;
+    const marked = rows.map(row => ({
+      ...row,
+      isSelf: lower !== null && nickKey(row.nick) === lower,
+    }));
+
+    if (marked.some(row => row.isSelf)) {
+      return marked;
+    }
+
+    // в топе игрока нет — его собственное место знает только рассылка хоста
+    const myId = this._localPlayer?.id ?? null;
+    const mine = myId === null ? null : this._accolades.selfOf(myId, this._period);
+
+    if (!mine || !nick) {
+      return marked;
+    }
+
+    const self = {
+      place: mine.place ?? null,
+      nick,
+      score: mine.score ?? 0,
+      isSelf: true,
+    };
+
+    if (marked.length < this._limit) {
+      marked.push(self);
+    } else {
+      marked[this._limit - 1] = self;
+    }
+
+    return marked;
+  }
 }

package/src/client/components/view/Lobby.js

@@ -36,6 +36,15 @@ export default class LobbyView {
     this._leaderboardTotal = document.getElementById(elems.leaderboardTotalId);
     this._myPlacement = document.getElementById(elems.myPlacementId);
 
+    // кнопки срезов рейтинга (rank-periods): id периода -> элемент. Кнопки
+    // объявлены конфигом, а не захардкожены здесь, чтобы срез можно было
+    // убрать или добавить в одном месте
+    this._periodBtns = new Map(
+      Object.entries(elems.periodBtnIds || {})
+        .map(([period, id]) => [period, document.getElementById(id)])
+        .filter(([, el]) => el),
+    );
+
     // футер лобби: содержимое статично на всё время жизни вкладки, поэтому
     // пишется здесь, а не через модель и publisher
     const version = document.getElementById(elems.versionId);
@@ -56,6 +65,10 @@ export default class LobbyView {
     // игроков, чем лимит)
     this._leaderboardLimit = 0;
 
+    // заголовок открытого среза ("<TITLE> TOP-N — TODAY"): подпись, а не
+    // источник правды, срез хранит модель
+    this._periodTitle = '';
+
     // ник вызывающего (lobby-page-plan, code review M4-остаток) — задаётся
     // main.js один раз при открытии лобби; используется, чтобы решить,
     // виден ли вызывающий уже в отрисованном топе (по нику, не по числу
@@ -86,6 +99,10 @@ export default class LobbyView {
     this._tabServersBtn.onclick = () => this.publisher.emit('show-tab', 'servers');
     this._tabLeaderboardBtn.onclick = () => this.publisher.emit('show-tab', 'leaderboard');
 
+    for (const [period, btn] of this._periodBtns) {
+      btn.onclick = () => this.publisher.emit('show-period', period);
+    }
+
     this._mPublic = model.publisher;
     this._mPublic.on('list', 'renderList', this);
     this._mPublic.on('ping-update', 'updatePing', this);
@@ -118,6 +135,17 @@ export default class LobbyView {
     this._selfNick = nick || '';
   }
 
+  // подсвечивает открытый срез рейтинга и запоминает его подпись
+  // (rank-periods). Рисовать список здесь нечем: данные среза приезжают
+  // отдельным запросом, и до ответа список чистится моделью
+  setPeriod(period, title) {
+    this._periodTitle = title || '';
+
+    for (const [id, btn] of this._periodBtns) {
+      btn.classList.toggle('active', id === period);
+    }
+  }
+
   // переключает вкладки Active Servers / Leaderboard (lobby-page-plan)
   showTab(tab) {
     const showLeaderboard = tab === 'leaderboard';
@@ -130,7 +158,10 @@ export default class LobbyView {
 
   // рендер топ-N + позиции вызывающего (lobby-page-plan)
   renderLeaderboard({ leaderboard, total, myPlacement, loaded = true }) {
-    this._leaderboardTitle.textContent = `${this._gameTitle.toUpperCase()} TOP-${this._leaderboardLimit}`;
+    const period = this._periodTitle ? ` — ${this._periodTitle}` : '';
+
+    this._leaderboardTitle.textContent =
+      `${this._gameTitle.toUpperCase()} TOP-${this._leaderboardLimit}${period}`;
     this._leaderboardTotal.textContent = `Total: ${total} players`;
 
     this._leaderboardList.textContent = '';

package/src/client/components/view/Stat.js

@@ -17,6 +17,8 @@ export default class StatView {
     const { elems, params } = config;
 
     this._stat = document.getElementById(elems.stat);
+    // контейнер списка глобального топа — только в режиме 'leaderboard'
+    this._leaderboard = null;
 
     // DOM scoreboard генерируется по схеме игры: произвольное число
     // команд (bodies) и колонок (columns)
@@ -31,12 +33,24 @@ export default class StatView {
     this._mPublic.on('tHead', 'updateTableHead', this);
     this._mPublic.on('tBody', 'updateTableBody', this);
     this._mPublic.on('clearBodies', 'clearBodies', this);
+    this._mPublic.on('leaderboard', 'updateLeaderboard', this);
   }
 
   // генерирует шапку и таблицы по схеме (замена хардкода stat.pug)
   _buildStat(params) {
     const { columns, bodies } = params;
 
+    // snakes-v3 этап 4: режим 'leaderboard' — один список глобального топа
+    // вместо шапки и таблиц команд. Строки рисует updateLeaderboard, здесь
+    // заводится только контейнер
+    if (params.mode === 'leaderboard') {
+      this._leaderboard = document.createElement('div');
+      this._leaderboard.className = 'stat-leaderboard';
+      this._stat.appendChild(this._leaderboard);
+
+      return;
+    }
+
     const head = document.createElement('div');
 
     head.className = 'stat-head';
@@ -77,6 +91,35 @@ export default class StatView {
     this._stat.appendChild(tables);
   }
 
+  // перерисовывает список глобального топа (режим 'leaderboard'):
+  // место · ник · очки, своя строка помечена is-self. Список короткий и
+  // приходит целиком — точечное обновление строк тут не окупается
+  updateLeaderboard(rows) {
+    if (!this._leaderboard) {
+      return;
+    }
+
+    this._leaderboard.textContent = '';
+
+    for (const row of rows) {
+      const line = document.createElement('div');
+
+      line.className = row.isSelf ? 'stat-row is-self' : 'stat-row';
+
+      // неранжированный за период игрок места не имеет — прочерк вместо
+      // числа честнее, чем выдуманная позиция
+      for (const value of [row.place ?? '—', row.nick, row.score]) {
+        const cell = document.createElement('span');
+
+        // String(): ноль очков — это «0», а не пустая ячейка
+        cell.textContent = String(value);
+        line.appendChild(cell);
+      }
+
+      this._leaderboard.appendChild(line);
+    }
+  }
+
   // открывает статистику
   open() {
     this._stat.style.display = 'block';

package/src/client/lib/accolades.js

@@ -0,0 +1,56 @@
+// Сервис пула зависимостей `accolades` (snakes-v3 этап 4): всё, что комната
+// знает о глобальном топе игры.
+//
+// Отвечает на три вопроса:
+//   placeOf(id)        — какое место у этой сущности в топе-10 (для part'а,
+//                        который рисует за место знак);
+//   boardOf(period)    — сам топ строками (для режима stat 'leaderboard');
+//   selfOf(id, period) — место и очки самого игрока, чтобы он видел свою
+//                        строку, даже когда в топ не входит.
+//
+// ЗА ТОПОМ ХОДИТ ХОСТ, А НЕ КЛИЕНТ. Места и таблицу считает
+// host/meta/modules/Accolades.js по тому же публичному топу, что рисует
+// лобби, и шлёт их портом ACCOLADES_DATA только когда они изменились. Клиент
+// в матче не обращается к мастеру вовсе: игрок разговаривает со своим игровым
+// сервером. На целевом масштабе (100 игр × 100 серверов × 8 игроков) разница
+// между «спрашивает каждый клиент» и «спрашивает комната» — четыре порядка на
+// самом дорогом запросе схемы, см. комментарий в хостовом модуле.
+//
+// Движок не знает, что игра нарисует за место: он раздаёт числа, а знак —
+// дело part'а.
+//
+// Ключи приходят строками (gameId на стороне движка — строка), поэтому
+// placeOf/selfOf приводят запрошенный id к строке: у part'а id экземпляра
+// может быть числом ключа кадра.
+export function createAccolades() {
+  let places = {};
+  let boards = {};
+  let self = {};
+
+  return {
+    // применяет рассылку хоста целиком: она всегда полная, а не дельта
+    apply(data) {
+      places = data?.places || {};
+      boards = data?.boards || {};
+      self = data?.self || {};
+    },
+
+    // { daily, monthly } — всегда объект: незнакомый id (бот, гость,
+    // сущность без игрока) не в топе, и это не аварийный случай
+    placeOf(id) {
+      return places[String(id)] || { daily: null, monthly: null };
+    },
+
+    // [{ place, nick, score }] среза ('day'/'month'); пустой массив, пока
+    // первая рассылка не пришла — это нормальное состояние, а не сбой
+    boardOf(period) {
+      return boards[period] || [];
+    },
+
+    // { place, score } игрока в срезе или null: место есть только у
+    // ранжированного за период участника с проверенной личностью
+    selfOf(id, period) {
+      return self[String(id)]?.[period] ?? null;
+    },
+  };
+}

package/src/client/main.js

@@ -35,6 +35,7 @@ import { getBootConfig, resolveBootConfig } from './boot.js';
 import { ensureGameShell, ensureCanvas } from './views/gameShell.js';
 import { createContextTracker } from './lib/contextTracker.js';
 import { createLocalPlayer } from './lib/localPlayer.js';
+import { createAccolades } from './lib/accolades.js';
 import { createDebugApi, debugLog, DEBUG_PREFIX } from './debug.js';
 import { buildClientCoreConfig } from '../lib/clientCoreConfig.js';
 import {
@@ -181,6 +182,7 @@ const PS_STAT_DATA = wsports.server.STAT_DATA;
 const PS_CHAT_DATA = wsports.server.CHAT_DATA;
 const PS_VOTE_DATA = wsports.server.VOTE_DATA;
 const PS_KEYSET_DATA = wsports.server.KEYSET_DATA;
+const PS_ACCOLADES_DATA = wsports.server.ACCOLADES_DATA;
 
 // PC (client ports): порты получения данных от клиента
 const PC_CONFIG_READY = wsports.client.CONFIG_READY;
@@ -279,6 +281,9 @@ let wasm = null;
 // сервис пула зависимостей: «эта сущность моя или чужая?». Ядро читается
 // геттером — оно создаётся позже пула сервисов (см. lib/localPlayer.js)
 const localPlayer = createLocalPlayer(() => clientCore);
+// сервис пула зависимостей: «какое место у этой сущности в глобальном
+// топе?». Места считает хост, part рисует за них знак (см. lib/accolades.js)
+const accolades = createAccolades();
 let inputSeq = 0; // номер отправленного ввода (KEYS_DATA)
 
 // обратный индекс снапшот-схемы игры (CONFIG_DATA.snapshot):
@@ -376,6 +381,9 @@ socketMethods[PS_CONFIG_DATA] = async data => {
       // аргумент конструктора) со своим gameId. Игра без этого сервиса звучит
       // одинаково за всех — чужие подборы и чужие смерти вперемешку со своими
       localPlayer,
+      // места в глобальном топе: знак за место рисует part игры, движок
+      // раздаёт только числа (см. lib/accolades.js)
+      accolades,
       // база ассетов игры — тем же каналом, что и путь к звукам (см. выше):
       // картинки карт живут в пакете игры (dist/img/), движок их не раздаёт.
       // part, объявивший сервис в componentDependencies, строит URL сам —
@@ -639,6 +647,16 @@ socketMethods[PS_STAT_DATA] = data => {
   modules.stat.update(data);
 };
 
+// accolades data: места участников в глобальном топе, сам топ и место
+// игрока в нём. Рассылка приходит от ХОСТА и только когда что-то из этого
+// изменилось — в матче клиент за топом к мастеру не ходит (см.
+// client/lib/accolades.js)
+socketMethods[PS_ACCOLADES_DATA] = data => {
+  accolades.apply(data);
+  // stat в режиме 'leaderboard' рисует ровно эту таблицу
+  modules.stat?.applyAccolades?.();
+};
+
 // chat data
 socketMethods[PS_CHAT_DATA] = data => {
   modules.chat.add(data);
@@ -917,7 +935,13 @@ function runModules(data) {
   // Stat Module
   //==========================================//
 
-  const statModel = new StatModel(statData.params);
+  // режим 'leaderboard' (snakes-v3 этап 4) рисует топ, привезённый хостом:
+  // ни одного запроса из матча — сервисы, а не сеть
+  const statModel = new StatModel(statData.params, {
+    accolades,
+    localPlayer,
+    getNick: () => lobbyAuthModel?.getNick() ?? null,
+  });
 
   // StatView генерирует шапку и таблицы по схеме игры ({ elems, params })
   const statView = new StatView(statModel, statData);
@@ -1789,13 +1813,21 @@ async function fetchServers({ offset, limit, search }) {
 }
 
 // топ-N рейтинга игры (lobby-page-plan) — публичный эндпоинт, доступен и до
-// логина, поэтому без Authorization
-async function fetchLeaderboard(gameId) {
+// логина, поэтому без Authorization.
+//
+// Зовётся только ЛОББИ. Из матча за топом ходит хост комнаты и раздаёт его
+// портом ACCOLADES_DATA (host/meta/modules/Accolades.js): 80 000 игроков,
+// спрашивающих мастер лично, и 10 000 комнат, спрашивающих за них, — разные
+// порядки величин. Там же живёт и If-None-Match: валидатор имеет смысл
+// рядом с повторяющимся запросом, а лобби открывают по одному разу
+async function fetchLeaderboard(gameId, period) {
   const params = new URLSearchParams({
     game: gameId,
     limit: lobbyConfig.leaderboardLimit,
+    // rank-periods: срез времени. Мастер отвечает 400 на незнакомый —
+    // значение всегда из lobbyConfig.leaderboardPeriods
+    period,
   });
-
   try {
     const res = await fetch(`${lobbyConfig.leaderboardUrl}?${params}`);
 
@@ -1807,8 +1839,8 @@ async function fetchLeaderboard(gameId) {
 
 // позиция вызывающего в рейтинге игры (lobby-page-plan) — требует identity-
 // токена, как и остальные /auth/* запросы игрока (rank/state)
-async function fetchPlacement(gameId) {
-  const token = lobbyAuthModel.getToken();
+async function fetchPlacement(gameId, period) {
+  const token = lobbyAuthModel?.getToken();
 
   if (!token) {
     return null;
@@ -1816,7 +1848,9 @@ async function fetchPlacement(gameId) {
 
   try {
     const res = await fetch(
-      `${lobbyConfig.placementUrl}?${new URLSearchParams({ game: gameId })}`,
+      // тот же срез, что и у списка рядом: плашка позиции, посчитанная за
+      // всё время под заголовком «сегодня», противоречила бы списку
+      `${lobbyConfig.placementUrl}?${new URLSearchParams({ game: gameId, period })}`,
       { headers: { authorization: `Bearer ${token}` } },
     );
 
@@ -1954,6 +1988,13 @@ function initLobby() {
 
   lobby = new LobbyCtrl(lobbyModel, lobbyView);
 
+  // срезы рейтинга (rank-periods) — сразу после создания контроллера и до
+  // первого gameChanged: тот уже несёт открытый срез в запросе
+  lobby.setPeriods(
+    lobbyConfig.leaderboardPeriods,
+    lobbyConfig.defaultLeaderboardPeriod,
+  );
+
   // список серверов — REST-запросом к мастеру
   lobbyModel.publisher.on('fetch', async query => {
     const list = await fetchServers(query);
@@ -1989,17 +2030,17 @@ function initLobby() {
   // под заголовком новой, пока не пришёл ответ (и остаются навсегда при
   // сетевом сбое); reqId отбрасывает ответ устаревшего запроса, если игру
   // переключили быстрее, чем пришёл ответ (latest-wins)
-  lobby.publisher.on('leaderboard-needed', async gameId => {
+  lobby.publisher.on('leaderboard-needed', async ({ gameId, period }) => {
     lobbyModel.clearLeaderboard();
 
     const reqId = ++leaderboardReqId;
     const [leaderboard, placement] = await Promise.all([
-      fetchLeaderboard(gameId),
-      fetchPlacement(gameId),
+      fetchLeaderboard(gameId, period),
+      fetchPlacement(gameId, period),
     ]);
 
     if (reqId !== leaderboardReqId) {
-      return; // игру уже переключили ещё раз — этот ответ устарел
+      return; // игру или срез уже переключили ещё раз — ответ устарел
     }
 
     if (leaderboard) {

package/src/client/style.css

@@ -286,6 +286,25 @@ body.hide-cursor {
   text-align: right;
 }
 
+/* snakes-v3 этап 4: режим stat 'leaderboard' — не таблицы комнаты, а один
+   список глобального топа. Движок даёт только каркас (три колонки:
+   место, ник, очки), внешний вид игра доопределяет своим ClientPlugin.styles */
+
+#stat .stat-leaderboard {
+  width: 92%;
+  margin: 3% auto;
+}
+
+#stat .stat-row {
+  display: grid;
+  grid-template-columns: 15% 1fr 20%;
+  padding: 1%;
+}
+
+#stat .stat-row span:nth-child(3) {
+  text-align: right;
+}
+
 /*vote*/
 
 #vote {
@@ -908,6 +927,32 @@ body.hide-cursor {
   border-bottom: 2px solid #fff;
 }
 
+/* срезы рейтинга (rank-periods): день/месяц/всё время. Ряд под вкладками
+   правой панели — это выбор ДАННЫХ, а не вкладка, поэтому кнопки выглядят
+   как переключатель, а не как заголовок раздела */
+.lobby-period-tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 10px;
+}
+
+.lobby-period-btn {
+  flex: 1 1 0;
+  background: rgb(255 255 255 / 6%);
+  border: none;
+  color: #888;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 5px 4px;
+  margin: 0;
+  text-shadow: none;
+}
+
+.lobby-period-btn.active {
+  background: rgb(255 255 255 / 18%);
+  color: #fff;
+}
+
 .lobby-leaderboard-header {
   display: flex;
   justify-content: space-between;

package/src/client/views/includes/lobby.pug

@@ -50,6 +50,12 @@ div#lobby(style='display:none')
             p#lobby-empty= 'No servers available'
             input#lobby-more(type='button', value='Load more')
           div#lobby-leaderboard-content(style='display:none')
+            //- срез рейтинга (rank-periods): день/месяц считаются из леджера
+            //- дельт, all-time — из кэша ratings
+            div.lobby-period-tabs
+              input#btn-period-day.lobby-period-btn(type='button', value='Daily')
+              input#btn-period-month.lobby-period-btn(type='button', value='Monthly')
+              input#btn-period-all.lobby-period-btn.active(type='button', value='All-Time')
             div.lobby-leaderboard-header
               span#leaderboard-title
               span#leaderboard-total