vimp-engine 0.34.8 → 0.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vimp-engine",
-  "version": "0.34.8",
+  "version": "0.35.0",
   "description": "VIMP — движок-приложение (мастер, P2P-транспорт, Worker-хост, мета, MVC-каркас клиента)",
   "license": "MIT",
   "repository": {
@@ -46,6 +46,7 @@
     "express": "^5.1.0",
     "howler": "^2.2.4",
     "pixi.js": "8.19.0",
+    "source-map-js": "^1.2.1",
     "tar": "^7.5.1",
     "uuid": "^13.0.0",
     "vite-express": "^0.21.1",

package/src/client/boot.js

@@ -30,6 +30,7 @@ const DEDICATED_WS_PATH = '/game';
  *   autoAuth,        // solo: { name, model, … } → AUTH_RESPONSE без формы
  *   startupVotes,    // solo: ответы на initialVote (выход из наблюдателей)
  *   startupCommands, // solo: чат-команды игры (спавн ботов)
+ *   reportUrl,       // solo: приём журнала клиентских ошибок (null — выкл.)
  *   wsUrl,           // dedicated: адрес игрового WS
  *   gameId,          // dedicated: какую игру каталога считать активной
  * }

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

@@ -0,0 +1,54 @@
+// Singleton ClientReportsCtrl
+
+let clientReportsCtrl;
+
+// Контроллер журнала клиентских ошибок (plan/client-reports, этап 5):
+// связывает view-события с моделью, собственного сетевого I/O не делает
+export default class ClientReportsCtrl {
+  constructor(model, view) {
+    if (clientReportsCtrl) {
+      return clientReportsCtrl;
+    }
+
+    clientReportsCtrl = this;
+
+    this._model = model;
+    this._view = view;
+
+    const vp = view.publisher;
+
+    vp.on('open', 'open', this);
+    vp.on('filter', 'filter', this);
+    vp.on('game', 'game', this);
+    vp.on('more', 'more', this);
+    vp.on('set-status', 'setStatus', this);
+  }
+
+  // роль решает только видимость кнопки «Errors»: доступ к данным проверяет
+  // мастер, а auth перечитывает роль из БД
+  setAdmin(isAdmin) {
+    this._view.setAdmin(isAdmin);
+  }
+
+  // журнал живой — каждое открытие панели перечитывает его с первой страницы
+  open() {
+    this._view.show();
+    this._model.load({ reset: true });
+  }
+
+  filter(status) {
+    this._model.setFilter({ status });
+  }
+
+  game(gameId) {
+    this._model.setFilter({ gameId });
+  }
+
+  more() {
+    this._model.load();
+  }
+
+  setStatus({ id, status, note }) {
+    this._model.setStatus(id, status, note);
+  }
+}

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

@@ -0,0 +1,170 @@
+import Publisher from '../../../lib/Publisher.js';
+
+// Singleton ClientReportsModel
+
+let clientReportsModel;
+
+// Модель журнала клиентских ошибок в лобби (plan/client-reports, этап 5):
+// страницы журнала, фильтры и решение админа по строке. Как GamesModel,
+// сетевые запросы делает сама (простой REST к мастеру) и DOM не трогает.
+// Наружу — одно событие 'changed' с полным состоянием: список, счётчик,
+// фильтры и код ошибки (человеческая формулировка — во view)
+export default class ClientReportsModel {
+  /**
+   * @param {Object} config - Блок `clientReports` конфига лобби.
+   * @param {Function} getToken - Возвращает identity-токен лобби.
+   */
+  constructor(config, getToken) {
+    if (clientReportsModel) {
+      return clientReportsModel;
+    }
+
+    clientReportsModel = this;
+
+    this._config = config;
+    this._getToken = getToken;
+
+    this._status = config.defaultStatus ?? 'open';
+    this._gameId = null;
+    this._items = [];
+    this._total = 0;
+    this._loading = false;
+    this._error = null;
+    // номер последнего запроса страницы: ответ, обогнанный сменой фильтра,
+    // не должен дописаться к списку другой графы
+    this._seq = 0;
+
+    this.publisher = new Publisher();
+  }
+
+  getState() {
+    return {
+      status: this._status,
+      gameId: this._gameId,
+      items: this._items,
+      total: this._total,
+      loading: this._loading,
+      error: this._error,
+    };
+  }
+
+  // смена графы или игры: список начинается заново
+  setFilter({ status, gameId } = {}) {
+    if (status !== undefined) {
+      this._status = status;
+    }
+
+    if (gameId !== undefined) {
+      this._gameId = gameId || null;
+    }
+
+    return this.load({ reset: true });
+  }
+
+  /**
+   * Страница журнала. Смещение — длина уже загруженного списка: запись,
+   * убранная из графы решением админа, уменьшает и total на сервере, так что
+   * следующая страница не пропускает строк.
+   * @param {Object} [options]
+   * @param {boolean} [options.reset] - Начать список заново.
+   */
+  async load({ reset = false } = {}) {
+    const seq = ++this._seq;
+
+    if (reset) {
+      this._items = [];
+      this._total = 0;
+    }
+
+    const query = new URLSearchParams({
+      status: this._status,
+      limit: String(this._config.pageSize),
+      offset: String(this._items.length),
+    });
+
+    if (this._gameId) {
+      query.set('gameId', this._gameId);
+    }
+
+    this._loading = true;
+    this._error = null;
+    this._emit();
+
+    const { ok, json } = await this._request(`${this._config.urls.list}?${query}`);
+
+    if (seq !== this._seq) {
+      return;
+    }
+
+    this._loading = false;
+
+    if (!ok || !Array.isArray(json?.reports)) {
+      this._error = json?.error ?? 'requestFailed';
+      this._emit();
+      return;
+    }
+
+    this._items = this._items.concat(json.reports);
+    this._total = Number(json.total) || 0;
+    this._emit();
+  }
+
+  // решение админа: строка заменяется ответом auth, а если она больше не
+  // подходит под графу (например, «Open» → fixed) — уходит из списка
+  async setStatus(id, status, note) {
+    const { ok, json } = await this._request(this._config.urls.setStatus(id), {
+      method: 'PATCH',
+      body: { status, note },
+    });
+
+    if (!ok || !json?.report) {
+      this._error = json?.error ?? 'requestFailed';
+      this._emit();
+      return;
+    }
+
+    const { report } = json;
+
+    this._error = null;
+
+    if (this._status === 'all' || report.status === this._status) {
+      this._items = this._items.map(item => (item.id === report.id ? report : item));
+    } else {
+      const before = this._items.length;
+
+      this._items = this._items.filter(item => item.id !== report.id);
+      this._total = Math.max(0, this._total - (before - this._items.length));
+    }
+
+    this._emit();
+  }
+
+  _emit() {
+    this.publisher.emit('changed', this.getState());
+  }
+
+  // ошибки сети и отказы мастера/auth возвращаются кодом, без исключений
+  async _request(url, { method = 'GET', body } = {}) {
+    const token = this._getToken();
+
+    if (!token) {
+      return { ok: false, json: { error: 'unauthorized' } };
+    }
+
+    try {
+      const res = await fetch(url, {
+        method,
+        headers: {
+          authorization: `Bearer ${token}`,
+          ...(body ? { 'content-type': 'application/json' } : {}),
+        },
+        body: body ? JSON.stringify(body) : undefined,
+      });
+      const json = await res.json().catch(() => null);
+
+      return { ok: res.ok, json };
+    } catch {
+      return { ok: false, json: { error: 'network' } };
+    }
+  }
+}

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

@@ -0,0 +1,317 @@
+import Publisher from '../../../lib/Publisher.js';
+
+// Singleton ClientReportsView
+
+let clientReportsView;
+
+// коды отказов мастера/auth — человеческая формулировка живёт здесь, как в
+// GamesView. Язык интерфейса — английский, как и в остальном лобби
+const ERROR_MESSAGES = {
+  unauthorized: 'Please sign in again',
+  forbidden: 'Not enough rights',
+  network: 'Network unavailable, try again',
+  requestFailed: 'Request failed',
+  badRequest: 'Bad request',
+  unknownReport: 'Report not found',
+  authServiceUnavailable: 'Journal service unavailable',
+};
+
+// кнопки решения админа: у записи видны все, кроме её текущего статуса
+const STATUS_ACTIONS = [
+  { status: 'fixed', title: 'Mark fixed' },
+  { status: 'ignored', title: 'Ignore' },
+  { status: 'open', title: 'Reopen' },
+];
+
+const MESSAGE_PREVIEW = 120;
+
+// «5 min ago»: в журнале важнее давность, чем точная дата — она есть в
+// развёрнутой части
+function timeAgo(iso, now = Date.now()) {
+  const time = Date.parse(iso);
+
+  if (Number.isNaN(time)) {
+    return '—';
+  }
+
+  const minutes = Math.max(0, Math.floor((now - time) / 60000));
+
+  if (minutes < 1) {
+    return 'just now';
+  }
+
+  if (minutes < 60) {
+    return `${minutes} min ago`;
+  }
+
+  const hours = Math.floor(minutes / 60);
+
+  if (hours < 24) {
+    return `${hours} h ago`;
+  }
+
+  return `${Math.floor(hours / 24)} d ago`;
+}
+
+function truncate(text, max) {
+  return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+}
+
+// Представление журнала клиентских ошибок (plan/client-reports, этап 5).
+//
+// ***** БЕЗОПАСНОСТЬ *****
+//
+// Каждое поле отчёта — данные злоумышленника: любой браузер может прислать
+// любую строку, а бокс её только режет по длине. Поэтому текст отчёта
+// попадает в DOM ТОЛЬКО через textContent — никакого innerHTML, шаблонных
+// строк в разметку и insertAdjacentHTML в этом модуле быть не должно
+export default class ClientReportsView {
+  /**
+   * @param {Object} model - ClientReportsModel (источник событий).
+   * @param {Object} config - Блок `clientReports` конфига лобби.
+   */
+  constructor(model, config) {
+    if (clientReportsView) {
+      return clientReportsView;
+    }
+
+    clientReportsView = this;
+
+    const { elems } = config;
+
+    this._config = config;
+
+    this._panel = document.getElementById(elems.panelId);
+    this._lobby = document.getElementById(elems.lobbyId);
+    this._open = document.getElementById(elems.openBtnId);
+    this._close = document.getElementById(elems.closeBtnId);
+    this._filters = document.getElementById(elems.filtersId);
+    this._gameSelect = document.getElementById(elems.gameSelectId);
+    this._list = document.getElementById(elems.listId);
+    this._more = document.getElementById(elems.moreBtnId);
+    this._error = document.getElementById(elems.errorId);
+
+    // развёрнутые записи переживают перерисовку списка (решение по соседней
+    // строке, «Load more»)
+    this._expanded = new Set();
+
+    this.publisher = new Publisher();
+
+    this._open.onclick = () => this.publisher.emit('open');
+    this._close.onclick = () => this.hide();
+    this._more.onclick = () => this.publisher.emit('more');
+    this._gameSelect.onchange = () =>
+      this.publisher.emit('game', this._gameSelect.value || null);
+
+    this._renderFilters();
+
+    model.publisher.on('changed', 'render', this);
+  }
+
+  // кнопку показывает не сама панель, а роль вызывающего (main.js)
+  setAdmin(isAdmin) {
+    this._open.style.display = isAdmin ? '' : 'none';
+  }
+
+  /**
+   * Игры фильтра: каталог вкладки. Первая опция («All games») — из разметки.
+   * @param {Array<{id: string, title?: string}>} games
+   */
+  setGames(games) {
+    while (this._gameSelect.options.length > 1) {
+      this._gameSelect.remove(1);
+    }
+
+    (games || []).forEach(({ id, title }) => {
+      const option = document.createElement('option');
+
+      option.value = id;
+      option.textContent = title ? `${title} (${id})` : id;
+      this._gameSelect.appendChild(option);
+    });
+  }
+
+  // та же механика, что у панели реестра игр: панель занимает место лобби
+  show() {
+    this._panel.style.display = 'flex';
+    this._lobby.style.display = 'none';
+  }
+
+  hide() {
+    if (this._panel.style.display === 'none') {
+      return;
+    }
+
+    this._panel.style.display = 'none';
+    this._lobby.style.display = 'flex';
+  }
+
+  render({ items, total, status, gameId, error }) {
+    this._markFilter(status);
+    this._gameSelect.value = gameId ?? '';
+
+    this._list.textContent = '';
+    (items || []).forEach(report => this._list.appendChild(this._item(report)));
+
+    this._error.textContent = error ? (ERROR_MESSAGES[error] ?? error) : '';
+    this._more.style.display = (items || []).length < total ? '' : 'none';
+  }
+
+  _item(report) {
+    const item = document.createElement('li');
+    const summary = document.createElement('div');
+    const details = this._details(report);
+
+    item.className = 'reports-item';
+    summary.className = 'reports-summary';
+
+    [
+      [timeAgo(report.lastSeen), 'reports-when'],
+      [`×${report.count}`, 'reports-count'],
+      [`${report.kind}/${report.source}`, 'reports-kind'],
+      [truncate(String(report.code ?? report.message ?? ''), MESSAGE_PREVIEW), 'reports-message'],
+      [report.gameId ? `${report.gameId}@${report.gameVersion ?? '—'}` : '—'],
+      [`engine ${report.engineVersion ?? '—'}`],
+      [report.box ?? '—'],
+      [report.status, `reports-status reports-status-${report.status}`],
+    ].forEach(([text, className]) => summary.appendChild(this._span(text, className)));
+
+    details.style.display = this._expanded.has(report.id) ? '' : 'none';
+    summary.onclick = () => {
+      const open = details.style.display === 'none';
+
+      details.style.display = open ? '' : 'none';
+
+      if (open) {
+        this._expanded.add(report.id);
+      } else {
+        this._expanded.delete(report.id);
+      }
+    };
+
+    item.appendChild(summary);
+    item.appendChild(details);
+
+    return item;
+  }
+
+  _details(report) {
+    const details = document.createElement('div');
+
+    details.className = 'reports-details';
+    details.appendChild(this._line(report.message ?? '', 'reports-full-message'));
+
+    if (report.stack) {
+      details.appendChild(this._pre(report.stack));
+    }
+
+    if (report.details !== null && report.details !== undefined) {
+      details.appendChild(this._pre(JSON.stringify(report.details, null, 2)));
+    }
+
+    details.appendChild(this._line(`User agent: ${report.userAgent ?? '—'}`));
+    details.appendChild(
+      this._line(
+        `First seen: ${report.firstSeen ?? '—'}; last seen: ${report.lastSeen ?? '—'}` +
+          `; mode: ${report.mode ?? '—'}`,
+      ),
+    );
+    details.appendChild(
+      this._line(`Fingerprint: ${String(report.fingerprint ?? '').slice(0, 12)}`),
+    );
+
+    if (report.statusAt) {
+      details.appendChild(
+        this._line(
+          `Status ${report.status} by ${report.statusByNick ?? '—'} at ${report.statusAt}` +
+            (report.statusNote ? `: ${report.statusNote}` : ''),
+        ),
+      );
+    }
+
+    // заметка едет с каждым решением: поле заполнено текущей, иначе
+    // «Reopen» молча стёр бы объяснение прошлого решения
+    const note = document.createElement('input');
+
+    note.type = 'text';
+    note.className = 'field-text reports-note-input';
+    note.placeholder = 'Note';
+    note.maxLength = 500;
+    note.value = report.statusNote ?? '';
+    details.appendChild(note);
+
+    STATUS_ACTIONS.filter(({ status }) => status !== report.status).forEach(
+      ({ status, title }) => {
+        const btn = document.createElement('input');
+
+        btn.type = 'button';
+        btn.value = title;
+        btn.className = 'reports-action-btn';
+        btn.dataset.status = status;
+        btn.onclick = () =>
+          this.publisher.emit('set-status', {
+            id: report.id,
+            status,
+            note: note.value.trim() || null,
+          });
+        details.appendChild(btn);
+      },
+    );
+
+    return details;
+  }
+
+  _renderFilters() {
+    this._filterButtons = new Map();
+
+    this._config.statuses.forEach(({ id, title }) => {
+      const btn = document.createElement('input');
+
+      btn.type = 'button';
+      btn.value = title;
+      btn.className = 'games-filter-btn';
+      btn.onclick = () => this.publisher.emit('filter', id);
+      this._filterButtons.set(id, btn);
+      this._filters.appendChild(btn);
+    });
+  }
+
+  _markFilter(status) {
+    this._filterButtons.forEach((btn, id) => {
+      btn.classList.toggle('active', id === status);
+    });
+  }
+
+  _span(text, className) {
+    const span = document.createElement('span');
+
+    span.textContent = text;
+
+    if (className) {
+      span.className = className;
+    }
+
+    return span;
+  }
+
+  _line(text, className) {
+    const line = document.createElement('div');
+
+    line.textContent = text;
+
+    if (className) {
+      line.className = className;
+    }
+
+    return line;
+  }
+
+  _pre(text) {
+    const pre = document.createElement('pre');
+
+    pre.className = 'reports-pre';
+    pre.textContent = text;
+
+    return pre;
+  }
+}