vimp-engine 0.7.2 → 0.9.0

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

@@ -0,0 +1,314 @@
+import Publisher from '../../../lib/Publisher.js';
+import { lerp } from '../../../lib/math.js';
+
+// Singleton PanelView
+
+let panelView;
+
+// дефолты bar-поля (могут переопределяться схемой игры)
+const DEFAULT_BAR_BLOCKS = 30;
+const DEFAULT_BAR_MAX = 100;
+const EMPTY_BLOCK_COLOR = '#888';
+const BAR_FILL_DELAY_MS = 500;
+const BAR_FILL_DURATION_MS = 500;
+
+// системная настройка «уменьшить движение» — округление в один момент
+// времени: matchMedia недоступен в тестовой среде без happy-dom-полифилла
+const prefersReducedMotion = () =>
+  typeof matchMedia === 'function' &&
+  matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+export default class PanelView {
+  // config — { containerId (движок), fields (схема игры: массив
+  // { name, elem, type: 'bar'|'value'|'time'|'weapon', max?, blocks? }) }
+  // Семантику ячейки задаёт type, а не имя поля: игра с полем `energy`
+  // вместо `health` получает тот же бар
+  constructor(model, config) {
+    if (panelView) {
+      return panelView;
+    }
+
+    panelView = this;
+
+    const { containerId, fields } = config;
+
+    this._panels = {};
+    this._fields = {};
+    this._bars = {};
+    this._weaponList = fields
+      .filter(field => field.type === 'weapon')
+      .map(field => field.name);
+
+    // DOM панели генерируется по схеме игры в порядке fields
+    this._buildPanel(document.getElementById(containerId), fields);
+
+    this.publisher = new Publisher();
+
+    this._mPublic = model.publisher;
+    this._mPublic.on('data', 'update', this);
+    this._mPublic.on('hide', 'hidePanel', this);
+    this._mPublic.on('activeWeapon', 'setCurrentWeapon', this);
+  }
+
+  // генерирует таблицу панели по схеме игры (замена хардкода panel.pug)
+  _buildPanel(container, fields) {
+    const table = document.createElement('table');
+    const row = table.insertRow(-1);
+
+    for (const field of fields) {
+      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);
+      }
+    }
+
+    container.appendChild(table);
+  }
+
+  // инициализирует полосу-бар поля type: 'bar'
+  _initBar(field, cell) {
+    cell.textContent = '';
+
+    const wrapper = document.createElement('div');
+
+    wrapper.className = 'panel-bar-wrapper';
+
+    const total = field.blocks ?? DEFAULT_BAR_BLOCKS;
+    const bar = {
+      max: field.max ?? DEFAULT_BAR_MAX,
+      total,
+      blocks: [],
+      colors: [],
+      // целевое состояние текущего раунда: { blocksToShow, blink } как
+      // только пришёл хотя бы один update() после playRoundStart, иначе
+      // null — этим отличаем «данные ещё не пришли» от «пришли нулевые»
+      pendingTarget: null,
+      // true пока идёт заполнение слева направо в начале раунда — обычные
+      // update() в это время не должны перерисовывать бар мгновенно
+      animating: false,
+      // id таймеров текущего заполнения — отменяются при повторном
+      // playRoundStart, чтобы наложение двух запусков не гонялось за DOM
+      delayTimer: null,
+      fillTimer: null,
+      blockTimers: [],
+    };
+
+    for (let i = 0; i < total; i += 1) {
+      const block = document.createElement('div');
+
+      block.className = 'panel-bar-block';
+      block.style.backgroundColor = EMPTY_BLOCK_COLOR;
+      block.textContent = ' '; // неразрывный пробел
+
+      wrapper.appendChild(block);
+
+      bar.blocks.push(block);
+      bar.colors.push(this.getBarBlockColor(i, total));
+    }
+
+    this._bars[field.name] = bar;
+    cell.appendChild(wrapper);
+  }
+
+  // вычисляет цвет блока бара на основе его индекса
+  getBarBlockColor(index, total) {
+    const progress = index / (total - 1);
+
+    const colors = [
+      { p: 0, c: { r: 255, g: 50, b: 50 } }, // red
+      { p: 0.25, c: { r: 255, g: 165, b: 0 } }, // orange
+      { p: 0.5, c: { r: 255, g: 255, b: 0 } }, // yellow
+      { p: 0.75, c: { r: 50, g: 205, b: 50 } }, // green
+      { p: 1, c: { r: 0, g: 220, b: 220 } }, // cyan
+    ];
+
+    let start, end;
+
+    for (let i = 1, len = colors.length; i < len; i += 1) {
+      if (progress <= colors[i].p) {
+        start = colors[i - 1];
+        end = colors[i];
+        break;
+      }
+    }
+
+    const localProgress = (progress - start.p) / (end.p - start.p);
+    const r = Math.round(lerp(start.c.r, end.c.r, localProgress));
+    const g = Math.round(lerp(start.c.g, end.c.g, localProgress));
+    const b = Math.round(lerp(start.c.b, end.c.b, localProgress));
+
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  // обновляет пользовательскую панель
+  update(data) {
+    const { name, value } = data;
+    const elem = this._panels[name];
+
+    if (this._fields[name]?.type === 'bar') {
+      this._updateBar(name, value);
+    } else {
+      elem.textContent = value;
+    }
+
+    elem.style.display = 'table-cell';
+  }
+
+  // перерисовывает бар по текущему значению
+  _updateBar(name, value) {
+    const bar = this._bars[name];
+    const exactBlocks = (value / bar.max) * bar.total;
+    const blocksToShow = Math.ceil(exactBlocks);
+    const blink = value > 0 && exactBlocks % 1 !== 0;
+
+    // запоминаем целевое состояние текущего раунда — из него собирается
+    // заполнение слева направо в начале раунда
+    bar.pendingTarget = { blocksToShow, blink };
+
+    // пока идёт заполнение бара в начале раунда, не перерисовываем его
+    // мгновенно — иначе повторный update() (например, эхо того же
+    // значения) перебьёт постепенное заполнение
+    if (!bar.animating) {
+      this._paintBar(name, blocksToShow, blink);
+    }
+  }
+
+  // отрисовывает бар мгновенно: blocksToShow закрашенных блоков слева,
+  // остальные — пустые; blink — мигание последнего неполного блока
+  _paintBar(name, blocksToShow, blink) {
+    const { blocks, colors } = this._bars[name];
+
+    blocks.forEach((block, index) => {
+      if (index < blocksToShow) {
+        block.className = 'panel-bar-block';
+        block.style.backgroundColor = colors[index];
+      } else {
+        block.className = 'panel-bar-block-empty';
+        block.style.backgroundColor = EMPTY_BLOCK_COLOR;
+      }
+    });
+
+    if (blink) {
+      blocks[blocksToShow - 1].classList.add('panel-bar-blink');
+    }
+  }
+
+  // отменяет все таймеры незавершённого заполнения бара — вызывается перед
+  // повторным запуском, чтобы наложение двух playRoundStart не гонялось
+  // за одним и тем же DOM
+  _cancelBarTimers(bar) {
+    if (bar.delayTimer !== null) {
+      clearTimeout(bar.delayTimer);
+      bar.delayTimer = null;
+    }
+
+    if (bar.fillTimer !== null) {
+      clearTimeout(bar.fillTimer);
+      bar.fillTimer = null;
+    }
+
+    for (const timer of bar.blockTimers) {
+      clearTimeout(timer);
+    }
+
+    bar.blockTimers = [];
+  }
+
+  // заполняет бар слева направо блок за блоком за BAR_FILL_DURATION_MS, до
+  // целевого значения текущего раунда (bar.pendingTarget)
+  _animateBarFill(name) {
+    const bar = this._bars[name];
+    const { blocks, colors, pendingTarget } = bar;
+
+    if (!pendingTarget) {
+      // PS_PANEL_DATA текущего раунда ещё не пришёл — заполнение до
+      // устаревшего значения прошлого раунда хуже, чем его отсутствие;
+      // ближайший update() отрисует актуальное значение мгновенно
+      bar.animating = false;
+      return;
+    }
+
+    const { blocksToShow, blink } = pendingTarget;
+    const step =
+      blocksToShow > 0 ? BAR_FILL_DURATION_MS / blocksToShow : 0;
+
+    for (let index = 0; index < blocksToShow; index += 1) {
+      bar.blockTimers.push(
+        setTimeout(() => {
+          blocks[index].className = 'panel-bar-block';
+          blocks[index].style.backgroundColor = colors[index];
+
+          if (blink && index === blocksToShow - 1) {
+            blocks[index].classList.add('panel-bar-blink');
+          }
+        }, step * index),
+      );
+    }
+
+    bar.fillTimer = setTimeout(() => {
+      bar.fillTimer = null;
+      bar.animating = false;
+
+      // финальная сверка: если во время заполнения пришло более новое
+      // значение (например, урон), отрисовать его, а не зафиксированную
+      // в начале заполнения цель
+      const target = bar.pendingTarget;
+
+      this._paintBar(name, target.blocksToShow, target.blink);
+    }, step * blocksToShow);
+  }
+
+  hidePanel(name) {
+    this._panels[name].style.display = 'none';
+  }
+
+  // с задержкой BAR_FILL_DELAY_MS заполняет bar-поля (например, здоровье)
+  // слева направо за BAR_FILL_DURATION_MS: к этому моменту актуальное
+  // значение обычно уже пришло через PS_PANEL_DATA (см. порядок отправки в
+  // RoundManager._startRound), а если ещё нет — заполнение просто
+  // пропускается (см. _animateBarFill). Анимация лого — забота main.js
+  // (лого вне containerId панели, см. playLogoRoundStart)
+  playRoundStart() {
+    const reducedMotion = prefersReducedMotion();
+
+    for (const name of Object.keys(this._bars)) {
+      const bar = this._bars[name];
+
+      this._cancelBarTimers(bar);
+      bar.pendingTarget = null;
+
+      if (reducedMotion) {
+        // без поблочного заполнения — ближайший update() отрисует
+        // значение сразу
+        bar.animating = false;
+        continue;
+      }
+
+      bar.animating = true;
+      this._paintBar(name, 0, false);
+
+      bar.delayTimer = setTimeout(() => {
+        bar.delayTimer = null;
+        this._animateBarFill(name);
+      }, BAR_FILL_DELAY_MS);
+    }
+  }
+
+  // устанавливает активное оружие
+  setCurrentWeapon(activeWeaponName) {
+    for (const weaponName of this._weaponList) {
+      const elem = this._panels[weaponName];
+
+      if (weaponName === activeWeaponName) {
+        elem.classList.add('active');
+      } else {
+        elem.classList.remove('active');
+      }
+    }
+  }
+}

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

@@ -0,0 +1,238 @@
+import Publisher from '../../../lib/Publisher.js';
+
+// Singleton StatView
+
+let statView;
+
+export default class StatView {
+  // config — { elems (движок: контейнер), params (схема игры: columns —
+  // подписи колонок, bodies — таблицы команд) }
+  constructor(model, config) {
+    if (statView) {
+      return statView;
+    }
+
+    statView = this;
+
+    const { elems, params } = config;
+
+    this._stat = document.getElementById(elems.stat);
+
+    // DOM scoreboard генерируется по схеме игры: произвольное число
+    // команд (bodies) и колонок (columns)
+    this._buildStat(params);
+
+    this.publisher = new Publisher();
+
+    this._mPublic = model.publisher;
+
+    this._mPublic.on('open', 'open', this);
+    this._mPublic.on('close', 'close', this);
+    this._mPublic.on('tHead', 'updateTableHead', this);
+    this._mPublic.on('tBody', 'updateTableBody', this);
+    this._mPublic.on('clearBodies', 'clearBodies', this);
+  }
+
+  // генерирует шапку и таблицы по схеме (замена хардкода stat.pug)
+  _buildStat(params) {
+    const { columns, bodies } = params;
+
+    const head = document.createElement('div');
+
+    head.className = 'stat-head';
+
+    for (const label of columns) {
+      const span = document.createElement('span');
+
+      span.textContent = label;
+      head.appendChild(span);
+    }
+
+    const tables = document.createElement('div');
+
+    tables.className = 'stat-tables';
+
+    // порядок таблиц — по числовым ключам bodies (id команд)
+    const tableNames = Object.keys(bodies)
+      .sort((a, b) => a - b)
+      .map(key => bodies[key]);
+
+    for (const name of tableNames) {
+      const table = document.createElement('table');
+
+      table.setAttribute('id', name);
+
+      const tHead = table.createTHead();
+      const headRow = tHead.insertRow(-1);
+
+      for (let i = 0, len = columns.length; i < len; i += 1) {
+        headRow.insertCell(-1);
+      }
+
+      table.appendChild(document.createElement('tbody'));
+      tables.appendChild(table);
+    }
+
+    this._stat.appendChild(head);
+    this._stat.appendChild(tables);
+  }
+
+  // открывает статистику
+  open() {
+    this._stat.style.display = 'block';
+  }
+
+  // закрывает статистику
+  close() {
+    this._stat.style.display = 'none';
+  }
+
+  // очищает таблицы <tbody>
+  clearBodies(bodiesList) {
+    for (let i = 0, len = bodiesList.length; i < len; i += 1) {
+      const table = document.getElementById(bodiesList[i]);
+      const tBodies = table.tBodies;
+
+      for (let i2 = 0, len2 = tBodies.length; i2 < len2; i2 += 1) {
+        tBodies[i2].textContent = '';
+      }
+    }
+  }
+
+  // обновляет <thead>
+  updateTableHead(data) {
+    const table = document.getElementById(data.tableId);
+    const cells = table.tHead.rows[data.rowNumber].cells;
+    const cellsData = data.cellsData;
+
+    for (let i = 0, len = cells.length; i < len; i += 1) {
+      cells[i].textContent = cellsData[i];
+    }
+  }
+
+  // обновляет <tbody>
+  updateTableBody(data) {
+    const table = document.getElementById(data.tableId);
+    const tbody = table.tBodies[data.bodyNumber];
+    let row = tbody.rows.namedItem(`stat_${data.id}`);
+    const { cellsData, sortData } = data;
+
+    // сортирует
+    const sorting = rowIndex => {
+      const row = tbody.rows[rowIndex];
+      const prevRow = tbody.rows[rowIndex - 1];
+      const nextRow = tbody.rows[rowIndex + 1];
+
+      // если есть предыдущая строка
+      if (prevRow) {
+        for (let i = 0, len = sortData.length; i < len; i += 1) {
+          const number = sortData[i][0];
+          const type = sortData[i][1];
+          const value = ~~row.cells[number].textContent;
+          const prevValue = ~~prevRow.cells[number].textContent;
+
+          // если type == true, значит сортировка по убыванию
+          if (type) {
+            // если предыдущее значение меньше текущего
+            if (prevValue < value) {
+              tbody.insertBefore(row, prevRow);
+              sorting(rowIndex - 1);
+              return;
+            }
+
+            if (prevValue > value) {
+              break;
+            }
+
+            // иначе сортировка по возрастанию
+          } else {
+            // если предыдущее значение больше текущего
+            if (prevValue > value) {
+              tbody.insertBefore(row, prevRow);
+              sorting(rowIndex - 1);
+              return;
+            }
+
+            if (prevValue < value) {
+              break;
+            }
+          }
+        }
+      }
+
+      // если есть следующая строка
+      if (nextRow) {
+        for (let i = 0, len = sortData.length; i < len; i += 1) {
+          const number = sortData[i][0];
+          const type = sortData[i][1];
+          const value = ~~row.cells[number].textContent;
+          const nextValue = ~~nextRow.cells[number].textContent;
+
+          // если type == true, значит сортировка по убыванию
+          if (type) {
+            // если следующее значение больше текущего
+            if (nextValue > value) {
+              tbody.insertBefore(nextRow, row);
+              sorting(rowIndex + 1);
+              return;
+            }
+
+            if (nextValue < value) {
+              break;
+            }
+
+            // иначе сортировка по возрастанию
+          } else {
+            // если следующее значение меньше текущего
+            if (nextValue < value) {
+              tbody.insertBefore(nextRow, row);
+              sorting(rowIndex + 1);
+              return;
+            }
+
+            if (nextValue > value) {
+              break;
+            }
+          }
+        }
+      }
+    };
+
+    // если строка отсутствует
+    if (row === null) {
+      // если есть данные для создания строки, создать ее
+      if (cellsData !== null) {
+        row = tbody.insertRow(-1);
+        row.setAttribute('id', `stat_${data.id}`);
+
+        for (let i = 0, len = cellsData.length; i < len; i += 1) {
+          const cell = row.insertCell(i);
+          cell.textContent = cellsData[i];
+        }
+
+        if (sortData) {
+          sorting(row.sectionRowIndex);
+        }
+      }
+
+      // иначе, если строка присутствует
+    } else {
+      // если данные строки === null, удалить строку
+      if (cellsData === null) {
+        row.parentNode.removeChild(row);
+
+        // иначе обновить строку
+      } else {
+        const cells = row.cells;
+
+        for (let i = 0, len = cells.length; i < len; i += 1) {
+          cells[i].textContent = cellsData[i];
+        }
+
+        if (sortData) {
+          sorting(row.sectionRowIndex);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,108 @@
+import Publisher from '../../../lib/Publisher.js';
+
+// Singleton VoteView
+
+let voteView;
+
+export default class VoteView {
+  constructor(model, elems, container = document.body) {
+    if (voteView) {
+      return voteView;
+    }
+
+    voteView = this;
+
+    // окно создаётся в рантайме, поэтому точка монтирования приходит извне:
+    // в solo это контейнер SDK, иначе body (см. main.js, точка ветвления 5)
+    this._container = container;
+
+    this._voteId = elems.voteId;
+    this._titleClass = elems.titleClass;
+    this._listClass = elems.listClass;
+    this._navClass = elems.navClass;
+    this._navActiveClass = elems.navActiveClass;
+
+    this.publisher = new Publisher();
+
+    this._mPublic = model.publisher;
+
+    this._mPublic.on('vote', 'createVote', this);
+    this._mPublic.on('clear', 'removeVote', this);
+  }
+
+  // создает окно голосования
+  createVote(data) {
+    const { title, list, back, more, time } = data;
+    const vote = document.createElement('div');
+    const p = document.createElement('p');
+    const ol = document.createElement('ol');
+    const navContainer = document.createElement('div');
+    const backElem = document.createElement('p');
+    const moreElem = document.createElement('p');
+    const exitElem = document.createElement('p');
+    let timerId = null;
+
+    vote.setAttribute('id', this._voteId);
+
+    p.setAttribute('class', this._titleClass);
+    p.textContent = title;
+
+    ol.setAttribute('class', this._listClass);
+
+    list.forEach(item => {
+      const li = document.createElement('li');
+      li.textContent = item;
+      ol.appendChild(li);
+    });
+
+    vote.appendChild(p);
+    vote.appendChild(ol);
+
+    navContainer.setAttribute('class', this._navClass);
+
+    if (back) {
+      backElem.setAttribute('class', this._navActiveClass);
+    }
+
+    if (more) {
+      moreElem.setAttribute('class', this._navActiveClass);
+    }
+
+    exitElem.setAttribute('class', this._navActiveClass);
+
+    backElem.textContent = '8. Back';
+    moreElem.textContent = '9. More';
+    exitElem.textContent = '0. Exit';
+
+    navContainer.appendChild(backElem);
+    navContainer.appendChild(moreElem);
+    navContainer.appendChild(exitElem);
+
+    vote.appendChild(navContainer);
+
+    this._container.appendChild(vote);
+
+    if (time !== null) {
+      timerId = setTimeout(() => {
+        vote.parentElement.removeChild(vote);
+        this.publisher.emit('timer', null);
+        this.publisher.emit('clear');
+      }, time);
+    }
+
+    this.publisher.emit('timer', timerId);
+  }
+
+  // удаляет окно голосования
+  removeVote(timerId) {
+    const vote = document.getElementById(this._voteId);
+
+    if (timerId) {
+      clearTimeout(timerId);
+    }
+
+    if (vote) {
+      vote.parentElement.removeChild(vote);
+    }
+  }
+}