vimp-engine 0.24.2 → 0.26.0

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

@@ -0,0 +1,365 @@
+import Publisher from '../../../lib/Publisher.js';
+import { renderFormErrors } from '../../lib/formBuilder.js';
+
+// Singleton GamesView
+
+let gamesView;
+
+// коды отказов мастера/auth — человеческая формулировка живёт здесь, как в
+// LobbyAuthView: модель кодов не переводит, view не ходит в сеть.
+// Язык интерфейса — английский, как и в остальном лобби
+const ERROR_MESSAGES = {
+  unauthorized: 'Please sign in again',
+  forbidden: 'Not enough rights',
+  network: 'Network unavailable, try again',
+  requestFailed: 'Request failed',
+  // лимитер мастера (5 заявок в минуту на пользователя) считает и заявки,
+  // отклонённые по формату, — без своей строки код уезжал бы в интерфейс сырым
+  tooManyRequests: 'Too many requests, try again in a minute',
+  gameExists: 'A game with this id already exists',
+  tooManyGames: 'Too many submissions from one author',
+  unknownGame: 'Game is not in the registry',
+  invalidGameId: 'Invalid game id',
+  invalidPackageName: 'Invalid npm package name',
+  invalidVersion: 'Invalid version',
+  invalidTitle: 'Invalid title',
+  invalidRepoUrl: 'Invalid repository URL',
+  invalidMaxGameScore: 'Invalid score cap',
+  authServiceUnavailable: 'Registry service unavailable',
+};
+
+// предупреждения: решение принято, отказа не было, но состояние платформы
+// стоит назвать вслух
+const WARNING_MESSAGES = {
+  catalogEmpty:
+    'No published games left — the lobby cannot create rooms until one is published',
+};
+
+const STATUS_TITLES = {
+  pending: 'in review',
+  approved: 'published',
+  rejected: 'rejected',
+  disabled: 'disabled',
+};
+
+// Представление реестра игр: списки заявок и очереди модерации, фильтры,
+// строки ошибок. В сеть не ходит и состояния не держит — рисует то, что
+// пришло событием модели, и публикует намерения пользователя
+export default class GamesView {
+  /**
+   * @param {Object} model - GamesModel (источник событий).
+   * @param {Object} config - Блок `games` конфига лобби.
+   */
+  constructor(model, config) {
+    if (gamesView) {
+      return gamesView;
+    }
+
+    gamesView = this;
+
+    const { elems } = config;
+
+    this._config = config;
+    this._elems = elems;
+
+    this._panel = document.getElementById(elems.panelId);
+    this._lobby = document.getElementById(elems.lobbyId);
+    this._openMine = document.getElementById(elems.openMineBtnId);
+    this._openModeration = document.getElementById(elems.openModerationBtnId);
+    this._close = document.getElementById(elems.closeBtnId);
+
+    this._mineList = document.getElementById(elems.mineListId);
+    this._submitForm = document.getElementById(elems.submitFormId);
+    this._submitError = document.getElementById(elems.submitErrorId);
+
+    this._moderation = document.getElementById(elems.moderationId);
+    this._adminList = document.getElementById(elems.adminListId);
+    this._adminError = document.getElementById(elems.adminErrorId);
+    this._filters = document.getElementById(elems.filtersId);
+
+    this._fields = new Map(
+      Object.entries(elems.fieldIds).map(([name, id]) => {
+        const field = document.getElementById(id);
+
+        // карта строится по конфигу, а используется из обработчиков событий:
+        // разъехавшийся с games.pug id дал бы здесь null, а упал бы позже —
+        // безымянным TypeError внутри clearForm или _readForm. Остальная
+        // разметка панели проверяется тем же способом, только неявно: первое
+        // же обращение к отсутствующему элементу бросает в конструкторе
+        if (!field) {
+          throw new Error(`GamesView: no element "#${id}" for field "${name}"`);
+        }
+
+        return [name, field];
+      }),
+    );
+
+    this.publisher = new Publisher();
+
+    this._openMine.onclick = () => this.publisher.emit('open-mine');
+    this._openModeration.onclick = () => this.publisher.emit('open-moderation');
+    this._close.onclick = () => this.hide();
+
+    this._submitForm.onsubmit = e => {
+      e.preventDefault();
+      this.publisher.emit('submit', this._readForm());
+    };
+
+    this._renderFilters();
+
+    const mp = model.publisher;
+
+    mp.on('submitted', 'clearForm', this);
+    mp.on('mine-changed', 'renderMine', this);
+    mp.on('admin-changed', 'renderAdmin', this);
+    mp.on('error', 'renderError', this);
+    mp.on('warning', 'renderWarning', this);
+  }
+
+  // кнопку модерации показывает не сама панель, а роль вызывающего
+  // (main.js по LobbyAuthModel.getRole())
+  setAdmin(isAdmin) {
+    this._openModeration.style.display = isAdmin ? '' : 'none';
+  }
+
+  show(moderation = false) {
+    this._panel.style.display = 'flex';
+    this._lobby.style.display = 'none';
+    this._moderation.style.display = moderation ? 'block' : 'none';
+  }
+
+  hide() {
+    // закрытой панели закрывать нечего: возврат черновиков после
+    // перезагрузки идёт тем же событием 'staged', что и «Test», и не должен
+    // трогать разметку лобби
+    if (this._panel.style.display === 'none') {
+      return;
+    }
+
+    this._panel.style.display = 'none';
+    this._lobby.style.display = 'flex';
+  }
+
+  // заявка ушла — поля пустые: следующая отправка начинается с чистой формы
+  clearForm() {
+    this._fields.forEach(field => {
+      field.value = '';
+    });
+  }
+
+  renderMine(games) {
+    this._submitError.textContent = '';
+    this._mineList.textContent = '';
+
+    (games || []).forEach(game => {
+      const item = document.createElement('li');
+
+      item.className = 'games-item';
+      item.appendChild(
+        this._line(
+          `${game.title ? `${game.title} · ` : ''}${game.id} — ` +
+            `${game.packageName} @ ${game.version ?? '—'}`,
+          'games-item-title',
+        ),
+      );
+      item.appendChild(this._line(this._statusLine(game)));
+      this._appendRepo(item, game.repoUrl);
+
+      if (game.moderatorNote) {
+        item.appendChild(this._line(`Note: ${game.moderatorNote}`));
+      }
+
+      // заявка на новую версию своей игры: поле рядом со строкой, а не
+      // отдельной формой — версия относится к конкретной заявке
+      const version = document.createElement('input');
+      const send = document.createElement('input');
+
+      version.type = 'text';
+      version.className = 'field-text games-version-input';
+      version.placeholder = 'New version';
+      send.type = 'button';
+      send.value = 'Update version';
+      send.onclick = () =>
+        this.publisher.emit('update-version', { id: game.id, version: version.value.trim() });
+
+      item.appendChild(version);
+      item.appendChild(send);
+      this._mineList.appendChild(item);
+    });
+  }
+
+  renderAdmin({ games, filter, versions }) {
+    this._adminError.textContent = '';
+    this._adminList.textContent = '';
+    this._markFilter(filter);
+
+    (games || []).forEach(game => {
+      this._adminList.appendChild(this._adminItem(game, versions));
+    });
+  }
+
+  renderWarning({ scope, code }) {
+    const container = scope === 'admin' ? this._adminError : this._submitError;
+
+    container.textContent = WARNING_MESSAGES[code] ?? code;
+  }
+
+  renderError({ scope, errors }) {
+    const container = scope === 'admin' ? this._adminError : this._submitError;
+
+    renderFormErrors(
+      container,
+      errors.map(({ name, error }) => ({
+        name,
+        label: name,
+        error: ERROR_MESSAGES[error] ?? error,
+      })),
+    );
+  }
+
+  _adminItem(game, versions) {
+    const item = document.createElement('li');
+    const published = versions?.get(game.id) ?? [];
+    const latest = published[published.length - 1];
+
+    item.className = 'games-item';
+    item.appendChild(
+      this._line(
+        `${game.title ? `${game.title} · ` : ''}${game.id} — ${game.packageName}`,
+        'games-item-title',
+      ),
+    );
+    // у игр, засеянных миграцией, автора нет вовсе: без запасного прочерка
+    // в строке печаталось бы литеральное "null"
+    item.appendChild(this._line(`Author: ${game.authorNick ?? game.authorUserId ?? '—'}`));
+    this._appendRepo(item, game.repoUrl);
+    item.appendChild(
+      this._line(
+        `Served: ${game.version ?? '—'}; requested: ${game.pendingVersion ?? '—'}` +
+          (latest ? `; in npm: ${latest}` : ''),
+      ),
+    );
+    item.appendChild(this._line(this._statusLine(game)));
+
+    if (game.local) {
+      item.appendChild(
+        this._line(
+          `On this master: ${game.local.downloaded ? 'downloaded' : 'not downloaded'}` +
+            (game.local.stagedVersion ? `; staged ${game.local.stagedVersion}` : '') +
+            (game.local.lastError ? `; error: ${game.local.lastError}` : ''),
+        ),
+      );
+    }
+
+    const note = document.createElement('input');
+
+    note.type = 'text';
+    note.className = 'field-text games-note-input';
+    note.placeholder = 'Rejection reason';
+
+    item.appendChild(note);
+    item.appendChild(
+      this._button('Test', () =>
+        this.publisher.emit('stage', {
+          id: game.id,
+          version: game.pendingVersion ?? game.version,
+        }),
+      ),
+    );
+    item.appendChild(
+      this._button('Approve', () => this.publisher.emit('approve', { id: game.id })),
+    );
+    item.appendChild(
+      this._button('Reject', () =>
+        this.publisher.emit('reject', { id: game.id, note: note.value.trim() }),
+      ),
+    );
+    item.appendChild(
+      this._button('Disable', () => this.publisher.emit('disable', { id: game.id })),
+    );
+    item.appendChild(
+      this._button('npm versions', () =>
+        this.publisher.emit('load-versions', { id: game.id }),
+      ),
+    );
+
+    return item;
+  }
+
+  // Ссылка на репозиторий игры. Протокол проверяется и здесь, хотя auth уже
+  // принимает только http(s): href — единственное место представления, где
+  // содержимое поля становится исполняемым (javascript:), и полагаться на
+  // одну проверку на другой стороне сети тут не стоит
+  _appendRepo(item, url) {
+    if (typeof url !== 'string' || !/^https?:\/\//i.test(url)) {
+      return;
+    }
+
+    const line = document.createElement('div');
+    const link = document.createElement('a');
+
+    link.href = url;
+    link.textContent = url;
+    link.target = '_blank';
+    link.rel = 'noopener noreferrer';
+    line.appendChild(link);
+    item.appendChild(line);
+  }
+
+  _statusLine(game) {
+    const status = STATUS_TITLES[game.status] ?? game.status;
+    const date = game.createdAt ? new Date(game.createdAt).toLocaleDateString() : '';
+
+    return date ? `Status: ${status} (submitted ${date})` : `Status: ${status}`;
+  }
+
+  _renderFilters() {
+    this._filterButtons = new Map();
+
+    this._config.statuses.forEach(({ id, title }) => {
+      const btn = this._button(title, () => this.publisher.emit('filter', id));
+
+      btn.className = 'games-filter-btn';
+      this._filterButtons.set(id, btn);
+      this._filters.appendChild(btn);
+    });
+  }
+
+  _markFilter(filter) {
+    this._filterButtons.forEach((btn, id) => {
+      btn.classList.toggle('active', id === filter);
+    });
+  }
+
+  _button(value, onclick) {
+    const btn = document.createElement('input');
+
+    btn.type = 'button';
+    btn.value = value;
+    btn.onclick = onclick;
+
+    return btn;
+  }
+
+  _line(text, className) {
+    const line = document.createElement('div');
+
+    line.textContent = text;
+
+    if (className) {
+      line.className = className;
+    }
+
+    return line;
+  }
+
+  _readForm() {
+    const form = {};
+
+    this._fields.forEach((field, name) => {
+      form[name] = field.value.trim();
+    });
+
+    return form;
+  }
+}

package/src/client/lib/catalogState.js

@@ -0,0 +1,44 @@
+// Каталог игр платформы может быть ПУСТ, и это законное состояние лобби, а не
+// отказ загрузки: игры живут в реестре auth-сервиса, модератор вправе снять с
+// раздачи последнюю, а на первом развёртывании не одобрена ещё ни одна.
+//
+// Лобби в этом состоянии обязано жить целиком: вход, бейдж пользователя, «My
+// games» и «Moderation» от игры не зависят — и только через них каталог
+// возвращается к жизни. Раньше пустой каталог бросал из бутстрапа и стирал
+// разметку страницы: модератор, отключивший последнюю игру, запирал сам себя
+// и вернуть её мог только запросом мимо интерфейса.
+//
+// Вынесено из main.js (бутстрап, в happy-dom не поднимается) отдельным
+// модулем, чтобы обе ветки проверялись юнит-тестом.
+
+/**
+ * Приводит лобби в соответствие с активной игрой.
+ * @param {Object} [manifest] - Манифест активной игры; `undefined` — каталог
+ *   платформы пуст.
+ * @param {Object} deps - Проводка лобби.
+ * @param {HTMLElement} [deps.hostBtn] - Кнопка «Create server».
+ * @param {string} deps.emptyText - Строка отказа для пустого каталога.
+ * @param {Function} deps.bindGame - Форма комнаты и Leaderboard активной игры.
+ * @param {Function} deps.showError - Показать строку отказа лобби.
+ * @param {Function} deps.clearError - Снять строку отказа лобби.
+ * @returns {void}
+ */
+export function applyCatalogState(
+  manifest,
+  { hostBtn, emptyText, bindGame, showError, clearError },
+) {
+  if (manifest) {
+    bindGame(manifest);
+    clearError();
+  } else {
+    // форму комнаты и Leaderboard не трогаем вовсе: без игры у первой нет
+    // схемы полей, а второй — игры, за рейтингом которой идти
+    showError(emptyText);
+  }
+
+  if (hostBtn) {
+    hostBtn.disabled = !manifest;
+  }
+}
+
+export default applyCatalogState;

package/src/client/lib/gameActivator.js

@@ -8,8 +8,14 @@
 // Вынесено из main.js (бутстрап, тестами не покрывается) отдельным модулем,
 // чтобы кеш и обработка отказа проверялись юнит-тестом.
 export function createGameActivator({ gamesById, loadClientPlugin }) {
-  // gameId -> промис загрузки: кешируется именно промис, иначе два быстрых
-  // клика подряд запустили бы импорт дважды
+  // `${gameId}@${manifest.version}` -> промис загрузки: кешируется именно
+  // промис, иначе два быстрых клика подряд запустили бы импорт дважды.
+  //
+  // Версия в ключе обязательна (master-game-registry, этап 3): в каталоге
+  // мастера две версии одной игры живут одновременно (админ стейджит новую,
+  // игроки играют в одобренную), и ключ по одному gameId вернул бы уже
+  // выполненный import() НЕ ТОГО кода. manifest.version — хеш бандла, то
+  // есть идентификатор самого кода
   const plugins = new Map();
 
   return async function activateGame(gameId) {
@@ -19,18 +25,20 @@ export function createGameActivator({ gamesById, loadClientPlugin }) {
       throw new Error(`unknown game "${gameId}"`);
     }
 
-    let pending = plugins.get(gameId);
+    const key = `${gameId}@${manifest.version}`;
+
+    let pending = plugins.get(key);
 
     if (!pending) {
       pending = loadClientPlugin(manifest).catch(e => {
         // отказ не кешируем: сеть могла моргнуть, повторный клик обязан
         // попробовать снова, а не переигрывать ту же ошибку вечно
-        plugins.delete(gameId);
+        plugins.delete(key);
 
         throw e;
       });
 
-      plugins.set(gameId, pending);
+      plugins.set(key, pending);
     }
 
     return { manifest, plugin: await pending };