vimp-engine 0.39.0 → 0.41.0

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

@@ -11,6 +11,19 @@ const DEFAULT_BAR_MAX = 100;
 const EMPTY_BLOCK_COLOR = '#888';
 const BAR_FILL_DELAY_MS = 500;
 const BAR_FILL_DURATION_MS = 500;
+// длительность подсветки is-up / is-down у flashOnChange-поля
+const FLASH_DURATION_MS = 400;
+// свойства поля, при которых ячейка строится как span-разметка, а не голый
+// textContent (поле без них работает как раньше)
+const RICH_PROPS = [
+  'label',
+  'labelFrom',
+  'format',
+  'prefix',
+  'suffix',
+  'emptyWhen',
+  'flashOnChange',
+];
 
 // системная настройка «уменьшить движение» — округление в один момент
 // времени: matchMedia недоступен в тестовой среде без happy-dom-полифилла
@@ -22,7 +35,10 @@ export default class PanelView {
   // config — { containerId (движок), fields (схема игры: массив
   // { name, elem, type: 'bar'|'value'|'time'|'weapon', max?, blocks? }) }
   // Семантику ячейки задаёт type, а не имя поля: игра с полем `energy`
-  // вместо `health` получает тот же бар
+  // вместо `health` получает тот же бар. Необязательные свойства поля:
+  // label, labelFrom { field, labels }, hidden, format ('int' | 'money' |
+  // 'tenths' | 'fraction'), prefix, suffix, emptyWhen, flashOnChange,
+  // countdown { for }
   constructor(model, config) {
     if (panelView) {
       return panelView;
@@ -35,6 +51,12 @@ export default class PanelView {
     this._panels = {};
     this._fields = {};
     this._bars = {};
+    // последние значения полей: нужны labelFrom и пересчёту зависимых ячеек
+    this._values = {};
+    this._rich = {};
+    this._flashTimers = {};
+    // имя поля-источника → имена полей, чья подпись берётся по его значению
+    this._dependents = {};
     this._weaponList = fields
       .filter(field => field.type === 'weapon')
       .map(field => field.name);
@@ -54,22 +76,60 @@ export default class PanelView {
   _buildPanel(container, fields) {
     const table = document.createElement('table');
     const row = table.insertRow(-1);
+    const gaugeTargets = new Set(
+      fields.map(field => field.countdown?.for).filter(Boolean),
+    );
 
     for (const field of fields) {
+      this._fields[field.name] = field;
+
+      if (field.labelFrom) {
+        const { field: source } = field.labelFrom;
+
+        (this._dependents[source] ??= []).push(field.name);
+      }
+
+      // служебное поле хранит значение, но ячейки у него нет
+      if (field.hidden) {
+        continue;
+      }
+
       const cell = row.insertCell(-1);
 
       cell.setAttribute('id', field.elem);
       this._panels[field.name] = cell;
-      this._fields[field.name] = field;
 
       if (field.type === 'bar') {
         this._initBar(field, cell);
+      } else if (
+        RICH_PROPS.some(prop => prop in field) ||
+        gaugeTargets.has(field.name)
+      ) {
+        this._initRichCell(field, cell);
       }
     }
 
     container.appendChild(table);
   }
 
+  // разметка ячейки с подписью: span.panel-label + span.panel-value +
+  // div.panel-gauge
+  _initRichCell(field, cell) {
+    cell.textContent = '';
+
+    const label = document.createElement('span');
+    const value = document.createElement('span');
+    const gauge = document.createElement('div');
+
+    label.className = 'panel-label';
+    value.className = 'panel-value';
+    gauge.className = 'panel-gauge';
+    gauge.style.display = 'none';
+
+    cell.append(label, value, gauge);
+    this._rich[field.name] = { label, value, gauge };
+  }
+
   // инициализирует полосу-бар поля type: 'bar'
   _initBar(field, cell) {
     cell.textContent = '';
@@ -148,15 +208,117 @@ export default class PanelView {
   // обновляет пользовательскую панель
   update(data) {
     const { name, value } = data;
+    const field = this._fields[name];
     const elem = this._panels[name];
+    const previous = this._values[name];
 
-    if (this._fields[name]?.type === 'bar') {
+    this._values[name] = value;
+
+    if (field?.type === 'bar') {
       this._updateBar(name, value);
-    } else {
+    } else if (this._rich[name]) {
+      this._renderRich(name);
+
+      if (field.flashOnChange && previous !== undefined && value !== previous) {
+        this._flash(name, value > previous ? 'is-up' : 'is-down');
+      }
+    } else if (elem) {
       elem.textContent = value;
     }
 
-    elem.style.display = 'table-cell';
+    // подпись зависимых ячеек берётся по значению этого поля
+    for (const dependent of this._dependents[name] ?? []) {
+      if (this._rich[dependent]) {
+        this._renderRich(dependent);
+      }
+    }
+
+    if (field?.countdown) {
+      this._runCountdown(field.countdown.for, value);
+    }
+
+    if (elem) {
+      elem.style.display = 'table-cell';
+    }
+  }
+
+  // подпись и значение ячейки: объектная форма записи labelFrom.labels
+  // перекрывает format / prefix / suffix / max самого поля
+  _renderRich(name) {
+    const field = this._fields[name];
+    const { label, value } = this._rich[name];
+    const raw = this._values[name];
+    const entry =
+      field.labelFrom?.labels?.[this._values[field.labelFrom.field]];
+    const spec = typeof entry === 'object' && entry !== null ? entry : {};
+    const text = typeof entry === 'string' ? entry : spec.text;
+
+    label.textContent = [field.label, text].filter(Boolean).join(' ');
+    // значение поля-источника может прийти раньше собственного
+    value.textContent =
+      raw === undefined
+        ? ''
+        : this._format(raw, {
+            format: spec.format ?? field.format,
+            prefix: spec.prefix ?? field.prefix,
+            suffix: spec.suffix ?? field.suffix,
+            max: spec.max,
+          });
+    this._panels[name].classList.toggle(
+      'is-empty',
+      'emptyWhen' in field && raw === field.emptyWhen,
+    );
+  }
+
+  _format(raw, { format = 'int', prefix = '', suffix = '', max }) {
+    let text;
+
+    if (typeof raw === 'string') {
+      text = raw; // time уже отформатирован моделью
+    } else if (format === 'money') {
+      text = `$ ${raw}`;
+    } else if (format === 'tenths') {
+      text = raw.toFixed(1);
+    } else if (format === 'fraction') {
+      text = max === undefined ? `${raw}` : `${raw}/${max}`;
+    } else {
+      text = `${raw}`;
+    }
+
+    return `${prefix}${text}${suffix}`;
+  }
+
+  // кратко подсвечивает ячейку классом is-up / is-down
+  _flash(name, className) {
+    const cell = this._panels[name];
+
+    clearTimeout(this._flashTimers[name]);
+    cell.classList.remove('is-up', 'is-down');
+    cell.classList.add(className);
+    this._flashTimers[name] = setTimeout(() => {
+      cell.classList.remove(className);
+    }, FLASH_DURATION_MS);
+  }
+
+  // шкала div.panel-gauge ячейки target заполняется от 0 до 100 % за
+  // duration мс (повторное значение перезапускает её); 0 — скрывает
+  _runCountdown(target, duration) {
+    const gauge = this._rich[target]?.gauge;
+
+    if (!gauge) {
+      return;
+    }
+
+    gauge.style.animation = 'none';
+
+    if (!(duration > 0)) {
+      gauge.style.display = 'none';
+      return;
+    }
+
+    gauge.style.display = 'block';
+    void gauge.offsetWidth; // перезапуск CSS-анимации
+    gauge.style.animation = `panel-gauge-fill ${duration}ms linear forwards`;
   }
 
   // перерисовывает бар по текущему значению
@@ -263,7 +425,11 @@ export default class PanelView {
   }
 
   hidePanel(name) {
-    this._panels[name].style.display = 'none';
+    const elem = this._panels[name];
+
+    if (elem) {
+      elem.style.display = 'none';
+    }
   }
 
   // с задержкой BAR_FILL_DELAY_MS заполняет bar-поля (например, здоровье)
@@ -303,6 +469,10 @@ export default class PanelView {
     for (const weaponName of this._weaponList) {
       const elem = this._panels[weaponName];
 
+      if (!elem) {
+        continue;
+      }
+
       if (weaponName === activeWeaponName) {
         elem.classList.add('active');
       } else {

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

@@ -65,7 +65,12 @@ export default class VoiceView {
     this._nameElem = document.createElement('span');
     this._nameElem.className = 'voice-name';
 
-    own.append(createIcon(), ring, this._timerElem, this._textElem);
+    // кольцо центрируется на значке, а не на крайнем элементе строки
+    const mark = document.createElement('span');
+
+    mark.className = 'voice-mark';
+    mark.append(createIcon(), ring);
+    own.append(mark, this._timerElem, this._textElem);
     incoming.append(createIcon(), this._nameElem);
     this._hud.append(own, incoming);
     container.appendChild(this._hud);

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

@@ -28,11 +28,42 @@ export default class VoteView {
 
     this._mPublic.on('vote', 'createVote', this);
     this._mPublic.on('clear', 'removeVote', this);
+    this._mPublic.on('hint', 'setHint', this);
+  }
+
+  // подсказка меню: иконка под значком рации (`#menu-hints`), класс
+  // `is-on` у горящей. Узлы строятся без innerHTML — имя пришло от хоста
+  setHint({ name, on }) {
+    let box = document.getElementById('menu-hints');
+
+    if (!box) {
+      box = document.createElement('div');
+      box.setAttribute('id', 'menu-hints');
+      this._container.appendChild(box);
+    }
+
+    let hint = null;
+
+    for (const child of box.children) {
+      if (child.dataset.name === name) {
+        hint = child;
+      }
+    }
+
+    if (!hint) {
+      hint = document.createElement('div');
+      hint.setAttribute('class', 'menu-hint');
+      hint.dataset.name = name;
+      hint.appendChild(createCartIcon());
+      box.appendChild(hint);
+    }
+
+    hint.classList.toggle('is-on', on === true);
   }
 
   // создает окно голосования
   createVote(data) {
-    const { title, list, back, more, time } = data;
+    const { title, list, back, more, time, style, level } = data;
     const vote = document.createElement('div');
     const p = document.createElement('p');
     const ol = document.createElement('ol');
@@ -44,6 +75,10 @@ export default class VoteView {
 
     vote.setAttribute('id', this._voteId);
 
+    if (style) {
+      vote.classList.add(`vote-style-${style}`, `vote-level-${level}`);
+    }
+
     p.setAttribute('class', this._titleClass);
     p.textContent = title;
 
@@ -51,7 +86,22 @@ export default class VoteView {
 
     list.forEach(item => {
       const li = document.createElement('li');
-      li.textContent = item;
+
+      // личное меню передаёт объекты { text, disabled, group }
+      if (typeof item === 'object') {
+        li.textContent = item.text;
+
+        if (item.disabled) {
+          li.classList.add('disabled');
+        }
+
+        if (item.group) {
+          li.classList.add('group');
+        }
+      } else {
+        li.textContent = item;
+      }
+
       ol.appendChild(li);
     });
 
@@ -106,3 +156,22 @@ export default class VoteView {
     }
   }
 }
+
+// SVG-заглушка корзины: подсказка работает без игровых стилей и файлов
+function createCartIcon() {
+  const ns = 'http://www.w3.org/2000/svg';
+  const svg = document.createElementNS(ns, 'svg');
+  const path = document.createElementNS(ns, 'path');
+
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('width', '24');
+  svg.setAttribute('height', '24');
+  path.setAttribute('fill', 'currentColor');
+  path.setAttribute(
+    'd',
+    'M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM1 2v2h2l3.6 7.6-1.4 2.4A2 2 0 0 0 7 17h12v-2H7.4l1.1-2h7.5a2 2 0 0 0 1.7-1l3.6-6.5A1 1 0 0 0 20.4 4H5.2l-.9-2H1Z',
+  );
+  svg.appendChild(path);
+
+  return svg;
+}

package/src/client/lib/formBuilder.js

@@ -4,9 +4,10 @@ import { resolveDescriptor } from '../../lib/formControls.js';
 import { toDisplay, toStored, isNumericField } from '../../lib/formUnit.js';
 
 // Общий билдер полей форм (room-форма и auth-форма используют один
-// контракт дескрипторов — docs.vimp.lgick.dev/en/plugin-api, раздел "Form
-// schema"). control: 'select'|'text'|'checkbox'|'radio'; все контролы —
-// нативные элементы формы, без визуальной кастомизации.
+// контракт дескрипторов —
+// VIMP docs: plugin-api.md § "Form schema"). control:
+// 'select'|'text'|'checkbox'|'radio'; все контролы — нативные элементы формы,
+// без визуальной кастомизации.
 //
 // Имя контрола приезжает от игры и разрешается через append-only реестр
 // (lib/formControls.js): имена, выведенные из эксплуатации в v3 ('range',
@@ -270,8 +271,8 @@ const builders = {
 // control» на имени, которое реестр считает живым
 export const FORM_CONTROLS = Object.keys(builders);
 
-// строит одно поле формы по дескриптору (docs.vimp.lgick.dev/en/plugin-api,
-// "Form schema")
+// строит одно поле формы по дескриптору
+// (VIMP docs: plugin-api.md § "Form schema")
 export function buildField(descriptor, ctx = {}) {
   // алиас выведенного контрола ('range' → numeric 'text') разрешается
   // здесь же, где строится поле, и теми же правилами, что в валидации
@@ -292,7 +293,7 @@ export function buildField(descriptor, ctx = {}) {
 }
 
 // засеивает default каждого дескриптора room-формы значением из roomDefaults
-// (docs.vimp.lgick.dev/en/plugin-api "Form schema": roomDefaults остаётся
+// (VIMP docs: plugin-api.md § "Form schema": roomDefaults остаётся
 // единственным источником значений по умолчанию); явный descriptor.default,
 // если он есть в схеме, побеждает. Вынесено из populateRoomForm (main.js),
 // чтобы этот же код был накрыт тестом, а не продублирован в нём

package/src/client/lib/hostVoteCommand.js

@@ -1,6 +1,6 @@
 // Голосование «Change host» (host-migration этап 10): команда /changehost и
 // окно у гостей. Голоса считает мастер, поэтому команда в лобби-режиме не
-// уходит хосту. В solo/dedicated мастера нет — команда остаётся обычным
+// уходит хосту. В solo мастера нет — команда остаётся обычным
 // текстом для игры.
 
 // имя голосования движка; префикс '@' зарезервирован движком
@@ -13,7 +13,7 @@ const COMMAND = '/changehost';
 /**
  * Разбор сообщения чата.
  * @param {string} text
- * @param {string} bootMode - 'lobby' | 'solo' | 'dedicated'.
+ * @param {string} bootMode - 'lobby' | 'solo'.
  * @returns {'start'|'usage'|null} null — не перехватывать.
  */
 export function parseChangeHost(text, bootMode) {

package/src/client/lib/pickActiveGame.js

@@ -19,23 +19,14 @@ export function isGameAvailable(manifest) {
 }
 
 /**
- * Активная игра вкладки.
- *
- * Обе ветки фильтруются одинаково: сохранённый выбор игры (`gameId`) тоже мог
- * указывать на игру, ставшую недоступной после обновления движка, и брать её
- * «раз уж попросили» значило бы падать там, где можно объяснить.
+ * Активная игра вкладки: первая доступная игра каталога.
  * @param {Array<Object>} manifests - Каталог мастера.
- * @param {string} [gameId] - Сохранённый выбор игры (boot.gameId).
  * @returns {Object|undefined} Манифест активной игры.
  * @throws {Error} Если каталог непустой, но играбельной игры в нём нет —
  *   с причиной по каждой строке.
  */
-export function pickActiveGame(manifests, gameId) {
-  const active = gameId
-    ? manifests.find(
-        manifest => manifest.id === gameId && isGameAvailable(manifest),
-      )
-    : manifests.find(isGameAvailable);
+export function pickActiveGame(manifests) {
+  const active = manifests.find(isGameAvailable);
 
   if (active) {
     return active;

package/src/client/lib/retryOnNetworkError.js

@@ -19,15 +19,6 @@ export class NetworkFailure extends Error {
 
 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