vimp-engine 0.38.2 → 0.39.0

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

@@ -0,0 +1,172 @@
+// Singleton VoiceView
+
+let voiceView;
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const RING_RADIUS = 15;
+const RING_LENGTH = 2 * Math.PI * RING_RADIUS;
+
+// константная разметка значка микрофона: капсула, дуга держателя, ножка
+// (перечёркивание — .voice-cross)
+const MIC_SVG =
+  '<rect x="9" y="3" width="6" height="11" rx="3"/>' +
+  '<path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>' +
+  '<path class="voice-cross" d="M4 4l16 16"/>';
+
+function createIcon() {
+  const svg = document.createElementNS(SVG_NS, 'svg');
+
+  svg.setAttribute('class', 'voice-icon');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.innerHTML = MIC_SVG;
+
+  return svg;
+}
+
+export default class VoiceView {
+  /**
+   * @param {Object} model
+   * @param {HTMLElement} container - точка монтирования (контейнер игры).
+   */
+  constructor(model, container = document.body) {
+    if (voiceView) {
+      return voiceView;
+    }
+
+    voiceView = this;
+
+    this._hud = document.createElement('div');
+    this._hud.id = 'voice-hud';
+
+    const own = document.createElement('div');
+    const incoming = document.createElement('div');
+    const ring = document.createElementNS(SVG_NS, 'svg');
+
+    own.className = 'voice-own';
+    incoming.className = 'voice-incoming';
+
+    ring.setAttribute('class', 'voice-ring');
+    ring.setAttribute('aria-hidden', 'true');
+    ring.setAttribute('viewBox', '0 0 36 36');
+    ring.innerHTML = `<circle cx="18" cy="18" r="${RING_RADIUS}"/>`;
+    this._circle = ring.firstChild;
+    this._circle.style.strokeDasharray = String(RING_LENGTH);
+
+    this._timerElem = document.createElement('span');
+    this._timerElem.className = 'voice-timer';
+    this._timerElem.setAttribute('aria-hidden', 'true');
+
+    this._textElem = document.createElement('span');
+    this._textElem.className = 'voice-text';
+    this._textElem.setAttribute('role', 'status');
+    this._textElem.setAttribute('aria-live', 'polite');
+
+    this._nameElem = document.createElement('span');
+    this._nameElem.className = 'voice-name';
+
+    own.append(createIcon(), ring, this._timerElem, this._textElem);
+    incoming.append(createIcon(), this._nameElem);
+    this._hud.append(own, incoming);
+    container.appendChild(this._hud);
+
+    this._own = null;
+    this._raf = null;
+
+    model.publisher.on('own', 'renderOwn', this);
+    model.publisher.on('incoming', 'renderIncoming', this);
+  }
+
+  // свой эфир: класс состояния, текст, цикл отсчёта
+  renderOwn(data) {
+    const { kind, text, endsAt, totalMs } = data;
+
+    for (const name of ['talking', 'busy', 'cooldown', 'error']) {
+      this._hud.classList.toggle(`is-${name}`, name === kind);
+    }
+
+    this._textElem.textContent = text;
+
+    if (kind === 'talking' || kind === 'cooldown') {
+      this._own = { kind, endsAt, totalMs };
+
+      if (this._raf === null) {
+        this._raf = requestAnimationFrame(() => this._tick());
+      }
+
+      return;
+    }
+
+    this._stopCountdown();
+  }
+
+  // чужой эфир: ник как текст, цвет как у чата
+  renderIncoming(speaker) {
+    this._hud.classList.toggle('is-incoming', Boolean(speaker));
+
+    for (const className of [...this._nameElem.classList]) {
+      if (className.startsWith('voice-team')) {
+        this._nameElem.classList.remove(className);
+      }
+    }
+
+    if (!speaker) {
+      this._nameElem.textContent = '';
+      this._nameElem.style.removeProperty('--voice-name-color');
+
+      return;
+    }
+
+    this._nameElem.textContent = speaker.name;
+
+    if (Number.isInteger(speaker.teamId)) {
+      this._nameElem.classList.add(`voice-team${speaker.teamId}`);
+    }
+
+    if (speaker.color) {
+      this._nameElem.style.setProperty('--voice-name-color', speaker.color);
+    } else {
+      this._nameElem.style.removeProperty('--voice-name-color');
+    }
+  }
+
+  destroy() {
+    this._stopCountdown();
+    this._hud.remove();
+  }
+
+  _tick() {
+    const own = this._own;
+
+    this._raf = null;
+
+    // вид сменился после планирования кадра
+    if (!own || (own.kind !== 'talking' && own.kind !== 'cooldown')) {
+      return;
+    }
+
+    const remaining = Math.max(0, own.endsAt - performance.now());
+
+    this._timerElem.textContent = `${(remaining / 1000).toFixed(1)}s`;
+
+    // у кулдауна кольца нет
+    this._circle.style.strokeDashoffset = String(
+      own.kind === 'talking' && own.totalMs > 0
+        ? RING_LENGTH * (1 - remaining / own.totalMs)
+        : RING_LENGTH,
+    );
+
+    this._raf = requestAnimationFrame(() => this._tick());
+  }
+
+  _stopCountdown() {
+    if (this._raf !== null) {
+      cancelAnimationFrame(this._raf);
+      this._raf = null;
+    }
+
+    this._own = null;
+    this._timerElem.textContent = '';
+    this._circle.style.strokeDashoffset = String(RING_LENGTH);
+  }
+}

package/src/client/debug.js

@@ -1,4 +1,4 @@
-// Браузерная половина отладочного контура (этап 6 плана plan/done/ai-debug).
+// Браузерная половина отладочного контура.
 //
 // Всё, что headless-прогон не воспроизводит — реальный WebRTC, PixiJS, живой
 // ввод человека — читается и записывается отсюда: `window.__vimpDebug`

package/src/client/lib/authApi.js

@@ -1,4 +1,4 @@
-// REST-клиент auth-сервиса (packages/auth): регистрация, сессия, OAuth,
+// REST-клиент auth-сервиса: регистрация, сессия, OAuth,
 // управление профилем. Без DOM; fetch инъектируется (тесты).
 //
 // Каждый метод возвращает { ok: true, status, data } или

package/src/client/lib/diagnostics.js

@@ -1,4 +1,4 @@
-// Журнал клиентских ошибок (plan/client-reports, этап 3): неперехваченные
+// Журнал клиентских ошибок: неперехваченные
 // ошибки и отклонения страницы, ошибки Worker'а хоста, нарушения CSP и явные
 // warn/capture плагинов уходят на свой же бокс (POST /client-reports), а тот
 // пересылает их в центральный журнал.
@@ -175,7 +175,7 @@ function noop() {}
  * @param {number} [opts.flushDelayMs=2000] - задержка первой отправки
  * @param {number} [opts.minIntervalMs=10000] - интервал между отправками по
  *   таймеру; прямой flush() его не ждёт
- * @returns {{ capture, warn, flush, setContext, install }}
+ * @returns {{ capture, ignore, warn, flush, setContext, install }}
  */
 export function createDiagnostics({
   url,
@@ -189,6 +189,7 @@ export function createDiagnostics({
   if (!url) {
     return {
       capture: noop,
+      ignore: noop,
       warn: noop,
       flush: noop,
       setContext: noop,
@@ -211,7 +212,7 @@ export function createDiagnostics({
   let busy = false;
 
   function record(item) {
-    const key = `${item.source}|${item.kind}|${item.code ?? item.message}|${topFrame(item.stack)}`;
+    const key = `${item.source}|${item.kind}|${item.code ?? item.message}|${item.code ? '' : topFrame(item.stack)}`;
     const at = now();
     const known = records.get(key);
 
@@ -276,8 +277,22 @@ export function createDiagnostics({
     }
   }
 
+  // ошибки, о которых вызывающий уже позаботился сам (сбой сети при
+  // загрузке): перехватчик окна их не записывает
+  const ignored = new WeakSet();
+
+  function ignore(error) {
+    if (error !== null && typeof error === 'object') {
+      ignored.add(error);
+    }
+  }
+
   function capture(error, { source = 'client', kind = 'error' } = {}) {
     guarded(() => {
+      if (error !== null && typeof error === 'object' && ignored.has(error)) {
+        return;
+      }
+
       const raw =
         error !== null && error !== undefined && error.message !== undefined
           ? error.message
@@ -485,5 +500,5 @@ export function createDiagnostics({
     };
   }
 
-  return { capture, warn, flush, setContext, install };
+  return { capture, ignore, warn, flush, setContext, install };
 }

package/src/client/lib/engineVersion.js

@@ -7,11 +7,5 @@
 // бандлу (в npm-тарболле vimp-engine package.json есть всегда, поэтому
 // standalone SDK собирается у игры тем же импортом).
 import pkg from '../../../package.json' with { type: 'json' };
-import { resolveProjectUrl } from '../../lib/packageLink.js';
 
 export const ENGINE_VERSION = pkg.version;
-
-// адрес проекта для ссылки в футере лобби — то же поле, что мастер отдаёт
-// про пакет игры (GameCatalog.packageUrl), чтобы оба футера строил один
-// projectLink
-export const ENGINE_PROJECT_URL = resolveProjectUrl(pkg);

package/src/client/lib/footerLink.js

@@ -1,29 +1,30 @@
-import { projectLink } from '../../lib/packageLink.js';
-
-// Ссылка в футере лобби и формы входа. Один рендер на оба экрана: лобби
-// подставляет адрес проекта движка, форма входа — адрес игры из манифеста.
-//
-// Адреса нет (пакет не объявил repository/homepage) — якорь гасится, а не
-// прячется: ячейка футера остаётся пустой, и раскладка space-between не едет.
+// Ссылка на документацию в футере формы входа игры. Показывается только в
+// dev-сборке: разработчик игры при локальном запуске видит, где читать
+// документацию, а игрок на проде — нет. Футер лобби несёт ту же ссылку
+// статичной разметкой (lobby.pug). Тот же адрес — литералом в lobby.pug и в
+// `homepage` пакета; совпадение сторожит tests/client/footerLink.test.js.
+export const DOCS_URL = 'https://docs.vimp.lgick.dev';
 
 /**
  * @param {HTMLAnchorElement|null} anchor - якорь футера
- * @param {string|null} url - адрес проекта (resolveProjectUrl)
+ * @param {boolean} enabled - true только в dev-сборке
  */
-export function renderProjectLink(anchor, url) {
+export function renderDocsLink(anchor, enabled) {
   if (!anchor) {
     return;
   }
 
-  const link = projectLink(url);
-
-  if (!link) {
+  if (!enabled) {
     anchor.textContent = '';
     anchor.removeAttribute('href');
+    anchor.removeAttribute('target');
+    anchor.removeAttribute('rel');
 
     return;
   }
 
-  anchor.textContent = link.label;
-  anchor.href = link.url;
+  anchor.textContent = 'docs';
+  anchor.href = DOCS_URL;
+  anchor.target = '_blank';
+  anchor.rel = 'noopener';
 }

package/src/client/lib/retryOnNetworkError.js

@@ -0,0 +1,60 @@
+// Повтор запроса загрузки при сбое сети. fetch отклоняется TypeError'ом,
+// только когда ответа нет вовсе (обрыв, смена сети, вкладка из фона);
+// HTTP-статус и разбор ответа сбоем сети не являются и не повторяются.
+// Повторяется только сам вызов fetch: TypeError из разбора ответа — ошибка
+// кода, а не сети.
+
+// паузы перед повторами: три запроса, отказ не позже ~2 с сверх самих запросов
+export const BOOT_RETRY_DELAYS_MS = [500, 1500];
+
+const defaultSleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+/** Сбой сети, оставшийся после повторов; отличает его от ошибок кода. */
+export class NetworkFailure extends Error {
+  constructor(cause) {
+    super(cause?.message ?? 'Network failure', { cause });
+    this.name = 'NetworkFailure';
+  }
+}
+
+export const isNetworkFailure = error => error instanceof NetworkFailure;
+
+/**
+ * Оборачивает отказ чтения тела ответа: SyntaxError — это мусор в JSON,
+ * любой другой отказ (TypeError обрыва) — сбой сети.
+ * @param {Error} error
+ * @returns {Error}
+ */
+export const bodyReadFailure = error =>
+  error instanceof SyntaxError ? error : new NetworkFailure(error);
+
+/**
+ * @param {Function} doFetch - (...args) => Promise<Response>: сам fetch.
+ * @param {*} url
+ * @param {Object} [options]
+ * @param {number[]} [options.delaysMs] - паузы перед повторами, мс.
+ * @param {Function} [options.sleep] - (ms) => Promise (тесты подставляют свою).
+ * @returns {Promise<Response>} ответ первой удавшейся попытки; отклоняется
+ *   NetworkFailure, когда сеть не ответила во всех попытках.
+ */
+export async function fetchRetrying(
+  doFetch,
+  url,
+  { delaysMs = BOOT_RETRY_DELAYS_MS, sleep = defaultSleep } = {},
+) {
+  for (let attempt = 0; ; attempt += 1) {
+    try {
+      return await doFetch(url);
+    } catch (e) {
+      if (!(e instanceof TypeError)) {
+        throw e;
+      }
+
+      if (attempt >= delaysMs.length) {
+        throw new NetworkFailure(e);
+      }
+
+      await sleep(delaysMs[attempt]);
+    }
+  }
+}

package/src/client/lib/voiceState.js

@@ -0,0 +1,78 @@
+// Сервис пула зависимостей `voice`: кто сейчас в эфире.
+//
+// Сервис только читает (его получают парты игры — индикаторы над танком,
+// на радаре); пишет хранилище, которым владеет движок: оно применяет
+// разобранные сообщения VOICE_DATA. START/STOP приходят только слушателям
+// канала, поэтому противник при командном режиме не узнаёт о говорящем
+// ничего.
+//
+// Ключи — строки: id в part приходит ключом кадра (строкой), а на проводе
+// это число.
+export function createVoiceState({ now = () => performance.now() } = {}) {
+  // String(speakerId) → { talkId, since, name }
+  const talks = new Map();
+  let enabled = false;
+
+  const service = Object.freeze({
+    // связь в этом матче включена (конфиг + контур с ретранслятором)
+    get enabled() {
+      return enabled;
+    },
+
+    isTalking(id) {
+      return talks.has(String(id));
+    },
+
+    // момент START по часам клиента (мс performance.now) или null — фаза
+    // анимации индикатора
+    talkingSince(id) {
+      return talks.get(String(id))?.since ?? null;
+    },
+  });
+
+  const store = {
+    setEnabled(flag) {
+      enabled = flag === true;
+    },
+
+    // разобранное parseVoiceMessage; прочие типы игнорируются
+    apply(message) {
+      if (message?.type === 'start') {
+        talks.set(String(message.speakerId), {
+          talkId: message.talkId,
+          since: now(),
+          name: message.name,
+        });
+      } else if (message?.type === 'stop') {
+        const key = String(message.speakerId);
+
+        // поздний STOP старого эфира не гасит новый
+        if (talks.get(key)?.talkId === message.talkId) {
+          talks.delete(key);
+        }
+      }
+    },
+
+    // эфир, не закрытый STOP дольше maxAgeMs, гаснет сам (страховка при
+    // потерянном STOP). Возвращает число погашенных
+    expire(maxAgeMs) {
+      const current = now();
+      let removed = 0;
+
+      for (const [key, talk] of talks) {
+        if (current - talk.since > maxAgeMs) {
+          talks.delete(key);
+          removed += 1;
+        }
+      }
+
+      return removed;
+    },
+
+    clear() {
+      talks.clear();
+    },
+  };
+
+  return { service, store };
+}