vimp-engine 0.40.0 → 0.42.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/RoomMenu.js

@@ -5,8 +5,8 @@ import Publisher from '../../../lib/Publisher.js';
 let roomMenuView;
 
 export default class RoomMenuView {
-  // config — lobbyConfig.roomMenu: { elems: { panelId, menuId, toggleId,
-  // listId, leaveId, handoverId, statusId } }
+  // config — lobbyConfig.roomMenu: { elems: { panelId, menuId, exitId,
+  // statusId, confirmId, confirmYesId, confirmCancelId } }
   constructor(model, config) {
     if (roomMenuView) {
       return roomMenuView;
@@ -17,39 +17,36 @@ export default class RoomMenuView {
     const { elems } = config;
 
     this._menu = document.getElementById(elems.menuId);
-    this._list = document.getElementById(elems.listId);
-    this._leave = document.getElementById(elems.leaveId);
-    this._handover = document.getElementById(elems.handoverId);
+    this._exit = document.getElementById(elems.exitId);
     this._status = document.getElementById(elems.statusId);
+    this._confirm = document.getElementById(elems.confirmId);
     this._panel = document.getElementById(elems.panelId);
     this._home = this._menu.parentElement;
+    this._onKeyDown = event => this._keyDown(event);
+    this._listening = false;
 
     this.publisher = new Publisher();
 
-    document
-      .getElementById(elems.toggleId)
-      .addEventListener('click', () => this.publisher.emit('toggle'));
-    this._leave.addEventListener('click', () => this.publisher.emit('leave'));
-    this._handover.addEventListener('click', () =>
-      this.publisher.emit('handover'),
-    );
+    this._bindButton(this._exit, 'exit');
+    this._bindButton(document.getElementById(elems.confirmYesId), 'yes');
+    this._bindButton(document.getElementById(elems.confirmCancelId), 'cancel');
 
     this._mPublic = model.publisher;
     this._mPublic.on('state', 'showState', this);
-    this._mPublic.on('open', 'showOpen', this);
   }
 
-  showState({ visible, leave, handover, status }) {
+  showState({ visible, exit, status, confirm }) {
     this._menu.style.display = visible ? 'block' : 'none';
-    showItem(this._leave, leave);
-    showItem(this._handover, handover);
+    this._exit.disabled = exit.disabled;
     this._status.textContent = status ?? '';
     this._status.style.display = status ? 'block' : 'none';
+    this._confirm.style.display = confirm ? 'flex' : 'none';
+    this._listen(confirm);
   }
 
-  // меню — часть панели (справа от таблицы), но разметка отдельная: каркас
-  // панели общий со standalone SDK, где меню комнаты нет. Игра без панели в
-  // initIdList держит её скрытой — тогда меню остаётся кнопкой в углу
+  // кнопка — часть панели (справа от таблицы), но разметка отдельная: каркас
+  // панели общий со standalone SDK, где выхода из комнаты нет. Игра без
+  // панели в initIdList держит её скрытой — тогда кнопка остаётся в углу
   placeInPanel(inPanel) {
     const parent = inPanel && this._panel ? this._panel : this._home;
 
@@ -58,12 +55,69 @@ export default class RoomMenuView {
     }
   }
 
-  showOpen(open) {
-    this._list.style.display = open ? 'block' : 'none';
+  // фокус с кнопки снимается: иначе Space/Enter в бою нажали бы её снова
+  _bindButton(elem, type) {
+    elem.addEventListener('click', () => {
+      elem.blur();
+      this.publisher.emit(type);
+    });
+  }
+
+  // фаза захвата, только пока окно открыто: Enter/Esc окна не доходят до
+  // игры
+  _listen(on) {
+    if (on === this._listening) {
+      return;
+    }
+
+    this._listening = on;
+
+    if (on) {
+      document.addEventListener('keydown', this._onKeyDown, true);
+    } else {
+      document.removeEventListener('keydown', this._onKeyDown, true);
+    }
+  }
+
+  _keyDown(event) {
+    // Enter/Esc в поле ввода (чат) принадлежат ему
+    if (isTextInput(event.target)) {
+      return;
+    }
+
+    const type =
+      event.key === 'Enter' ? 'yes' : event.key === 'Escape' ? 'cancel' : null;
+
+    if (!type) {
+      return;
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+    this.publisher.emit(type);
   }
 }
 
-function showItem(elem, { visible, disabled }) {
-  elem.style.display = visible ? 'block' : 'none';
-  elem.disabled = disabled;
+const TEXT_INPUT_TYPES = new Set([
+  'text',
+  'search',
+  'email',
+  'password',
+  'url',
+  'tel',
+  'number',
+]);
+
+function isTextInput(elem) {
+  if (!elem || elem.nodeType !== 1) {
+    return false;
+  }
+
+  if (elem.isContentEditable || elem.tagName === 'TEXTAREA') {
+    return true;
+  }
+
+  return (
+    elem.tagName === 'INPUT' && TEXT_INPUT_TYPES.has(elem.type.toLowerCase())
+  );
 }

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/autoRejoin.js

@@ -0,0 +1,161 @@
+// Автовход после перезагрузки в ту же комнату: место в матче потеряно
+// (отказ возобновления, холодный рестарт, ошибка протокола), страница
+// перезагружается на ссылку комнаты — и форма входа игры не показывается,
+// клиент отвечает хосту сохранёнными значениями формы.
+//
+// Метка — в sessionStorage: живёт только в этой вкладке и переживает
+// перезагрузку. Забирается (и удаляется) при разборе маршрута: взводится в
+// памяти, только если маршрут ведёт в ту же комнату. Схема — как у
+// отложенного промоушена (network/Promotion.js).
+
+export const AUTO_REJOIN_STORAGE_KEY = 'vimp.autoRejoin';
+
+// перезагрузка с загрузкой ассетов укладывается с запасом; столько же после
+// автовхода повторная метка не ставится (цикл перезагрузок)
+export const AUTO_REJOIN_TTL_MS = 60000;
+
+const isString = value => typeof value === 'string' && value !== '';
+
+/**
+ * Ставит метку автовхода перед перезагрузкой.
+ * @param {Storage|null} storage - sessionStorage.
+ * @param {{ gameId: string, roomId: string }} target
+ * @param {number} now
+ * @returns {boolean} false — сохранить не удалось.
+ */
+export function saveAutoRejoin(storage, { gameId, roomId } = {}, now) {
+  if (!storage || !isString(gameId) || !isString(roomId)) {
+    return false;
+  }
+
+  try {
+    storage.setItem(
+      AUTO_REJOIN_STORAGE_KEY,
+      JSON.stringify({ gameId, roomId, until: now + AUTO_REJOIN_TTL_MS }),
+    );
+
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Забирает метку: удаляется при любом исходе.
+ * @param {Storage|null} storage - sessionStorage.
+ * @param {number} now
+ * @returns {{ gameId: string, roomId: string, until: number }|null}
+ *   null — метки нет, она битая или просрочена.
+ */
+export function takeAutoRejoin(storage, now) {
+  if (!storage) {
+    return null;
+  }
+
+  let raw = null;
+
+  try {
+    raw = storage.getItem(AUTO_REJOIN_STORAGE_KEY);
+    storage.removeItem(AUTO_REJOIN_STORAGE_KEY);
+  } catch {
+    return null;
+  }
+
+  if (!raw) {
+    return null;
+  }
+
+  let value;
+
+  try {
+    value = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+
+  if (
+    !isString(value?.gameId) ||
+    !isString(value.roomId) ||
+    !Number.isFinite(value.until) ||
+    now >= value.until
+  ) {
+    return null;
+  }
+
+  return { gameId: value.gameId, roomId: value.roomId, until: value.until };
+}
+
+/**
+ * Автовход в пределах одной загрузки страницы: взвод маршрутом, ответ без
+ * формы, отказ хоста и запрет повторной метки сразу после автовхода.
+ */
+export class AutoRejoin {
+  /**
+   * @param {Object} [options]
+   * @param {Function} [options.now]
+   */
+  constructor({ now = () => Date.now() } = {}) {
+    this._now = now;
+    // { roomId, until } — маршрут ведёт в комнату метки
+    this._armed = null;
+    // ответ без формы ушёл хосту, AUTH_RESULT ещё не пришёл
+    this._pending = false;
+    // когда эта загрузка вошла автовходом
+    this._usedAt = null;
+  }
+
+  /**
+   * Маршрут после перезагрузки входит в комнату метки.
+   * @param {{ roomId: string, until: number }} mark
+   */
+  arm({ roomId, until }) {
+    this._armed = { roomId, until };
+  }
+
+  /**
+   * PS_AUTH_DATA комнаты: true — ответить без формы. Взвод снимается при
+   * любом исходе.
+   * @param {string|null} roomId
+   * @returns {boolean}
+   */
+  begin(roomId) {
+    const armed = this._armed;
+    const now = this._now();
+
+    this._armed = null;
+
+    if (!armed || armed.roomId !== roomId || now >= armed.until) {
+      return false;
+    }
+
+    this._pending = true;
+    this._usedAt = now;
+
+    return true;
+  }
+
+  /**
+   * PS_AUTH_RESULT: true — хост отбил автовход, нужна форма с ошибкой.
+   * @param {*} err
+   * @returns {boolean}
+   */
+  result(err) {
+    const pending = this._pending;
+
+    this._pending = false;
+
+    return pending && Boolean(err);
+  }
+
+  /**
+   * Можно ли ставить метку перед перезагрузкой: сразу после автовхода —
+   * нет, иначе повторяющийся сбой (ошибка протокола) перезагружал бы
+   * страницу без конца; следующий круг покажет форму.
+   * @returns {boolean}
+   */
+  canMark() {
+    return (
+      this._usedAt === null || this._now() - this._usedAt >= AUTO_REJOIN_TTL_MS
+    );
+  }
+}